diff --git a/src/components/generic/ComboBoxCommand.jsx b/src/components/generic/ComboBoxCommand.jsx
new file mode 100644
index 0000000..2705385
--- /dev/null
+++ b/src/components/generic/ComboBoxCommand.jsx
@@ -0,0 +1,463 @@
+// ComboBoxCommand.jsx
+// ─────────────────────────────────────────────────────────────────────────────
+// Generic multi-select combobox with server-search, select-all, embossed
+// checkboxes, and +N overflow badge popover.
+//
+// Props:
+// value {any[]} — array of selected IDs (controlled)
+// onChange {fn} — called with new array of IDs
+// items {object[]} — flat list of option objects
+// loading {boolean} — shows spinner while fetching
+// onSearch {fn} — called with search term when Search is clicked
+//
+// // Field mapping — tell the component which keys to read from each item:
+// fieldId {string} — unique identifier key default: "id"
+// fieldLabel {string} — primary display label key default: "name"
+// fieldMeta {string} — secondary mono badge key default: null (hidden)
+//
+// // Copy overrides (all optional):
+// placeholder {string} — trigger placeholder default: "Select items…"
+// searchPlaceholder {string} default: "Search…"
+// selectAllLabel {string} default: "Select all"
+// deselectAllLabel {string} default: "Deselect all"
+// emptyLabel {string} default: "No items available."
+// unit {string} — singular noun for counts default: "item"
+//
+// maxVisible {number} — badges before +N collapse default: 3
+//
+// ── Usage examples ────────────────────────────────────────────────────────────
+//
+// // Groups (your existing use-case)
+//
+
+
+ +{overflow.length} more
+
+
+
+
+
+
+ {overflow.length} more selected
+
+
+ {overflow.map((item) => (
+
+ {item[fieldLabel]}
+ {fieldMeta && item[fieldMeta] && (
+
+ {item[fieldMeta]}
+
+ )}
+ onRemove(item[fieldId])}
+ className={cn(
+ "shrink-0 rounded-sm p-0.5 opacity-0 group-hover:opacity-60",
+ "hover:!opacity-100 hover:bg-destructive/20 transition-all"
+ )}
+ >
+
+
+ ))}
+
+
+ );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+export function ComboBoxCommand({
+ // Data
+ value = [],
+ onChange,
+ items = [],
+ loading = false,
+ onSearch,
+
+ // Field mapping
+ fieldId = "id",
+ fieldLabel = "name",
+ fieldMeta = null, // set to a key string to show the mono badge
+
+ // Copy
+ placeholder = "Select items…",
+ searchPlaceholder = "Search…",
+ selectAllLabel = "Select all",
+ deselectAllLabel = "Deselect all",
+ emptyLabel = "No items available.",
+ unit = "item",
+
+ // Layout
+ maxVisible = 3,
+}) {
+ const [open, setOpen] = useState(false);
+ const [inputValue, setInputValue] = useState("");
+ const inputRef = useRef(null);
+
+ const safeItems = Array.isArray(items) ? items : [];
+
+ // ── Client-side filter ─────────────────────────────────────────────────────
+ const filtered = safeItems.filter((item) => {
+ if (!inputValue.trim()) return true;
+ const q = inputValue.toLowerCase();
+ const matchLabel = String(item[fieldLabel] ?? "").toLowerCase().includes(q);
+ const matchMeta = fieldMeta
+ ? String(item[fieldMeta] ?? "").toLowerCase().includes(q)
+ : false;
+ return matchLabel || matchMeta;
+ });
+
+ // ── Selection state ────────────────────────────────────────────────────────
+ const selected = safeItems.filter((item) => value.includes(item[fieldId]));
+ const allSelected = filtered.length > 0 && filtered.every((item) => value.includes(item[fieldId]));
+ const someSelected = !allSelected && filtered.some((item) => value.includes(item[fieldId]));
+
+ const visibleBadges = selected.slice(0, maxVisible);
+ const overflowBadges = selected.slice(maxVisible);
+
+ // ── Handlers ───────────────────────────────────────────────────────────────
+ const toggle = (id) => {
+ const key = String(id);
+ onChange(
+ value.map(String).includes(key)
+ ? value.filter((v) => String(v) !== key)
+ : [...value, key]
+ );
+ };
+
+ const toggleAll = () => {
+ if (allSelected) {
+ const filteredIds = new Set(filtered.map((item) => item[fieldId]));
+ onChange(value.filter((id) => !filteredIds.has(id)));
+ } else {
+ const merged = Array.from(new Set([...value, ...filtered.map((item) => item[fieldId])]));
+ onChange(merged);
+ }
+ };
+
+ const handleSearch = () => {
+ if (onSearch && inputValue.trim()) onSearch(inputValue.trim());
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Enter" && inputValue.trim()) {
+ e.preventDefault();
+ handleSearch();
+ }
+ };
+
+ // ── Pluralise helper ───────────────────────────────────────────────────────
+ const plural = (n) => `${n} ${unit}${n !== 1 ? "s" : ""}`;
+
+ return (
+
+
+
+ {/* ── Trigger ── */}
+
+
+
+ {selected.length > 0
+ ? `${plural(selected.length)} selected`
+ : placeholder}
+
+
+
+
+ {/* ── Dropdown ── */}
+
+
+
+ {/* Search bar */}
+
+
+ {loading
+ ?
+
+
+
+
+ {/* Loading */}
+ {loading && (
+
+
+ )}
+
+ {/* Empty */}
+ {!loading && filtered.length === 0 && (
+
+ {inputValue ? `No results for "${inputValue}".` : emptyLabel}
+
+ )}
+
+ {!loading && filtered.length > 0 && (
+ <>
+ {/* Select All row */}
+
+ {/* Embossed checkbox */}
+
+ {allSelected &&
+
+ {allSelected ? deselectAllLabel : selectAllLabel}
+
+
+ {plural(filtered.length)}
+
+
+
+ {/* Items */}
+
+ {filtered.map((item) => {
+ const id = item[fieldId];
+ const label = item[fieldLabel];
+ const meta = fieldMeta ? item[fieldMeta] : null;
+ const isSelected = value.includes(id);
+
+ return (
+ toggle(id)}
+ className={cn(
+ "flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-colors",
+ "aria-selected:bg-transparent data-selected:bg-transparent",
+ isSelected
+ ? "bg-primary/[0.06] hover:bg-primary/[0.10]"
+ : "hover:bg-muted/50"
+ )}
+ >
+ {/* Embossed checkbox */}
+
+ {isSelected && (
+
+
+ {/* Label */}
+
+ {label}
+
+
+ {/* Meta pill */}
+ {meta && (
+
+ {meta}
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+
+ {/* Footer */}
+ {!loading && safeItems.length > 0 && (
+ <>
+
+
+ {value.length > 0 ? `${plural(value.length)} selected` : "None selected"}
+
+
+ {filtered.length} / {safeItems.length} shown
+
+
+
+ )}
+
+
+
+
+ {/* ── Selected badges with +N overflow ── */}
+ {selected.length > 0 && (
+
+
+ {/* First maxVisible badges */}
+ {visibleBadges.map((item) => (
+
+ {item[fieldLabel]}
+ {fieldMeta && item[fieldMeta] && (
+ {item[fieldMeta]}
+ )}
+ toggle(item[fieldId])}
+ className="rounded-sm opacity-60 hover:opacity-100 hover:bg-destructive/20 p-0.5 ml-0.5"
+ >
+
+
+ ))}
+
+ {/* +N overflow → popover */}
+ {overflowBadges.length > 0 && (
+ toggle(id)}
+ fieldId={fieldId}
+ fieldLabel={fieldLabel}
+ fieldMeta={fieldMeta}
+ />
+ )}
+
+ {/* Clear all */}
+ {selected.length > 1 && (
+ onChange([])}
+ className="text-[11px] text-muted-foreground hover:text-destructive transition-colors underline underline-offset-2 ml-0.5"
+ >
+ Clear all
+
+ )}
+
+ )}
+
+ {items.length === 0 && (
+
+ No requirements added. Click "Add Requirement" to start.
+
+ )}
+
+ {items.map((item, idx) => {
+ const typeDef = TYPE_MAP[item.type];
+ const Icon = typeDef?.icon ?? Link;
+
+ return (
+
+
+ {/* Header row */}
+
+
+
+
+ {/* Type selector */}
+ updateItem(item._key, { type: v })}
+ >
+
+
+
+ {REQUIREMENT_TYPES.map((t) => (
+
+
+
+
+ ))}
+
+
+
+ removeItem(item._key)}
+ >
+
+
+
+ {/* ── visit_link fields ── */}
+ {item.type === 'visit_link' && (
+
+ )}
+
+ {/* ── upload_file fields ── */}
+ {item.type === 'upload_file' && (
+
+
+
Allowed File Types
+
+ {FILE_TYPE_OPTIONS.map((ft) => (
+ toggleFileType(item._key, ft.value)}
+ >
+ {ft.label}
+
+ ))}
+
+
+
+ Max Files
+
+
+
+ {item.type === 'read_course' ? 'Course' : item.type === 'read_unit' ? 'Unit' : 'Lesson'}
+
+
+ {/* Reference selector */}
+ {item.type === 'read_course' && (
+ {
+ const course = courses.find((c) => c.course_id === v);
+ updateItem(item._key, {
+ reference_id: v,
+ reference_label: course?.title ?? '',
+ });
+ }}
+ >
+
+
+
+ {courses.map((c) => (
+
+ {c.title}
+
+ ))}
+
+
+ )}
+
+ {item.type === 'read_unit' && (
+ {
+ const unit = units.find((u) => u.unit_id === v);
+ updateItem(item._key, {
+ reference_id: v,
+ reference_label: unit?.title ?? '',
+ });
+ }}
+ >
+
+
+
+ {units.map((u) => (
+
+ {u.title}
+
+ ))}
+
+
+ )}
+
+ {item.type === 'read_lesson' && (
+ {
+ const lesson = lessons.find((l) => l.lesson_id === v);
+ updateItem(item._key, {
+ reference_id: v,
+ reference_label: lesson?.title ?? '',
+ });
+ }}
+ >
+
+
+
+ {lessons.map((l) => (
+
+ {l.title}
+
+ ))}
+
+
+ )}
+
+ )}
+
+
+ );
+ })}
+
+
+
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/contexts/StaffScoreContext.jsx b/src/contexts/StaffScoreContext.jsx
new file mode 100644
index 0000000..3d88f0b
--- /dev/null
+++ b/src/contexts/StaffScoreContext.jsx
@@ -0,0 +1,93 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffScoreContext = createContext(null);
+
+export const useStaffScores = () => {
+ const ctx = useContext(StaffScoreContext);
+ if (!ctx) throw new Error("useStaffScores must be used inside StaffScoreProvider");
+ return ctx;
+};
+
+const BASE = "/staff";
+
+export const StaffScoreProvider = ({ children }) => {
+ const [progress, setProgress] = useState(null); // task list completion matrix
+ const [quizScores, setQuizScores] = useState(null); // quiz attempt scores per user
+ const [assessScores, setAssessScores] = useState(null); // assessment attempt scores per user
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ const request = useCallback(async (fn) => {
+ setLoading(true);
+ setError(null);
+ try {
+ return await fn();
+ } catch (err) {
+ const message = err?.response?.data?.message || err.message || "Something went wrong.";
+ setError(message);
+ toast.error(message);
+ return null;
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ // ─── GET /api/staff/progress/task-list/:task_list_id ─────────────────────
+ // Completion matrix: all members × all tasks in the task list.
+ // Response shape: { data: [{ user, tasks: [{ task, completion }], completed_count, total_tasks }] }
+ const fetchTaskListProgress = useCallback(
+ (taskListId) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/progress/task-list/${taskListId}`);
+ setProgress(res.data ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /api/staff/scores/quiz/:quiz_id ─────────────────────────────────
+ // Unit quiz scores for all members in the staff's groups.
+ // Response shape: { quiz, data: [{ user, attempts, best_score, latest }] }
+ const fetchQuizScores = useCallback(
+ (quizId) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/scores/quiz/${quizId}`);
+ setQuizScores(res.data ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /api/staff/scores/assessment/:assessment_id ─────────────────────
+ // Course assessment scores for all members in the staff's groups.
+ // Response shape: { assessment, data: [{ user, attempts, best_score, latest }] }
+ const fetchAssessmentScores = useCallback(
+ (assessmentId) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/scores/assessment/${assessmentId}`);
+ setAssessScores(res.data ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── Clear helpers ────────────────────────────────────────────────────────
+ // Useful when navigating away from a scores page to avoid stale data.
+ const clearProgress = useCallback(() => setProgress(null), []);
+ const clearQuizScores = useCallback(() => setQuizScores(null), []);
+ const clearAssessScores = useCallback(() => setAssessScores(null), []);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/contexts/StaffTaskContext.jsx b/src/contexts/StaffTaskContext.jsx
new file mode 100644
index 0000000..7f7653f
--- /dev/null
+++ b/src/contexts/StaffTaskContext.jsx
@@ -0,0 +1,418 @@
+/***********************************************************************************************************************************************************************
+ * File Name: StaffTaskContext.jsx
+ * Type of Program: Context
+ * Description: Staff task management context — aligned to the updated tasks.ctrl.js.
+ * Supports pagination, archive/restore, bulk ops, and filter field values
+ * to match the DataTable-based TaskListsPage.
+ ***********************************************************************************************************************************************************************/
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffTaskContext = createContext(null);
+
+export const useStaffTasks = () => {
+ const ctx = useContext(StaffTaskContext);
+ if (!ctx) throw new Error("useStaffTasks must be used inside StaffTaskProvider");
+ return ctx;
+};
+
+const BASE = "/staff";
+
+const PAGINATION_INIT = {
+ page: 1,
+ limit: 10,
+ totalRecords: 0,
+ totalPages: 0,
+ hasPrevPage: false,
+ hasNextPage: false,
+};
+
+export const StaffTaskProvider = ({ children }) => {
+ // ── Task Lists ──────────────────────────────────────────────────────────────
+ const [taskLists, setTaskLists] = useState([]);
+ const [taskList, setTaskList] = useState(null);
+ const [attributes, setAttributes] = useState([]);
+ const [pagination, setPagination] = useState(PAGINATION_INIT);
+
+ // ── Tasks ───────────────────────────────────────────────────────────────────
+ const [tasks, setTasks] = useState([]);
+ const [task, setTask] = useState(null);
+ const [taskAttrs, setTaskAttrs] = useState([]);
+ const [taskPagination, setTaskPagination] = useState(PAGINATION_INIT);
+
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ // ── Internal request wrapper ────────────────────────────────────────────────
+ const request = useCallback(async (fn) => {
+ setLoading(true);
+ setError(null);
+ try {
+ return await fn();
+ } catch (err) {
+ const message = err?.response?.data?.message || err.message || "Something went wrong.";
+ setError(message);
+ toast.error(message);
+ return null;
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ // ── Build query params from DataTable fetch args ────────────────────────────
+ const buildParams = ({ page, limit, filters, sort, archived } = {}) => ({
+ ...(page && { page }),
+ ...(limit && { limit }),
+ ...(archived !== undefined && { archived }),
+ ...(filters?.length && { filters: JSON.stringify(filters) }),
+ ...(sort?.length && { sort: JSON.stringify(sort) }),
+ });
+
+ // ════════════════════════════════════════════════════════════════════════════
+ // TASK LISTS
+ // ════════════════════════════════════════════════════════════════════════════
+
+ // ─── GET /staff/task-lists ───────────────────────────────────────────────
+ const fetchTaskLists = useCallback(
+ (args = {}) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists`, { params: buildParams(args) });
+ const { data, attributes, pagination } = res.data?.data;
+
+ setTaskLists(data ?? []);
+ setAttributes(attributes ?? []);
+ setPagination(pagination ?? null);
+
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /staff/task-lists/archived ──────────────────────────────────────
+ const fetchArchivedTaskLists = useCallback(
+ (args = {}) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/archived`, { params: buildParams(args) });
+ const payload = res.data?.data;
+ setTaskLists(payload?.rows ?? payload ?? []);
+ setAttributes(payload?.attributes ?? []);
+ setPagination(payload?.pagination ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /staff/task-lists/field-values ──────────────────────────────────
+ const fetchTaskListFieldValues = useCallback(
+ (field, args = {}) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/field-values`, {
+ params: { field, ...buildParams(args) },
+ });
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /staff/task-lists/:taskListId ───────────────────────────────────
+ const fetchTaskList = useCallback(
+ (taskListId) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/${taskListId}`);
+ setTaskList(res.data?.data ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists ──────────────────────────────────────────────
+ // body: { name, description, group_ids: ["27", "28"] }
+ const addTaskList = useCallback(
+ (payload) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists`, payload);
+ const created = res.data?.data;
+ if (created) setTaskLists((prev) => [created, ...prev]);
+ toast.success("Task list created.");
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── PUT /staff/task-lists/:taskListId ───────────────────────────────────
+ const updateTaskList = useCallback(
+ (taskListId, payload) =>
+ request(async () => {
+ const res = await api.put(`${BASE}/task-lists/${taskListId}`, payload);
+ const updated = res.data?.data;
+ if (updated) {
+ setTaskLists((prev) =>
+ prev.map((tl) => (tl.task_list_id === taskListId ? { ...tl, ...updated } : tl))
+ );
+ if (taskList?.task_list_id === taskListId)
+ setTaskList((prev) => ({ ...prev, ...updated }));
+ }
+ toast.success("Task list updated.");
+ return res.data;
+ }),
+ [request, taskList]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/archive ──────────────────────────
+ const archiveTaskList = useCallback(
+ (taskListId) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/archive`);
+ setTaskLists((prev) => prev.filter((tl) => tl.task_list_id !== taskListId));
+ if (taskList?.task_list_id === taskListId) setTaskList(null);
+ toast.success("Task list archived.");
+ return res.data;
+ }),
+ [request, taskList]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/restore ──────────────────────────
+ const restoreTaskList = useCallback(
+ (taskListId) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/restore`);
+ setTaskLists((prev) => prev.filter((tl) => tl.task_list_id !== taskListId));
+ toast.success("Task list restored.");
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists/bulk-archive ─────────────────────────────────
+ const bulkArchiveTaskLists = useCallback(
+ (ids) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/bulk-archive`, { ids });
+ const { archived_ids = [] } = res.data?.data ?? {};
+ setTaskLists((prev) =>
+ prev.filter((tl) => !archived_ids.includes(tl.task_list_id))
+ );
+ toast.success(`${archived_ids.length} task list(s) archived.`);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists/bulk-restore ─────────────────────────────────
+ const bulkRestoreTaskLists = useCallback(
+ (ids) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/bulk-restore`, { ids });
+ const { restored_ids = [] } = res.data?.data ?? {};
+ setTaskLists((prev) =>
+ prev.filter((tl) => !restored_ids.includes(tl.task_list_id))
+ );
+ toast.success(`${restored_ids.length} task list(s) restored.`);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ════════════════════════════════════════════════════════════════════════════
+ // TASKS
+ // ════════════════════════════════════════════════════════════════════════════
+
+ // ─── GET /staff/task-lists/:taskListId/tasks ─────────────────────────────
+ const fetchTasks = useCallback(
+ (taskListId, args = {}) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks`, {
+ params: buildParams(args),
+ });
+ const payload = res.data?.data;
+ setTasks(payload?.rows ?? payload ?? []);
+ setTaskAttrs(payload?.attributes ?? []);
+ setTaskPagination(payload?.pagination ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /staff/task-lists/:taskListId/tasks/archived ────────────────────
+ const fetchArchivedTasks = useCallback(
+ (taskListId, args = {}) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks/archived`, {
+ params: buildParams(args),
+ });
+ const payload = res.data?.data;
+ setTasks(payload?.rows ?? payload ?? []);
+ setTaskAttrs(payload?.attributes ?? []);
+ setTaskPagination(payload?.pagination ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /staff/task-lists/:taskListId/tasks/field-values ────────────────
+ const fetchTaskFieldValues = useCallback(
+ (taskListId, field, args = {}) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks/field-values`, {
+ params: { field, ...buildParams(args) },
+ });
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /staff/task-lists/:taskListId/tasks/:taskId ─────────────────────
+ const fetchTask = useCallback(
+ (taskListId, taskId) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks/${taskId}`);
+ setTask(res.data?.data ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/tasks ────────────────────────────
+ // body: { name, description, deadline, requirements: [{ type, ...fields }] }
+ const addTask = useCallback(
+ (taskListId, payload) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks`, payload);
+ const created = res.data?.data;
+ if (created) {
+ setTasks((prev) => [...prev, created]);
+ setTaskLists((prev) =>
+ prev.map((tl) =>
+ tl.task_list_id === taskListId
+ ? { ...tl, tasks: [...(tl.tasks ?? []), created] }
+ : tl
+ )
+ );
+ }
+ toast.success("Task created.");
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── PUT /staff/task-lists/:taskListId/tasks/:taskId ─────────────────────
+ const updateTask = useCallback(
+ (taskListId, taskId, payload) =>
+ request(async () => {
+ const res = await api.put(`${BASE}/task-lists/${taskListId}/tasks/${taskId}`, payload);
+ const updated = res.data?.data;
+ if (updated) {
+ setTasks((prev) =>
+ prev.map((t) => (t.task_id === taskId ? { ...t, ...updated } : t))
+ );
+ setTaskLists((prev) =>
+ prev.map((tl) =>
+ tl.task_list_id === taskListId
+ ? {
+ ...tl,
+ tasks: tl.tasks?.map((t) =>
+ t.task_id === taskId ? { ...t, ...updated } : t
+ ),
+ }
+ : tl
+ )
+ );
+ if (task?.task_id === taskId) setTask((prev) => ({ ...prev, ...updated }));
+ }
+ toast.success("Task updated.");
+ return res.data;
+ }),
+ [request, task]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/tasks/:taskId/archive ────────────
+ const archiveTask = useCallback(
+ (taskListId, taskId) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/${taskId}/archive`);
+ setTasks((prev) => prev.filter((t) => t.task_id !== taskId));
+ setTaskLists((prev) =>
+ prev.map((tl) =>
+ tl.task_list_id === taskListId
+ ? { ...tl, tasks: tl.tasks?.filter((t) => t.task_id !== taskId) }
+ : tl
+ )
+ );
+ toast.success("Task archived.");
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/tasks/:taskId/restore ────────────
+ const restoreTask = useCallback(
+ (taskListId, taskId) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/${taskId}/restore`);
+ setTasks((prev) => prev.filter((t) => t.task_id !== taskId));
+ toast.success("Task restored.");
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/tasks/bulk-archive ───────────────
+ const bulkArchiveTasks = useCallback(
+ (taskListId, ids) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/bulk-archive`, { ids });
+ const { archived_ids = [] } = res.data?.data ?? {};
+ setTasks((prev) => prev.filter((t) => !archived_ids.includes(t.task_id)));
+ toast.success(`${archived_ids.length} task(s) archived.`);
+ return res.data;
+ }),
+ [request]
+ );
+
+ // ─── POST /staff/task-lists/:taskListId/tasks/bulk-restore ───────────────
+ const bulkRestoreTasks = useCallback(
+ (taskListId, ids) =>
+ request(async () => {
+ const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/bulk-restore`, { ids });
+ const { restored_ids = [] } = res.data?.data ?? {};
+ setTasks((prev) => prev.filter((t) => !restored_ids.includes(t.task_id)));
+ toast.success(`${restored_ids.length} task(s) restored.`);
+ return res.data;
+ }),
+ [request]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/contexts/StaffUserContext.jsx b/src/contexts/StaffUserContext.jsx
new file mode 100644
index 0000000..7621841
--- /dev/null
+++ b/src/contexts/StaffUserContext.jsx
@@ -0,0 +1,92 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffUserContext = createContext(null);
+
+export const useStaffUsers = () => {
+ const ctx = useContext(StaffUserContext);
+ if (!ctx) throw new Error("useStaffUsers must be used inside StaffUserProvider");
+ return ctx;
+};
+
+const PAGINATION_INIT = {
+ page: 1,
+ limit: 10,
+ totalRecords: 0,
+ totalPages: 0,
+ hasPrevPage: false,
+ hasNextPage: false,
+};
+
+const BASE = "/staff";
+
+export const StaffUserProvider = ({ children }) => {
+ const [users, setUsers] = useState([]);
+ const [user, setUser] = useState(null);
+ const [pagination, setPagination] = useState(PAGINATION_INIT);
+ const [attributes, setAttributes] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ const request = useCallback(async (fn) => {
+ setLoading(true);
+ setError(null);
+ try {
+ return await fn();
+ } catch (err) {
+ const message = err?.response?.data?.message || err.message || "Something went wrong.";
+ setError(message);
+ toast.error(message);
+ return null;
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ // ─── GET /api/staff/users ─────────────────────────────────────────────────
+ // Returns users scoped to the logged-in staff member's groups.
+ // Optional query: group_id or group_code to filter to one group.
+ const fetchUsers = useCallback(
+ ({ page = 1, limit = 10, group_id, group_code, filters = [], sort = [] } = {}) =>
+ request(async () => {
+ const { data } = await api.get(`${BASE}/users`, {
+ params: {
+ page, limit,
+ ...(group_id && { group_id }),
+ ...(group_code && { group_code }),
+ filters: filters.length ? JSON.stringify(filters) : undefined,
+ sort: sort.length ? JSON.stringify(sort) : undefined,
+ },
+ });
+ const final_data = data?.data;
+ setUsers(final_data?.data ?? []);
+ setPagination(final_data?.pagination ?? PAGINATION_INIT);
+ setAttributes(final_data?.attributes ?? []);
+ return data?.data;
+ }),
+ [request]
+ );
+
+ // ─── GET /api/staff/users/:user_id ───────────────────────────────────────
+ // Returns a single user profile — only if they share a group with the staff member.
+ const fetchUser = useCallback(
+ (userId) =>
+ request(async () => {
+ const res = await api.get(`${BASE}/users/${userId}`);
+ setUser(res.data?.data ?? null);
+ return res.data;
+ }),
+ [request]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/contexts/provider/StaffProvider.jsx b/src/contexts/provider/StaffProvider.jsx
new file mode 100644
index 0000000..130f49b
--- /dev/null
+++ b/src/contexts/provider/StaffProvider.jsx
@@ -0,0 +1,25 @@
+// ─── StaffProviders.jsx ───────────────────────────────────────────────────────
+// Wrap all staff contexts together so you only need one import in your router.
+//
+// Usage in App.jsx / layout:
+// import { StaffProviders } from "@/contexts/staff";
+//
+
+
+
+ {children}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/admin/pages/task_list/EditTaskList.jsx b/src/modules/admin/pages/task_list/EditTaskList.jsx
index b8a26a1..2360c1a 100644
--- a/src/modules/admin/pages/task_list/EditTaskList.jsx
+++ b/src/modules/admin/pages/task_list/EditTaskList.jsx
@@ -86,7 +86,7 @@ export default function EditTaskList() {
toUnassign.length ? unassignGroups(taskListId, toUnassign) : Promise.resolve(),
]);
- navigate(`/admin/taskList/${taskListId}`);
+ navigate(`/admin/taskList`);
};
// ── Loading skeleton ──────────────────────────────────────────────────────
diff --git a/src/modules/auth/pages/ChangePassword.jsx b/src/modules/auth/pages/ChangePassword.jsx
new file mode 100644
index 0000000..bc4b28b
--- /dev/null
+++ b/src/modules/auth/pages/ChangePassword.jsx
@@ -0,0 +1,173 @@
+/***********************************************************************************************************************************************************************
+ * File Name: ChangePasswordPage.jsx
+ * Type of Program: Frontend Page
+ * Description: Forced password change page shown after first login when
+ * must_change_password is true. Redirects to the user's dashboard
+ * on success and clears the flag via the backend.
+ * Author: rgrgogu
+ * Date Created: May 23, 2026
+ ***********************************************************************************************************************************************************************/
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Eye, EyeOff, LoaderCircle, ShieldCheck } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+const schema = z
+ .object({
+ new_password: z
+ .string()
+ .min(8, 'Password must be at least 8 characters.')
+ .regex(/[A-Z]/, 'Must contain at least one uppercase letter.')
+ .regex(/[a-z]/, 'Must contain at least one lowercase letter.')
+ .regex(/[0-9]/, 'Must contain at least one number.')
+ .regex(/[^A-Za-z0-9]/, 'Must contain at least one special character.'),
+ confirm_password: z.string().min(1, 'Please confirm your password.'),
+ })
+ .refine((d) => d.new_password === d.confirm_password, {
+ path: ['confirm_password'],
+ message: 'Passwords do not match.',
+ });
+
+// ─── Field wrapper ─────────────────────────────────────────────────────────────
+function Field({ label, error, children }) {
+ return (
+
+
{label}
+ {children}
+ {error &&
{error}
}
+
+
+ {visible ?
+
+ );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+export default function ChangePassword() {
+ const navigate = useNavigate();
+ const { user, setUser } = useAuth();
+
+ const [showNew, setShowNew] = useState(false);
+ const [showConfirm, setShowConfirm] = useState(false);
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: { new_password: '', confirm_password: '' },
+ });
+
+ const onSubmit = async ({ new_password }) => {
+ try {
+ await api.post('/auth/change-password', { new_password });
+
+ // Update local user state so must_change_password is cleared
+ setUser((prev) => ({ ...prev, must_change_password: false }));
+
+ toast.success('Password changed successfully. Welcome!');
+
+ // Redirect to the correct dashboard
+ switch (user?.acc_type) {
+ case 'admin': navigate('/admin'); break;
+ case 'staff': navigate('/staff'); break;
+ case 'client': navigate('/client'); break;
+ default: navigate('/');
+ }
+ } catch (err) {
+ toast.error(err?.response?.data?.message || 'Could not change password.');
+ }
+ };
+
+ return (
+
+
+
+ {/* Header */}
+
+
+
+
Set your password
+
+ Your account requires a new password before you can continue.
+
+
+
+ {/* Form */}
+
+
+
+
+ No task lists assigned to this group.
+
+ );
+ }
+
+ return (
+
+ {/* Task list selector — only shown when there are multiple */}
+ {taskLists.length > 1 && (
+
+ {taskLists.map((tl) => (
+ setSelectedId(tl.task_list_id)}
+ className={cn(
+ "text-xs px-3 py-1.5 rounded-md border transition-colors",
+ selectedId === tl.task_list_id
+ ? "bg-primary text-primary-foreground border-primary"
+ : "border-border hover:bg-muted"
+ )}
+ >
+ {tl.name}
+
+ ))}
+
+ )}
+
+ {/* Loading */}
+ {loading && (
+
+ )}
+
+ {/* Matrix table */}
+ {progress && !loading && (
+
+
+
+
+
+ Member
+
+ {progress.data[0]?.tasks.map(({ task }) => (
+
+ {task.name}
+
+ ))}
+
+ Progress
+
+
+
+
+ {progress.data.map(({ user, tasks, completed_count, total_tasks }) => {
+ const fullName = user.personal_info?.name?.full_name ?? user.email ?? "";
+ const pct = total_tasks
+ ? Math.round((completed_count / total_tasks) * 100)
+ : 0;
+
+ return (
+
+
+ {fullName}
+
+
+ {tasks.map(({ task, completion }) => (
+
+
+ {completion.status === "completed" ? (
+
+
+ ) : (
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {completed_count}/{total_tasks}
+
+
+
+ );
+ })}
+
+
+
+ )}
+
+ {progress && !loading && progress.data.length === 0 && (
+
+ No members found for this task list.
+
+ )}
+
e.key === "Enter" && onClick?.()}
+ >
+
+ {/* Header */}
+
+
+
{group.name}
+ {group.description && (
+
+ {group.description}
+
+ )}
+
+ {group.group_code && (
+
+ {group.group_code}
+
+ )}
+
+ {avatarSlice.map((init, i) => (
+
+ {init}
+
+ ))}
+ {overflow > 0 && (
+
+ +{overflow}
+
+ )}
+ {members.length === 0 && (
+
No members yet
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/modules/staff/components/MemberDetailTabs.jsx b/src/modules/staff/components/MemberDetailTabs.jsx
new file mode 100644
index 0000000..aaab631
--- /dev/null
+++ b/src/modules/staff/components/MemberDetailTabs.jsx
@@ -0,0 +1,101 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+
+function formatDate(iso) {
+ if (!iso) return "—";
+ return new Date(iso).toLocaleDateString("en-PH", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+}
+
+function InfoRow({ label, value }) {
+ return (
+
+ {label}
+ {value || "—"}
+
+ );
+}
+
+export default function MemberDetailTabs({ member }) {
+ const info = member.personal_info ?? {};
+ const name = info.name ?? {};
+ const phones = info.phone_number ?? [];
+ const addresses = info.addresses ?? [];
+
+ return (
+
+
+ Personal details
+ User activity
+
+
+ {/* Personal details */}
+
+ `+${p.country_code} ${p.number} (${p.phone_type})`).join(", ")
+ : null
+ }
+ />
+ a.full_address).join("; ")
+ : null
+ }
+ />
+
+ {/* Account info section */}
+
+
+ Account type
+
+ {member.acc_type}
+
+
+
+ Status
+
+
+
+
+
+
+ {/* Activity */}
+
+
+ {[
+ { label: "Tasks assigned", value: "—" },
+ { label: "Tasks completed", value: "—" },
+ { label: "Last active", value: "—" },
+ ].map(({ label, value }) => (
+
+ ))}
+
+ No activity recorded yet.
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/staff/components/MemberRow.jsx b/src/modules/staff/components/MemberRow.jsx
new file mode 100644
index 0000000..c62fdc0
--- /dev/null
+++ b/src/modules/staff/components/MemberRow.jsx
@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+
+const AVATAR_COLORS = [
+ "bg-emerald-100 text-emerald-800",
+ "bg-purple-100 text-purple-800",
+ "bg-amber-100 text-amber-800",
+ "bg-blue-100 text-blue-800",
+ "bg-pink-100 text-pink-800",
+];
+
+/**
+ * MemberRow
+ * @param {object} member - User object from API
+ * @param {number} colorIndex - Index to pick avatar color from palette
+ */
+export default function MemberRow({ member, colorIndex = 0 }) {
+ const fullName = member.personal_info?.name?.full_name ?? member.email ?? "";
+ const initials = fullName
+ .split(" ")
+ .map((n) => n[0])
+ .join("")
+ .toUpperCase()
+ .slice(0, 2) || "?";
+
+ const color = AVATAR_COLORS[colorIndex % AVATAR_COLORS.length];
+
+ return (
+
+ {/* Avatar */}
+
+ {initials}
+
+
+ {/* Info */}
+
+
{fullName}
+
{member.email}
+
+
+ {/* Active badge */}
+
+ {member.is_active ? "active" : "inactive"}
+
+
+ —
+
+ );
+ }
+
+ const passed = parseFloat(score) >= passingScore;
+
+ return (
+
+ {parseFloat(score).toFixed(1)}%
+
+ );
+}
diff --git a/src/modules/staff/components/TaskListDetail.jsx b/src/modules/staff/components/TaskListDetail.jsx
new file mode 100644
index 0000000..943a6a1
--- /dev/null
+++ b/src/modules/staff/components/TaskListDetail.jsx
@@ -0,0 +1,256 @@
+import { useState, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StatGrid } from "@/components/generic/Dashboard/StatGrid";
+import { PieBreakdown } from "@/components/generic/Dashboard/PieBreakdown";
+import { BarBreakdown } from "@/components/generic/Dashboard/BarBreakdown";
+
+const PAGE_SIZE = 10;
+
+const STATUS_LABEL = {
+ completed: "Completed",
+ in_progress: "In progress",
+ pending: "Pending",
+ not_started: "Not started",
+};
+
+function formatDate(iso) {
+ if (!iso) return "—";
+ return new Date(iso).toLocaleDateString("en-PH", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+}
+
+function StatusBadge({ status }) {
+ const map = {
+ completed: "bg-emerald-100 text-emerald-800",
+ in_progress: "bg-blue-100 text-blue-800",
+ pending: "bg-amber-100 text-amber-800",
+ not_started: "bg-slate-100 text-slate-700",
+ };
+ return (
+
+ {STATUS_LABEL[status] ?? status ?? "Not started"}
+
+ );
+}
+
+export default function TaskListDetail({ taskList }) {
+ const tasks = taskList.tasks ?? [];
+ const [search, setSearch] = useState("");
+ const [page, setPage] = useState(1);
+
+ // ── Derived stats ───────────────────────────────────────────────────────
+ const counts = useMemo(() => {
+ const total = tasks.length;
+ const completed = tasks.filter((t) => t.status === "completed").length;
+ const inProgress = tasks.filter((t) => t.status === "in_progress").length;
+ const pending = tasks.filter((t) => t.status === "pending").length;
+ const notStarted = tasks.filter((t) => !t.status || t.status === "not_started").length;
+ const pct = total ? Math.round((completed / total) * 100) : 0;
+ return { total, completed, inProgress, pending, notStarted, pct };
+ }, [tasks]);
+
+ // StatGrid data
+ const summaryStats = [
+ { key: "total", label: "Total tasks", value: counts.total },
+ { key: "completed", label: "Completed", value: counts.completed },
+ { key: "in_progress", label: "In progress", value: counts.inProgress },
+ { key: "pending", label: "Pending", value: counts.pending },
+ { key: "not_started", label: "Not started", value: counts.notStarted },
+ ];
+
+ // PieBreakdown: status distribution
+ const pieData = useMemo(() => [
+ { label: "Completed", value: counts.completed },
+ { label: "In progress", value: counts.inProgress },
+ { label: "Pending", value: counts.pending },
+ { label: "Not started", value: counts.notStarted },
+ ].filter((d) => d.value > 0), [counts]);
+
+ // BarBreakdown: per-task completion (first 20)
+ const barData = useMemo(() =>
+ tasks.slice(0, 20).map((t, i) => ({
+ label: t.name
+ ? (t.name.length > 14 ? t.name.slice(0, 12) + "…" : t.name)
+ : `Task ${i + 1}`,
+ value: t.status === "completed" ? 1 : 0,
+ })),
+ [tasks]
+ );
+
+ // ── Tasks DataTable ─────────────────────────────────────────────────────
+ const filtered = useMemo(() => {
+ const q = search.toLowerCase();
+ if (!q) return tasks;
+ return tasks.filter((t) =>
+ (t.name ?? "").toLowerCase().includes(q) ||
+ (t.status ?? "").toLowerCase().includes(q)
+ );
+ }, [tasks, search]);
+
+ const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+ const safePage = Math.min(page, totalPages);
+ const slice = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+
+ return (
+
+
+ Summary
+ Tasks ({tasks.length})
+
+
+ {/* ── Summary ─────────────────────────────────────────────────────── */}
+
+
+ {/* Stat cards via StatGrid */}
+
+
+ Overall completion
+ {counts.pct}%
+
+
+
+ No tasks in this list yet.
+
+ ) : (
+
+ {/* Status breakdown pie */}
+
+
+ {/* Per-task bar (horizontal) */}
+
20 ? " (first 20)" : ""}`}
+ data={barData}
+ height={Math.max(160, barData.length * 32 + 40)}
+ yAxisWidth={100}
+ />
+
+
Created: {formatDate(taskList.createdAt)}
+
Assigned: {formatDate(taskList.TaskListGroup?.assignedAt)}
+
+
+ {/* ── Tasks DataTable ──────────────────────────────────────────────── */}
+
+
+
+
+
+ #
+ Task name
+ Status
+ Due date
+
+
+
+ {slice.length === 0 ? (
+
+
+ {tasks.length === 0 ? "No tasks in this list." : "No tasks match your search."}
+
+
+ ) : (
+ slice.map((task, i) => (
+
+
+ {(safePage - 1) * PAGE_SIZE + i + 1}
+
+
+ {task.name ?? `Task ${i + 1}`}
+
+
+
+
+ {formatDate(task.due_date)}
+
+
+ ))
+ )}
+
+
+
+
+ {`${(safePage - 1) * PAGE_SIZE + 1}–${Math.min(safePage * PAGE_SIZE, filtered.length)} of ${filtered.length}`}
+
+
+ setPage(safePage - 1)}
+ >
+ Previous
+
+ {Array.from({ length: totalPages }, (_, i) => i + 1)
+ .filter((p) => p === 1 || p === totalPages || Math.abs(p - safePage) <= 1)
+ .reduce((acc, p, i, arr) => {
+ if (i > 0 && p - arr[i - 1] > 1) acc.push("...");
+ acc.push(p);
+ return acc;
+ }, [])
+ .map((p, idx) =>
+ p === "..." ? (
+ …
+ ) : (
+ setPage(p)}
+ >
+ {p}
+
+ )
+ )}
+ setPage(safePage + 1)}
+ >
+ Next
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/staff/components/TaskListTable.jsx b/src/modules/staff/components/TaskListTable.jsx
new file mode 100644
index 0000000..d275596
--- /dev/null
+++ b/src/modules/staff/components/TaskListTable.jsx
@@ -0,0 +1,202 @@
+/***********************************************************************************************************************************************************************
+ * File Name: TaskListTable.jsx (staff)
+ * Type of Program: Component
+ * Description: DataTable-based task list table for staff, scoped to their groups.
+ * Mirrors the admin TaskListTable pattern exactly.
+ ***********************************************************************************************************************************************************************/
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useStaffTasks } from "@/contexts/StaffTaskContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+
+import { buildDataColumns, columnPinning } from "../config/task_list/columns.config";
+import { buildToolbarActions } from "../config/task_list/toolbar.config";
+import { buildSelectionActions } from "../config/task_list/selection.config";
+import { buildRowActions } from "../config/task_list/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function TaskListTable() {
+ const navigate = useNavigate();
+
+ const {
+ taskLists, attributes, pagination, setPagination, loading,
+ fetchTaskLists, fetchArchivedTaskLists, fetchTaskListFieldValues,
+ archiveTaskList, restoreTaskList,
+ bulkArchiveTaskLists, bulkRestoreTaskLists,
+ } = useStaffTasks();
+
+ const [showArchived, setShowArchived] = useState(false);
+ const [archiveTarget, setArchiveTarget] = useState(null);
+ const [restoreTarget, setRestoreTarget] = useState(null);
+ const [archiveIds, setArchiveIds] = useState(null);
+ const [restoreIds, setRestoreIds] = useState(null);
+
+ const tableRefsRef = useRef({
+ getFilters: () => [],
+ getSort: () => [],
+ resetSelection: () => {},
+ tableInstance: null,
+ });
+
+ const handleRefsReady = (refs) => {
+ tableRefsRef.current = refs;
+ };
+
+ // ── Toggle archived view ──────────────────────────────────────────────────
+ const handleToggleArchived = useCallback(() => {
+ const next = !showArchived;
+ setShowArchived(next);
+ fetchTaskLists({
+ page: 1,
+ limit: pagination?.limit ?? 10,
+ filters: tableRefsRef.current.getFilters(),
+ sort: tableRefsRef.current.getSort(),
+ archived: next,
+ });
+ }, [showArchived, pagination, fetchTaskLists]);
+
+ // ── Refetch after any archive/restore action ──────────────────────────────
+ const handleSuccess = () => {
+ setArchiveTarget(null);
+ setRestoreTarget(null);
+ setArchiveIds(null);
+ setRestoreIds(null);
+ tableRefsRef.current.resetSelection?.();
+ const fetcher = showArchived ? fetchArchivedTaskLists : fetchTaskLists;
+ fetcher({
+ page: 1,
+ limit: pagination?.limit ?? 10,
+ filters: tableRefsRef.current.getFilters(),
+ sort: tableRefsRef.current.getSort(),
+ });
+ };
+
+ // ── Export config ─────────────────────────────────────────────────────────
+ const exportConfig = useMemo(() => ({
+ allData: taskLists,
+ attributes,
+ filename: `${getTimestamp()}_TaskLists`,
+ sheetName: "Task Lists",
+ }), [taskLists, attributes]);
+
+ // ── Row actions ───────────────────────────────────────────────────────────
+ const rowActions = buildRowActions({
+ navigate,
+ onArchive: (row) => setArchiveTarget(row),
+ onRestore: (row) => setRestoreTarget(row),
+ showArchived,
+ });
+
+ // ── Toolbar ───────────────────────────────────────────────────────────────
+ const toolbarActions = buildToolbarActions({
+ fetchTaskLists,
+ fetchArchivedTaskLists,
+ pagination,
+ navigate,
+ exportConfig,
+ showArchived,
+ onToggleArchived: handleToggleArchived,
+ getFilters: () => tableRefsRef.current.getFilters(),
+ getSort: () => tableRefsRef.current.getSort(),
+ getTableInstance: () => tableRefsRef.current.tableInstance,
+ });
+
+ // ── Selection ─────────────────────────────────────────────────────────────
+ const selectionActions = buildSelectionActions({
+ exportConfig,
+ showArchived,
+ onBulkArchive: (ids) => setArchiveIds(ids),
+ onBulkRestore: (ids) => setRestoreIds(ids),
+ getTableInstance: () => tableRefsRef.current.tableInstance,
+ });
+
+ // ── Columns ───────────────────────────────────────────────────────────────
+ const columns = useMemo(
+ () => buildDataColumns(attributes, rowActions),
+ [attributes, rowActions]
+ );
+
+ return (
+ <>
+ (
+ !v && setArchiveTarget(null)}
+ entity={archiveTarget}
+ entityLabel="Task List"
+ getName={(r) => r?.name}
+ onArchive={(entity) => archiveTaskList(entity?.task_list_id)}
+ loading={loading}
+ onSuccess={handleSuccess}
+ />
+
+ {/* Single restore */}
+ !v && setRestoreTarget(null)}
+ entity={restoreTarget}
+ entityLabel="Task List"
+ getName={(r) => r?.name}
+ onRestore={(entity) => restoreTaskList(entity?.task_list_id)}
+ loading={loading}
+ onSuccess={handleSuccess}
+ />
+
+ {/* Bulk archive */}
+ !v && setArchiveIds(null)}
+ ids={archiveIds ?? []}
+ entityLabel="Task List"
+ onArchive={({ ids }) => bulkArchiveTaskLists(ids)}
+ loading={loading}
+ onSuccess={handleSuccess}
+ />
+
+ {/* Bulk restore */}
+ !v && setRestoreIds(null)}
+ ids={restoreIds ?? []}
+ entityLabel="Task List"
+ onRestore={({ ids }) => bulkRestoreTaskLists(ids)}
+ loading={loading}
+ onSuccess={handleSuccess}
+ />
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/staff/components/TaskListsTab.jsx b/src/modules/staff/components/TaskListsTab.jsx
new file mode 100644
index 0000000..39e9686
--- /dev/null
+++ b/src/modules/staff/components/TaskListsTab.jsx
@@ -0,0 +1,164 @@
+import { useState, useMemo } from "react";
+import { Eye } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { PieBreakdown } from "@/components/generic/Dashboard/PieBreakdown";
+import { BarBreakdown } from "@/components/generic/Dashboard/BarBreakdown";
+import TaskListDetail from "./TaskListDetail";
+
+function formatDate(iso) {
+ if (!iso) return "—";
+ return new Date(iso).toLocaleDateString("en-PH", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+}
+
+export default function TaskListsTab({ taskLists = [] }) {
+ const [selected, setSelected] = useState(null);
+
+ // PieBreakdown: overall task completion status across all lists
+ const completionPieData = useMemo(() => {
+ let completed = 0, inProgress = 0, pending = 0, notStarted = 0;
+ taskLists.forEach((tl) => {
+ (tl.tasks ?? []).forEach((t) => {
+ if (t.status === "completed") completed++;
+ else if (t.status === "in_progress") inProgress++;
+ else if (t.status === "pending") pending++;
+ else notStarted++;
+ });
+ });
+ return [
+ { label: "Completed", value: completed },
+ { label: "In progress", value: inProgress },
+ { label: "Pending", value: pending },
+ { label: "Not started", value: notStarted },
+ ].filter((d) => d.value > 0);
+ }, [taskLists]);
+
+ // BarBreakdown: total tasks per list
+ const tasksPerListData = useMemo(() =>
+ taskLists.map((tl) => ({
+ label: tl.name.length > 20 ? tl.name.slice(0, 18) + "…" : tl.name,
+ value: tl.tasks?.length ?? 0,
+ })),
+ [taskLists]
+ );
+
+ const hasAnyTasks = taskLists.some((tl) => (tl.tasks?.length ?? 0) > 0);
+
+ return (
+
+ {/* Charts — only shown when there's actual task data */}
+ {taskLists.length > 0 && hasAnyTasks && (
+
+ )}
+
+ {/* Table */}
+
+
+
+
+ Name
+ Tasks
+ Progress
+ Assigned
+
+
+
+ {taskLists.length === 0 ? (
+
+
+ No task lists assigned to this group.
+
+
+ ) : (
+ taskLists.map((tl) => {
+ const total = tl.tasks?.length ?? 0;
+ const done = tl.tasks?.filter((t) => t.status === "completed").length ?? 0;
+ const pct = total ? Math.round((done / total) * 100) : 0;
+
+ return (
+ setSelected(tl)}
+ >
+ {tl.name}
+
+ {total} task{total !== 1 ? "s" : ""}
+
+
+
+
+
+ {formatDate(tl.TaskListGroup?.assignedAt)}
+
+
+ { e.stopPropagation(); setSelected(tl); }}
+ >
+
+
+
+ );
+ })
+ )}
+
+
+
+
+ {/* Task list detail dialog */}
+
!open && setSelected(null)}>
+
+
+ {selected?.name}
+ {selected?.description && (
+ {selected.description}
+ )}
+
+ {selected &&
+
+
+ {/* Name */}
+
{task.name}
+
+ {/* Requirement type badge */}
+ {reqType && (
+
+ {REQ_TYPE_LABELS[reqType]}
+
+ )}
+
+ {/* Status badge */}
+ {task.status && (
+
+ {task.status.replace("_", " ")}
+
+ )}
+
+ {/* Deadline */}
+ {task.deadline && (
+
+ {format(new Date(task.deadline), "MMM d")}
+
+ )}
+
+ {/* Edit / Delete */}
+ {(onEdit || onDelete) && (
+
+ {onEdit && (
+
{ e.stopPropagation(); onEdit(); }}
+ title="Edit task"
+ >
+
+ )}
+ {onDelete && (
+
{ e.stopPropagation(); onDelete(); }}
+ title="Delete task"
+ >
+
+ )}
+
+ )}
+
(
+ !open && setSelected(null)}>
+
+
+
+ {selected && (
+
m.user_id === selected.user_id) % AVATAR_COLORS.length
+ ]
+ }`}
+ >
+ {getInitials(selected)}
+
+ )}
+
+
+ {selected && getFullName(selected)}
+
+
+ {selected?.personal_info?.occupation} · {selected?.acc_type}
+
+
+
+ {selected &&
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/staff/config/members/columns.config.jsx b/src/modules/staff/config/members/columns.config.jsx
new file mode 100644
index 0000000..e300134
--- /dev/null
+++ b/src/modules/staff/config/members/columns.config.jsx
@@ -0,0 +1,43 @@
+// config/task_list/columns.config.jsx
+// Column definitions and pinning config for the Staff Task List table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { OverflowBadges } from "@/components/generic/OverflowBadges";
+
+export const columnPinning = {
+ right: ["actions"],
+ left: [],
+};
+
+const cellOverrides = {
+ // Example: render assigned groups as badges
+ groups: (info) => (
+
+ {/* Sidebar */}
+
+
+
+
+
+ {navItems.map(({ to, label, icon: Icon, end }) => (
+
+ cn(
+ 'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
+ isActive
+ ? 'bg-secondary text-foreground font-medium'
+ : 'text-muted-foreground hover:bg-secondary hover:text-foreground'
+ )
+ }
+ >
+
+ ))}
+
+
+
+
+
+
*/}
+
+
+ {/* Main */}
+
+ {/* Topbar */}
+
+
+ {/* Page content */}
+
+
+
+
+
+
+
Dashboard
+
+ {/* ── Stat tiles ──────────────────────────────────────────────────── */}
+
+ {STATS.map(({ label, value, icon: Icon, sub }) => (
+
+
+
+
+ {loading ? "—" : value}
+
+ {sub}
+
+
+ ))}
+
+
+ {/* ── Group tiles ──────────────────────────────────────────────────── */}
+
+
+ My groups
+
+ {loading ? (
+
+ {[0, 1].map((i) => (
+
+ ) : groups.length === 0 ? (
+
+ You are not assigned to any groups yet.
+
+ ) : (
+
+ {groups.map((group) => (
+ navigate(`/staff/groups/${group.group_id}`)}
+ />
+ ))}
+
+ )}
+
+
+ {/* ── Recent tasks ─────────────────────────────────────────────────── */}
+
+
+ Recent task activity
+
+
+
+ {recentTasks.length === 0 && !loading && (
+ No tasks yet.
+ )}
+ {recentTasks.map((task) => (
+
+
+
+
+
navigate("/staff/groups")}
+ className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+ >
+
+
Group not found.
+
+ {/* Back */}
+
navigate("/staff/groups")}
+ className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+ >
+
+
+ {/* ── Group header card ───────────────────────────────────────────────── */}
+
+
+
+
+
+ {getInitials(group.name)}
+
+
+
+
{group.name}
+ {group.group_code && (
+
+ {group.group_code}
+
+ )}
+
+ {group.is_active ? "Active" : "Inactive"}
+
+
+ {group.description && (
+
+ {group.description}
+
+ )}
+
+
+
+
+
Created {formatDate(group.createdAt)}
+
Updated {formatDate(group.updatedAt)}
+
+
+
+
{memberPagination?.total ?? "—"}
+
Members
+
+
+
{listCount}
+
Task lists
+
+
+
+ {totalTasks > 0
+ ? `${Math.round((completedTasks / totalTasks) * 100)}%`
+ : "—"}
+
+
Completion
+
+
+
+
+ {/* ── Tabs ───────────────────────────────────────────────────────────── */}
+
+
+
+ Members ({memberPagination?.total ?? 0})
+
+
+ Task lists ({listCount})
+
+
+
+
+ fetchGroupMembers(groupId, params)}
+ fetchMemberFieldValues={(col, params) =>
+ fetchGroupMemberFieldValues(groupId, col, params)
+ }
+ />
+
+
+
+
+
+
+
My groups
+
+ {loading ? (
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+ ) : groups.length === 0 ? (
+
+ You are not assigned to any groups yet.
+
+ ) : (
+
+ {groups.map((group) => (
+ navigate(`/staff/groups/${group.group_id}`)}
+ />
+ ))}
+
+ )}
+
+ {/* ── Header ──────────────────────────────────────────────────────── */}
+
+
Scores & progress
+
+
+
+
+ {groups.map((g) => (
+
+ {g.name}
+
+ ))}
+
+
+
+
+
+
+ Quiz scores
+ Assessment scores
+
+
+ {/* ── Quiz scores ─────────────────────────────────────────────── */}
+
+
+
+
+
+ {quizTasks.length === 0 ? (
+
+ No unit quizzes in this group.
+
+ ) : (
+ quizTasks.map((t) => (
+
+ {t.requirements[0].reference_label ?? t.name}
+
+ ))
+ )}
+
+
+
+ {loading && quizId && (
+
+ )}
+
+ {quizScores && !loading && (
+ <>
+
+
+ {quizScores.quiz?.title ?? "Unit quiz"}
+
+
+ Passing: {quizScores.quiz?.passing_score ?? 70}%
+
+ {quizScores.quiz?.unit?.title && (
+
+ {quizScores.quiz.unit.title}
+
+ )}
+
+ Select a unit quiz above to view scores.
+
+ )}
+
+
+ {/* ── Assessment scores ────────────────────────────────────────── */}
+
+
+
+
+
+ {assessmentTasks.length === 0 ? (
+
+ No course assessments in this group.
+
+ ) : (
+ assessmentTasks.map((t) => (
+
+ {t.requirements[0].reference_label ?? t.name}
+
+ ))
+ )}
+
+
+
+ {loading && assessmentId && (
+
+ )}
+
+ {assessScores && !loading && (
+ <>
+
+
+ {assessScores.assessment?.title ?? "Course assessment"}
+
+
+ Passing: {assessScores.assessment?.passing_score ?? 75}%
+
+ {assessScores.assessment?.course?.title && (
+
+ {assessScores.assessment.course.title}
+
+ )}
+
+ Select a course assessment above to view scores.
+
+ )}
+
+
+
No data yet.
;
+ }
+
+ const COLORS = [
+ "bg-emerald-100 text-emerald-800",
+ "bg-purple-100 text-purple-800",
+ "bg-amber-100 text-amber-800",
+ "bg-blue-100 text-blue-800",
+ "bg-pink-100 text-pink-800",
+ ];
+
+ return (
+
+
+ {data.map(({ user, best_score, attempts, latest }, i) => {
+ const fullName = user.personal_info?.name?.full_name ?? user.email ?? "";
+ const initials = fullName
+ .split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) || "?";
+
+ return (
+
+
+ {initials}
+
+
+
{fullName}
+
+ {attempts.length === 0
+ ? "No attempt yet"
+ : `${attempts.length} attempt${attempts.length !== 1 ? "s" : ""} · best score`}
+
+
+
+
+
+ );
+}
diff --git a/src/modules/staff/pages/TaskListsPage.jsx b/src/modules/staff/pages/TaskListsPage.jsx
new file mode 100644
index 0000000..991974e
--- /dev/null
+++ b/src/modules/staff/pages/TaskListsPage.jsx
@@ -0,0 +1,28 @@
+/***********************************************************************************************************************************************************************
+ * File Name: TaskList.jsx (staff)
+ * Type of Program: Page
+ * Description: Staff task list page — breadcrumb + DataTable via TaskListTable.
+ ***********************************************************************************************************************************************************************/
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import TaskListTable from "../components/TaskListTable";
+
+export default function TaskList() {
+ const items = [
+ { label: "Home", icon: