complated

src/features/plans/ui/PalanTable.tsx

@@ -1,7 +1,16 @@
+import { plans_api } from "@/features/plans/lib/api";
 import type { Product } from "@/features/plans/lib/data";
 import { API_URLS } from "@/shared/config/api/URLs";
 import { Button } from "@/shared/ui/button";
 import { Checkbox } from "@/shared/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select";
 import {
   Table,
   TableBody,
@@ -10,8 +19,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/shared/ui/table";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Eye, Loader2, Trash2 } from "lucide-react";
 import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
 
 interface Props {
   products: Product[] | [];
@@ -46,6 +57,29 @@ const ProductTable = ({
   handleSelectAllPages,
   isAllPagesSelected,
 }: Props) => {
+  const queryClient = useQueryClient();
+  const { mutate, isPending } = useMutation({
+    mutationFn: ({
+      id,
+      body,
+    }: {
+      id: number;
+      body: { payment_type: "cash" | "card" };
+    }) => plans_api.update_payment_type({ id, body }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["product_list"] });
+      toast.success("To‘lov turi yangilandi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+    onError: () => {
+      toast.error("Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
   if (isLoading || isFetching) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -63,7 +97,6 @@ const ProductTable = ({
   }
 
   const currentPageIds = products.map((p) => p.id);
-
   const isAllSelected =
     isAllPagesSelected ||
     (products.length > 0 &&
@@ -141,6 +174,7 @@ const ProductTable = ({
             <TableHead>Rasmi</TableHead>
             <TableHead>Nomi</TableHead>
             <TableHead>Tavsif</TableHead>
+            <TableHead>Narx turi</TableHead>
             <TableHead className="text-end">Harakatlar</TableHead>
           </TableRow>
         </TableHeader>
@@ -175,6 +209,31 @@ const ProductTable = ({
                 </TableCell>
                 <TableCell>{product.name}</TableCell>
                 <TableCell>{product.short_name?.slice(0, 15)}...</TableCell>
+                <TableCell>
+                  <Select
+                    value={product.payment_type ?? ""}
+                    disabled={isPending}
+                    onValueChange={(value) => {
+                      mutate({
+                        id: product.id,
+                        body: {
+                          payment_type: value as "cash" | "card",
+                        },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="w-full max-w-48">
+                      <SelectValue placeholder="To'lov turi" />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="cash">Naqd</SelectItem>
+                        <SelectItem value="card">Karta</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </TableCell>
                 <TableCell className="space-x-2 text-right">
                   <Button
                     size="sm"