93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import type { DistributedListData } from "@/features/distributed/lib/data";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/shared/ui/dialog";
|
|
import type { Dispatch, SetStateAction } from "react";
|
|
|
|
interface Props {
|
|
specification: DistributedListData | null;
|
|
open: boolean;
|
|
setOpen: Dispatch<SetStateAction<boolean>>;
|
|
}
|
|
|
|
export const DistributedDetail = ({ specification, open, setOpen }: Props) => {
|
|
if (!specification) return null;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-3xl 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-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200 md:col-span-2">
|
|
<p className="text-sm text-purple-600 font-medium mb-1">
|
|
Mas'ul xodim
|
|
</p>
|
|
<p className="text-lg font-semibold text-gray-800">
|
|
{specification.user.first_name} {specification.user.last_name}
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
);
|
|
};
|