themelia-react-ui 2.0.2 → 2.0.4

package/templates/customers-template.tsx

@@ -0,0 +1,509 @@
+import { useId, useMemo, useState } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import {
+	Mail,
+	MapPin,
+	Plus,
+	ShoppingBag,
+} from 'lucide-react';
+
+import { Badge } from 'themelia-react-ui/base/badge';
+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 { FormField, FormSection } from 'themelia-react-ui/base/forms';
+import { DecimalInput } from 'themelia-react-ui/base/forms-numeric';
+import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import { Input, Textarea } from 'themelia-react-ui/base/text-inputs';
+import { PhoneInput, TagsInput } from 'themelia-react-ui/base/value-inputs';
+import { MetricBar, type MetricData } from 'themelia-react-ui/blocks/analytics';
+import { AddressCard } from 'themelia-react-ui/blocks/commerce';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { ActivityLog, type ActivityLogEntry } from 'themelia-react-ui/features/activities';
+import { ActionDialog, ActionDrawer, useOverlayVisibility } from 'themelia-react-ui/features/overlays';
+import { DataTable } from 'themelia-react-ui/features/table';
+import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
+import { Page } from 'themelia-react-ui/layout/page';
+import { Date as DateValue, Money, useMoneyFormatter } from 'themelia-react-ui/primitives';
+import { Text } from 'themelia-react-ui/typography';
+
+interface CustomerOrderSummary {
+	id: string;
+	orderNumber: string;
+	/** ISO date; the Date primitive formats it with the app's date policy. */
+	placedAt: string;
+	paymentStatus: 'Paid' | 'Partially refunded';
+	fulfillmentStatus: 'Fulfilled' | 'In transit';
+	itemsCount: number;
+	total: number;
+}
+
+const CUSTOMER_ORDERS: CustomerOrderSummary[] = [
+	{
+		id: 'ord-1042',
+		orderNumber: '#1042',
+		placedAt: '2026-10-14',
+		paymentStatus: 'Partially refunded',
+		fulfillmentStatus: 'In transit',
+		itemsCount: 4,
+		total: 354.21,
+	},
+	{
+		id: 'ord-1019',
+		orderNumber: '#1019',
+		placedAt: '2026-09-22',
+		paymentStatus: 'Paid',
+		fulfillmentStatus: 'Fulfilled',
+		itemsCount: 2,
+		total: 240.0,
+	},
+	{
+		id: 'ord-0984',
+		orderNumber: '#0984',
+		placedAt: '2026-08-11',
+		paymentStatus: 'Paid',
+		fulfillmentStatus: 'Fulfilled',
+		itemsCount: 3,
+		total: 315.0,
+	},
+	{
+		id: 'ord-0941',
+		orderNumber: '#0941',
+		placedAt: '2026-06-29',
+		paymentStatus: 'Paid',
+		fulfillmentStatus: 'Fulfilled',
+		itemsCount: 1,
+		total: 145.0,
+	},
+];
+
+const INITIAL_ACTIVITY: ActivityLogEntry[] = [
+	{
+		id: 'act-1',
+		kind: 'event',
+		actor: { name: 'Elena Rostova', initials: 'ER' },
+		action: 'placed',
+		target: 'Order #1042 (354.21 USD)',
+		timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+		icon: ShoppingBag,
+	},
+	{
+		id: 'act-2',
+		kind: 'event',
+		actor: { name: 'Maya Lin', initials: 'ML' },
+		action: 'updated default shipping address for',
+		target: 'Elena Rostova',
+		timestamp: new Date(Date.now() - 22 * 24 * 60 * 60 * 1000).toISOString(),
+		icon: MapPin,
+	},
+	{
+		id: 'act-3',
+		kind: 'event',
+		actor: { name: 'Online Store', initials: 'OS' },
+		action: 'sent autumn collection preview email to',
+		target: 'elena.rostova@example.com',
+		timestamp: new Date(Date.now() - 48 * 24 * 60 * 60 * 1000).toISOString(),
+		icon: Mail,
+	},
+];
+
+export function CustomersAdminTemplate() {
+	// Sample records are priced in USD; bind that once for every text amount.
+	const formatMoney = useMoneyFormatter({ currency: 'USD' });
+	const contactFormId = useId();
+	const creditFormId = useId();
+	const [customerName, setCustomerName] = useState('Elena Rostova');
+	const [customerEmail, setCustomerEmail] = useState('elena.rostova@example.com');
+	const [customerPhone, setCustomerPhone] = useState('+1 (212) 555-0192');
+	const [marketingOptIn, setMarketingOptIn] = useState(true);
+	const [taxSetting, setTaxSetting] = useState('collect');
+	const [customerTags, setCustomerTags] = useState<string[]>([
+		'repeat-customer',
+		'knitwear',
+		'soho-pos',
+	]);
+	const [customerNote, setCustomerNote] = useState(
+		'Prefers UPS ground delivery with signature waived. Measurements on file at SoHo store.',
+	);
+
+	const [storeCreditBalance, setStoreCreditBalance] = useState(75);
+	const [creditAddAmount, setCreditAddAmount] = useState('25');
+	const [creditReason, setCreditReason] = useState('Return shipping courtesy credit');
+	const [activityEntries, setActivityEntries] = useState<ActivityLogEntry[]>(INITIAL_ACTIVITY);
+
+	const [contactDraft, setContactDraft] = useState({
+		name: customerName, email: customerEmail, phone: customerPhone,
+		marketingOptIn, taxSetting,
+	});
+	const editDrawer = useOverlayVisibility();
+	const creditDialog = useOverlayVisibility();
+	const openContactEditor = () => {
+		setContactDraft({ name: customerName, email: customerEmail, phone: customerPhone, marketingOptIn, taxSetting });
+		editDrawer.show();
+	};
+	const saveContact = () => {
+		setCustomerName(contactDraft.name.trim());
+		setCustomerEmail(contactDraft.email.trim());
+		setCustomerPhone(contactDraft.phone);
+		setMarketingOptIn(contactDraft.marketingOptIn);
+		setTaxSetting(contactDraft.taxSetting);
+		editDrawer.hide();
+	};
+
+
+	const customerMetrics: MetricData[] = useMemo(
+		() => [
+			{
+				id: 'lifetime-spent',
+				label: 'Amount spent',
+				value: 1840,
+				valueType: 'currency',
+				currency: 'USD',
+			},
+			{
+				id: 'orders-count',
+				label: 'Orders',
+				value: 12,
+				valueType: 'number',
+				subtitle: 'Since Mar 2024',
+			},
+			{
+				id: 'avg-order',
+				label: 'Average order value',
+				value: 153.33,
+				valueType: 'currency',
+				currency: 'USD',
+				change: { value: '+8.2% vs store avg', direction: 'up', trend: 'up' },
+			},
+			{
+				id: 'store-credit',
+				label: 'Store credit',
+				value: storeCreditBalance,
+				valueType: 'currency',
+				currency: 'USD',
+				subtitle: 'Available at checkout',
+			},
+		],
+		[storeCreditBalance],
+	);
+
+	const orderColumns = useMemo<ColumnDef<CustomerOrderSummary>[]>(
+		() => [
+			{
+				accessorKey: 'orderNumber',
+				header: 'Order',
+				cell: ({ row }) => (
+					<Stack gap="none">
+						<Text weight="medium">{row.original.orderNumber}</Text>
+						<Text size="xs" type="secondary">
+							{row.original.itemsCount} {row.original.itemsCount === 1 ? 'item' : 'items'}
+						</Text>
+					</Stack>
+				),
+			},
+			{
+				accessorKey: 'placedAt',
+				header: 'Date',
+				cell: ({ row }) => <DateValue value={row.original.placedAt} />,
+			},
+			{
+				accessorKey: 'paymentStatus',
+				header: 'Payment',
+				cell: ({ row }) => (
+					<Badge
+						tone={row.original.paymentStatus === 'Paid' ? 'success' : 'warning'}
+					>
+						{row.original.paymentStatus}
+					</Badge>
+				),
+			},
+			{
+				accessorKey: 'fulfillmentStatus',
+				header: 'Fulfillment',
+				cell: ({ row }) => (
+					<Badge
+						tone={row.original.fulfillmentStatus === 'Fulfilled' ? 'success' : 'info'}
+					>
+						{row.original.fulfillmentStatus}
+					</Badge>
+				),
+			},
+			{
+				accessorKey: 'total',
+				header: 'Total',
+				meta: { align: 'end' },
+				cell: ({ row }) => (
+					<Money
+						amount={row.original.total}
+						currency="USD"
+						weight="semibold"
+					/>
+				),
+			},
+		],
+		[],
+	);
+
+	const handleIssueStoreCredit = () => {
+		const added = Math.round(Number(creditAddAmount) * 100) / 100;
+		if (!Number.isFinite(added) || added < 5 || added > 500 || !creditReason.trim()) return;
+		if (added > 0) {
+			setStoreCreditBalance((prev) => prev + added);
+			setActivityEntries((prev) => [
+				{
+					id: `act-credit-${Date.now()}`,
+					kind: 'event',
+					actor: { name: 'Maya Lin', initials: 'ML' },
+					action: 'issued store credit of',
+					target: formatMoney(added),
+					description: creditReason,
+					timestamp: new Date().toISOString(),
+					icon: Plus,
+				},
+				...prev,
+			]);
+		}
+		creditDialog.hide();
+	};
+
+	return (
+		<Page
+			header={{
+				title: customerName,
+				description: 'New York, NY · Customer since March 2024',
+				primaryAction: { label: 'Edit customer', onClick: openContactEditor },
+				secondaryActions: [{ label: 'Issue store credit', onClick: creditDialog.show }],
+			}}
+		>
+			<Stack gap="2xl">
+				<MetricBar metrics={customerMetrics} />
+
+				<TwoColumnLayout
+					stickyAside
+					main={
+						<Stack gap="2xl">
+							<Card
+								title="Orders placed"
+								titleSuffix={<Badge tone="neutral">{CUSTOMER_ORDERS.length}</Badge>}
+								description="Orders placed across Online Store and SoHo POS."
+							>
+								<DataTable<CustomerOrderSummary>
+									columns={orderColumns}
+									data={CUSTOMER_ORDERS}
+									surface="flat"
+									enableSorting
+									getRowId={(order) => order.id}
+								/>
+							</Card>
+
+							<Card
+								title="Timeline"
+								description="Order history, address changes, and store credit adjustments."
+							>
+								<ActivityLog bare entries={activityEntries} itemSpacing="compact" />
+							</Card>
+						</Stack>
+					}
+					aside={
+						<Stack gap="2xl">
+							{/* 1. Customer details via MetadataList */}
+							<Card
+								title="Customer"
+								headerAction={
+									<Button
+										size="sm"
+										tone="secondary"
+										buttonStyle="ghost"
+										onClick={openContactEditor}
+									>
+										Edit
+									</Button>
+								}
+							>
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: 'email',
+											label: 'Email',
+											value: { kind: 'email', value: customerEmail },
+										},
+										{
+											id: 'phone',
+											label: 'Phone',
+											value: { kind: 'phone', value: customerPhone },
+										},
+										{
+											id: 'marketing',
+											label: 'Marketing',
+											value: {
+												kind: 'badge',
+												value: marketingOptIn ? 'Email subscribed' : 'Not subscribed',
+												badgeTone: marketingOptIn ? 'success' : 'neutral',
+											},
+										},
+										{
+											id: 'tax',
+											label: 'Tax status',
+											value:
+												taxSetting === 'collect' ? 'Collect retail tax' : 'Tax exempt',
+										},
+										{
+											id: 'customer-since',
+											label: 'Customer since',
+											value: { kind: 'date', value: '2024-03-14' },
+										},
+									]}
+								/>
+							</Card>
+
+							{/* 2. Default shipping address */}
+							<AddressCard
+								surface="card"
+								kind="shipping"
+								name={customerName}
+								line1="214 Mercer Street"
+								line2="Apt 4B"
+								city="New York, NY"
+								postalCode="10012"
+								country="United States"
+								phone="+1 (212) 555-0192"
+								default
+							/>
+
+							{/* 3. Tags Card (separated from Notes) */}
+							<Card
+								title="Tags"
+								description="Used for customer segmentation and loyalty tiers."
+							>
+								<FormField label="Customer tags">
+									<TagsInput
+										aria-label="Tags"
+										value={customerTags}
+										onValueChange={setCustomerTags}
+										placeholder="Add tag…"
+									/>
+								</FormField>
+							</Card>
+
+							{/* 4. Notes Card (separated from Tags) */}
+							<Card
+								title="Notes"
+								description="Private note visible only to store staff."
+							>
+								<FormField label="Staff note">
+									<Textarea
+										aria-label="Internal staff note"
+										rows={3}
+										value={customerNote}
+										onChange={(event) => setCustomerNote(event.target.value)}
+									/>
+								</FormField>
+							</Card>
+						</Stack>
+					}
+				/>
+			</Stack>
+
+			<ActionDrawer
+				{...editDrawer.overlayProps}
+				title="Edit customer"
+				description="Update contact details, marketing consent, and tax settings."
+				width="lg"
+				strings={{
+					confirm: 'Save changes',
+					cancel: 'Cancel',
+				}}
+				formId={contactFormId}
+			>
+				<form id={contactFormId} onSubmit={(event) => { event.preventDefault(); saveContact(); }}>
+				<Stack gap="xl">
+					<FormSection title="Contact information">
+						<Grid columns={{ base: 1, sm: 2 }} gap="lg">
+							<FormField label="Full name" required>
+								<Input
+									aria-label="Full name" required
+									value={contactDraft.name}
+									onChange={(event) => setContactDraft((draft) => ({ ...draft, name: event.target.value }))}
+								/>
+							</FormField>
+							<FormField label="Email address" required>
+								<Input
+									aria-label="Email address" required
+									type="email"
+									value={contactDraft.email}
+									onChange={(event) => setContactDraft((draft) => ({ ...draft, email: event.target.value }))}
+								/>
+							</FormField>
+							<FormField label="Phone number">
+								<PhoneInput
+									aria-label="Phone number"
+									value={contactDraft.phone}
+									onChange={(event) => setContactDraft((draft) => ({ ...draft, phone: event.target.value }))}
+									defaultPrefix="US"
+								/>
+							</FormField>
+							<FormField label="Tax setting">
+								<Select
+									aria-label="Tax setting"
+									options={[
+										{ value: 'collect', label: 'Collect tax' },
+										{ value: 'exempt', label: 'Do not collect tax (Resale exempt)' },
+									]}
+									value={contactDraft.taxSetting}
+									onValueChange={(value) => setContactDraft((draft) => ({ ...draft, taxSetting: String(value) }))}
+								/>
+							</FormField>
+						</Grid>
+						<ToggleField
+							kind="checkbox"
+							value={contactDraft.marketingOptIn}
+							onValueChange={(checked) => setContactDraft((draft) => ({ ...draft, marketingOptIn: Boolean(checked) }))}
+							label="Customer agreed to receive marketing emails"
+						/>
+					</FormSection>
+				</Stack>
+				</form>
+			</ActionDrawer>
+
+			<ActionDialog
+				{...creditDialog.overlayProps}
+				title="Issue store credit"
+				description="Add store credit to Elena Rostova's account balance."
+				strings={{
+					confirm: `Add ${formatMoney(Number(creditAddAmount || 0))} credit`,
+					cancel: 'Cancel',
+				}}
+				formId={creditFormId}
+			>
+				<form id={creditFormId} onSubmit={(event) => { event.preventDefault(); handleIssueStoreCredit(); }}>
+				<FormSection title="Store credit adjustment">
+					<FormField
+						label="Credit amount (USD)"
+						required
+						hint={`New balance: ${formatMoney(storeCreditBalance + Number(creditAddAmount || 0))}`}
+					>
+						<DecimalInput
+							aria-label="Credit amount" required
+							decimalPlaces={2}
+							value={creditAddAmount}
+							onChange={(event) => setCreditAddAmount(event.target.value)}
+							min={5}
+							max={500}
+							step={5}
+						/>
+					</FormField>
+					<FormField label="Reason" required>
+						<Input
+							aria-label="Reason" required
+							value={creditReason}
+							onChange={(event) => setCreditReason(event.target.value)}
+						/>
+					</FormField>
+				</FormSection>
+				</form>
+			</ActionDialog>
+		</Page>
+	);
+}
+export default CustomersAdminTemplate;

package/templates/index.ts

@@ -0,0 +1,29 @@
+export {
+	AdminStarterShell,
+	AdminTemplatesShowcase,
+	AnalyticsOperationsTemplatePreview,
+	CustomersTemplatePreview,
+	OrdersTemplatePreview,
+	ProductsTemplatePreview,
+	UserPermissionsTemplatePreview,
+	adminStarterUIDefaults,
+	type AdminStarterShellProps,
+	type AdminTemplateId,
+	type AdminTemplatesShowcaseProps,
+} from './admin-shell-template';
+
+export { OrdersAdminTemplate } from './orders-template';
+
+export { ProductsAdminTemplate } from './products-template';
+
+export { CustomersAdminTemplate } from './customers-template';
+
+export {
+	UserPermissionsTemplate,
+	UserPermissionsTemplate as UserPermissionsAdminTemplate,
+} from './user-permissions-template';
+
+export {
+	AnalyticsOperationsTemplate,
+	AnalyticsOperationsTemplate as AnalyticsOperationsAdminTemplate,
+} from './analytics-operations-template';