themelia-react-ui 2.0.2 → 2.0.4

package/templates/analytics-operations-template.tsx

@@ -0,0 +1,376 @@
+import { useMemo, useState } from 'react';
+import {
+	CreditCard,
+	Store,
+	Truck,
+} 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 } from 'themelia-react-ui/base/choice-inputs';
+import {
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemGroup,
+	ItemTitle,
+} from 'themelia-react-ui/base/item';
+import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import {
+	ActivityHeatmap,
+	MetricBar,
+	MetricComparison,
+	UsageCard,
+	type ActivityHeatmapDay,
+	type MetricData,
+} from 'themelia-react-ui/blocks/analytics';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { ActivityLog, type ActivityLogEntry } from 'themelia-react-ui/features/activities';
+import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
+import { Page } from 'themelia-react-ui/layout/page';
+import { useMoneyFormatter } from 'themelia-react-ui/primitives';
+
+function buildHeatmapDays(): ActivityHeatmapDay[] {
+	const days: ActivityHeatmapDay[] = [];
+	const end = new Date('2026-10-14T00:00:00Z');
+	for (let i = 89; i >= 0; i--) {
+		const date = new Date(end);
+		date.setUTCDate(date.getUTCDate() - i);
+		const ratio = ((i * 37 + 19) % 100) / 100;
+		const level: 0 | 1 | 2 | 3 | 4 =
+			ratio < 0.12 ? 0 : ratio < 0.32 ? 1 : ratio < 0.58 ? 2 : ratio < 0.82 ? 3 : 4;
+		days.push({
+			date: date.toISOString().slice(0, 10),
+			level,
+		});
+	}
+	return days;
+}
+
+const HEATMAP_DAYS = buildHeatmapDays();
+
+interface OperationsTaskItem {
+	id: string;
+	title: string;
+	description: string;
+	status: 'in_progress' | 'done';
+	dueLabel: string;
+}
+
+const INITIAL_TASKS: OperationsTaskItem[] = [
+	{
+		id: 'task-1',
+		title: 'Approve Midnight Navy merino wool restock PO #408',
+		description: '40 units arriving from Braga knitwear mill on Oct 24 · Assigned to Maya Lin',
+		status: 'in_progress',
+		dueLabel: 'Due today',
+	},
+	{
+		id: 'task-2',
+		title: 'Review SoHo retail store weekend cycle count',
+		description: 'Reconcile 3 unit variance on Washed Linen Oxford Shirts · Assigned to Marcus Vance',
+		status: 'in_progress',
+		dueLabel: 'Tomorrow',
+	},
+];
+
+const STORE_ACTIVITY: ActivityLogEntry[] = [
+	{
+		id: 'ops-1',
+		kind: 'event',
+		timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString(),
+		actor: 'UPS Ground',
+		action: 'picked up 38 manifested parcels from',
+		target: 'Brooklyn Warehouse',
+		icon: Truck,
+	},
+	{
+		id: 'ops-2',
+		kind: 'system',
+		timestamp: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),
+		actor: 'Stripe Payouts',
+		action: 'deposited daily settlement of',
+		target: '6,420.50 USD',
+		icon: CreditCard,
+	},
+	{
+		id: 'ops-3',
+		kind: 'audit',
+		timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
+		actor: 'Maya Lin',
+		action: 'published Autumn Essentials collection to',
+		target: 'Online Store & SoHo POS',
+		icon: Store,
+	},
+];
+
+export interface AnalyticsOperationsAdminTemplateProps {
+	defaultPeriod?: '7d' | '30d';
+}
+
+export function AnalyticsOperationsTemplate({
+	defaultPeriod = '30d',
+}: AnalyticsOperationsAdminTemplateProps = {}) {
+	// Sample records are priced in USD; bind that once for every text amount.
+	const formatMoney = useMoneyFormatter({ currency: 'USD' });
+	const [period, setPeriod] = useState<'7d' | '30d'>(defaultPeriod);
+	const [tasks, setTasks] = useState<OperationsTaskItem[]>(INITIAL_TASKS);
+
+	const kpiMetrics = useMemo<MetricData[]>(
+		() =>
+			period === '30d'
+				? [
+						{
+							id: 'net-sales',
+							label: 'Net sales',
+							value: 148500,
+							valueType: 'currency',
+							currency: 'USD',
+							change: { value: '12.4%', direction: 'up' },
+							sparkline: [32, 35, 34, 38, 41, 39, 44, 46, 45, 49, 52, 56],
+						},
+						{
+							id: 'orders',
+							label: 'Total orders',
+							value: 964,
+							valueType: 'number',
+							change: { value: '8.1%', direction: 'up' },
+							sparkline: [20, 22, 21, 25, 24, 28, 27, 30, 29, 33, 34, 36],
+						},
+						{
+							id: 'returning-rate',
+							label: 'Returning customers',
+							value: 0.418,
+							valueType: 'percentage',
+							change: { value: '3.2%', direction: 'up' },
+							sparkline: [36, 37, 37, 38, 39, 39, 40, 40, 41, 41, 42, 42],
+						},
+						{
+							id: 'fulfilled-on-time',
+							label: 'On-time dispatch',
+							value: 0.991,
+							valueType: 'percentage',
+							change: { value: '0.4%', direction: 'up' },
+							sparkline: [98, 98, 99, 99, 98, 99, 99, 99, 99, 99, 99, 99],
+						},
+					]
+				: [
+						{
+							id: 'net-sales',
+							label: 'Net sales',
+							value: 36240,
+							valueType: 'currency',
+							currency: 'USD',
+							change: { value: '9.6%', direction: 'up' },
+							sparkline: [42, 45, 44, 48, 51, 53, 56],
+						},
+						{
+							id: 'orders',
+							label: 'Total orders',
+							value: 238,
+							valueType: 'number',
+							change: { value: '6.4%', direction: 'up' },
+							sparkline: [28, 30, 31, 33, 35, 34, 38],
+						},
+						{
+							id: 'returning-rate',
+							label: 'Returning customers',
+							value: 0.432,
+							valueType: 'percentage',
+							change: { value: '1.8%', direction: 'up' },
+							sparkline: [40, 41, 41, 42, 42, 43, 43],
+						},
+						{
+							id: 'fulfilled-on-time',
+							label: 'On-time dispatch',
+							value: 0.994,
+							valueType: 'percentage',
+							change: { value: '0.2%', direction: 'up' },
+							sparkline: [99, 99, 99, 99, 99, 100, 99],
+						},
+					],
+		[period],
+	);
+
+	return (
+		<Page
+			header={{
+				title: 'Store overview',
+				description: 'Sales KPIs for the selected period, with monthly comparisons and a current operations snapshot.',
+				titleBadges: [{ label: 'Live', tone: 'success' }],
+				// A period choice is a control, not a command, so it stays in `actions`.
+				actions: (
+					<Select
+						aria-label="Reporting period"
+						options={[
+							{ value: '7d', label: 'Last 7 days' },
+							{ value: '30d', label: 'Last 30 days' },
+						]}
+						value={period}
+						onValueChange={(value) => {
+							if (value === '7d' || value === '30d') setPeriod(value);
+						}}
+					/>
+				),
+			}}
+		>
+			<Stack gap="2xl">
+				<MetricBar metrics={kpiMetrics} />
+
+				<TwoColumnLayout
+					stickyAside
+					main={
+						<Stack gap="2xl">
+							<Grid columns={{ base: 1, md: 2 }} gap="2xl">
+								<Card
+									title="Monthly net sales"
+									description="Net revenue compared with prior 30-day period."
+								>
+									<MetricComparison
+										current={{
+											id: 'cur-sales',
+											label: 'Current',
+											value: 148500,
+											valueType: 'currency',
+											currency: 'USD',
+										}}
+										previous={{
+											id: 'prev-sales',
+											label: 'Previous',
+											value: 132100,
+											valueType: 'currency',
+											currency: 'USD',
+										}}
+										currentPeriod="Oct 2026"
+										previousPeriod="Sep 2026"
+									/>
+								</Card>
+								<Card
+									title="Online store conversion rate"
+									description="Completed checkouts as a share of store sessions."
+								>
+									<MetricComparison
+										current={{
+											id: 'cur-conv',
+											label: 'Current',
+											value: 0.038,
+											valueType: 'percentage',
+										}}
+										previous={{
+											id: 'prev-conv',
+											label: 'Previous',
+											value: 0.034,
+											valueType: 'percentage',
+										}}
+										currentPeriod="Oct 2026"
+										previousPeriod="Sep 2026"
+									/>
+								</Card>
+							</Grid>
+
+							<Card
+								title="Fulfillment throughput"
+								description="Orders packed and dispatched over the past 90 days."
+							>
+								<ActivityHeatmap
+									title="Daily packed parcels"
+									data={HEATMAP_DAYS}
+								/>
+							</Card>
+
+							<Card
+								title="Operations tasks"
+								description="Active merchandising and inventory tasks assigned to store staff."
+								headerAction={
+									<Button
+										size="sm"
+										onClick={() =>
+											setTasks((current) =>
+												current.map((task) => ({
+													...task,
+													status: 'done',
+												})),
+											)
+										}
+									>
+										Mark all complete
+									</Button>
+								}
+							>
+								<ItemGroup>
+									{tasks.map((task) => (
+										<Item key={task.id}>
+											<ItemContent>
+												<ItemTitle>{task.title}</ItemTitle>
+												<ItemDescription>{task.description}</ItemDescription>
+											</ItemContent>
+											<ItemActions>
+												<Badge tone={task.status === 'done' ? 'success' : 'warning'}>
+													{task.status === 'done' ? 'Completed' : task.dueLabel}
+												</Badge>
+											</ItemActions>
+										</Item>
+									))}
+								</ItemGroup>
+							</Card>
+						</Stack>
+					}
+					aside={
+						<Stack gap="2xl">
+							<Card
+								title="Sales by channel"
+								description="Net revenue share over the last 30 days."
+							>
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: 'online',
+											label: 'Online Store',
+											value: `${formatMoney(112400)} (76%)`,
+										},
+										{
+											id: 'pos',
+											label: 'SoHo Retail POS',
+											value: `${formatMoney(28900)} (19%)`,
+										},
+										{
+											id: 'social',
+											label: 'Instagram Shop',
+											value: `${formatMoney(7200)} (5%)`,
+										},
+									]}
+								/>
+							</Card>
+
+							<UsageCard
+								title="Brooklyn Warehouse capacity"
+								description="Active bin utilization across apparel & home goods racks"
+								data={{
+									used: 4120,
+									limit: 5000,
+									unit: 'bins',
+									categories: [
+										{ id: 'knitwear', label: 'Knitwear & Outerwear', value: 1840, color: 1 },
+										{ id: 'home', label: 'Linen & Ceramics', value: 1420, color: 2 },
+										{ id: 'accessories', label: 'Accessories & Returns', value: 860, color: 3 },
+									],
+								}}
+							/>
+
+							<Card
+								title="Recent activity"
+								description="Latest carrier pickups, payouts, and catalog updates."
+							>
+								<ActivityLog bare entries={STORE_ACTIVITY} itemSpacing="compact" />
+							</Card>
+						</Stack>
+					}
+				/>
+			</Stack>
+		</Page>
+	);
+}
+export default AnalyticsOperationsTemplate;