apilar ulandi

src/features/plans/lib/api.ts

@@ -0,0 +1,36 @@
+import type {
+  PlanCreateReq,
+  PlanListRes,
+  PlanUpdateReq,
+} from "@/features/plans/lib/data";
+import httpClient from "@/shared/config/api/httpClient";
+import { API_URLS } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+export const plans_api = {
+  async list(params: {
+    limit?: number;
+    offset?: number;
+    status?: boolean;
+    date?: string;
+    user?: string;
+  }): Promise<AxiosResponse<PlanListRes>> {
+    const res = await httpClient.get(`${API_URLS.PLANS}list/`, { params });
+    return res;
+  },
+
+  async create(body: PlanCreateReq) {
+    const res = await httpClient.post(`${API_URLS.PLANS}create/`, body);
+    return res;
+  },
+
+  async update({ body, id }: { id: number; body: PlanUpdateReq }) {
+    const res = await httpClient.patch(`${API_URLS.PLANS}${id}/update/`, body);
+    return res;
+  },
+
+  async delete(id: number) {
+    const res = await httpClient.delete(`${API_URLS.PLANS}${id}/delete/`);
+    return res;
+  },
+};

src/features/plans/lib/data.ts

@@ -8,3 +8,42 @@ export interface Plan {
   status: "Bajarildi" | "Bajarilmagan";
   createdAt: Date;
 }
+
+export interface PlanListRes {
+  status_code: number;
+  status: string;
+  message: string;
+  data: {
+    count: number;
+    next: null | string;
+    previous: null | string;
+    results: PlanListData[];
+  };
+}
+
+export interface PlanListData {
+  id: number;
+  title: string;
+  description: string;
+  date: string;
+  user: {
+    id: number;
+    first_name: string;
+    last_name: string;
+  };
+  is_done: true;
+  created_at: string;
+}
+
+export interface PlanCreateReq {
+  title: string;
+  description: string;
+  date: string;
+  user_id: number;
+}
+
+export interface PlanUpdateReq {
+  title: string;
+  description: string;
+  date: string;
+}

src/features/plans/lib/form.ts

@@ -4,4 +4,5 @@ export const createPlanFormData = z.object({
   name: z.string().min(1, { message: "Majburiy maydon" }),
   description: z.string().min(1, { message: "Majburiy maydon" }),
   user: z.string().min(1, { message: "Majburiy maydon" }),
+  date: z.string().min(1, { message: "Majburiy maydon" }),
 });

src/features/plans/ui/AddedPlan.tsx

@@ -1,7 +1,23 @@
-import type { Plan } from "@/features/plans/lib/data";
+import { plans_api } from "@/features/plans/lib/api";
+import type {
+  PlanCreateReq,
+  PlanListData,
+  PlanUpdateReq,
+} from "@/features/plans/lib/data";
 import { createPlanFormData } from "@/features/plans/lib/form";
-import { FakeUserList } from "@/features/users/lib/data";
+import { user_api } from "@/features/users/lib/api";
+import formatDate from "@/shared/lib/formatDate";
+import { cn } from "@/shared/lib/utils";
 import { Button } from "@/shared/ui/button";
