themelia-react-ui 2.0.2 → 2.0.4

package/templates/user-permissions-template.tsx

@@ -0,0 +1,450 @@
+import { useState } from 'react';
+
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Select, ToggleField } from 'themelia-react-ui/base/choice-inputs';
+import { DirtyStateBanner, FormField } from 'themelia-react-ui/base/forms';
+import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import { Input, Textarea } from 'themelia-react-ui/base/text-inputs';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { ConfirmDialog, useOverlayVisibility } from 'themelia-react-ui/features/overlays';
+import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
+import { Page } from 'themelia-react-ui/layout/page';
+import { Text } from 'themelia-react-ui/typography';
+
+interface PermissionGroup {
+	id: string;
+	title: string;
+	permissions: {
+		id: string;
+		label: string;
+		description: string;
+		enabled: boolean;
+	}[];
+}
+
+const INITIAL_PERMISSION_GROUPS: PermissionGroup[] = [
+	{
+		id: 'orders',
+		title: 'Orders & fulfillment',
+		permissions: [
+			{
+				id: 'orders-view',
+				label: 'View and manage orders',
+				description: 'View order details, edit shipping addresses, and add staff notes.',
+				enabled: true,
+			},
+			{
+				id: 'orders-fulfill',
+				label: 'Fulfill and ship items',
+				description: 'Print packing slips, purchase carrier labels, and mark orders fulfilled.',
+				enabled: true,
+			},
+			{
+				id: 'orders-refund',
+				label: 'Refund and cancel orders',
+				description: 'Issue full or partial refunds and return items to warehouse stock.',
+				enabled: true,
+			},
+		],
+	},
+	{
+		id: 'catalog',
+		title: 'Products & inventory',
+		permissions: [
+			{
+				id: 'products-edit',
+				label: 'Create and edit products',
+				description: 'Modify product descriptions, media, variants, and collections.',
+				enabled: true,
+			},
+			{
+				id: 'inventory-adjust',
+				label: 'Manage inventory quantities',
+				description: 'Adjust stock counts across Brooklyn Warehouse and SoHo POS.',
+				enabled: true,
+			},
+			{
+				id: 'pricing-edit',
+				label: 'Change retail and compare-at prices',
+				description: 'Update variant pricing, unit costs, and discount eligibility.',
+				enabled: true,
+			},
+		],
+	},
+	{
+		id: 'customers',
+		title: 'Customers & store credit',
+		permissions: [
+			{
+				id: 'customers-edit',
+				label: 'View and edit customers',
+				description: 'Manage customer contact details, addresses, and tax exemption status.',
+				enabled: true,
+			},
+			{
+				id: 'customers-credit',
+				label: 'Issue store credit and gift cards',
+				description: 'Create and adjust store credit balances on customer accounts.',
+				enabled: true,
+			},
+		],
+	},
+	{
+		id: 'administration',
+		title: 'Store administration',
+		permissions: [
+			{
+				id: 'reports-view',
+				label: 'View financial reports and payouts',
+				description: 'Access net sales summaries, tax breakdowns, and settlement reports.',
+				enabled: true,
+			},
+			{
+				id: 'staff-manage',
+				label: 'Manage staff accounts and permissions',
+				description: 'Invite staff members, assign role presets, and suspend accounts.',
+				enabled: true,
+			},
+		],
+	},
+];
+
+const ROLE_PRESET_OPTIONS = [
+	{ value: 'admin', label: 'Store Administrator (Full access)' },
+	{ value: 'fulfillment', label: 'Fulfillment & Inventory Specialist' },
+	{ value: 'support', label: 'Customer Support Associate' },
+	{ value: 'custom', label: 'Custom permissions' },
+];
+
+export function UserPermissionsTemplate() {
+	const [firstName, setFirstName] = useState('Marcus');
+	const [lastName, setLastName] = useState('Vance');
+	const [workEmail, setWorkEmail] = useState('marcus.vance@oakandloom.com');
+	const [phone, setPhone] = useState('+1 (917) 555-0164');
+	const [jobTitle, setJobTitle] = useState('Store Operations Lead');
+	const [timezone, setTimezone] = useState('America/New_York');
+	const [roleNote, setRoleNote] = useState(
+		'Primary operations lead for Brooklyn Warehouse fulfillment and high-value order approvals.',
+	);
+
+	const [rolePreset, setRolePreset] = useState('admin');
+	const [permissionGroups, setPermissionGroups] = useState<PermissionGroup[]>(
+		INITIAL_PERMISSION_GROUPS,
+	);
+	const [savedProfile, setSavedProfile] = useState({ firstName, lastName, workEmail, phone, jobTitle, timezone, roleNote, rolePreset, permissionGroups });
+	const [accountSuspended, setAccountSuspended] = useState(false);
+
+	const suspendAccountDialog = useOverlayVisibility();
+
+	const fullName = `${firstName} ${lastName}`.trim() || 'Staff Member';
+
+	const profile = { firstName, lastName, workEmail, phone, jobTitle, timezone, roleNote, rolePreset, permissionGroups };
+	const isDirty = JSON.stringify(profile) !== JSON.stringify(savedProfile);
+
+	// This example saves in memory. Replace this commit with your app's persistence callback.
+	const handleSaveProfile = () => setSavedProfile(profile);
+
+	const handleResetProfile = () => {
+		setFirstName(savedProfile.firstName);
+		setLastName(savedProfile.lastName);
+		setWorkEmail(savedProfile.workEmail);
+		setPhone(savedProfile.phone);
+		setJobTitle(savedProfile.jobTitle);
+		setTimezone(savedProfile.timezone);
+		setRoleNote(savedProfile.roleNote);
+		setRolePreset(savedProfile.rolePreset);
+		setPermissionGroups(savedProfile.permissionGroups);
+	};
+
+	const handlePresetChange = (preset: string) => {
+		setRolePreset(preset);
+		setPermissionGroups((current) =>
+			current.map((group) => ({
+				...group,
+				permissions: group.permissions.map((perm) => {
+					if (preset === 'admin') return { ...perm, enabled: true };
+					if (preset === 'fulfillment') {
+						return {
+							...perm,
+							enabled:
+								perm.id === 'orders-view' ||
+								perm.id === 'orders-fulfill' ||
+								perm.id === 'inventory-adjust',
+						};
+					}
+					if (preset === 'support') {
+						return {
+							...perm,
+							enabled:
+								perm.id === 'orders-view' ||
+								perm.id === 'orders-refund' ||
+								perm.id === 'customers-edit' ||
+								perm.id === 'customers-credit',
+						};
+					}
+					return perm;
+				}),
+			})),
+		);
+	};
+
+	const handleTogglePermission = (groupId: string, permId: string, checked: boolean) => {
+		setRolePreset('custom');
+		setPermissionGroups((current) =>
+			current.map((group) =>
+				group.id === groupId
+					? {
+							...group,
+							permissions: group.permissions.map((perm) =>
+								perm.id === permId ? { ...perm, enabled: checked } : perm,
+							),
+						}
+					: group,
+			),
+		);
+	};
+
+	return (
+		<Page
+			header={{
+				title: fullName,
+				description: `${workEmail} · Staff member since Jan 2025`,
+				titleBadges: [
+					{
+						label: accountSuspended ? 'Suspended' : 'Active',
+						tone: accountSuspended ? 'destructive' : 'success',
+					},
+					{
+						label:
+							ROLE_PRESET_OPTIONS.find((opt) => opt.value === rolePreset)?.label.split(
+								' (',
+							)[0] ?? 'Custom role',
+						// A role is a kind, not a status.
+						tone: 'neutral',
+					},
+				],
+				primaryAction: { label: 'Save changes', disabled: !isDirty, onClick: handleSaveProfile },
+				// Destructive commands move into the More actions menu and confirm before they run.
+				secondaryActions: [
+					{
+						label: 'Suspend staff account',
+						destructive: true,
+						visible: !accountSuspended,
+						onClick: suspendAccountDialog.show,
+					},
+				],
+			}}
+		>
+			<Stack gap="2xl">
+				{isDirty && (
+					<DirtyStateBanner
+						title="Unsaved profile or permission changes"
+						description="Save changes to update this staff member's access level."
+						actions={
+							<Button size="sm" onClick={handleResetProfile}>
+								Discard
+							</Button>
+						}
+					/>
+				)}
+
+				<TwoColumnLayout
+					stickyAside
+					main={
+						<Stack gap="2xl">
+							{/* 1. Profile Details Card */}
+							<Card
+								title="Staff profile"
+								description="Identity and contact information displayed on order audits and internal notes."
+							>
+								<Stack gap="lg">
+									<Grid columns={{ base: 1, sm: 2 }} gap="lg">
+										<FormField label="First name" required>
+											<Input
+												aria-label="First name"
+												value={firstName}
+												onChange={(event) => setFirstName(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Last name" required>
+											<Input
+												aria-label="Last name"
+												value={lastName}
+												onChange={(event) => setLastName(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Work email" required>
+											<Input
+												aria-label="Work email"
+												type="email"
+												value={workEmail}
+												onChange={(event) => setWorkEmail(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Phone number">
+											<Input
+												aria-label="Phone number"
+												value={phone}
+												onChange={(event) => setPhone(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Job title">
+											<Input
+												aria-label="Job title"
+												value={jobTitle}
+												onChange={(event) => setJobTitle(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Timezone">
+											<Select
+												aria-label="Timezone"
+												options={[
+													{
+														value: 'America/New_York',
+														label: 'Eastern Time (US & Canada)',
+													},
+													{
+														value: 'America/Los_Angeles',
+														label: 'Pacific Time (US & Canada)',
+													},
+													{ value: 'Europe/London', label: 'London (GMT)' },
+												]}
+												value={timezone}
+												onValueChange={(value) => setTimezone(String(value))}
+											/>
+										</FormField>
+									</Grid>
+
+									<FormField label="Internal role note">
+										<Textarea
+											aria-label="Internal role note"
+											rows={2}
+											value={roleNote}
+											onChange={(event) => setRoleNote(event.target.value)}
+										/>
+									</FormField>
+								</Stack>
+							</Card>
+
+							{/* 2. Permissions Card */}
+							<Card
+								title="Permissions"
+								description="Assign a role preset or customize granular capabilities for this staff member."
+							>
+								<Stack gap="2xl">
+									<FormField label="Role preset">
+										<Select
+											aria-label="Role preset"
+											options={ROLE_PRESET_OPTIONS}
+											value={rolePreset}
+											onValueChange={(value) => handlePresetChange(String(value))}
+										/>
+									</FormField>
+
+									<Stack gap="2xl">
+										{permissionGroups.map((group) => (
+											<Stack key={group.id} gap="md">
+												<Text weight="semibold">{group.title}</Text>
+												<Stack gap="sm">
+													{group.permissions.map((perm) => (
+														<ToggleField
+															key={perm.id}
+															kind="checkbox"
+															value={perm.enabled}
+															onValueChange={(checked) =>
+																handleTogglePermission(
+																	group.id,
+																	perm.id,
+																	Boolean(checked),
+																)
+															}
+															label={perm.label}
+															description={perm.description}
+														/>
+													))}
+												</Stack>
+											</Stack>
+										))}
+									</Stack>
+								</Stack>
+							</Card>
+						</Stack>
+					}
+					aside={
+						<Stack gap="2xl">
+							<Card title="Access summary">
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: 'email',
+											label: 'Work email',
+											value: { kind: 'email', value: workEmail },
+										},
+										{
+											id: 'phone',
+											label: 'Phone',
+											value: { kind: 'phone', value: phone },
+										},
+										{
+											id: 'locations',
+											label: 'Locations',
+											value: 'Brooklyn Warehouse & SoHo POS',
+										},
+										{
+											id: 'pos-pin',
+											label: 'POS PIN',
+											value: 'Configured',
+										},
+										{
+											id: 'last-login',
+											label: 'Last sign-in',
+											value: { kind: 'datetime', value: '2026-10-15T08:42:00-04:00' },
+										},
+									]}
+								/>
+							</Card>
+
+							<Card title="Security & authentication">
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: '2fa',
+											label: 'Two-factor auth',
+											value: {
+												kind: 'badge',
+												value: 'Passkey active',
+												badgeTone: 'success',
+											},
+										},
+										{
+											id: 'password',
+											label: 'Password updated',
+											value: { kind: 'date', value: '2026-09-02' },
+										},
+									]}
+								/>
+							</Card>
+
+						</Stack>
+					}
+				/>
+			</Stack>
+
+			<ConfirmDialog
+				{...suspendAccountDialog.overlayProps}
+				title="Suspend staff account?"
+				description={`This immediately blocks admin sign-in for ${fullName}. Order and fulfillment audit history is kept.`}
+				tone="destructive"
+				strings={{ confirm: 'Suspend account', cancel: 'Keep access' }}
+				onConfirm={() => {
+					setAccountSuspended(true);
+					suspendAccountDialog.hide();
+				}}
+			/>
+		</Page>
+	);
+}
+export default UserPermissionsTemplate;