react

src/features/specification/ui/HistoryListPage.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { formatPrice } from "@/shared/lib/formatPrice";
+import AddedButton from "@/shared/ui/added-button";
+import { Button } from "@/shared/ui/button";
+import { DashboardLayout } from "@/widgets/dashboard-layout/ui";
+import { Eye } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { SAMPLE_HISTORY } from "../lib/mock";
+
+export function HistoryListPage() {
+  const router = useNavigate();
+
+  return (
+    <DashboardLayout>
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-5xl mx-auto">
+          <div className="flex justify-between items-center mb-6">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">
+                Buyurtmalar Tarixi
+              </h1>
+              <p className="text-gray-600 mt-1">
+                {"Barcha buyurtmalar ro'yxati"}
+              </p>
+            </div>
+
+            <AddedButton onClick={() => router("/specification/added")} />
+          </div>
+
+          <div className="space-y-4">
+            {SAMPLE_HISTORY.length > 0 ? (
+              SAMPLE_HISTORY.map((item) => (
+                <div
+                  key={item.id}
+                  className="bg-white border rounded-xl p-5 shadow-sm hover:shadow-md transition"
+                >
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <p className="text-lg font-semibold text-gray-900">
+                        Buyurtma №{item.id}
+                      </p>
+                      <p className="text-sm text-gray-500 mt-1">
+                        Sana: {item.date}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+                    <div>
+                      <p className="text-gray-500 text-sm">Mijoz</p>
+                      <p className="font-medium">{item.buyerName}</p>
+                    </div>
+
+                    <div>
+                      <p className="text-gray-500 text-sm">Farmasevtika</p>
+                      <p className="font-medium">{item.pharmacy}</p>
+                    </div>
+
+                    <div>
+                      <p className="text-gray-500 text-sm">Hisoblangan narxi</p>
+                      <p className="font-medium">
+                        {formatPrice(item.totalAmount)}
+                      </p>
+                    </div>
+
+                    <div>
+                      <p className="text-gray-500 text-sm">
+                        {"To'langan foizi"}
+                      </p>
+                      <p className="font-medium">{item.paymentPercentage}%</p>
+                    </div>
+
+                    <div>
+                      <p className="text-gray-500 text-sm">
+                        {"To'langan narxi"}
+                      </p>
+                      <p className="font-medium">
+                        {formatPrice(item.paymentAmount)}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* KO‘RISH BUTTON */}
+                  <div className="flex justify-end mt-4">
+                    <Button
+                      onClick={() =>
+                        router(`/specification/history/${item.id}`)
+                      }
+                      className="px-4 py-2 w-full h-12 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 transition"
+                    >
+                      <Eye className="size-5" />
+                      Batafsil
+                    </Button>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <p className="text-center text-gray-500 py-10">
+                {"Hozircha ma'lumot yo‘q."}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}