gastro-admin/src/features/order/ui/OrderTable.tsx

"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="flex-1 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;