- ViewUser
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { Pencil, ArrowLeft } from "lucide-react";
+import { ROLE_CONFIG } from "@/data/profile.data";
+import { BADGE_STYLES } from "@/utils/table.util";
+
+// ─── Helper ───────────────────────────────────────────────────────────────────
+const StatusBadge = ({ value }) => (
+
+ {value}
+
+);
+
+export default function ViewUser() {
+ const { userId } = useParams();
+ const navigate = useNavigate();
+ const { user, fetchUser, loading } = useUsers();
+
+ useEffect(() => {
+ fetchUser(userId);
+ }, [userId]);
+
+ if (loading) return (
+
+
- )
+ );
+
+ if (!user) return (
+
+ User not found.
+
+ );
+
+ const info = user.personal_info ?? {};
+ const name = info.name ?? {};
+ const role = ROLE_CONFIG[user.acc_type] ?? { label: user.acc_type, variant: "outline" };
+
+ return (
+
+
+ {/* ─── Header ──────────────────────────────────────────────────────── */}
+
+
+
+
+
+ {name.full_name ?? "—"}
+
+
{user.email}
+
+
+
+
+
+ {/* ─── Account Info ────────────────────────────────────────────────── */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ─── Personal Info ───────────────────────────────────────────────── */}
+
+ {name.given_name ?? "—"}
+ {name.middle_name ?? "—"}
+ {name.last_name ?? "—"}
+ {name.extension_name ?? "—"}
+ {info.date_of_birth ?? "—"}
+ {info.occupation ?? "—"}
+
+
+ {/* ─── Addresses ───────────────────────────────────────────────────── */}
+ {info.addresses?.length > 0 && (
+
+ {info.addresses.map((addr, i) => (
+
+ {addr.full_address ?? "—"}
+
+ ))}
+
+ )}
+
+ {/* ─── Phone Numbers ───────────────────────────────────────────────── */}
+ {info.phone_number?.length > 0 && (
+
+ {info.phone_number.map((ph, i) => (
+
+ +{ph.full_number ?? "—"}
+
+ ))}
+
+ )}
+
+ {/* ─── Groups ──────────────────────────────────────────────────────── */}
+ {user.groups?.length > 0 && (
+
+
+ {user.groups.map((g) => (
+ {g.name}
+ ))}
+
+
+ )}
+
+ {/* ─── Audit ───────────────────────────────────────────────────────── */}
+
+ {user.createdAt ? new Date(user.createdAt).toLocaleString() : "—"}
+ {user.updatedAt ? new Date(user.updatedAt).toLocaleString() : "—"}
+ {user.deletedAt ? new Date(user.deletedAt).toLocaleString() : "—"}
+
+
+
+ );
}
-export default ViewUser
+// ─── Reusable Section ─────────────────────────────────────────────────────────
+function Section({ title, children }) {
+ return (
+
+
+ {title}
+
+
+ {children}
+
+
+ );
+}
+
+// ─── Reusable Field ───────────────────────────────────────────────────────────
+function Field({ label, children, capitalize }) {
+ return (
+
+ {label}
+
+ {children ?? "—"}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/admin/routes/AdminRoutes.jsx b/src/modules/admin/routes/AdminRoutes.jsx
index 706a914..40c40c8 100644
--- a/src/modules/admin/routes/AdminRoutes.jsx
+++ b/src/modules/admin/routes/AdminRoutes.jsx
@@ -18,6 +18,8 @@ import ViewUser from '../pages/users/ViewUser'
import GroupList from '../pages/user_groups/GroupList'
import ViewGroup from '../pages/user_groups/ViewGroup'
+import EditUser from '../pages/users/EditUser'
+import ArchivedUserList from '../pages/users/ArchivedUserList'
export const AdminRoutes = {
@@ -45,7 +47,9 @@ export const AdminRoutes = {
children: [
{ index: true, element:
},
{ path: 'add', element:
},
- { path: 'view/:userId', element:
}
+ { path: 'view/:userId', element:
},
+ { path: 'edit/:userId', element:
},
+ { path: 'archived', element:
},
]
},
diff --git a/src/modules/public/pages/NotFound.jsx b/src/modules/public/pages/NotFound.jsx
index 0fbbfd4..c62ef53 100644
--- a/src/modules/public/pages/NotFound.jsx
+++ b/src/modules/public/pages/NotFound.jsx
@@ -1,17 +1,10 @@
import { useNavigate } from 'react-router-dom'
-import { useAuth } from '@/contexts/AuthContext'
export default function NotFound() {
- const { user } = useAuth()
const navigate = useNavigate()
const goHome = () => {
- switch (user?.acc_type) {
- case 'admin': navigate('/admin'); break
- case 'client': navigate('/client'); break
- case 'staff': navigate('/staff'); break
- default: navigate(-1)
- }
+ navigate(-1)
}
return (
diff --git a/src/modules/public/pages/Unauthorized.jsx b/src/modules/public/pages/Unauthorized.jsx
index a8772ac..9eb3bb6 100644
--- a/src/modules/public/pages/Unauthorized.jsx
+++ b/src/modules/public/pages/Unauthorized.jsx
@@ -1,17 +1,10 @@
import { useNavigate } from 'react-router-dom'
-import { useAuth } from '@/contexts/AuthContext'
export default function Unauthorized() {
- const { user } = useAuth()
const navigate = useNavigate()
const goHome = () => {
- switch (user?.acc_type) {
- case 'admin': navigate('/admin'); break
- case 'client': navigate('/client'); break
- case 'staff': navigate('/staff'); break
- default: navigate(-1)
- }
+ navigate(-1)
}
return (
diff --git a/src/utils/table.util.jsx b/src/utils/table.util.jsx
index b8df918..d0ecb26 100644
--- a/src/utils/table.util.jsx
+++ b/src/utils/table.util.jsx
@@ -11,7 +11,7 @@ import { Search } from "lucide-react";
export const pageSizes = [10, 25, 50, 75, 100, 250, 500, 750, 1000]
// ── Badge style map for enum values ───────────────────────────────────────────
-const BADGE_STYLES = {
+export const BADGE_STYLES = {
"Active": "bg-emerald-100 text-emerald-800 border-emerald-200",
"Not Active": "bg-rose-100 text-rose-700 border-rose-200",
"Verified": "bg-blue-100 text-blue-800 border-blue-200",