251210:1709 Frontend: reeactor organization and run build

frontend/app/(admin)/admin/users/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useUsers, useDeleteUser } from "@/hooks/use-users";
+import { useOrganizations } from "@/hooks/use-master-data";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/common/data-table"; // Reuse Data Table
-import { Plus, MoreHorizontal, Pencil, Trash } from "lucide-react"; // Import Icons
+import { DataTable } from "@/components/common/data-table";
+import { Plus, MoreHorizontal, Pencil, Trash, Search } from "lucide-react";
 import { useState } from "react";
 import { UserDialog } from "@/components/admin/user-dialog";
 import {
@@ -15,9 +16,26 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { ColumnDef } from "@tanstack/react-table";
 import { User } from "@/types/user";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function UsersPage() {
-  const { data: users, isLoading } = useUsers();
+  const [search, setSearch] = useState("");
+  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
+
+  const { data: users, isLoading } = useUsers({
+    search: search || undefined,
+    primaryOrganizationId: selectedOrgId ? parseInt(selectedOrgId) : undefined,
+  });
+
+  const { data: organizations = [] } = useOrganizations();
+
   const deleteMutation = useDeleteUser();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
@@ -26,59 +44,90 @@ export default function UsersPage() {
     {
       accessorKey: "username",
       header: "Username",
+      cell: ({ row }) => <span className="font-semibold">{row.original.username}</span>
     },
     {
       accessorKey: "email",
       header: "Email",
     },
     {
-        id: "name",
-        header: "Name",
-        cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`,
+      id: "name",
+      header: "Name",
+      cell: ({ row }) => `${row.original.firstName} ${row.original.lastName}`,
     },
     {
-      accessorKey: "is_active",
+      id: "organization",
+      header: "Organization",
+      cell: ({ row }) => {
+        // Need to find org in list if not populated or if only ID exists
+        // Assuming backend populates organization object or we map it from ID
+        // Currently User type has organization?
+        // Let's rely on finding it from the master data if missing
+        const orgId = row.original.primaryOrganizationId;
+        const org = organizations.find((o: any) => o.id === orgId);
+        return org ? org.organizationCode : "-";
+      },
+    },
+    {
+      id: "roles",
+      header: "Roles",
+      cell: ({ row }) => {
+        const roles = row.original.roles || [];
+        // If roles is empty, it might be lazy loaded or just assignments
+        return (
+          <div className="flex flex-wrap gap-1">
+            {roles.map((r) => (
+              <Badge key={r.roleId} variant="outline" className="text-xs">
+                {r.roleName}
+              </Badge>
+            ))}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: "isActive",
       header: "Status",
       cell: ({ row }) => (
-        <Badge variant={row.original.is_active ? "default" : "secondary"}>
-          {row.original.is_active ? "Active" : "Inactive"}
+        <Badge variant={row.original.isActive ? "default" : "secondary"}>
+          {row.original.isActive ? "Active" : "Inactive"}
         </Badge>
       ),
     },
     {
-        id: "actions",
-        header: "Actions",
-        cell: ({ row }) => {
-            const user = row.original;
-            return (
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" className="h-8 w-8 p-0">
-                            <span className="sr-only">Open menu</span>
-                            <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
-                            <Pencil className="mr-2 h-4 w-4" /> Edit
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                            className="text-red-600"
-                            onClick={() => {
-                                if (confirm("Are you sure?")) deleteMutation.mutate(user.user_id);
-                            }}
-                        >
-                            <Trash className="mr-2 h-4 w-4" /> Delete
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            )
-        }
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => {
+        const user = row.original;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
+                <Pencil className="mr-2 h-4 w-4" /> Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-red-600"
+                onClick={() => {
+                  if (confirm("Are you sure?")) deleteMutation.mutate(user.userId);
+                }}
+              >
+                <Trash className="mr-2 h-4 w-4" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      }
     }
   ];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-6">
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-bold">User Management</h1>
@@ -89,8 +138,38 @@ export default function UsersPage() {
         </Button>
       </div>
 
+      <div className="flex gap-4 items-center bg-muted/30 p-4 rounded-lg">
+         <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search users..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-8 bg-background"
+            />
+         </div>
+         <div className="w-[250px]">
+            <Select
+              value={selectedOrgId || "all"}
+              onValueChange={(val) => setSelectedOrgId(val === "all" ? null : val)}
+            >
+              <SelectTrigger className="bg-background">
+                <SelectValue placeholder="All Organizations" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Organizations</SelectItem>
+                {Array.isArray(organizations) && organizations.map((org: any) => (
+                  <SelectItem key={org.id} value={org.id.toString()}>
+                    {org.organizationCode} - {org.organizationName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+         </div>
+      </div>
+
       {isLoading ? (
-          <div>Loading...</div>
+          <div className="text-center py-10">Loading users...</div>
       ) : (
           <DataTable columns={columns} data={users || []} />
       )}