+import { Calendar } from "@/shared/ui/calendar";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/ui/command";
 import {
   Form,
   FormControl,
@@ -11,71 +27,110 @@ import {
 } from "@/shared/ui/form";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
 import { Textarea } from "@/shared/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2 } from "lucide-react";
-import React, { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Check, ChevronDownIcon, ChevronsUpDown, Loader2 } from "lucide-react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import z from "zod";
 
 interface Props {
-  initialValues?: Plan | null;
+  initialValues?: PlanListData | null;
   setDialogOpen: (open: boolean) => void;
-  setPlans: React.Dispatch<React.SetStateAction<Plan[]>>;
 }
 
-const AddedPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
-  const [load, setLoad] = useState(false);
+const AddedPlan = ({ initialValues, setDialogOpen }: Props) => {
   const form = useForm<z.infer<typeof createPlanFormData>>({
     resolver: zodResolver(createPlanFormData),
     defaultValues: {
-      name: initialValues?.name || "",
+      name: initialValues?.title || "",
       description: initialValues?.description || "",
       user: initialValues ? String(initialValues.user.id) : "",
+      date: initialValues ? initialValues?.date : "",
+    },
+  });
+  const [searchUser, setSearchUser] = useState<string>("");
+  const [openUser, setOpenUser] = useState<boolean>(false);
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+
+  const { data: user, isLoading: isUserLoading } = useQuery({
+    queryKey: ["user_list", searchUser],
+    queryFn: () => {
+      const params: {
+        limit?: number;
+        offset?: number;
+        search?: string;
+        is_active?: boolean | string;
+        region_id?: number;
+      } = {
+        limit: 8,
+        search: searchUser,
+      };
+
+      return user_api.list(params);
+    },
+    select(data) {
+      return data.data.data;
+    },
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: PlanCreateReq) => plans_api.create(body),
+    onSuccess: () => {
+      setDialogOpen(false);
+      toast.success("Reja qo'shildi");
+      queryClient.refetchQueries({ queryKey: ["plan_list"] });
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const { mutate: edit, isPending: editPending } = useMutation({
+    mutationFn: ({ body, id }: { body: PlanUpdateReq; id: number }) =>
+      plans_api.update({ body, id }),
+    onSuccess: () => {
+      setDialogOpen(false);
+      toast.success("Reja tahrirlandi");
+      queryClient.refetchQueries({ queryKey: ["plan_list"] });
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
     },
   });
 
   function onSubmit(data: z.infer<typeof createPlanFormData>) {
-    setLoad(true);
     if (initialValues) {
-      setTimeout(() => {
-        setPlans((prev) =>
-          prev.map((plan) =>
-            plan.id === initialValues.id
-              ? {
-                  ...plan,
-                  ...data,
-                  user: FakeUserList.find((u) => u.id === Number(data.user))!, // user obyekt
-                }
-              : plan,
-          ),
-        );
-        setLoad(false);
-        setDialogOpen(false);
-      }, 2000);
+      edit({
+        id: initialValues.id,
+        body: {
+          date: formatDate.format(data.date, "YYYY-MM-DD"),
+          description: data.description,
+          title: data.name,
+        },
+      });
     } else {
-      setTimeout(() => {
-        setPlans((prev) => [
-          ...prev,
-          {
-            id: prev.length ? prev[prev.length - 1].id + 1 : 1,
-            name: data.name,
-            description: data.description,
-            user: FakeUserList.find((u) => u.id === Number(data.user))!, // user obyekt
-            status: "Bajarilmagan",
-            createdAt: new Date(),
-          },
-        ]);
-        setLoad(false);
-        setDialogOpen(false);
-      }, 2000);
+      mutate({
+        date: formatDate.format(data.date, "YYYY-MM-DD"),
+        description: data.description,
+        title: data.name,
+        user_id: Number(data.user),
+      });
     }
   }
 
@@ -86,26 +141,87 @@ const AddedPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
           <FormField
             name="user"
             control={form.control}
-            render={({ field }) => (
-              <FormItem>
-                <Label className="text-md">Kimga tegishli</Label>
-                <FormControl>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="w-full !h-12">
-                      <SelectValue placeholder="foydalanuvchi" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {FakeUserList.map((e) => (
-                        <SelectItem value={String(e.id)}>
-                          {e.firstName} {e.lastName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
+            render={({ field }) => {
+              const selectedUser = user?.results.find(
+                (u) => String(u.id) === field.value,
+              );
+              return (
+                <FormItem className="flex flex-col">
+                  <Label className="text-md">Foydalanuvchi</Label>
+
+                  <Popover open={openUser} onOpenChange={setOpenUser}>
+                    <PopoverTrigger asChild disabled={initialValues !== null}>
+                      <FormControl>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={openUser}
+                          className={cn(
+                            "w-full h-12 justify-between",
+                            !field.value && "text-muted-foreground",
+                          )}
+                        >
+                          {selectedUser
+                            ? `${selectedUser.first_name} ${selectedUser.last_name}`
+                            : "Foydalanuvchi tanlang"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+
+                    <PopoverContent
+                      className="w-[--radix-popover-trigger-width] p-0"
+                      align="start"
+                    >
+                      <Command shouldFilter={false}>
+                        <CommandInput
+                          placeholder="Qidirish..."
+                          className="h-9"
+                          value={searchUser}
+                          onValueChange={setSearchUser}
+                        />
+
+                        <CommandList>
+                          {isUserLoading ? (
+                            <div className="py-6 text-center text-sm">
+                              <Loader2 className="mx-auto h-4 w-4 animate-spin" />
+                            </div>
+                          ) : user && user.results.length > 0 ? (
+                            <CommandGroup>
+                              {user.results.map((u) => (
+                                <CommandItem
+                                  key={u.id}
+                                  value={`${u.id}`}
+                                  onSelect={() => {
+                                    field.onChange(String(u.id));
+                                    setOpenUser(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      field.value === String(u.id)
+                                        ? "opacity-100"
+                                        : "opacity-0",
+                                    )}
+                                  />
+                                  {u.first_name} {u.last_name} {u.region.name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          ) : (
+                            <CommandEmpty>Foydalanuvchi topilmadi</CommandEmpty>
+                          )}
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
           />
 
           <FormField
@@ -144,11 +260,56 @@ const AddedPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="date"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <Label className="text-md">Rejani bajarish kuni</Label>
+
+                <Popover open={open} onOpenChange={setOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="w-full h-12 justify-between font-normal"
+                    >
+                      {field.value
+                        ? new Date(field.value).toLocaleDateString()
+                        : "Sanani tanlang"}
+                      <ChevronDownIcon />
+                    </Button>
+                  </PopoverTrigger>
+
+                  <PopoverContent
+                    className="w-auto overflow-hidden p-0"
+                    align="start"
+                  >
+                    <Calendar
+                      mode="single"
+                      toYear={new Date().getFullYear() + 50}
+                      selected={field.value ? new Date(field.value) : undefined}
+                      captionLayout="dropdown"
+                      onSelect={(value) => {
+                        if (value) {
+                          field.onChange(value.toISOString()); // ⬅️ forma ichiga yozamiz
+                        }
+                        setOpen(false);
+                      }}
+                    />
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <Button
             className="w-full h-12 text-lg rounded-lg bg-blue-600 hover:bg-blue-600 cursor-pointer"
-            disabled={load}
+            disabled={isPending || editPending || initialValues?.is_done}
           >
-            {load ? (
+            {isPending || editPending ? (
               <Loader2 className="animate-spin" />
             ) : initialValues ? (
               "Tahrirlash"

src/features/plans/ui/DeletePlan.tsx

@@ -0,0 +1,89 @@
+import { plans_api } from "@/features/plans/lib/api";
+import type { PlanListData } from "@/features/plans/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Loader2, Trash, X } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  opneDelete: boolean;
+  setOpenDelete: Dispatch<SetStateAction<boolean>>;
+  setPlanDelete: Dispatch<SetStateAction<PlanListData | null>>;
+  planDelete: PlanListData | null;
+}
+
+const DeletePlan = ({
+  opneDelete,
+  setOpenDelete,
+  planDelete,
+  setPlanDelete,
+}: Props) => {
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteUser, isPending } = useMutation({
+    mutationFn: (id: number) => plans_api.delete(id),
+
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["plan_list"] });
+      toast.success(`Foydalanuvchi o'chirildi`);
+      setOpenDelete(false);
+      setPlanDelete(null);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  return (
+    <Dialog open={opneDelete} onOpenChange={setOpenDelete}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rejani o'chirish</DialogTitle>
+          <DialogDescription className="text-md font-semibold">
+            Siz rostan ham {planDelete?.user.first_name}{" "}
+            {planDelete?.user.last_name} ha tegishli rejani o'chirmoqchimisiz
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            className="bg-blue-600 cursor-pointer hover:bg-blue-600"
+            onClick={() => setOpenDelete(false)}
+          >
+            <X />
+            Bekor qilish
+          </Button>
+          <Button
+            variant={"destructive"}
+            onClick={() => planDelete && deleteUser(planDelete.id)}
+          >
+            {isPending ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              <>
+                <Trash />
+                O'chirish
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeletePlan;

src/features/plans/ui/FilterPlans.tsx

@@ -1,4 +1,4 @@
-import type { Plan } from "@/features/plans/lib/data";
+import type { PlanListData } from "@/features/plans/lib/data";
 import AddedPlan from "@/features/plans/ui/AddedPlan";
 import { Button } from "@/shared/ui/button";
 import { Calendar } from "@/shared/ui/calendar";
@@ -32,9 +32,8 @@ interface Props {
   setSearchUser: Dispatch<SetStateAction<string>>;
   dialogOpen: boolean;
   setDialogOpen: Dispatch<SetStateAction<boolean>>;
-  editingPlan: Plan | null;
-  setEditingPlan: Dispatch<SetStateAction<Plan | null>>;
-  setPlans: Dispatch<SetStateAction<Plan[]>>;
+  editingPlan: PlanListData | null;
+  setEditingPlan: Dispatch<SetStateAction<PlanListData | null>>;
 }
 
 const FilterPlans = ({
@@ -50,7 +49,6 @@ const FilterPlans = ({
   setDialogOpen,
   setEditingPlan,
   editingPlan,
-  setPlans,
 }: Props) => {
   return (
     <div className="flex gap-2 mb-4">
@@ -60,8 +58,8 @@ const FilterPlans = ({
         </SelectTrigger>
         <SelectContent>
           <SelectItem value="all">Barchasi</SelectItem>
-          <SelectItem value="Bajarildi">Bajarildi</SelectItem>
-          <SelectItem value="Bajarilmagan">Bajarilmagan</SelectItem>
+          <SelectItem value="true">Bajarildi</SelectItem>
+          <SelectItem value="false">Bajarilmagan</SelectItem>
         </SelectContent>
       </Select>
 
@@ -128,7 +126,6 @@ const FilterPlans = ({
           <AddedPlan
             initialValues={editingPlan}
             setDialogOpen={setDialogOpen}
-            setPlans={setPlans}
           />
         </DialogContent>
       </Dialog>

src/features/plans/ui/PalanTable.tsx

@@ -1,4 +1,4 @@
-import type { Plan } from "@/features/plans/lib/data";
+import type { PlanListData } from "@/features/plans/lib/data";
 import { Button } from "@/shared/ui/button";
 import {
   Table,
@@ -9,91 +9,115 @@ import {
   TableRow,
 } from "@/shared/ui/table";
 import clsx from "clsx";
-import { Edit, Eye, Trash } from "lucide-react";
+import { Edit, Eye, Loader2, Trash } from "lucide-react";
 import type { Dispatch, SetStateAction } from "react";
 
 interface Props {
-  filteredPlans: Plan[];
-  setEditingPlan: Dispatch<SetStateAction<Plan | null>>;
+  filteredPlans: PlanListData[] | [];
+  setEditingPlan: Dispatch<SetStateAction<PlanListData | null>>;
   setDetail: Dispatch<SetStateAction<boolean>>;
   setDialogOpen: Dispatch<SetStateAction<boolean>>;
-  handleDelete: (id: number) => void;
+  handleDelete: (id: PlanListData) => void;
+  isLoading: boolean;
+  isError: boolean;
+  isFetching: boolean;
 }
 
 const PalanTable = ({
   filteredPlans,
   setEditingPlan,
   setDetail,
+  isError,
+  isFetching,
+  isLoading,
   setDialogOpen,
   handleDelete,
 }: Props) => {
   return (
     <div className="flex-1 overflow-auto">
-      <Table>
-        <TableHeader>
-          <TableRow className="text-center">
-            <TableHead className="text-start">ID</TableHead>
-            <TableHead className="text-start">Reja nomi</TableHead>
-            <TableHead className="text-start">Tavsifi</TableHead>
-            <TableHead className="text-start">Kimga tegishli</TableHead>
-            <TableHead className="text-start">Status</TableHead>
-            <TableHead className="text-right">Harakatlar</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {filteredPlans.map((plan) => (
-            <TableRow key={plan.id} className="text-start">
-              <TableCell>{plan.id}</TableCell>
-              <TableCell>{plan.name}</TableCell>
-              <TableCell>{plan.description}</TableCell>
-              <TableCell>
-                {plan.user.firstName + " " + plan.user.lastName}
-              </TableCell>
-              <TableCell
-                className={clsx(
-                  plan.status === "Bajarildi"
-                    ? "text-green-500"
-                    : "text-red-500",
-                )}
-              >
-                {plan.status}
-              </TableCell>
-              <TableCell className="flex gap-2 justify-end">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="bg-green-500 text-white cursor-pointer hover:bg-green-500 hover:text-white"
-                  onClick={() => {
-                    setEditingPlan(plan);
-                    setDetail(true);
-                  }}
-                >
-                  <Eye className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
-                  onClick={() => {
-                    setEditingPlan(plan);
-                    setDialogOpen(true);
-                  }}
-                >
-                  <Edit className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  className="cursor-pointer"
-                  onClick={() => handleDelete(plan.id)}
-                >
-                  <Trash className="h-4 w-4" />
-                </Button>
-              </TableCell>
+      {(isLoading || isFetching) && (
+        <div className="h-full flex items-center justify-center bg-white/70 z-10">
+          <span className="text-lg font-medium">
+            <Loader2 className="animate-spin" />
+          </span>
+        </div>
+      )}
+
+      {isError && (
+        <div className="h-full flex items-center justify-center z-10">
+          <span className="text-lg font-medium text-red-600">
+            Ma'lumotlarni olishda xatolik yuz berdi.
+          </span>
+        </div>
+      )}
+
+      {!isLoading && !isError && (
+        <Table>
+          <TableHeader>
+            <TableRow className="text-center">
+              <TableHead className="text-start">ID</TableHead>
+              <TableHead className="text-start">Reja nomi</TableHead>
+              <TableHead className="text-start">Tavsifi</TableHead>
+              <TableHead className="text-start">Kimga tegishli</TableHead>
+              <TableHead className="text-start">Status</TableHead>
+              <TableHead className="text-right">Harakatlar</TableHead>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHeader>
+          <TableBody>
+            {filteredPlans.map((plan) => (
+              <TableRow key={plan.id} className="text-start">
+                <TableCell>{plan.id}</TableCell>
+                <TableCell>{plan.title}</TableCell>
+                <TableCell>{plan.description}</TableCell>
+                <TableCell>
+                  {plan.user.first_name + " " + plan.user.last_name}
+                </TableCell>
+                <TableCell
+                  className={clsx(
+                    plan.is_done ? "text-green-500" : "text-red-500",
+                  )}
+                >
+                  {plan.is_done ? "Bajarilgan" : "Bajarilmagan"}
+                </TableCell>
+                <TableCell className="flex gap-2 justify-end">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="bg-green-500 text-white cursor-pointer hover:bg-green-500 hover:text-white"
+                    onClick={() => {
+                      setEditingPlan(plan);
+                      setDetail(true);
+                    }}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={plan.is_done}
+                    className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
+                    onClick={() => {
+                      setEditingPlan(plan);
+                      setDialogOpen(true);
+                    }}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="cursor-pointer"
+                    disabled={plan.is_done}
+                    onClick={() => handleDelete(plan)}
+                  >
+                    <Trash className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </div>
   );
 };

src/features/plans/ui/PlanDetail.tsx

@@ -1,4 +1,4 @@
-import type { Plan } from "@/features/plans/lib/data";
+import type { PlanListData } from "@/features/plans/lib/data";
 import {
   Dialog,
   DialogContent,
@@ -14,7 +14,7 @@ import { type Dispatch, type SetStateAction } from "react";
 interface Props {
   setDetail: Dispatch<SetStateAction<boolean>>;
   detail: boolean;
-  plan: Plan | null;
+  plan: PlanListData | null;
 }
 
 const PlanDetail = ({ detail, setDetail, plan }: Props) => {
@@ -33,7 +33,7 @@ const PlanDetail = ({ detail, setDetail, plan }: Props) => {
           {/* Reja nomi */}
           <div>
             <p className="font-semibold text-gray-900">Reja nomi:</p>
-            <p>{plan.name}</p>
+            <p>{plan.title}</p>
           </div>
 
           {/* Reja tavsifi */}
@@ -46,7 +46,7 @@ const PlanDetail = ({ detail, setDetail, plan }: Props) => {
           <div>
             <p className="font-semibold text-gray-900">Kimga tegishli:</p>
             <p>
-              {plan.user.firstName} {plan.user.lastName}
+              {plan.user.first_name} {plan.user.last_name}
             </p>
           </div>
 
@@ -56,13 +56,13 @@ const PlanDetail = ({ detail, setDetail, plan }: Props) => {
 
             <Badge
               className={clsx(
-                plan.status === "Bajarildi"
+                plan.is_done
                   ? "bg-green-100 text-green-700"
                   : "bg-yellow-100 text-yellow-700",
                 "text-sm px-4 py-2 mt-2",
               )}
             >
-              {plan.status}
+              {plan.is_done ? "Bajarilgan" : "Bajarilmagan"}
             </Badge>
           </div>
         </DialogDescription>

src/features/plans/ui/PlansList.tsx

@@ -1,63 +1,61 @@
-import type { Plan } from "@/features/plans/lib/data";
+import { plans_api } from "@/features/plans/lib/api";
+import type { PlanListData } from "@/features/plans/lib/data";
+import DeletePlan from "@/features/plans/ui/DeletePlan";
 import FilterPlans from "@/features/plans/ui/FilterPlans";
 import PalanTable from "@/features/plans/ui/PalanTable";
 import PlanDetail from "@/features/plans/ui/PlanDetail";
-import { FakeUserList } from "@/features/users/lib/data";
+import formatDate from "@/shared/lib/formatDate";
 import Pagination from "@/shared/ui/pagination";
-import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 
 const PlansList = () => {
   const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = 5;
-  const [plans, setPlans] = useState<Plan[]>([
-    {
-      id: 1,
-      name: "Tumanga borish",
-      description: "Tumanga borish rejasi",
-      user: FakeUserList[0],
-      status: "Bajarildi",
-      createdAt: new Date("2025-02-03"),
-    },
-    {
-      id: 2,
-      name: "Yangi reja",
-      description: "Yangi reja tavsifi",
-      user: FakeUserList[1],
-      status: "Bajarilmagan",
-      createdAt: new Date("2025-01-12"),
-    },
-  ]);
-
-  const [editingPlan, setEditingPlan] = useState<Plan | null>(null);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [detail, setDetail] = useState<boolean>(false);
-
   const [statusFilter, setStatusFilter] = useState<string>("all");
   const [dateFilter, setDateFilter] = useState<Date | undefined>(undefined);
   const [open, setOpen] = useState<boolean>(false);
   const [searchUser, setSearchUser] = useState<string>("");
+  const limit = 20;
+  const { data, isLoading, isError, isFetching } = useQuery({
+    queryKey: ["plan_list", dateFilter, searchUser, statusFilter, currentPage],
+    queryFn: () => {
+      const params: {
+        limit?: number;
+        offset?: number;
+        status?: boolean;
+        date?: string;
+        user?: string;
+      } = {
+        date: dateFilter && formatDate.format(dateFilter, "YYYY-MM-DD"),
+        user: searchUser,
+        limit,
+        offset: (currentPage - 1) * limit,
+      };
 
-  const handleDelete = (id: number) => {
-    setPlans(plans.filter((p) => p.id !== id));
+      if (statusFilter !== "all") {
+        params.status = statusFilter === "true" ? true : false;
+      }
+
+      return plans_api.list(params);
+    },
+    select(data) {
+      return data.data.data;
+    },
+  });
+
+  const totalPages = data ? Math.ceil(data.count / limit) : 1;
+  const [editingPlan, setEditingPlan] = useState<PlanListData | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [detail, setDetail] = useState<boolean>(false);
+
+  const [openDelete, setOpenDelete] = useState<boolean>(false);
+  const [planDelete, setPlanDelete] = useState<PlanListData | null>(null);
+
+  const handleDelete = (id: PlanListData) => {
+    setOpenDelete(true);
+    setPlanDelete(id);
   };
 
-  const filteredPlans = useMemo(() => {
-    return plans.filter((item) => {
-      const statusMatch =
-        statusFilter === "all" || item.status === statusFilter;
-
-      const dateMatch = dateFilter
-        ? item.createdAt.toDateString() === dateFilter.toDateString()
-        : true;
-
-      const userMatch = `${item.user.firstName} ${item.user.lastName}`
-        .toLowerCase()
-        .includes(searchUser.toLowerCase());
-
-      return statusMatch && dateMatch && userMatch;
-    });
-  }, [plans, statusFilter, dateFilter, searchUser]);
-
   return (
     <div className="flex flex-col h-full p-10 w-full">
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
@@ -72,7 +70,6 @@ const PlansList = () => {
           setDialogOpen={setDialogOpen}
           setEditingPlan={setEditingPlan}
           setOpen={setOpen}
-          setPlans={setPlans}
           setSearchUser={setSearchUser}
           setStatusFilter={setStatusFilter}
           statusFilter={statusFilter}
@@ -82,11 +79,14 @@ const PlansList = () => {
       </div>
 
       <PalanTable
-        filteredPlans={filteredPlans}
+        filteredPlans={data ? data.results : []}
         handleDelete={handleDelete}
         setDetail={setDetail}
         setDialogOpen={setDialogOpen}
         setEditingPlan={setEditingPlan}
+        isError={isError}
+        isFetching={isFetching}
+        isLoading={isLoading}
       />
 
       <Pagination
@@ -94,6 +94,13 @@ const PlansList = () => {
         setCurrentPage={setCurrentPage}
         totalPages={totalPages}
       />
+
+      <DeletePlan
+        opneDelete={openDelete}
+        planDelete={planDelete}
+        setOpenDelete={setOpenDelete}
+        setPlanDelete={setPlanDelete}
+      />
     </div>
   );
 };