feat: เชื่อม edit, delete ให้ user management

Author: wanasart

aods_dev_v3.sql

@@ -60,7 +60,7 @@ CREATE TABLE IF NOT EXISTS users (
   usr_username    VARCHAR(32)  NOT NULL UNIQUE,
   usr_email       VARCHAR(64) NOT NULL UNIQUE,
   usr_password    VARCHAR(255) NOT NULL,
-  usr_name        VARCHAR(32),  
+  usr_name        VARCHAR(64),  
   usr_phone       VARCHAR(10),
   usr_profile     VARCHAR(255),
 

client/my-app/src/app/(with-layout)/test/page.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import AlertDocumentPreview from "@/components/documents/AlertDocumentPreview";
 import ModalsGallery from "@/components/modals/AlertsModal";
 import { showAlert } from "@/components/modals/StatusAlert";
+import { StatusMessage } from "@/components/utilities/StatusMessage";
 
 export default function AlertPreviewPage() {
   const handleSave = () => {
@@ -19,6 +20,7 @@ export default function AlertPreviewPage() {
     <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
       {/* <AlertDocumentPreview /> */}
       <ModalsGallery />
+      <StatusMessage message={'test message'} status={'info'} />
       <button onClick={handleSave}>Save</button>
     </div>
   );

client/my-app/src/components/features/settings/UserFilters.tsx

@@ -52,14 +52,14 @@ export default function UserFilters() {
             className="w-full rounded-md border border-[var(--color-primary)]
                        text-[var(--color-primary)]
                        focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)]
-                       px-2 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm"
+                       px-2 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm capitalize"
           >
             <SelectValue placeholder="All Roles" />
           </SelectTrigger>
           <SelectContent className="border-[var(--color-primary)]">
             <SelectItem value="All">All Roles</SelectItem>
             {roles.map((r) => (
-              <SelectItem key={r} value={r}>{r}</SelectItem>
+              <SelectItem key={r} value={r} className="capitalize">{r}</SelectItem>
             ))}
           </SelectContent>
         </Select>

client/my-app/src/components/features/settings/UserTable.tsx

@@ -10,8 +10,13 @@ import * as Icons from "lucide-react";
 import {
   Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { SaveConfirmModal } from "@/components/modals/AlertsModal";
+import EditUserModal from "@/components/forms/users/EditUserForm";
 
+import { SaveConfirmModal, DeleteConfirmModal } from "@/components/modals/AlertsModal";
+import { showAlert } from "@/components/modals/StatusAlert";
+import { useMe } from "@/hooks/useMe";
+
+import { DeleteUserDialog } from "@/components/forms/users/DeleteUserForm";
 /* ------------------------------ ROLE COLORS ------------------------------ */
 const ROLE_STYLES = {
   admin: "bg-emerald-50 text-emerald-700 ring-emerald-200",
@@ -42,6 +47,14 @@ function IconAction({
   variant = "primary",
   onClick,
   className = "",
+  disabled,
+}: {
+  label: string;
+  children: React.ReactNode;
+  variant?: "primary" | "danger" | "info" | "success";
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
 }) {
   const palette =
     variant === "danger"
@@ -79,6 +92,7 @@ function IconAction({
           <button
             onClick={onClick}
             aria-label={label}
+            disabled={disabled}
             className={[
               "inline-flex items-center justify-center h-8 w-8 rounded-full border",
               palette.border,
@@ -87,6 +101,7 @@ function IconAction({
               "hover:text-white hover:border-transparent",
               "transition focus:outline-none focus:ring-2 focus:ring-offset-2",
               palette.focusRing,
+              "disabled:opacity-50 disabled:cursor-not-allowed",
               className,
             ].join(" ")}
           >
@@ -122,7 +137,7 @@ export default function UserTable({ users }: { users: User[] }) {
   useEffect(() => setRows(users), [users]);
 
   // Pagination
-  const PAGE_SIZE = 25;
+  const PAGE_SIZE = 10;
   const [page, setPage] = useState(1);
 
   // Sorting
@@ -190,7 +205,12 @@ export default function UserTable({ users }: { users: User[] }) {
         return;
       }
 
-      alert("Password has been reset.");
+      showAlert({
+        title: "Success",
+        message: "Password has been reset successfully.",
+        variant: "success",
+        duration: 3000,
+      });
     } catch (err) {
       alert("Error resetting password.");
     } finally {
@@ -200,14 +220,91 @@ export default function UserTable({ users }: { users: User[] }) {
   };
 
   /* ----------------------------- ACTIONS ----------------------------- */
-  const onResetPassword = (id: number) => {
-    setResetUserId(id);
-    setConfirmOpen(true);
+  const [editingUserId, setEditingUserId] = useState<number | null>(null);
+  const [editingOpen, setEditingOpen] = useState(false);
+
+  const handleOpenEdit = (id: number) => {
+    setEditingUserId(id);
+    setEditingOpen(true);
   };
+  const handleUserUpdated = (updated: User) => {
+    setRows((prev) => prev.map((r) => (r.usr_id === updated.usr_id ? { ...r, ...updated } : r)));
+  };
+
+  // --- new delete-related state ---
+  const { me, loading: loadingMe, error: meError } = useMe();
+  const [busyId, setBusyId] = useState<number | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: number; name?: string } | null>(null);
 
-  // ฟังก์ชันสำหรับปุ่ม Action พร้อมให้เชื่อมต่อ logic จริง เช่น แก้ไขหรือ ลบผู้ใช้
-  const onEdit = (id: number) => console.log("Edit user:", id);
-  const onDelete = (id: number) => console.log("Delete user:", id);
+  function openDelete(u: User) {
+    setDeleteTarget({ id: u.usr_id, name: u.usr_username });
+    setDeleteOpen(true);
+  }
+
+  // onConfirmDelete signature follows DeleteConfirmModal -> receives object { input?, note? }
+  async function onConfirmDelete(_: { input?: string; note?: string }) {
+    if (!deleteTarget) return;
+
+    // get user id who performs the action
+    const user_id = Number((me as any)?.usr_id);
+    if (!Number.isFinite(user_id) || user_id <= 0) {
+      // fallback: show alert and keep modal open
+      showAlert({
+        title: "Error",
+        message: meError || "Cannot resolve user_id from current user.",
+        variant: "destructive",
+        duration: 4000,
+      });
+      return;
+    }
+
+    try {
+      setBusyId(deleteTarget.id);
+
+      // call backend to deactivate/delete user
+      const res = await fetch(`/api/users/${deleteTarget.id}/deactivate`, {
+        method: "PATCH",
+        credentials: "include",
+        cache: "no-store",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ user_id }),
+      });
+
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(json?.message || "Delete failed");
+
+      // remove from local rows
+      setRows((prev) => prev.filter((r) => r.usr_id !== deleteTarget.id));
+
+      // show status alert
+      showAlert({
+        title: "Deleted",
+        message: `User "${deleteTarget.name ?? deleteTarget.id}" has been deactivated.`,
+        variant: "success",
+        duration: 3000,
+      });
+
+      setDeleteOpen(false);
+      setDeleteTarget(null);
+    } catch (e: any) {
+      // show status alert error
+      showAlert({
+        title: "Error",
+        message: e?.message || "Delete failed",
+        variant: "destructive",
+        duration: 4000,
+      });
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  const onDeleteClick = (id: number) => {
+    // kept for compatibility or if you want to pass to child props
+    const u = rows.find((r) => r.usr_id === id);
+    if (u) openDelete(u);
+  };
 
   if (!pagedUsers.length) {
     return <div className="text-sm text-gray-500">No users to display.</div>;
@@ -249,7 +346,7 @@ export default function UserTable({ users }: { users: User[] }) {
         <TableBody>
           {pagedUsers.map((usr) => (
             <TableRow key={usr.usr_id}>
-              <TableCell>{`USR${String(usr.usr_id).padStart(4, "0")}`}</TableCell>
+              <TableCell>{`USR${String(usr.usr_id).padStart(3, "0")}`}</TableCell>
               <TableCell>{usr.usr_name}</TableCell>
               <TableCell><RoleBadge value={usr.usr_role} /></TableCell>
               <TableCell>{usr.usr_username}</TableCell>
@@ -262,23 +359,24 @@ export default function UserTable({ users }: { users: User[] }) {
                   <IconAction
                     label="Reset Password"
                     variant="primary"
-                    onClick={() => onResetPassword(usr.usr_id)}
+                    onClick={() => { setResetUserId(usr.usr_id); setConfirmOpen(true); }}
                   >
                     <KeyRound className="w-4 h-4" />
                   </IconAction>
 
                   <IconAction
                     label="Edit"
                     variant="primary"
-                    onClick={() => onEdit(usr.usr_id)}
+                    onClick={() => handleOpenEdit(usr.usr_id)}
                   >
                     <Pencil className="w-4 h-4" />
                   </IconAction>
 
                   <IconAction
                     label="Delete"
                     variant="danger"
-                    onClick={() => onDelete(usr.usr_id)}
+                    onClick={() => openDelete(usr)}
+                    disabled={busyId === usr.usr_id}
                   >
                     <Trash2 className="w-4 h-4" />
                   </IconAction>
@@ -335,6 +433,27 @@ export default function UserTable({ users }: { users: User[] }) {
         onConfirm={handleConfirmReset}
         icon={<KeyRound className="h-7 w-7 text-blue-600" />}
       />
+
+      {/* edit modal */}
+      <EditUserModal
+        usrId={editingUserId}
+        open={editingOpen}
+        setOpen={setEditingOpen}
+        onUpdated={handleUserUpdated}
+      />
+
+      {/* Delete confirm modal — no typing required (just Cancel / Delete) */}
+      <DeleteConfirmModal
+        open={deleteOpen}
+        onOpenChange={(v) => {
+          if (!v) setDeleteTarget(null);
+          setDeleteOpen(v);
+        }}
+        title="Delete User?"
+        description={`This will deactivate "${deleteTarget?.name ?? "this user"}" (ID: ${deleteTarget?.id ?? "—"}) and related data. This action cannot be undone.`}
+        confirmText="Delete"
+        onConfirm={onConfirmDelete}
+      />
     </div>
   );
-}
+}