react

src/features/doctor/lib/column.tsx

@@ -0,0 +1,111 @@
+import type { DoctorListData } from "@/features/doctor/lib/data";
+import formatPhone from "@/shared/lib/formatPhone";
+import { Button } from "@/shared/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/shared/ui/dropdown-menu";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Edit, EllipsisVertical, Eye, Trash } from "lucide-react";
+import type { NavigateFunction } from "react-router-dom";
+
+interface Props {
+  router: NavigateFunction;
+  onDeleteClick: (district: DoctorListData) => void;
+}
+
+export const columns = ({
+  router,
+  onDeleteClick,
+}: Props): ColumnDef<DoctorListData>[] => [
+  {
+    accessorKey: "id",
+    header: () => <div className="text-center">№</div>,
+    cell: ({ row }) => {
+      return <div className="text-center font-medium">{row.index + 1}</div>;
+    },
+  },
+  {
+    accessorKey: "name",
+    header: () => <div className="text-center">Ismi</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="text-center font-medium">
+          {row.original.first_name} {row.original.last_name}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "districtName",
+    header: () => <div className="text-center">Ish joyi</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="text-center font-medium">{row.original.work_place}</div>
+      );
+    },
+  },
+  {
+    accessorKey: "phone",
+    header: () => <div className="text-center">Telefon raqami</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="text-center font-medium">
+          {formatPhone(row.original.phone_number)}
+        </div>
+      );
+    },
+  },
+  {
+    id: "actions",
+    header: () => <div className="text-center">Amallar</div>,
+    cell: ({ row }) => {
+      const obj = row.original;
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="w-full h-full hover:bg-gray-100">
+              <EllipsisVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="center" className="flex flex-col gap-1">
+            <Button
+              variant={"ghost"}
+              className="flex items-center gap-1 px-4 py-2 w-full text-left hover:bg-blue-400 hover:text-white text-white bg-blue-400"
+              onClick={() => router(`/physician/detail/${row.original.id}`)}
+            >
+              <Eye size={16} /> Batafsil
+            </Button>
+            <Button
+              variant={"ghost"}
+              className="flex items-center gap-1 px-4 py-2 w-full text-left hover:bg-blue-400 hover:text-white text-white bg-blue-400"
+              onClick={() =>
+                router(
+                  `/object/location?id=${obj.id}&lat=${obj.latitude}&lon=${obj.longitude}}`,
+                )
+              }
+            >
+              <Eye size={16} /> {"Lokatsiyani ko'rish"}
+            </Button>
+            <Button
+              variant="ghost"
+              className="flex items-center gap-1 px-4 py-2 w-full text-left hover:bg-green-400 hover:text-white text-white bg-green-400"
+              onClick={() => router(`/physician/edit/${obj.id}`)}
+            >
+              <Edit size={16} /> Tahrirlash
+            </Button>
+            <Button
+              variant={"destructive"}
+              size={"lg"}
+              className="cursor-pointer"
+              onClick={() => onDeleteClick(obj)}
+            >
+              <Trash size={16} /> {"O'chirish"}
+            </Button>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];