feat: add admin user management (#170)

* feat: add admin user management

* feat: change password

* feat: modify staff adding flow, fix input behavios in edit-staff

* chore: remove console.log in staff actions

* fix: catch error in staff editing and deleting flow

KNOWN ISSUE: super_admin does not have permission to edit and delete user

* feat: add login background

* feat: sow from error on login form

* feat: add Radix UI alert dialog and checkbox components to dependencies

* chore: fix all type lint error

---------

Co-authored-by: beambeambeam <supawitmarayat@gmail.com>

Author: gxjakkap

apps/staff/package.json

@@ -15,6 +15,8 @@
     "@orpc/client": "^1.8.5",
     "@orpc/react": "^1.8.5",
     "@orpc/server": "^1.8.5",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
@@ -49,6 +51,7 @@
     "react-dom": "19.1.0",
     "react-hook-form": "^7.62.0",
     "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.0.17"
   },

apps/staff/public/Log_in_background.webp

@@ -9,7 +9,8 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Spinner } from "@/components/ui/spinner"
 import { authClient } from "@/lib/auth-client"
-import { LogOutIcon } from "lucide-react"
+import { KeyIcon, LogOutIcon } from "lucide-react"
+import Link from "next/link"
 import { useRouter } from "next/navigation"
 
 const { useSession } = authClient
@@ -30,6 +31,12 @@ function UserNavbar() {
       <DropdownMenuContent>
         <DropdownMenuLabel>{session?.user.email}</DropdownMenuLabel>
         <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/change-password">
+            <KeyIcon />
+            Change Password
+          </Link>
+        </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={async () => {
             await authClient.signOut({})

apps/staff/public/file.svg

@@ -0,0 +1,46 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { authClient } from "@/lib/auth-client"
+import { MoreHorizontal } from "lucide-react"
+import { createContext } from "react"
+
+import DropdownMenuDeleteStaff from "./dialog/delete-user"
+import DropdownMenuEditStaff from "./dialog/edit-user"
+
+interface ActionMenuProps {
+  user: typeof authClient.$Infer.Session.user | undefined
+}
+
+export const UserDataContext = createContext<ActionMenuProps>({
+  user: undefined,
+})
+
+export function ActionMenu(props: ActionMenuProps) {
+  return (
+    <UserDataContext.Provider value={props}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <DropdownMenuEditStaff />
+          </DropdownMenuItem>
+          <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+            <DropdownMenuDeleteStaff />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </UserDataContext.Provider>
+  )
+}

apps/staff/public/globe.svg

@@ -1,16 +1,11 @@
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { authClient } from "@/lib/auth-client"
 import { createColumnHelper } from "@tanstack/react-table"
-import { MoreHorizontal, CheckCircle, XCircle } from "lucide-react"
+import { CheckCircle, XCircle } from "lucide-react"
 import { Text } from "lucide-react"
 
+import { ActionMenu } from "./action-menu"
+
 const columnHelper = createColumnHelper<typeof authClient.$Infer.Session.user>()
 
 export const columns = [
@@ -67,20 +62,7 @@ export const columns = [
   columnHelper.display({
     id: "actions",
     header: "Actions",
-    cell: (_info) => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <MoreHorizontal className="h-4 w-4" />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
+    cell: (info) => <ActionMenu user={info.row.original} />,
     size: 32,
   }),
 ]