Dev

client/src/App.tsx

@@ -4,6 +4,7 @@ import Inventory from './pages/Inventory.tsx';
 import Users from './pages/Users.tsx';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
 import { RequireAuth } from '@features/auth/RequireAuth';
+import { RequireAdmin } from '@features/auth/RequireAdmin';
 
 const App = () => {
     return (
@@ -24,7 +25,14 @@ const App = () => {
                         element={<Navigate to="inventory" replace />}
                     />
                     <Route path="inventory" element={<Inventory />} />
-                    <Route path="users" element={<Users />} />
+                    <Route
+                        path="users"
+                        element={
+                            <RequireAdmin>
+                                <Users />
+                            </RequireAdmin>
+                        }
+                    />
                 </Route>
                 <Route path="*" element={<Navigate to="/login" replace />} />
             </Routes>

client/src/features/ChangeUserRoleModal/ChangeUserRoleModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { UserResource, UpdateUserResponse } from '@foodstoragemanager/schema';
+import { toRole, type UserResource, type UpdateUserResponse, type Role } from '@foodstoragemanager/schema';
 import { getSchemaClient } from '@lib/schemaClient';
 
 interface ChangeUserRoleModalProps {
@@ -9,8 +9,8 @@ interface ChangeUserRoleModalProps {
 }
 
 export const ChangeUserRoleModal = ({ user, onRoleChanged, onCancel }: ChangeUserRoleModalProps) => {
-    const currentRole = user.role?.[0] ?? '';
-    const [selectedRole, setSelectedRole] = useState<string>(currentRole);
+    const currentRole: Role = toRole(user.role);
+    const [selectedRole, setSelectedRole] = useState<Role>(currentRole);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
@@ -28,7 +28,7 @@ export const ChangeUserRoleModal = ({ user, onRoleChanged, onCancel }: ChangeUse
 
             const client = getSchemaClient();
             const payload: UpdateUserResponse = await client.updateUser(user._id, {
-                role: selectedRole === '' ? undefined : (selectedRole as 'admin' | 'staff' | 'volunteer'),
+                role: selectedRole,
             });
 
             if ('error' in payload) {
@@ -45,9 +45,7 @@ export const ChangeUserRoleModal = ({ user, onRoleChanged, onCancel }: ChangeUse
         }
     };
 
-    const currentRoleDisplay = currentRole
-        ? currentRole[0].toUpperCase() + currentRole.slice(1).toLowerCase()
-        : 'No Role';
+    const currentRoleDisplay = `${currentRole[0].toUpperCase()}${currentRole.slice(1).toLowerCase()}`;
 
     return (
         <div className="p-6 bg-white rounded-lg shadow-md max-w-md w-full">
@@ -75,12 +73,11 @@ export const ChangeUserRoleModal = ({ user, onRoleChanged, onCancel }: ChangeUse
                     <select
                         id="role-select"
                         value={selectedRole}
-                        onChange={(e) => setSelectedRole(e.target.value)}
+                        onChange={(e) => setSelectedRole(toRole(e.target.value))}
                         className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                         disabled={isSubmitting}
                     >
-                        <option value="">No Role</option>
                         <option value="admin">Admin</option>
                         <option value="staff">Staff</option>
                         <option value="volunteer">Volunteer</option>

client/src/features/CreateUserForm/CreateUserForm.tsx

@@ -1,12 +1,14 @@
 import { useState } from 'react';
-import type { CreateUserResponse } from '@foodstoragemanager/schema';
+import type { CreateUserResponse, Role } from '@foodstoragemanager/schema';
+import { toRole } from '@foodstoragemanager/schema';
 import { getSchemaClient } from '@lib/schemaClient';
 
 type FormInputs = {
     name: string;
     email: string;
     password: string;
     confirmPassword: string;
+    role: Role;
 };
 
 type CreateUserFormProps = {
@@ -19,6 +21,7 @@
     email: '',
     password: '',
     confirmPassword: '',
+    role: 'volunteer',
 };
 
 export const CreateUserForm = ({ onUserCreated, onCancel }: CreateUserFormProps) => {
@@ -30,7 +33,7 @@
     const handleInputChange = (field: keyof FormInputs, value: string) => {
         setFormData((prev) => ({
             ...prev,
-            [field]: value,
+            [field]: field === 'role' ? (toRole(value) as Role) : value,
         }));
     };
 
@@ -58,6 +61,7 @@
                 name: formData.name.trim(),
                 email: formData.email.trim(),
                 password: formData.password,
+                role: formData.role,
             });
 
             if ('error' in payload) {
@@ -114,6 +118,7 @@
                         type="text"
                         value={formData.name}
                         onChange={(event) => handleInputChange('name', event.target.value)}
+                        autoComplete="name"
                         className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
@@ -131,6 +136,7 @@
                         type="email"
                         value={formData.email}
                         onChange={(event) => handleInputChange('email', event.target.value)}
+                        autoComplete="username"
                         className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
@@ -148,6 +154,7 @@
                         type="password"
                         value={formData.password}
                         onChange={(event) => handleInputChange('password', event.target.value)}
+                        autoComplete="new-password"
                         className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
@@ -165,11 +172,32 @@
                         type="password"
                         value={formData.confirmPassword}
                         onChange={(event) => handleInputChange('confirmPassword', event.target.value)}
+                        autoComplete="new-password"
                         className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
 
+                <div>
+                    <label
+                        htmlFor="role"
+                        className="mb-1 block text-sm font-medium text-gray-700"
+                    >
+                        Role *
+                    </label>
+                    <select
+                        id="role"
+                        value={formData.role}
+                        onChange={(event) => handleInputChange('role', event.target.value)}
+                        className="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        required
+                    >
+                        <option value="admin">Admin</option>
+                        <option value="staff">Staff</option>
+                        <option value="volunteer">Volunteer</option>
+                    </select>
+                </div>
+
                 <div className="flex flex-wrap gap-3 pt-2">
                     {onCancel && (
                         <button

client/src/features/UsersList/UserItem.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import type { UserResource } from '@foodstoragemanager/schema';
+import { toRole, type UserResource } from '@foodstoragemanager/schema';
 import { BiSolidUser, BiSolidPencil, BiSolidTrash } from 'react-icons/bi';
 
 type UserItemProps = {
@@ -10,10 +10,8 @@ type UserItemProps = {
 
 export const UserItem = ({ user, onEditUser, onDeleteUser }: UserItemProps) => {
     const role = useMemo(() => {
-        const currentRole = user.role?.[0];
-        if (!currentRole) return '';
-
-        return currentRole[0].toUpperCase() + currentRole.slice(1).toLowerCase();
+        const normalized = toRole(user.role);
+        return `${normalized[0].toUpperCase()}${normalized.slice(1).toLowerCase()}`;
     }, [user.role]);
 
     const handleEditClick = () => {

client/src/features/auth/AuthContext.tsx

@@ -10,7 +10,9 @@ import {
 import type {
     AuthenticateUserResponse,
     UserResource,
+    Role,
 } from '@foodstoragemanager/schema';
+import { toRole } from '@foodstoragemanager/schema';
 import { getSchemaClient } from '@lib/schemaClient';
 
 type AuthResult = { ok: true } | { ok: false; error: string };
@@ -26,10 +28,22 @@ const STORAGE_KEY = 'fsm:auth:user';
 
 const AuthContext = createContext<AuthContextValue | undefined>(undefined);
 
+const normalizeUserRole = (user: UserResource | null): UserResource | null => {
+    if (!user) return null;
+
+    const rawRole: unknown = Array.isArray((user as unknown as { role?: unknown }).role)
+        ? (user as unknown as { role?: unknown[] }).role?.[0]
+        : (user as unknown as { role?: unknown }).role;
+
+    const role: Role = toRole(rawRole);
+    return { ...user, role };
+};
+
 const readStoredUser = (): UserResource | null => {
     try {
         const raw = localStorage.getItem(STORAGE_KEY);
-        return raw ? (JSON.parse(raw) as UserResource) : null;
+        const parsed = raw ? (JSON.parse(raw) as UserResource) : null;
+        return normalizeUserRole(parsed);
     } catch (error) {
         console.warn("Failed to read stored user session", error);
         return null;
@@ -38,12 +52,13 @@ const readStoredUser = (): UserResource | null => {
 
 const writeStoredUser = (user: UserResource | null) => {
     try {
+        const normalized = normalizeUserRole(user);
         if (!user) {
             localStorage.removeItem(STORAGE_KEY);
             return;
         }
 
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(user));
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(normalized));
     } catch (error) {
         console.warn("Failed to persist user session", error);
     }
@@ -71,8 +86,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
                     return { ok: false, error: payload.error.message };
                 }
 
-                setUser(payload.user);
-                writeStoredUser(payload.user);
+                const normalizedUser = normalizeUserRole(payload.user);
+                setUser(normalizedUser);
+                writeStoredUser(normalizedUser);
                 return { ok: true };
             } catch (error) {
                 const message =

client/src/features/auth/RequireAdmin.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { Navigate, useLocation } from 'react-router';
+import { useAuth } from './AuthContext';
+
+export const RequireAdmin = ({ children }: { children: ReactNode }) => {
+    const { user, loading } = useAuth();
+    const location = useLocation();
+
+    if (loading) {
+        return (
+            <div className="flex min-h-screen items-center justify-center text-neutral-700">
+                Checking your permissions...
+            </div>
+        );
+    }
+
+    if (!user) {
+        return <Navigate to="/login" replace state={{ from: location }} />;
+    }
+
+    if (user.role !== 'admin') {
+        return <Navigate to="/app/inventory" replace state={{ from: location, reason: 'forbidden' }} />;
+    }
+
+    return <>{children}</>;
+};

client/src/features/ui/NavBar/NavBar.tsx

@@ -14,7 +14,7 @@ export const NavBar = () => {
         <div className="flex h-16 w-full items-center bg-neutral-900 text-neutral-50">
             <nav className="flex flex-1 items-center justify-around">
                 <NavLink to={'/app/inventory'}>Inventory</NavLink>
-                <NavLink to={'/app/users'}>Users</NavLink>
+                {user?.role === 'admin' && <NavLink to={'/app/users'}>Users</NavLink>}
             </nav>
             <div className="flex items-center gap-3 pr-6">
                 {user && (

schema/src/client.ts

@@ -4,31 +4,34 @@ import {
   type CreateAuditResponse,
   type CreateItemResponse,
   type CreateLocationResponse,
-  type CreateUserResponse,
-  type DeleteUserResponse,
   type DeleteItemResponse,
-  type AuthenticateUserPayload,
-  type AuthenticateUserResponse,
   type InventoryLotDraft,
   type InventoryLotResource,
   type ItemDraft,
   type ItemResource,
   type ListItemsResponse,
   type ListLocationsResponse,
-  type ListUsersResponse,
   type LocationDraft,
   type LocationResource,
   type RecordStockTransactionResponse,
   type StockTransactionDraft,
   type StockTransactionResource,
   type UpdateItemResponse,
-  type UpdateUserResponse,
   type UpsertInventoryLotResponse,
-  type UserDraft,
-  type UserResource,
   type ApiErrorPayload,
 } from "./types";
 
+import {
+  type AuthenticateUserPayload,
+  type AuthenticateUserResponse,
+  type CreateUserResponse,
+  type DeleteUserResponse,
+  type ListUsersResponse,
+  type UpdateUserResponse,
+  type UserDraft,
+  type UserResource,
+} from "./user";
+
 type FetchLike = typeof fetch;
 
 export interface ClientInit {

schema/src/index.ts

@@ -5,4 +5,6 @@ export {
   type SchemaClient,
 } from "./client";
 
+export { toRole } from "./user";
 export type * from "./types";
+export type * from "./user";

schema/src/types.ts

@@ -182,30 +182,3 @@ export interface AuditResource {
 }
 
 export type CreateAuditResponse = ApiResponse<{ audit: AuditResource }>;
-
-export interface UserDraft {
-  email: string;
-  name: string;
-  password: string;
-  role?: "admin" | "staff" | "volunteer";
-}
-
-export interface UserResource {
-  _id: ObjectIdString;
-  email: string;
-  name: string;
-  role: ["admin" | "staff" | "volunteer"];
-  enabled: boolean;
-  createdAt: ISODateString;
-}
-
-export interface AuthenticateUserPayload {
-  email: string;
-  password: string;
-}
-
-export type AuthenticateUserResponse = ApiResponse<{ user: UserResource }>;
-export type CreateUserResponse = ApiResponse<{ user: UserResource }>;
-export type UpdateUserResponse = ApiResponse<{ user: UserResource }>;
-export type DeleteUserResponse = ApiResponse<{ deleted: boolean }>;
-export type ListUsersResponse = ApiResponse<{ users: UserResource[] }>;