vercel deploy

src/features/order/ui/OrderTable.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { order_api } from "@/features/order/lib/api";
+import type { Order } from "@/features/order/lib/type";
+import formatPhone from "@/shared/lib/formatPhone";
+import formatPrice from "@/shared/lib/formatPrice";
+import { Button } from "@/shared/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Eye, Loader2, Trash } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  orders: Order[] | [];
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  setDetailOpen: Dispatch<SetStateAction<boolean>>;
+  handleDelete: (order: Order) => void;
+  setOrderDetail: Dispatch<SetStateAction<Order | null>>;
+}
+
+const deliveryTypeLabel: Record<string, string> = {
+  YANDEX_GO: "Yandex Go",
+  DELIVERY_COURIES: "Kuryer orqali yetkazish",
+  PICKUP: "O‘zi olib ketish",
+};
+
+type OrderStatus =
+  | "NEW"
+  // "PROCESSING" |
+  | "DONE";
+//  | "CANCELLED";
+
+const orderStatusLabel: Record<OrderStatus, string> = {
+  NEW: "Yangi",
+  // PROCESSING: "Jarayonda",
+  DONE: "Yakunlangan",
+  // CANCELLED: "Bekor qilingan",
+};
+
+const OrderTable = ({
+  orders,
+  isLoading,
+  isFetching,
+  isError,
+  setDetailOpen,
+  handleDelete,
+  setOrderDetail,
+}: Props) => {
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: ({
+      body,
+      id,
+    }: {
+      body: { status: string };
+      id: number | string;
+    }) => order_api.status_update({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["order_list"] });
+    },
+    onError: () => {
+      toast.error("Xatolik yuz berdi status o'zgarmadi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const handleStatusChange = async (
+    orderId: number | string,
+    status: OrderStatus,
+  ) => {
+    mutate({ id: orderId, body: { status: status } });
+  };
+
+  if (isLoading || isFetching) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="flex h-full items-center justify-center text-red-600">
+        Maʼlumotlarni yuklashda xatolik yuz berdi
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>#</TableHead>
+            <TableHead>Order №</TableHead>
+            <TableHead>Foydalanuvchi</TableHead>
+            <TableHead>Kontakt</TableHead>
+            <TableHead>Toʻlov turi</TableHead>
+            <TableHead>Yetkazib berish</TableHead>
+            <TableHead>Umumiy narx</TableHead>
+            <TableHead>Izoh</TableHead>
+            <TableHead>Holat</TableHead>
+            <TableHead className="text-right">Harakatlar</TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {orders.map((order, index) => (
+            <TableRow key={order.id}>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{order.order_number}</TableCell>
+              <TableCell>
+                {order.user.first_name} {order.user.last_name} (
+                {order.user.username})
+              </TableCell>
+              <TableCell>{formatPhone(order.contact_number)}</TableCell>
+              <TableCell>
+                {order.payment_type === "CASH" ? "Naxt" : "Karta orqali"}
+              </TableCell>
+              <TableCell>
+                {deliveryTypeLabel[order.delivery_type] ?? order.delivery_type}
+              </TableCell>
+              <TableCell>{formatPrice(order.total_price, true)}</TableCell>
+              <TableCell>{order.comment || "-"}</TableCell>
+              <TableCell>
+                <Select
+                  value={order.status}
+                  onValueChange={(value) =>
+                    handleStatusChange(order.id, value as OrderStatus)
+                  }
+                >
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue />
+                  </SelectTrigger>
+
+                  <SelectContent>
+                    {(Object.keys(orderStatusLabel) as OrderStatus[]).map(
+                      (status) => (
+                        <SelectItem key={status} value={status}>
+                          {orderStatusLabel[status]}
+                        </SelectItem>
+                      ),
+                    )}
+                  </SelectContent>
+                </Select>
+              </TableCell>
+
+              <TableCell className="space-x-2 text-right">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    setDetailOpen(true);
+                    setOrderDetail(order);
+                  }}
+                >
+                  <Eye className="h-4 w-4" />
+                </Button>
+
+                <Button
+                  size="sm"
+                  variant="destructive"
+                  onClick={() => handleDelete(order)}
+                >
+                  <Trash className="h-4 w-4" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+
+          {orders.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={10} className="text-center text-gray-500">
+                Buyurtmalar topilmadi
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default OrderTable;