mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
Adjusted
This commit is contained in:
rgrgogu
@@ -0,0 +1,110 @@
|
||||
// modules/admin/components/user_groups/AddGroupDialog.jsx
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, "Name is required."),
|
||||
description: z.string().min(1, "Description is required."),
|
||||
});
|
||||
|
||||
/**
|
||||
* Dialog for creating a new group.
|
||||
* Matches context: createGroup({ name, description })
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.open
|
||||
* @param {Function} props.onOpenChange
|
||||
* @param {Function} props.onSubmit Called with { name, description }
|
||||
* @param {boolean} [props.loading]
|
||||
*/
|
||||
export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { name: "", description: "" },
|
||||
});
|
||||
|
||||
async function onValid(values) {
|
||||
await onSubmit(values);
|
||||
reset();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
reset();
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[440px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add group</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onValid)} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Group name"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="description">
|
||||
Description <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Brief description of this group"
|
||||
className="resize-none"
|
||||
rows={3}
|
||||
{...register("description")}
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-sm text-destructive">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? "Creating..." : "Add group"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
// modules/admin/components/user_groups/EditGroupDialog.jsx
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, "Name is required."),
|
||||
description: z.string().min(1, "Description is required."),
|
||||
});
|
||||
|
||||
/**
|
||||
* Dialog for editing a group's name and description.
|
||||
* Matches context: updateGroup(gid, { name, description })
|
||||
*
|
||||
* `group` is the full row object from the table — pre-fills name + description.
|
||||
* `values` re-syncs whenever `group` prop changes.
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.open
|
||||
* @param {Function} props.onOpenChange
|
||||
* @param {Object} props.group Row object: { group_id, name, description, ... }
|
||||
* @param {Function} props.onSubmit Called with { name, description }
|
||||
* @param {boolean} [props.loading]
|
||||
*/
|
||||
export function EditGroupDialog({ open, onOpenChange, group, onSubmit, loading }) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
values: {
|
||||
name: group?.name ?? "",
|
||||
description: group?.description ?? "",
|
||||
},
|
||||
});
|
||||
|
||||
async function onValid(values) {
|
||||
await onSubmit(values);
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
reset();
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[440px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit group</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onValid)} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="edit-name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-name"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="edit-description">
|
||||
Description <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
className="resize-none"
|
||||
rows={3}
|
||||
{...register("description")}
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-sm text-destructive">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? "Saving..." : "Save changes"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,121 +1,202 @@
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
// modules/admin/components/user_groups/GroupTable.jsx
|
||||
|
||||
import { useMemo, useRef, useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useUserGroups } from "@/contexts/AdminUserGroupContext";
|
||||
import { useDashboard } from "@/contexts/AdminDashboardContext";
|
||||
|
||||
import DataTable from "@/components/generic/Table/DataTable";
|
||||
import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
|
||||
import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
|
||||
import { TableDashboard } from "@/components/generic/Dashboard/TableDashboard";
|
||||
import { AddGroupDialog } from "./AddGroupDialog";
|
||||
import { EditGroupDialog } from "./EditGroupDialog";
|
||||
|
||||
import { buildDataColumns, columnPinning } from "../../config/user_groups/columns.config";
|
||||
import { buildToolbarActions } from "../../config/user_groups/toolbar.config";
|
||||
import { buildSelectionActions } from "../../config/user_groups/selection.config";
|
||||
import { buildRowActions } from "../../config/user_groups/rowActions.config";
|
||||
|
||||
import { GROUP_STAT_MAP } from "@/data/adminDashboard.data";
|
||||
import { getTimestamp } from "@/utils/timestamp.util";
|
||||
|
||||
export default function GroupTable() {
|
||||
const [archiveTarget, setArchiveTarget] = useState(null); // single: row object
|
||||
const [archiveIds, setArchiveIds] = useState(null); // bulk: array of ids
|
||||
const tableRefsRef = useRef({ getFilters: () => [], getSort: () => [], resetSelection: () => {} });
|
||||
const navigate = useNavigate();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState(null);
|
||||
const [archiveTarget, setArchiveTarget] = useState(null);
|
||||
const [archiveIds, setArchiveIds] = useState(null);
|
||||
|
||||
const {
|
||||
groups,
|
||||
attributes,
|
||||
pagination,
|
||||
setPagination,
|
||||
loading,
|
||||
fetchGroups,
|
||||
fetchGroupFieldValues,
|
||||
deactivateGroup,
|
||||
deactivateGroups,
|
||||
} = useUserGroups();
|
||||
const tableRefsRef = useRef({
|
||||
getFilters: () => [],
|
||||
getSort: () => [],
|
||||
resetSelection: () => { },
|
||||
setFilters: () => { },
|
||||
});
|
||||
|
||||
const exportConfig = {
|
||||
allData: groups,
|
||||
attributes,
|
||||
filename: `${getTimestamp()}_UserGroups`,
|
||||
sheetName: "UserGroups",
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
|
||||
const rowActions = buildRowActions({
|
||||
navigate,
|
||||
onArchive: (row) => setArchiveTarget(row),
|
||||
});
|
||||
const {
|
||||
groups, attributes, pagination, setPagination, loading,
|
||||
fetchGroups, fetchGroupFieldValues,
|
||||
createGroup, updateGroup, deactivateGroup, deactivateGroups,
|
||||
} = useUserGroups();
|
||||
|
||||
const toolbarActions = buildToolbarActions({
|
||||
fetchGroups, pagination, exportConfig, navigate,
|
||||
getFilters: () => tableRefsRef.current.getFilters(),
|
||||
getSort: () => tableRefsRef.current.getSort(),
|
||||
});
|
||||
const { groupsDashboard, fetchGroupsDashboard } = useDashboard();
|
||||
|
||||
const selectionActions = buildSelectionActions({
|
||||
exportConfig,
|
||||
archiveGroup: (row) => setArchiveTarget(row), // single
|
||||
archiveGroups: (ids) => setArchiveIds(ids), // bulk
|
||||
});
|
||||
useEffect(() => {
|
||||
fetchGroupsDashboard();
|
||||
}, []);
|
||||
|
||||
const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes]);
|
||||
// ─── Keep activeFilters in sync for highlight ─────────────────────────────
|
||||
const handleRefsReady = (refs) => {
|
||||
tableRefsRef.current = refs; // ← no override needed
|
||||
};
|
||||
|
||||
const handleArchiveSuccess = () => {
|
||||
setArchiveTarget(null);
|
||||
setArchiveIds(null);
|
||||
tableRefsRef.current.resetSelection?.();
|
||||
fetchGroups({ page: 1, limit: pagination.limit });
|
||||
};
|
||||
const exportConfig = {
|
||||
allData: groups,
|
||||
attributes,
|
||||
filename: `${getTimestamp()}_UserGroups`,
|
||||
sheetName: "UserGroups",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable
|
||||
title="User Groups"
|
||||
data={groups}
|
||||
columns={columns}
|
||||
attributes={attributes}
|
||||
pagination={pagination}
|
||||
setPagination={setPagination}
|
||||
loading={loading}
|
||||
onFetch={fetchGroups}
|
||||
onFetchFilterData={fetchGroupFieldValues}
|
||||
onRefsReady={(refs) => tableRefsRef.current = refs}
|
||||
renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
|
||||
<FilterSheet
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
column={column}
|
||||
attr={attr}
|
||||
data={data}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
columnPinning={columnPinning}
|
||||
toolbarActions={toolbarActions}
|
||||
selectionActions={selectionActions}
|
||||
recordLabel="group"
|
||||
emptyMessage="No user groups match the current filters."
|
||||
/>
|
||||
const rowActions = buildRowActions({
|
||||
navigate,
|
||||
onEdit: (row) => setEditTarget(row),
|
||||
onArchive: (row) => setArchiveTarget(row),
|
||||
});
|
||||
|
||||
{/* Single archive */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveTarget}
|
||||
onOpenChange={(v) => !v && setArchiveTarget(null)}
|
||||
entity={archiveTarget}
|
||||
entityLabel="Group"
|
||||
getName={(g) => g?.name}
|
||||
onArchive={(g) => deactivateGroup(g?.group_id)}
|
||||
loading={loading}
|
||||
onSuccess={handleArchiveSuccess}
|
||||
/>
|
||||
const toolbarActions = buildToolbarActions({
|
||||
fetchGroups, pagination, exportConfig, navigate,
|
||||
onAddGroup: () => setCreateOpen(true),
|
||||
getFilters: () => tableRefsRef.current.getFilters(),
|
||||
getSort: () => tableRefsRef.current.getSort(),
|
||||
});
|
||||
|
||||
{/* Bulk archive */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveIds}
|
||||
onOpenChange={(v) => !v && setArchiveIds(null)}
|
||||
ids={archiveIds ?? []}
|
||||
entityLabel="Group"
|
||||
onArchive={deactivateGroups}
|
||||
loading={loading}
|
||||
onSuccess={handleArchiveSuccess}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
const selectionActions = buildSelectionActions({
|
||||
exportConfig,
|
||||
archiveGroup: (row) => setArchiveTarget(row),
|
||||
archiveGroups: (ids) => setArchiveIds(ids),
|
||||
});
|
||||
|
||||
const columns = useMemo(
|
||||
() => buildDataColumns(attributes, rowActions),
|
||||
[attributes],
|
||||
);
|
||||
|
||||
const handleArchiveSuccess = () => {
|
||||
setArchiveTarget(null);
|
||||
setArchiveIds(null);
|
||||
tableRefsRef.current.resetSelection?.();
|
||||
fetchGroups({ page: 1, limit: pagination.limit });
|
||||
fetchGroupsDashboard();
|
||||
};
|
||||
|
||||
// ─── Attach filterId + filterValue to each stat ───────────────────────────
|
||||
// "archived" and "empty" have no direct column to filter on in this table
|
||||
const dashboardStats = (groupsDashboard?.stats ?? []).map((s) => ({
|
||||
...s,
|
||||
filterId: s.key === "archived" || s.key === "empty" || s.key === "total" ? null : "is_active",
|
||||
filterValue: s.key === "active" ? ["true"]
|
||||
: s.key === "inactive" ? ["false"]
|
||||
: null,
|
||||
}));
|
||||
|
||||
// ─── top_groups bar has no filterable column in this table ────────────────
|
||||
const dashboardBreakdowns = (groupsDashboard?.breakdowns ?? []).map((b) => ({
|
||||
...b,
|
||||
filterId: null,
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Dashboard strip ── */}
|
||||
{groupsDashboard && ( // ← was dashboard?.groups
|
||||
<TableDashboard
|
||||
stats={dashboardStats}
|
||||
breakdowns={dashboardBreakdowns}
|
||||
statMap={GROUP_STAT_MAP}
|
||||
tableRefsRef={tableRefsRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── Data table ── */}
|
||||
<DataTable
|
||||
title="User Groups"
|
||||
data={groups}
|
||||
columns={columns}
|
||||
attributes={attributes}
|
||||
pagination={pagination}
|
||||
setPagination={setPagination}
|
||||
loading={loading}
|
||||
onFetch={fetchGroups}
|
||||
onFetchFilterData={fetchGroupFieldValues}
|
||||
onRefsReady={handleRefsReady}
|
||||
renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
|
||||
<FilterSheet
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
column={column}
|
||||
attr={attr}
|
||||
data={data}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
columnPinning={columnPinning}
|
||||
toolbarActions={toolbarActions}
|
||||
selectionActions={selectionActions}
|
||||
recordLabel="group"
|
||||
emptyMessage="No user groups match the current filters."
|
||||
/>
|
||||
|
||||
{/* Add group */}
|
||||
<AddGroupDialog
|
||||
open={createOpen}
|
||||
onOpenChange={setCreateOpen}
|
||||
loading={loading}
|
||||
onSubmit={async (values) => {
|
||||
await createGroup(values);
|
||||
setCreateOpen(false);
|
||||
fetchGroups({ page: 1, limit: pagination.limit });
|
||||
fetchGroupsDashboard();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Edit group */}
|
||||
<EditGroupDialog
|
||||
open={!!editTarget}
|
||||
onOpenChange={(v) => !v && setEditTarget(null)}
|
||||
group={editTarget}
|
||||
loading={loading}
|
||||
onSubmit={async (values) => {
|
||||
await updateGroup(editTarget?.group_id, values);
|
||||
setEditTarget(null);
|
||||
fetchGroups({ page: 1, limit: pagination.limit });
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Single archive */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveTarget}
|
||||
onOpenChange={(v) => !v && setArchiveTarget(null)}
|
||||
entity={archiveTarget}
|
||||
entityLabel="Group"
|
||||
getName={(g) => g?.name}
|
||||
onArchive={(g) => deactivateGroup(g?.group_id)}
|
||||
loading={loading}
|
||||
onSuccess={handleArchiveSuccess}
|
||||
/>
|
||||
|
||||
{/* Bulk archive */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveIds}
|
||||
onOpenChange={(v) => !v && setArchiveIds(null)}
|
||||
ids={archiveIds ?? []}
|
||||
entityLabel="Group"
|
||||
onArchive={deactivateGroups}
|
||||
loading={loading}
|
||||
onSuccess={handleArchiveSuccess}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +1,53 @@
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
// modules/admin/components/users/UsersTable.jsx
|
||||
|
||||
import { useMemo, useRef, useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useUsers } from "@/contexts/AdminUserContext";
|
||||
import { useDashboard } from "@/contexts/AdminDashboardContext";
|
||||
|
||||
import DataTable from "@/components/generic/Table/DataTable";
|
||||
import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
|
||||
import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
|
||||
import { TableDashboard } from "@/components/generic/Dashboard/TableDashboard";
|
||||
|
||||
import { buildDataColumns, columnPinning } from "../../config/users/columns.config";
|
||||
import { buildToolbarActions } from "../../config/users/toolbar.config";
|
||||
import { buildSelectionActions } from "../../config/users/selection.config";
|
||||
import { buildRowActions } from "../../config/users/rowActions.config";
|
||||
|
||||
import { USER_STAT_MAP } from "@/data/adminDashboard.data";
|
||||
import { getTimestamp } from "@/utils/timestamp.util";
|
||||
|
||||
export default function UsersTable() {
|
||||
const [archiveTarget, setArchiveTarget] = useState(null); // single: row object
|
||||
const [archiveIds, setArchiveIds] = useState(null); // bulk: array of ids
|
||||
const tableRefsRef = useRef({ getFilters: () => [], getSort: () => [], resetSelection: () => { } });
|
||||
const [archiveTarget, setArchiveTarget] = useState(null);
|
||||
const [archiveIds, setArchiveIds] = useState(null);
|
||||
|
||||
const tableRefsRef = useRef({
|
||||
getFilters: () => [],
|
||||
getSort: () => [],
|
||||
resetSelection: () => { },
|
||||
setFilters: () => { },
|
||||
});
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
users,
|
||||
attributes,
|
||||
pagination,
|
||||
setPagination,
|
||||
loading,
|
||||
fetchUsers,
|
||||
fetchUserFieldValues,
|
||||
deactivateUser,
|
||||
deactivateUsers,
|
||||
users, attributes, pagination, setPagination, loading,
|
||||
fetchUsers, fetchUserFieldValues, deactivateUser, deactivateUsers,
|
||||
} = useUsers();
|
||||
|
||||
// Shared export config — passed into toolbar + selection configs
|
||||
const { usersDashboard, fetchUsersDashboard } = useDashboard();
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsersDashboard();
|
||||
}, []);
|
||||
|
||||
// ─── Keep activeFilters in sync so TableDashboard can highlight active ────
|
||||
const handleRefsReady = (refs) => {
|
||||
tableRefsRef.current = refs; // ← just store directly, no override needed
|
||||
};
|
||||
|
||||
const exportConfig = {
|
||||
allData: users,
|
||||
attributes,
|
||||
@@ -47,20 +63,58 @@ export default function UsersTable() {
|
||||
});
|
||||
const selectionActions = buildSelectionActions({
|
||||
exportConfig,
|
||||
archiveUser: (row) => setArchiveTarget(row), // single
|
||||
archiveUsers: (ids) => setArchiveIds(ids), // bulk
|
||||
archiveUser: (row) => setArchiveTarget(row),
|
||||
archiveUsers: (ids) => setArchiveIds(ids),
|
||||
});
|
||||
|
||||
const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes]);
|
||||
|
||||
const handleArchiveSuccess = () => {
|
||||
setArchiveTarget(null);
|
||||
setArchiveIds(null);
|
||||
tableRefsRef.current.resetSelection?.(); // ← clear selection
|
||||
tableRefsRef.current.resetSelection?.();
|
||||
fetchUsers({ page: 1, limit: pagination.limit });
|
||||
fetchUsersDashboard();
|
||||
};
|
||||
|
||||
// ─── Attach filterId + filterValue to each stat so TableDashboard
|
||||
// knows which column/value to apply when clicked ──────────────────────
|
||||
const dashboardStats = (usersDashboard?.stats ?? []).map((s) => ({ // ← was dashboard?.users?.stats
|
||||
...s,
|
||||
filterId: s.key === "archived" || s.key === "total" ? null : "is_active",
|
||||
filterValue: s.key === "active" ? ["true"]
|
||||
: s.key === "inactive" ? ["false"]
|
||||
: null,
|
||||
}));
|
||||
|
||||
// Override verified → correct column
|
||||
const statsWithFilter = dashboardStats.map((s) =>
|
||||
s.key === "verified"
|
||||
? { ...s, filterId: "is_verified", filterValue: ["true"] }
|
||||
: s
|
||||
);
|
||||
|
||||
// ─── Attach filterId to each breakdown so clicking a slice filters ────────
|
||||
const dashboardBreakdowns = (usersDashboard?.breakdowns ?? []).map((b) => ({
|
||||
...b,
|
||||
filterId: b.key === "acc_type" ? "acc_type"
|
||||
: b.key === "reg_type" ? "reg_type"
|
||||
: null,
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Dashboard strip ── */}
|
||||
{usersDashboard && (
|
||||
<TableDashboard
|
||||
stats={statsWithFilter}
|
||||
breakdowns={dashboardBreakdowns}
|
||||
statMap={USER_STAT_MAP}
|
||||
tableRefsRef={tableRefsRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── Data table ── */}
|
||||
<DataTable
|
||||
title="Users"
|
||||
data={users}
|
||||
@@ -71,7 +125,7 @@ export default function UsersTable() {
|
||||
loading={loading}
|
||||
onFetch={fetchUsers}
|
||||
onFetchFilterData={fetchUserFieldValues}
|
||||
onRefsReady={(refs) => tableRefsRef.current = refs}
|
||||
onRefsReady={handleRefsReady}
|
||||
renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
|
||||
<FilterSheet
|
||||
open={open}
|
||||
@@ -88,7 +142,8 @@ export default function UsersTable() {
|
||||
recordLabel="user"
|
||||
emptyMessage="No users match the current filters."
|
||||
/>
|
||||
{/* Single restore */}
|
||||
|
||||
{/* Single archive */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveTarget}
|
||||
onOpenChange={(v) => !v && setArchiveTarget(null)}
|
||||
@@ -99,8 +154,8 @@ export default function UsersTable() {
|
||||
loading={loading}
|
||||
onSuccess={handleArchiveSuccess}
|
||||
/>
|
||||
|
||||
{/* Bulk restore */}
|
||||
|
||||
{/* Bulk archive */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveIds}
|
||||
onOpenChange={(v) => !v && setArchiveIds(null)}
|
||||
|
||||
@@ -11,28 +11,27 @@ import { Eye, Pencil, Archive } from "lucide-react";
|
||||
* @param {Function} deps.archiveUser Archive handler from useManagement
|
||||
* @returns {Array} rowActions
|
||||
*/
|
||||
export function buildRowActions({ navigate, onArchive }) {
|
||||
export function buildRowActions({ navigate, onEdit, onArchive }) {
|
||||
return [
|
||||
{
|
||||
key: "view",
|
||||
label: "View details",
|
||||
icon: <Eye className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => navigate(`view/${row.user_id}`),
|
||||
key: "view",
|
||||
label: "View details",
|
||||
icon: <Eye className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => navigate(`view/${row.group_id}`),
|
||||
},
|
||||
{
|
||||
key: "edit",
|
||||
label: "Edit",
|
||||
icon: <Pencil className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => navigate(`edit/${row.user_id}`),
|
||||
disabled: (row) => row.role === "super_admin",
|
||||
key: "edit",
|
||||
label: "Edit details",
|
||||
icon: <Pencil className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => onEdit(row),
|
||||
},
|
||||
{
|
||||
key: "archive",
|
||||
label: "Archive",
|
||||
key: "archive",
|
||||
label: "Archive",
|
||||
className: "text-destructive focus:text-destructive",
|
||||
icon: <Archive className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => onArchive(row), // ← opens dialog, not deactivateUser
|
||||
hidden: (row) => !row.is_active, // ← hide if already inactive
|
||||
icon: <Archive className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => onArchive(row),
|
||||
hidden: (row) => !row.is_active,
|
||||
separator: true,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
|
||||
import { RefreshCw, Download, UserPlus, Archive } from "lucide-react";
|
||||
import { RefreshCw, Download, FolderPlus, Archive } from "lucide-react";
|
||||
import { exportTableToExcel } from "@/utils/excel.util";
|
||||
|
||||
/**
|
||||
@@ -9,7 +9,7 @@ import { exportTableToExcel } from "@/utils/excel.util";
|
||||
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
|
||||
* @param {Function} deps.navigate React Router navigate
|
||||
*/
|
||||
export function buildToolbarActions({ fetchGroups, pagination, exportConfig, navigate, getFilters, getSort }) {
|
||||
export function buildToolbarActions({ fetchGroups, pagination, exportConfig, onAddGroup, navigate, getFilters, getSort }) {
|
||||
return [
|
||||
{
|
||||
key: "refresh",
|
||||
@@ -28,11 +28,11 @@ export function buildToolbarActions({ fetchGroups, pagination, exportConfig, nav
|
||||
{
|
||||
key: "add-group",
|
||||
type: "button",
|
||||
icon: <UserPlus className="h-3.5 w-3.5" />,
|
||||
icon: <FolderPlus className="h-3.5 w-3.5" />,
|
||||
label: "Add Group",
|
||||
variant: "default",
|
||||
className: "text-primary-foreground",
|
||||
onClick: () => navigate("add/staff"),
|
||||
onClick: () => onAddGroup(),
|
||||
},
|
||||
{
|
||||
key: "archived-groups",
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
// config/columns.config.jsx
|
||||
// Column definitions and pinning config for the Users table.
|
||||
|
||||
import { buildColumns } from "@/utils/table.util";
|
||||
import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
|
||||
import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Users } from "lucide-react";
|
||||
|
||||
export const columnPinning = {
|
||||
right: ["actions"],
|
||||
left: [],
|
||||
};
|
||||
|
||||
// ─── Custom cell overrides ────────────────────────────────────────────────────
|
||||
const cellOverrides = {
|
||||
// memberCount: (info) => {
|
||||
// const count = parseInt(info.getValue() ?? 0, 10);
|
||||
// return (
|
||||
// <div className="flex items-center gap-1.5">
|
||||
// <Users className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
// <Badge variant="secondary" className="text-xs font-medium tabular-nums">
|
||||
// {count} {count === 1 ? "member" : "members"}
|
||||
// </Badge>
|
||||
// </div>
|
||||
// );
|
||||
// },
|
||||
};
|
||||
|
||||
/**
|
||||
* Builds the full column array for the Users table.
|
||||
*
|
||||
* @param {Array} attributes Field definitions from the server (drives data columns)
|
||||
* @param {Array} rowActions Row-level kebab action definitions
|
||||
* @returns {Array} TanStack column definitions
|
||||
*/
|
||||
export function buildDataColumns(attributes, rowActions) {
|
||||
const visibleAttributes = attributes.filter((a) => !a.hidden);
|
||||
|
||||
return [
|
||||
buildSelectionColumn(),
|
||||
...buildColumns(visibleAttributes, { cellOverrides }),
|
||||
buildRowActionsColumn(rowActions, { dropdownLabel: "Group Actions" }),
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// modules/admin/config/user_groups/view/rowActions.config.jsx
|
||||
|
||||
import { UserMinus } from "lucide-react";
|
||||
|
||||
/**
|
||||
* @param {Object} deps
|
||||
* @param {Function} deps.onRemove Opens remove-member confirm dialog
|
||||
* @returns {Array} rowActions
|
||||
*/
|
||||
export function buildRowActions({ onRemove }) {
|
||||
return [
|
||||
{
|
||||
key: "remove",
|
||||
label: "Remove from group",
|
||||
className: "text-destructive focus:text-destructive",
|
||||
icon: <UserMinus className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => onRemove(row),
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// modules/admin/config/user_groups/view/selection.config.jsx
|
||||
|
||||
import { Download, UserMinus } from "lucide-react";
|
||||
import { exportTableToExcel } from "@/utils/excel.util";
|
||||
|
||||
/**
|
||||
* @param {Object} deps
|
||||
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
|
||||
* @param {Function} deps.onRemoveMember Opens single remove dialog (row)
|
||||
* @param {Function} deps.onRemoveMembers Opens bulk remove dialog (ids[])
|
||||
*/
|
||||
export function buildSelectionActions({ exportConfig, onRemoveMember, onRemoveMembers }) {
|
||||
return [
|
||||
{
|
||||
key: "export-selected",
|
||||
label: "Export",
|
||||
icon: <Download className="h-3.5 w-3.5" />,
|
||||
onClick: (rows, table) =>
|
||||
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table }),
|
||||
},
|
||||
{
|
||||
key: "remove-selected",
|
||||
label: "Remove",
|
||||
icon: <UserMinus className="h-3.5 w-3.5" />,
|
||||
className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
|
||||
onClick: (rows) => {
|
||||
const ids = rows.map((r) => r.user_id);
|
||||
ids.length === 1
|
||||
? onRemoveMember(rows[0]) // single confirm dialog
|
||||
: onRemoveMembers(ids); // bulk confirm dialog
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
// modules/admin/config/user_groups/view/toolbar.config.jsx
|
||||
|
||||
import { RefreshCw, Download, UserPlus } from "lucide-react";
|
||||
import { exportTableToExcel } from "@/utils/excel.util";
|
||||
|
||||
/**
|
||||
* @param {Object} deps
|
||||
* @param {Function} deps.fetchGroup Context fetchGroup(gid, params)
|
||||
* @param {string} deps.gid Current group id from useParams
|
||||
* @param {Object} deps.pagination Current pagination state
|
||||
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
|
||||
* @param {Function} deps.onAddMember Opens AddMemberSheet
|
||||
* @param {Function} deps.getFilters Returns active filters from tableRefsRef
|
||||
* @param {Function} deps.getSort Returns active sort from tableRefsRef
|
||||
*/
|
||||
export function buildToolbarActions({
|
||||
fetchGroup,
|
||||
gid,
|
||||
pagination,
|
||||
exportConfig,
|
||||
onAddMember,
|
||||
getFilters,
|
||||
getSort,
|
||||
}) {
|
||||
return [
|
||||
{
|
||||
key: "refresh",
|
||||
type: "button",
|
||||
icon: <RefreshCw className="h-3.5 w-3.5" />,
|
||||
label: "Refresh",
|
||||
onClick: () =>
|
||||
fetchGroup(gid, {
|
||||
page: 1,
|
||||
limit: pagination.limit,
|
||||
filters: getFilters(),
|
||||
sort: getSort(),
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: "export",
|
||||
type: "button",
|
||||
icon: <Download className="h-3.5 w-3.5" />,
|
||||
label: "Export",
|
||||
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table }),
|
||||
},
|
||||
{
|
||||
key: "add-member",
|
||||
type: "button",
|
||||
icon: <UserPlus className="h-3.5 w-3.5" />,
|
||||
label: "Add Member",
|
||||
variant: "default",
|
||||
className: "text-primary-foreground",
|
||||
onClick: () => onAddMember(),
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -21,7 +21,7 @@ export function buildRowActions({ navigate, onArchive }) {
|
||||
},
|
||||
{
|
||||
key: "edit",
|
||||
label: "Edit",
|
||||
label: "Edit details",
|
||||
icon: <Pencil className="h-3.5 w-3.5" />,
|
||||
onClick: (row) => navigate(`edit/${row.user_id}`),
|
||||
disabled: (row) => row.role === "super_admin",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
***********************************************************************************************************************************************************************/
|
||||
import { Outlet, useNavigate } from "react-router-dom"
|
||||
import { useAuth } from "@/contexts/AuthContext"
|
||||
import { AdminProvider } from "@/contexts/provider/AdminProvider" // ← add
|
||||
|
||||
import { TooltipProvider } from "@/components/ui/tooltip"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
@@ -22,8 +23,6 @@ import AdminSideTabs from "../components/AdminSideTabs"
|
||||
import UserMenu from "@/components/generic/UserMenu"
|
||||
import { ROLE_CONFIG } from "@/data/profile.data"
|
||||
|
||||
import { AdminProvider } from "@/contexts/provider/AdminProvider" // ← add
|
||||
|
||||
const AdminLayout = () => {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Admin = () => {
|
||||
return (
|
||||
<div>
|
||||
Admin Page
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Admin
|
||||
@@ -0,0 +1,9 @@
|
||||
// modules/admin/pages/UsersDashboard.jsx
|
||||
|
||||
export default function AdminDashboard() {
|
||||
return (
|
||||
<div>
|
||||
AdminDashboard
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
// modules/admin/components/user_groups/AddGroupDialog.jsx
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, "Name is required."),
|
||||
description: z.string().min(1, "Description is required."),
|
||||
});
|
||||
|
||||
/**
|
||||
* Dialog for creating a new group.
|
||||
* Matches context: createGroup({ name, description })
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.open
|
||||
* @param {Function} props.onOpenChange
|
||||
* @param {Function} props.onSubmit Called with { name, description }
|
||||
* @param {boolean} [props.loading]
|
||||
*/
|
||||
export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { name: "", description: "" },
|
||||
});
|
||||
|
||||
async function onValid(values) {
|
||||
await onSubmit(values);
|
||||
reset();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
reset();
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[440px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add group</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onValid)} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Group name"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="description">
|
||||
Description <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Brief description of this group"
|
||||
className="resize-none"
|
||||
rows={3}
|
||||
{...register("description")}
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-sm text-destructive">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? "Creating..." : "Add group"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,250 @@
|
||||
import React from 'react'
|
||||
// modules/admin/pages/user_groups/ViewGroup.jsx
|
||||
|
||||
import { useRef, useMemo, useState, useEffect, useCallback } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { House, Users } from "lucide-react";
|
||||
|
||||
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
||||
import DataTable from "@/components/generic/Table/DataTable";
|
||||
import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
|
||||
import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
|
||||
import { AddSheet } from "@/components/generic/Sheet/AddSheet";
|
||||
|
||||
import { useUserGroups } from "@/contexts/AdminUserGroupContext";
|
||||
|
||||
import { buildDataColumns, columnPinning } from "../../config/user_groups/view/columns.config";
|
||||
import { buildToolbarActions } from "../../config/user_groups/view/toolbar.config";
|
||||
import { buildSelectionActions } from "../../config/user_groups/view/selection.config";
|
||||
import { buildRowActions } from "../../config/user_groups/view/rowActions.config";
|
||||
|
||||
import { getTimestamp } from "@/utils/timestamp.util";
|
||||
|
||||
export default function ViewGroup() {
|
||||
const { groupId } = useParams();
|
||||
|
||||
const tableRefsRef = useRef({
|
||||
getFilters: () => [],
|
||||
getSort: () => [],
|
||||
resetSelection: () => { },
|
||||
setFilters: () => { },
|
||||
});
|
||||
|
||||
const [addMemberOpen, setAddMemberOpen] = useState(false);
|
||||
const [archiveTarget, setArchiveTarget] = useState(null);
|
||||
const [archiveIds, setArchiveIds] = useState(null);
|
||||
const [memberAttrs, setMemberAttrs] = useState([]);
|
||||
|
||||
const {
|
||||
group,
|
||||
members,
|
||||
usersNotIn,
|
||||
pagination,
|
||||
setPagination,
|
||||
loading,
|
||||
fetchGroup,
|
||||
fetchGroupFieldValues,
|
||||
fetchUsersNotInGroup,
|
||||
addUsersToGroup,
|
||||
removeUsersFromGroup,
|
||||
} = useUserGroups();
|
||||
|
||||
useEffect(() => {
|
||||
if (!groupId) return;
|
||||
fetchGroup(groupId).then((res) => {
|
||||
const attrs = res?.data?.members?.attributes ?? [];
|
||||
setMemberAttrs(attrs);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleRefsReady = (refs) => {
|
||||
tableRefsRef.current = refs; // ← just store refs directly, nothing else needed
|
||||
};
|
||||
|
||||
const exportConfig = {
|
||||
allData: members,
|
||||
attributes: memberAttrs,
|
||||
filename: `${getTimestamp()}_Group_${groupId}_Members`,
|
||||
sheetName: "Members",
|
||||
};
|
||||
|
||||
const rowActions = buildRowActions({
|
||||
onRemove: (row) => setArchiveTarget(row),
|
||||
});
|
||||
|
||||
const toolbarActions = buildToolbarActions({
|
||||
fetchGroup,
|
||||
groupId,
|
||||
pagination,
|
||||
exportConfig,
|
||||
onAddMember: () => setAddMemberOpen(true),
|
||||
getFilters: () => tableRefsRef.current.getFilters(),
|
||||
getSort: () => tableRefsRef.current.getSort(),
|
||||
});
|
||||
|
||||
const selectionActions = buildSelectionActions({
|
||||
exportConfig,
|
||||
onRemoveMember: (row) => setArchiveTarget(row),
|
||||
onRemoveMembers: (ids) => setArchiveIds(ids),
|
||||
});
|
||||
|
||||
const columns = useMemo(
|
||||
() => buildDataColumns(memberAttrs, rowActions),
|
||||
[memberAttrs],
|
||||
);
|
||||
|
||||
const handleRemoveSuccess = () => {
|
||||
setArchiveTarget(null);
|
||||
setArchiveIds(null);
|
||||
tableRefsRef.current.resetSelection?.();
|
||||
fetchGroup(groupId, { page: 1, limit: pagination.limit });
|
||||
};
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: "Home", icon: <House className="size-4" />, to: "/admin/users" },
|
||||
{ label: "User Groups", to: "/admin/users/groups" },
|
||||
{ label: group?.name ?? "View Group" },
|
||||
];
|
||||
|
||||
const formattedCreated = group?.createdAt
|
||||
? new Date(group.createdAt).toLocaleDateString("en-PH", {
|
||||
year: "numeric", month: "long", day: "numeric",
|
||||
})
|
||||
: "—";
|
||||
|
||||
const formattedUpdated = group?.updatedAt
|
||||
? new Date(group.updatedAt).toLocaleDateString("en-PH", {
|
||||
year: "numeric", month: "long", day: "numeric",
|
||||
})
|
||||
: "—";
|
||||
|
||||
const handleFetch = useCallback(
|
||||
(params) => fetchGroup(groupId, params),
|
||||
[groupId] // fetchGroup should be useCallback'd in context
|
||||
);
|
||||
|
||||
const ViewGroup = () => {
|
||||
return (
|
||||
<div>
|
||||
ViewGroup
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<section className="bg-muted/60 min-h-full">
|
||||
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
|
||||
|
||||
export default ViewGroup
|
||||
<div className="flex flex-col gap-2 my-6">
|
||||
<AppBreadcrumb items={breadcrumbItems} />
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-col gap-4 pb-8">
|
||||
|
||||
{/* ── Group detail card ─────────────────────────────────────────── */}
|
||||
<div className="bg-card border rounded-xl p-5 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-lg font-medium leading-none">
|
||||
{group?.name ?? "—"}
|
||||
</h1>
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${group?.is_active
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-red-100 text-red-600"
|
||||
}`}
|
||||
>
|
||||
{group?.is_active ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{group?.description ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: "Group ID", value: group?.group_id ? `#${group.group_id}` : "—" },
|
||||
{ label: "Members", value: pagination?.totalRecords ?? 0, icon: <Users className="size-3.5 text-muted-foreground" /> },
|
||||
{ label: "Created", value: formattedCreated },
|
||||
{ label: "Last Updated", value: formattedUpdated },
|
||||
].map(({ label, value, icon }) => (
|
||||
<div key={label} className="bg-muted rounded-lg px-3 py-2">
|
||||
<span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-sm font-medium flex items-center gap-1.5">
|
||||
{icon}{value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Members table ─────────────────────────────────────────────── */}
|
||||
<div className="w-full">
|
||||
<DataTable
|
||||
title="Members"
|
||||
data={members}
|
||||
columns={columns}
|
||||
attributes={memberAttrs}
|
||||
pagination={pagination}
|
||||
setPagination={setPagination}
|
||||
loading={loading}
|
||||
onFetch={handleFetch}
|
||||
onFetchFilterData={fetchGroupFieldValues}
|
||||
onRefsReady={handleRefsReady}
|
||||
renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
|
||||
<FilterSheet
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
column={column}
|
||||
attr={attr}
|
||||
data={data}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
columnPinning={columnPinning}
|
||||
toolbarActions={toolbarActions}
|
||||
selectionActions={selectionActions}
|
||||
recordLabel="member"
|
||||
emptyMessage="No members in this group yet."
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Add member — generic sheet ───────────────────────────────────── */}
|
||||
<AddSheet
|
||||
open={addMemberOpen}
|
||||
onOpenChange={setAddMemberOpen}
|
||||
title="Add members"
|
||||
submitLabel="Add"
|
||||
users={usersNotIn}
|
||||
loading={loading}
|
||||
onFetch={() => fetchUsersNotInGroup(groupId)}
|
||||
idKey="user_id"
|
||||
labelKey="full_name"
|
||||
onSubmit={async (user_ids) => {
|
||||
await addUsersToGroup(groupId, user_ids);
|
||||
fetchGroup(groupId, { page: 1, limit: pagination.limit });
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ── Single remove ────────────────────────────────────────────────── */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveTarget}
|
||||
onOpenChange={(v) => !v && setArchiveTarget(null)}
|
||||
entity={archiveTarget}
|
||||
entityLabel="Member"
|
||||
getName={(m) => m?.personal_info?.name?.full_name ?? m?.email}
|
||||
onArchive={(m) => removeUsersFromGroup(groupId, [m?.user_id])} // ← stays the same
|
||||
loading={loading}
|
||||
onSuccess={handleRemoveSuccess}
|
||||
/>
|
||||
|
||||
{/* ── Bulk remove ──────────────────────────────────────────────────── */}
|
||||
<ArchiveDialog
|
||||
open={!!archiveIds}
|
||||
onOpenChange={(v) => !v && setArchiveIds(null)}
|
||||
ids={archiveIds ?? []}
|
||||
entityLabel="Member"
|
||||
onArchive={({ ids }) => removeUsersFromGroup(groupId, ids)} // ← destructure { ids }
|
||||
loading={loading}
|
||||
onSuccess={handleRemoveSuccess}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,7 @@ import AdminLayout from '../layouts/AdminLayout'
|
||||
import UserManagementLayout from '../layouts/UserManagementLayout'
|
||||
|
||||
// Global Pages
|
||||
import Admin from '../pages/Admin'
|
||||
import AdminDashboard from '../pages/AdminDashboard'
|
||||
import ProfilePage from '@/components/generic/Profile'
|
||||
|
||||
// Specific Pages
|
||||
@@ -31,7 +31,7 @@ export const AdminRoutes = {
|
||||
element: <AdminLayout />, // ← shared sidebar/header for all admin pages
|
||||
children: [
|
||||
// Admin Management
|
||||
{ index: true, element: <Admin /> }, // /admin
|
||||
{ index: true, element: <AdminDashboard /> }, // /admin
|
||||
{ path: 'my-profile', element: <ProfilePage /> },
|
||||
|
||||
// Users Management
|
||||
|
||||
Reference in New Issue
Block a user