83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import type { DistributedListData } from "@/features/distributed/lib/data";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/shared/ui/dialog";
|
|
import { type Dispatch, type SetStateAction } from "react";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
setOpen: Dispatch<SetStateAction<boolean>>;
|
|
specification: DistributedListData | null;
|
|
}
|
|
|
|
const DistributedDetail = ({ open, setOpen, specification }: Props) => {
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-[90%] max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader className="border-b pb-4">
|
|
<DialogTitle className="text-2xl font-bold text-gray-800">
|
|
Tafsilot
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6 mt-6">
|
|
{/* Asosiy ma'lumotlar - Grid */}
|
|
<div className="grid grid-cols-1">
|
|
{/* Xaridor */}
|
|
<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">
|
|
Xaridorning ismi
|
|
</p>
|
|
<p className="text-lg font-semibold text-gray-800">
|
|
{specification?.employee_name}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Foydalanuvchi */}
|
|
|
|
<div className="bg-gradient-to-br mt-5 from-green-50 to-green-100 rounded-lg p-4 border border-green-200 md:col-span-2">
|
|
<p className="text-sm text-green-600 font-medium mb-1">
|
|
Topshirilgan sanasi
|
|
</p>
|
|
<p className="text-lg font-semibold text-gray-800">
|
|
{specification?.date}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dorilar ro'yxati */}
|
|
<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">
|
|
Topshirilgan dori
|
|
</h3>
|
|
|
|
<div className="space-y-3">
|
|
<div className="bg-white rounded-lg p-4 border border-gray-200 hover:border-indigo-300 transition-colors">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<p className="font-semibold text-gray-800">
|
|
{specification?.product.name}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm text-gray-600">
|
|
<span>
|
|
Miqdor: <strong>{specification?.quantity} ta</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default DistributedDetail;
|