apilar ulandi
This commit is contained in:
@@ -1,17 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import type { SpecificationsType } from "@/features/specifications/lib/data";
|
||||
import type { OrderListDataRes } from "@/features/specifications/lib/data";
|
||||
import formatPrice from "@/shared/lib/formatPrice";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { HardDriveDownloadIcon } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
specification: SpecificationsType | null;
|
||||
specification: OrderListDataRes | null;
|
||||
open: boolean;
|
||||
setOpen: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
@@ -21,6 +23,37 @@ export const SpecificationDetail = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: Props) => {
|
||||
const downloadFile = async (fileUrl: string, fileName: string) => {
|
||||
try {
|
||||
const response = await fetch(fileUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
// Agar token kerak bo'lsa qo'shing
|
||||
// Authorization: `Bearer ${yourToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Fayl yuklab olishda xatolik yuz berdi");
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = fileName || "file.pdf"; // fayl nomi
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
|
||||
// Tozalash
|
||||
a.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
if (!specification) return null;
|
||||
|
||||
return (
|
||||
@@ -39,7 +72,7 @@ export const SpecificationDetail = ({
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
|
||||
<p className="text-sm text-blue-600 font-medium mb-1">Xaridor</p>
|
||||
<p className="text-lg font-semibold text-gray-800">
|
||||
{specification.client}
|
||||
{specification.employee_name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -49,7 +82,7 @@ export const SpecificationDetail = ({
|
||||
Farmasevtika
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-gray-800">
|
||||
{specification.pharm.name}
|
||||
{specification.factory.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -59,7 +92,7 @@ export const SpecificationDetail = ({
|
||||
Mas'ul xodim
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-gray-800">
|
||||
{specification.user.firstName} {specification.user.lastName}
|
||||
{specification.user.first_name} {specification.user.last_name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,13 +101,13 @@ export const SpecificationDetail = ({
|
||||
<div className="bg-gray-50 rounded-lg p-5 border border-gray-200">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
||||
<span className="bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">
|
||||
{specification.medicines.length}
|
||||
{specification.order_items.length}
|
||||
</span>
|
||||
Dorilar ro'yxati
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{specification.medicines.map((med, index) => (
|
||||
{specification.order_items.map((med, index) => (
|
||||
<div
|
||||
key={med.id}
|
||||
className="bg-white rounded-lg p-4 border border-gray-200 hover:border-indigo-300 transition-colors"
|
||||
@@ -86,23 +119,28 @@ export const SpecificationDetail = ({
|
||||
#{index + 1}
|
||||
</span>
|
||||
<p className="font-semibold text-gray-800">
|
||||
{med.name}
|
||||
{med.product}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-600">
|
||||
<span>
|
||||
Miqdor: <strong>{med.count} ta</strong>
|
||||
Miqdor: <strong>{med.quantity} ta</strong>
|
||||
</span>
|
||||
<span>×</span>
|
||||
<span>
|
||||
Narx: <strong>{formatPrice(med.price)}</strong>
|
||||
Narx:{" "}
|
||||
<strong>
|
||||
{formatPrice(
|
||||
Number(med.total_price) / med.quantity,
|
||||
)}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right ml-4">
|
||||
<p className="text-xs text-gray-500 mb-1">Jami</p>
|
||||
<p className="text-lg font-bold text-indigo-600">
|
||||
{formatPrice(med.count * med.price)}
|
||||
{formatPrice(med.total_price)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,29 +159,38 @@ export const SpecificationDetail = ({
|
||||
<div className="flex justify-between items-center pb-3 border-b border-slate-300">
|
||||
<span className="text-gray-600 font-medium">Jami narx:</span>
|
||||
<span className="text-xl font-bold text-gray-800">
|
||||
{formatPrice(specification.totalPrice)}
|
||||
{formatPrice(specification.total_price)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-slate-300">
|
||||
<span className="text-gray-600 font-medium">
|
||||
Chegirma foizi:
|
||||
To'langan foizi:
|
||||
</span>
|
||||
<span className="text-lg font-semibold text-orange-600">
|
||||
{specification.percentage}%
|
||||
{specification.advance}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pt-2">
|
||||
<span className="text-gray-700 font-bold text-lg">
|
||||
To'lanadi:
|
||||
To'langan:
|
||||
</span>
|
||||
<span className="text-2xl font-bold text-green-600">
|
||||
{formatPrice(specification.paidPrice)}
|
||||
{formatPrice(specification.paid_price)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full h-12 bg-blue-600 text-md hover:bg-blue-700 cursor-pointer"
|
||||
onClick={() =>
|
||||
downloadFile(specification.file, `order-${specification.id}`)
|
||||
}
|
||||
>
|
||||
<HardDriveDownloadIcon className="size-5" />
|
||||
PDF faylda yuklab olish
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user