kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

adjusted

Browse Source
This commit is contained in:
rgrgogu
2026-05-23 14:03:48 +08:00
parent 768092901a
commit 56d984a26a
15 changed files with 1395 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/admin/components/user_groups/AddGroupDialog.jsx
+44 -11
View File
@@ -19,16 +19,24 @@ 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."),
group_code: z
.string()
.max(50, "Group code must be 50 characters or less.")
.regex(/^[A-Z0-9\-]*$/, "Only uppercase letters, numbers, and hyphens allowed.")
.optional()
.or(z.literal("")),
});
/**
* Dialog for creating a new group.
* Matches context: createGroup({ name, description })
* Matches context: createGroup({ name, description, group_code })
*
* group_code is optional — if left blank the backend auto-generates one.
*
* @param {Object} props
* @param {boolean} props.open
* @param {Function} props.onOpenChange
* @param {Function} props.onSubmit Called with { name, description }
* @param {Function} props.onSubmit Called with { name, description, group_code? }
* @param {boolean} [props.loading]
*/
export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
@@ -36,14 +44,21 @@ export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
register,
handleSubmit,
reset,
watch,
setValue,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
defaultValues: { name: "", description: "" },
defaultValues: { name: "", description: "", group_code: "" },
});
async function onValid(values) {
await onSubmit(values);
async function onValid({ name, description, group_code }) {
await onSubmit({
name,
description,
// omit group_code entirely if blank — backend will auto-generate
...(group_code ? { group_code } : {}),
});
reset();
}
@@ -52,6 +67,13 @@ export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
onOpenChange(false);
}
// Auto-uppercase as user types
function handleGroupCodeChange(e) {
setValue("group_code", e.target.value.toUpperCase().replace(/[^A-Z0-9\-]/g, ""), {
shouldValidate: true,
});
}
return (
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-[440px]">
@@ -90,13 +112,24 @@ export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
)}
</div>
<div className="space-y-1.5">
<Label htmlFor="group_code" className="flex items-center gap-2">
Group code
<span className="text-xs font-normal text-muted-foreground">(auto-generated if blank)</span>
</Label>
<Input
id="group_code"
placeholder="e.g. SALES-2025"
{...register("group_code")}
onChange={handleGroupCodeChange}
/>
{errors.group_code && (
<p className="text-sm text-destructive">{errors.group_code.message}</p>
)}
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={handleClose}
disabled={loading}
>
<Button type="button" variant="outline" onClick={handleClose} disabled={loading}>
Cancel
</Button>
<Button type="submit" disabled={loading}>
src/modules/admin/components/user_groups/EditGroupDialog.jsx
+35 -11
View File
@@ -19,20 +19,25 @@ 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."),
group_code: z
.string()
.min(1, "Group code is required.")
.max(50, "Group code must be 50 characters or less.")
.regex(/^[A-Z0-9\-]+$/, "Only uppercase letters, numbers, and hyphens allowed."),
});
/**
* Dialog for editing a group's name and description.
* Matches context: updateGroup(gid, { name, description })
* Dialog for editing a group's name, description, and group_code.
* Matches context: updateGroup(gid, { name, description, group_code })
*
* `group` is the full row object from the table — pre-fills name + description.
* `group` is the full row object from the table — pre-fills all fields.
* `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 {Object} props.group Row object: { group_id, name, description, group_code, ... }
* @param {Function} props.onSubmit Called with { name, description, group_code }
* @param {boolean} [props.loading]
*/
export function EditGroupDialog({ open, onOpenChange, group, onSubmit, loading }) {
@@ -40,12 +45,14 @@ export function EditGroupDialog({ open, onOpenChange, group, onSubmit, loading }
register,
handleSubmit,
reset,
setValue,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
values: {
name: group?.name ?? "",
description: group?.description ?? "",
group_code: group?.group_code ?? "",
},
});
@@ -58,6 +65,13 @@ export function EditGroupDialog({ open, onOpenChange, group, onSubmit, loading }
onOpenChange(false);
}
// Auto-uppercase as user types
function handleGroupCodeChange(e) {
setValue("group_code", e.target.value.toUpperCase().replace(/[^A-Z0-9\-]/g, ""), {
shouldValidate: true,
});
}
return (
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-[440px]">
@@ -94,13 +108,23 @@ export function EditGroupDialog({ open, onOpenChange, group, onSubmit, loading }
)}
</div>
<div className="space-y-1.5">
<Label htmlFor="edit-group_code">
Group code <span className="text-destructive">*</span>
</Label>
<Input
id="edit-group_code"
placeholder="e.g. SALES-2025"
{...register("group_code")}
onChange={handleGroupCodeChange}
/>
{errors.group_code && (
<p className="text-sm text-destructive">{errors.group_code.message}</p>
)}
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={handleClose}
disabled={loading}
>
<Button type="button" variant="outline" onClick={handleClose} disabled={loading}>
Cancel
</Button>
<Button type="submit" disabled={loading}>
src/modules/admin/config/users/columns.config.jsx
+16 -1
View File
@@ -4,12 +4,27 @@
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: [],
};
// ─── Custom cell overrides ────────────────────────────────────────────────────
const cellOverrides = {
groups: (info) => (
<OverflowBadges
items={info.getValue() ?? []}
keyKey="group_id"
labelKey="group_code"
dialogTitleKey="name"
dialogTitle="All groups"
badgeClassName="text-xs font-mono"
/>
),
};
/**
* Builds the full column array for the Users table.
*
@@ -22,7 +37,7 @@ export function buildDataColumns(attributes, rowActions) {
return [
buildSelectionColumn(),
...buildColumns(visibleAttributes),
...buildColumns(visibleAttributes, { cellOverrides }),
buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
];
}
src/modules/admin/pages/user_groups/ViewGroup.jsx
+171 -47
View File
@@ -2,13 +2,21 @@
import { useRef, useMemo, useState, useEffect, useCallback } from "react";
import { useParams } from "react-router-dom";
import { House, Users } from "lucide-react";
import { House, Users, QrCode, Download, Copy, Check, Link } from "lucide-react";
import { QRCodeCanvas } from "qrcode.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 { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useUserGroups } from "@/contexts/AdminUserGroupContext";
@@ -19,20 +27,113 @@ import { buildRowActions } from "../../config/user_groups/view/rowActions.config
import { getTimestamp } from "@/utils/timestamp.util";
// ─── Invite Link Dialog ───────────────────────────────────────────────────────
function InviteLinkDialog({ open, onOpenChange, group }) {
const [copiedLink, setCopiedLink] = useState(false);
const [copiedCode, setCopiedCode] = useState(false);
const inviteUrl = group?.group_code
? `${window.location.origin}/signup?group_code=${group.group_code}`
: null;
const handleCopyLink = async () => {
if (!inviteUrl) return;
await navigator.clipboard.writeText(inviteUrl);
setCopiedLink(true);
setTimeout(() => setCopiedLink(false), 2000);
};
const handleCopyCode = async () => {
if (!group?.group_code) return;
await navigator.clipboard.writeText(group.group_code);
setCopiedCode(true);
setTimeout(() => setCopiedCode(false), 2000);
};
const handleDownload = () => {
const canvas = document.querySelector("[data-qr='group-invite']");
if (!canvas) return;
const url = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.href = url;
link.download = `QR_${group.group_code}.png`;
link.click();
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[420px]">
<DialogHeader>
<DialogTitle>Invite link</DialogTitle>
</DialogHeader>
<div className="flex flex-col items-center gap-5 py-2">
{/* QR code */}
<div className="rounded-xl border bg-white p-4 shadow-sm">
{inviteUrl && (
<QRCodeCanvas
data-qr="group-invite"
value={inviteUrl}
size={180}
includeMargin={false}
/>
)}
</div>
{/* Download QR */}
<Button
variant="outline"
className="w-full gap-2"
onClick={handleDownload}
>
<Download className="size-4" />
Download QR code
</Button>
<div className="w-full flex items-center gap-2 text-xs text-muted-foreground">
<div className="flex-1 h-px bg-border" />
or share the link
<div className="flex-1 h-px bg-border" />
</div>
{/* Invite link */}
<div className="w-full flex flex-col gap-2">
<div className="flex items-center gap-2 rounded-lg border bg-muted px-3 py-2 min-w-0">
<p className="font-mono text-xs text-muted-foreground truncate flex-1">
{inviteUrl}
</p>
</div>
<Button className="w-full gap-2" onClick={handleCopyLink}>
{copiedLink
? <><Check className="size-4" /> Copied!</>
: <><Copy className="size-4" /> Copy invite link</>
}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
// ─── Page ─────────────────────────────────────────────────────────────────────
export default function ViewGroup() {
const { groupId } = useParams();
const tableRefsRef = useRef({
getFilters: () => [],
getSort: () => [],
resetSelection: () => { },
setFilters: () => { },
getFilters: () => [],
getSort: () => [],
resetSelection: () => {},
setFilters: () => {},
});
const [addMemberOpen, setAddMemberOpen] = useState(false);
const [archiveTarget, setArchiveTarget] = useState(null);
const [archiveIds, setArchiveIds] = useState(null);
const [memberAttrs, setMemberAttrs] = useState([]);
const [addMemberOpen, setAddMemberOpen] = useState(false);
const [inviteOpen, setInviteOpen] = useState(false);
const [archiveTarget, setArchiveTarget] = useState(null);
const [archiveIds, setArchiveIds] = useState(null);
const [memberAttrs, setMemberAttrs] = useState([]);
const {
group,
@@ -57,14 +158,14 @@ export default function ViewGroup() {
}, []);
const handleRefsReady = (refs) => {
tableRefsRef.current = refs; // ← just store refs directly, nothing else needed
tableRefsRef.current = refs;
};
const exportConfig = {
allData: members,
allData: members,
attributes: memberAttrs,
filename: `${getTimestamp()}_Group_${groupId}_Members`,
sheetName: "Members",
filename: `${getTimestamp()}_Group_${groupId}_Members`,
sheetName: "Members",
};
const rowActions = buildRowActions({
@@ -77,13 +178,13 @@ export default function ViewGroup() {
pagination,
exportConfig,
onAddMember: () => setAddMemberOpen(true),
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
});
const selectionActions = buildSelectionActions({
exportConfig,
onRemoveMember: (row) => setArchiveTarget(row),
onRemoveMember: (row) => setArchiveTarget(row),
onRemoveMembers: (ids) => setArchiveIds(ids),
});
@@ -100,26 +201,26 @@ export default function ViewGroup() {
};
const breadcrumbItems = [
{ label: "Home", icon: <House className="size-4" />, to: "/admin" },
{ label: "Home", icon: <House className="size-4" />, to: "/admin" },
{ label: "User Groups", to: "/admin/groups" },
{ label: group?.name ?? "View Group" },
];
const formattedCreated = group?.createdAt
? new Date(group.createdAt).toLocaleDateString("en-PH", {
year: "numeric", month: "long", day: "numeric",
})
year: "numeric", month: "long", day: "numeric",
})
: "—";
const formattedUpdated = group?.updatedAt
? new Date(group.updatedAt).toLocaleDateString("en-PH", {
year: "numeric", month: "long", day: "numeric",
})
year: "numeric", month: "long", day: "numeric",
})
: "—";
const handleFetch = useCallback(
(params) => fetchGroup(groupId, params),
[groupId] // fetchGroup should be useCallback'd in context
[groupId]
);
return (
@@ -132,32 +233,48 @@ export default function ViewGroup() {
<div className="w-full flex flex-col gap-4 pb-8">
{/* ── Group detail card ─────────────────────────────────────────── */}
{/* ── 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"
<div className="flex items-start justify-between gap-3">
<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>
>
{group?.is_active ? "Active" : "Inactive"}
</span>
</div>
<p className="text-sm text-muted-foreground">
{group?.description ?? "—"}
</p>
</div>
<p className="text-sm text-muted-foreground">
{group?.description ?? "—"}
</p>
{/* ── Generate invite link button ── */}
{group?.group_code && (
<Button
size="sm"
variant="outline"
className="shrink-0 gap-1.5"
onClick={() => setInviteOpen(true)}
>
<QrCode className="size-4" />
Invite link
</Button>
)}
</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: "Group Code", value: group?.group_code ?? "—" },
{ 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">
@@ -172,7 +289,7 @@ export default function ViewGroup() {
</div>
</div>
{/* ── Members table ─────────────────────────────────────────────── */}
{/* ── Members table ──────────────────────────────────────────────── */}
<div className="w-full">
<DataTable
title="Members"
@@ -206,7 +323,14 @@ export default function ViewGroup() {
</div>
</div>
{/* ── Add member — generic sheet ───────────────────────────────────── */}
{/* ── Invite link dialog ────────────────────────────────────────────── */}
<InviteLinkDialog
open={inviteOpen}
onOpenChange={setInviteOpen}
group={group}
/>
{/* ── Add member ───────────────────────────────────────────────────── */}
<AddSheet
open={addMemberOpen}
onOpenChange={setAddMemberOpen}
@@ -223,25 +347,25 @@ export default function ViewGroup() {
}}
/>
{/* ── Single remove ────────────────────────────────────────────────── */}
{/* ── 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
onArchive={(m) => removeUsersFromGroup(groupId, [m?.user_id])}
loading={loading}
onSuccess={handleRemoveSuccess}
/>
{/* ── Bulk remove ──────────────────────────────────────────────────── */}
{/* ── Bulk remove ───────────────────────────────────────────────────── */}
<ArchiveDialog
open={!!archiveIds}
onOpenChange={(v) => !v && setArchiveIds(null)}
ids={archiveIds ?? []}
entityLabel="Member"
onArchive={({ ids }) => removeUsersFromGroup(groupId, ids)} // ← destructure { ids }
onArchive={({ ids }) => removeUsersFromGroup(groupId, ids)}
loading={loading}
onSuccess={handleRemoveSuccess}
/>