user management ui

apps/edr-freight-web/backoffice/src/shared/common/ui/dataTableColumnHeader.tsx

@@ -0,0 +1,66 @@
+import { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent dark:data-[state=open]:bg-gray-700"
+          >
+            <span className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown className="h-4 w-4 dark:text-gray-400" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp className="h-4 w-4 dark:text-gray-400" />
+            ) : (
+              <ChevronsUpDown className="h-4 w-4 dark:text-gray-400" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="dark:bg-gray-800 dark:border-gray-700">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)} className="dark:text-gray-200 dark:hover:bg-gray-700">
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator className="dark:bg-gray-700" />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}