doctor and pharmacies crud

src/features/plans/ui/FilterPlans.tsx

@@ -0,0 +1,139 @@
+import type { Plan } from "@/features/plans/lib/data";
+import AddedPlan from "@/features/plans/ui/AddedPlan";
+import { Button } from "@/shared/ui/button";
+import { Calendar } from "@/shared/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/ui/dialog";
+import { Input } from "@/shared/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select";
+import { ChevronDownIcon, Plus } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  statusFilter: string;
+  setStatusFilter: Dispatch<SetStateAction<string>>;
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  dateFilter: Date | undefined;
+  setDateFilter: Dispatch<SetStateAction<Date | undefined>>;
+  searchUser: string;
+  setSearchUser: Dispatch<SetStateAction<string>>;
+  dialogOpen: boolean;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  editingPlan: Plan | null;
+  setEditingPlan: Dispatch<SetStateAction<Plan | null>>;
+  setPlans: Dispatch<SetStateAction<Plan[]>>;
+}
+
+const FilterPlans = ({
+  setStatusFilter,
+  statusFilter,
+  open,
+  setOpen,
+  dateFilter,
+  setDateFilter,
+  searchUser,
+  setSearchUser,
+  dialogOpen,
+  setDialogOpen,
+  setEditingPlan,
+  editingPlan,
+  setPlans,
+}: Props) => {
+  return (
+    <div className="flex gap-2 mb-4">
+      <Select value={statusFilter} onValueChange={setStatusFilter}>
+        <SelectTrigger className="w-full !h-12">
+          <SelectValue placeholder="foydalanuvchi" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">Barchasi</SelectItem>
+          <SelectItem value="Bajarildi">Bajarildi</SelectItem>
+          <SelectItem value="Bajarilmagan">Bajarilmagan</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal h-12"
+          >
+            {dateFilter ? dateFilter.toDateString() : "Sana"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={dateFilter}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDateFilter(date);
+              setOpen(false);
+            }}
+          />
+          <div className="p-2 border-t bg-white">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                setDateFilter(undefined);
+                setOpen(false);
+              }}
+            >
+              Tozalash
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Input
+        type="text"
+        placeholder="Foydalanuvchi ismi"
+        className="h-12"
+        value={searchUser}
+        onChange={(e) => setSearchUser(e.target.value)}
+      />
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            variant="default"
+            className="bg-blue-500 cursor-pointer hover:bg-blue-500 h-12"
+            onClick={() => setEditingPlan(null)}
+          >
+            <Plus className="!h-5 !w-5" /> Qo'shish
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-xl">
+              {editingPlan ? "Rejani tahrirlash" : "Yangi reja qo'shish"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <AddedPlan
+            initialValues={editingPlan}
+            setDialogOpen={setDialogOpen}
+            setPlans={setPlans}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default FilterPlans;

src/features/plans/ui/PalanTable.tsx

@@ -0,0 +1,101 @@
+import type { Plan } from "@/features/plans/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import clsx from "clsx";
+import { Edit, Eye, Trash } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  filteredPlans: Plan[];
+  setEditingPlan: Dispatch<SetStateAction<Plan | null>>;
+  setDetail: Dispatch<SetStateAction<boolean>>;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  handleDelete: (id: number) => void;
+}
+
+const PalanTable = ({
+  filteredPlans,
+  setEditingPlan,
+  setDetail,
+  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>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default PalanTable;

src/features/plans/ui/PlansList.tsx

@@ -1,45 +1,9 @@
-"use client";
-
 import type { Plan } from "@/features/plans/lib/data";
-import AddedPlan from "@/features/plans/ui/AddedPlan";
+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 { Button } from "@/shared/ui/button";
-import { Calendar } from "@/shared/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/shared/ui/dialog";
-import { Input } from "@/shared/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/shared/ui/table";
-import clsx from "clsx";
-import {
-  ChevronDownIcon,
-  ChevronLeft,
-  ChevronRight,
-  Edit,
-  Eye,
-  Plus,
-  Trash,
-} from "lucide-react";
+import Pagination from "@/shared/ui/pagination";
 import { useMemo, useState } from "react";
 
 const PlansList = () => {
@@ -79,16 +43,13 @@ const PlansList = () => {
 
   const filteredPlans = useMemo(() => {
     return plans.filter((item) => {
-      // 1) Status (agar all bo'lsa filtrlanmaydi)
       const statusMatch =
         statusFilter === "all" || item.status === statusFilter;
 
-      // 2) Sana filtri: createdAt === tanlangan sana
       const dateMatch = dateFilter
         ? item.createdAt.toDateString() === dateFilter.toDateString()
         : true;
 
-      // 3) User ism familiya bo'yicha qidiruv
       const userMatch = `${item.user.firstName} ${item.user.lastName}`
         .toLowerCase()
         .includes(searchUser.toLowerCase());
@@ -99,208 +60,40 @@ const PlansList = () => {
 
   return (
     <div className="flex flex-col h-full p-10 w-full">
-      {/* Header */}
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
         <h1 className="text-2xl font-bold">Rejalarni boshqarish</h1>
+        <FilterPlans
+          dateFilter={dateFilter}
+          dialogOpen={dialogOpen}
+          editingPlan={editingPlan}
+          open={open}
+          searchUser={searchUser}
+          setDateFilter={setDateFilter}
+          setDialogOpen={setDialogOpen}
+          setEditingPlan={setEditingPlan}
+          setOpen={setOpen}
+          setPlans={setPlans}
+          setSearchUser={setSearchUser}
+          setStatusFilter={setStatusFilter}
+          statusFilter={statusFilter}
+        />
 
-        <div className="flex gap-2 mb-4">
-          {/* Status filter */}
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="w-full !h-12">
-              <SelectValue placeholder="foydalanuvchi" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">Barchasi</SelectItem>
-              <SelectItem value="Bajarildi">Bajarildi</SelectItem>
-              <SelectItem value="Bajarilmagan">Bajarilmagan</SelectItem>
-            </SelectContent>
-          </Select>
-
-          {/* Sana filter */}
-          <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <Button
-                variant="outline"
-                id="date"
-                className="w-48 justify-between font-normal h-12"
-              >
-                {dateFilter ? dateFilter.toDateString() : "Sana"}
-                <ChevronDownIcon />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent
-              className="w-auto overflow-hidden p-0"
-              align="start"
-            >
-              <Calendar
-                mode="single"
-                selected={dateFilter}
-                captionLayout="dropdown"
-                onSelect={(date) => {
-                  setDateFilter(date);
-                  setOpen(false);
-                }}
-              />
-              <div className="p-2 border-t bg-white">
-                <Button
-                  variant="outline"
-                  className="w-full"
-                  onClick={() => {
-                    setDateFilter(undefined);
-                    setOpen(false);
-                  }}
-                >
-                  Tozalash
-                </Button>
-              </div>
-            </PopoverContent>
-          </Popover>
-
-          <Input
-            type="text"
-            placeholder="Foydalanuvchi ismi"
-            className="h-12"
-            value={searchUser}
-            onChange={(e) => setSearchUser(e.target.value)}
-          />
-          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-            <DialogTrigger asChild>
-              <Button
-                variant="default"
-                className="bg-blue-500 cursor-pointer hover:bg-blue-500 h-12"
-                onClick={() => setEditingPlan(null)}
-              >
-                <Plus className="!h-5 !w-5" /> Qo'shish
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-lg">
-              <DialogHeader>
-                <DialogTitle className="text-xl">
-                  {editingPlan ? "Rejani tahrirlash" : "Yangi reja qo'shish"}
-                </DialogTitle>
-              </DialogHeader>
-
-              {/* Form */}
-              <AddedPlan
-                initialValues={editingPlan}
-                setDialogOpen={setDialogOpen}
-                setPlans={setPlans}
-              />
-            </DialogContent>
-          </Dialog>
-        </div>
-
-        {/* Deail plan */}
         <PlanDetail detail={detail} setDetail={setDetail} plan={editingPlan} />
       </div>
 
-      {/* Table */}
-      <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>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+      <PalanTable
+        filteredPlans={filteredPlans}
+        handleDelete={handleDelete}
+        setDetail={setDetail}
+        setDialogOpen={setDialogOpen}
+        setEditingPlan={setEditingPlan}
+      />
 
-      <div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
-        <Button
-          variant="outline"
-          size="icon"
-          disabled={currentPage === 1}
-          className="cursor-pointer"
-          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-        >
-          <ChevronLeft />
-        </Button>
-        {Array.from({ length: totalPages }, (_, i) => (
-          <Button
-            key={i}
-            variant={currentPage === i + 1 ? "default" : "outline"}
-            size="icon"
-            className={clsx(
-              currentPage === i + 1
-                ? "bg-blue-500 hover:bg-blue-500"
-                : " bg-none hover:bg-blue-200",
-              "cursor-pointer",
-            )}
-            onClick={() => setCurrentPage(i + 1)}
-          >
-            {i + 1}
-          </Button>
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          disabled={currentPage === totalPages}
-          onClick={() =>
-            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-          }
-          className="cursor-pointer"
-        >
-          <ChevronRight />
-        </Button>
-      </div>
+      <Pagination
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        totalPages={totalPages}
+      />
     </div>
   );
 };