+
+
+ {/* Page content */}
+ {page === 'overview' && Dashboard › {pageTitle[page]}
+
+ {image
+ ? 
+ : {name ? initials(name) : '?'}
+ }
+
+ )
+}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 0000000..32bb5e9
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react'
+
+type BadgeColor = 'brand' | 'success' | 'warning' | 'danger' | 'informative' | 'subtle'
+type BadgeSize = 'small' | 'medium' | 'large'
+type BadgeAppearance = 'filled' | 'ghost' | 'outline' | 'tint'
+
+interface BadgeProps {
+ children: ReactNode
+ color?: BadgeColor
+ size?: BadgeSize
+ appearance?: BadgeAppearance
+ shape?: 'rounded' | 'circular' | 'square'
+}
+
+const colorMap: Record
+ {label && (
+
+ )}
+
+ )
+}
diff --git a/src/components/MessageBar.tsx b/src/components/MessageBar.tsx
new file mode 100644
index 0000000..ed2bb13
--- /dev/null
+++ b/src/components/MessageBar.tsx
@@ -0,0 +1,35 @@
+import { type ReactNode, useState } from 'react'
+
+type Intent = 'info' | 'success' | 'warning' | 'error'
+
+interface MessageBarProps {
+ intent?: Intent
+ children: ReactNode
+ title?: string
+ dismissible?: boolean
+}
+
+const config: Record
+ {contentBefore && {contentBefore}}
+
+ {contentAfter && {contentAfter}}
+
+ {error && {error}}
+ {!error && hint && {hint}}
+
+ {emoji}
+
+ )
+}
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
new file mode 100644
index 0000000..8c52bd5
--- /dev/null
+++ b/src/components/ProgressBar.tsx
@@ -0,0 +1,43 @@
+interface ProgressBarProps {
+ value?: number // 0–100, undefined = indeterminate
+ thickness?: 'medium' | 'large'
+ color?: 'brand' | 'success' | 'warning' | 'error'
+ label?: string
+ hint?: string
+}
+
+const colorMap = {
+ brand: 'bg-[#0078D4]',
+ success: 'bg-[#107C10]',
+ warning: 'bg-[#D83B01]',
+ error: 'bg-[#A4262C]',
+}
+
+const thicknessMap = { medium: 'h-1', large: 'h-2' }
+
+export default function ProgressBar({ value, thickness = 'medium', color = 'brand', label, hint }: ProgressBarProps) {
+ const indeterminate = value === undefined
+ return (
+
+ {title &&
+ {dismissible && (
+
+ )}
+ {title}
}
+ {children}
+
+ {(label || hint) && (
+
+ )
+}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..c8c6007
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,33 @@
+import { type SelectHTMLAttributes } from 'react'
+
+interface SelectOption { label: string; value: string }
+
+interface SelectProps extends SelectHTMLAttributes
+ {label && {label}}
+ {hint && {hint}}
+
+ )}
+
+ {indeterminate ? (
+
+ ) : (
+
+ )}
+
+ {!indeterminate && value !== undefined && (
+ {Math.round(value)}%
+ )}
+
+
+ {label && }
+
+ )
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9b42a13..35f1d72 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -11,6 +11,11 @@ const navItems: { id: Page; label: string; icon: string }[] = [
{ id: 'tables', label: 'Tables', icon: '⊞' },
{ id: 'query', label: 'Query Editor', icon: '❯_' },
{ id: 'activity', label: 'Activity Log', icon: '≡' },
+ { id: 'figma', label: 'Figma Files', icon: '✦' },
+ { id: 'components', label: 'Components', icon: '⬡' },
+ { id: 'moo', label: 'MoO Portal', icon: 'M' },
+ { id: 'auth', label: 'Auth Wireframes', icon: '🔑' },
+ { id: 'leave', label: 'Leave Wizard', icon: '📋' },
]
export default function Sidebar({ activePage, onNavigate, tableCount }: Props) {
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
new file mode 100644
index 0000000..4dad6fc
--- /dev/null
+++ b/src/components/Spinner.tsx
@@ -0,0 +1,32 @@
+type SpinnerSize = 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'
+
+interface SpinnerProps {
+ size?: SpinnerSize
+ label?: string
+ labelPosition?: 'above' | 'below' | 'before' | 'after'
+}
+
+const sizeMap: Record
+
+ ⌄
+
+ {error && {error}}
+ {!error && hint && {hint}}
+
+ {(labelPosition === 'above' || labelPosition === 'before') && {label}}
+ {spinner}
+ {(labelPosition === 'below' || labelPosition === 'after') && {label}}
+
+ )
+}
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
new file mode 100644
index 0000000..9d67350
--- /dev/null
+++ b/src/components/Tabs.tsx
@@ -0,0 +1,39 @@
+import { type ReactNode, useState } from 'react'
+
+interface Tab {
+ id: string
+ label: string
+ icon?: ReactNode
+ content: ReactNode
+}
+
+interface TabsProps {
+ tabs: Tab[]
+ defaultTab?: string
+ size?: 'small' | 'medium' | 'large'
+}
+
+const sizeMap = { small: 'text-xs px-2 py-1.5', medium: 'text-sm px-3 py-2', large: 'text-base px-4 py-2.5' }
+
+export default function Tabs({ tabs, defaultTab, size = 'medium' }: TabsProps) {
+ const [active, setActive] = useState(defaultTab || tabs[0]?.id)
+ const activeTab = tabs.find(t => t.id === active)
+ return (
+
+
+ )
+}
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
new file mode 100644
index 0000000..0a2f45e
--- /dev/null
+++ b/src/components/Tag.tsx
@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react'
+
+interface TagProps {
+ children: ReactNode
+ onDismiss?: () => void
+ size?: 'small' | 'medium' | 'large'
+ appearance?: 'filled' | 'outline' | 'brand'
+ disabled?: boolean
+}
+
+const sizeMap = { small: 'h-5 text-xs px-1.5 gap-1', medium: 'h-6 text-xs px-2 gap-1.5', large: 'h-8 text-sm px-3 gap-2' }
+const appearanceMap = {
+ filled: 'bg-[#E1DFDD] text-[#201F1E] border border-transparent',
+ outline: 'bg-white text-[#201F1E] border border-[#8A8886]',
+ brand: 'bg-[#DEECF9] text-[#0078D4] border border-transparent',
+}
+
+export default function Tag({ children, onDismiss, size = 'medium', appearance = 'filled', disabled }: TagProps) {
+ return (
+
+ {children}
+ {onDismiss && (
+
+ )}
+
+ )
+}
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
new file mode 100644
index 0000000..b9a4ff4
--- /dev/null
+++ b/src/components/Toggle.tsx
@@ -0,0 +1,21 @@
+import { type InputHTMLAttributes } from 'react'
+
+interface ToggleProps extends Omit
+ {tabs.map(tab => (
+
+ ))}
+
+ {activeTab?.content}
+
+ {children}
+
+ )
+}
diff --git a/src/components/leave/CheckboxItem.tsx b/src/components/leave/CheckboxItem.tsx
new file mode 100644
index 0000000..d87c74f
--- /dev/null
+++ b/src/components/leave/CheckboxItem.tsx
@@ -0,0 +1,38 @@
+interface Props {
+ checked: boolean
+ onChange: (checked: boolean) => void
+ label: string
+ helper?: string
+}
+
+export default function CheckboxItem({ checked, onChange, label, helper }: Props) {
+ return (
+
+ )
+}
diff --git a/src/components/leave/OptionCard.tsx b/src/components/leave/OptionCard.tsx
new file mode 100644
index 0000000..05de568
--- /dev/null
+++ b/src/components/leave/OptionCard.tsx
@@ -0,0 +1,36 @@
+interface Props {
+ label: string
+ description: string
+ selected: boolean
+ onClick: () => void
+}
+
+export default function OptionCard({ label, description, selected, onClick }: Props) {
+ return (
+
+ )
+}
diff --git a/src/components/leave/RadioInline.tsx b/src/components/leave/RadioInline.tsx
new file mode 100644
index 0000000..93c1771
--- /dev/null
+++ b/src/components/leave/RadioInline.tsx
@@ -0,0 +1,31 @@
+interface Props {
+ options: string[]
+ value: string
+ onChange: (value: string) => void
+}
+
+export default function RadioInline({ options, value, onChange }: Props) {
+ return (
+
+ {options.map((option) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/leave/Stepper.tsx b/src/components/leave/Stepper.tsx
new file mode 100644
index 0000000..380ee94
--- /dev/null
+++ b/src/components/leave/Stepper.tsx
@@ -0,0 +1,54 @@
+interface Step {
+ label: string
+ status: 'completed' | 'current' | 'upcoming'
+}
+
+interface Props {
+ steps: Step[]
+}
+
+export default function Stepper({ steps }: Props) {
+ return (
+
+ {steps.map((step, i) => (
+
+ )
+}
diff --git a/src/components/leave/WizardButtons.tsx b/src/components/leave/WizardButtons.tsx
new file mode 100644
index 0000000..01b19d0
--- /dev/null
+++ b/src/components/leave/WizardButtons.tsx
@@ -0,0 +1,32 @@
+interface Props {
+ onBack: () => void
+ onContinue: () => void
+ continueLabel?: string
+ disabled?: boolean
+}
+
+export default function WizardButtons({ onBack, onContinue, continueLabel = 'Continue', disabled }: Props) {
+ return (
+
+
+ ))}
+
+
+ {i < steps.length - 1 && (
+
+ {step.status === 'completed' ? '✓' : i + 1}
+
+
+
+ {step.label}
+
+
+
+
+
+ )}
+
+
+
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index f62abb4..5152e17 100644
--- a/src/index.css
+++ b/src/index.css
@@ -35,6 +35,108 @@
::-webkit-scrollbar-thumb { @apply bg-gray-700 rounded-full; }
::-webkit-scrollbar-thumb:hover { @apply bg-gray-600; }
+/* ── Prototype animations ──────────────────────────────────────────────────── */
+
+@keyframes screen-slide-in-right {
+ from { transform: translateX(100%); opacity: 0; }
+ to { transform: translateX(0); opacity: 1; }
+}
+@keyframes screen-slide-in-left {
+ from { transform: translateX(-100%); opacity: 0; }
+ to { transform: translateX(0); opacity: 1; }
+}
+@keyframes fade-in-up {
+ from { transform: translateY(10px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+@keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@keyframes shake {
+ 0%,100% { transform: translateX(0); }
+ 15% { transform: translateX(-6px); }
+ 35% { transform: translateX(6px); }
+ 55% { transform: translateX(-4px); }
+ 75% { transform: translateX(4px); }
+ 90% { transform: translateX(-2px); }
+}
+@keyframes pop-in {
+ 0% { transform: scale(0.75); opacity: 0; }
+ 65% { transform: scale(1.08); opacity: 1; }
+ 100% { transform: scale(1); opacity: 1; }
+}
+@keyframes popIn {
+ 0% { transform: scale(0.75); opacity: 0; }
+ 65% { transform: scale(1.08); opacity: 1; }
+ 100% { transform: scale(1); opacity: 1; }
+}
+@keyframes pin-drop {
+ 0% { transform: translate(-50%, -180%) scale(0.6); opacity: 0; }
+ 55% { transform: translate(-50%, -42%) scale(1.25); opacity: 1; }
+ 75% { transform: translate(-50%, -50%) scale(0.92); }
+ 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}
+@keyframes digit-pop {
+ 0% { transform: scale(0.7); }
+ 55% { transform: scale(1.18); }
+ 100% { transform: scale(1); }
+}
+@keyframes check-draw {
+ from { stroke-dashoffset: 36; opacity: 0; }
+ to { stroke-dashoffset: 0; opacity: 1; }
+}
+@keyframes step-line-fill {
+ from { transform: scaleX(0); }
+ to { transform: scaleX(1); }
+}
+@keyframes slide-down-fade {
+ from { transform: translateY(-4px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+@keyframes progress-fill {
+ from { width: 0%; }
+ to { width: 100%; }
+}
+
+.animate-screen-right { animation: screen-slide-in-right 0.32s cubic-bezier(0.22,1,0.36,1) both; }
+.animate-screen-left { animation: screen-slide-in-left 0.32s cubic-bezier(0.22,1,0.36,1) both; }
+.animate-fade-in-up { animation: fade-in-up 0.3s ease both; }
+.animate-fade-in { animation: fade-in 0.25s ease both; }
+.animate-shake { animation: shake 0.45s ease both; }
+.animate-pop-in { animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
+.animate-pin-drop { animation: pin-drop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
+.animate-digit-pop { animation: digit-pop 0.25s cubic-bezier(0.34,1.56,0.64,1) both; }
+.animate-check-draw { animation: check-draw 0.4s ease both; }
+.animate-slide-down { animation: slide-down-fade 0.2s ease both; }
+
+/* Staggered children fade-in */
+.stagger-children > * { animation: fade-in-up 0.3s ease both; }
+.stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.12s; }
+.stagger-children > *:nth-child(4) { animation-delay: 0.16s; }
+.stagger-children > *:nth-child(5) { animation-delay: 0.20s; }
+.stagger-children > *:nth-child(6) { animation-delay: 0.24s; }
+
+/* Button press */
+.btn-press {
+ transition: transform 0.1s ease, background-color 0.15s ease, opacity 0.15s ease;
+}
+.btn-press:active:not(:disabled) { transform: scale(0.97); }
+
+/* Input focus glow */
+.input-animated {
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.input-animated:focus {
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
+}
+
/* Code editor */
.sql-editor {
font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
diff --git a/src/pages/ComponentDemo.tsx b/src/pages/ComponentDemo.tsx
new file mode 100644
index 0000000..d202c54
--- /dev/null
+++ b/src/pages/ComponentDemo.tsx
@@ -0,0 +1,199 @@
+import { useState } from 'react'
+import Button from '../components/Button'
+import Input from '../components/Input'
+import Checkbox from '../components/Checkbox'
+import Toggle from '../components/Toggle'
+import Badge from '../components/Badge'
+import Avatar from '../components/Avatar'
+import Spinner from '../components/Spinner'
+import ProgressBar from '../components/ProgressBar'
+import Tag from '../components/Tag'
+import MessageBar from '../components/MessageBar'
+import Tabs from '../components/Tabs'
+import Select from '../components/Select'
+
+const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
+
+
+)
+
+export default function ComponentDemo() {
+ const [tags, setTags] = useState(['Design', 'Fluent 2', 'React', 'TypeScript'])
+ const [progress, setProgress] = useState(65)
+
+ return (
+ {title}
+{children}
+
+
+ )
+}
diff --git a/src/pages/FigmaFiles.tsx b/src/pages/FigmaFiles.tsx
new file mode 100644
index 0000000..a46a18a
--- /dev/null
+++ b/src/pages/FigmaFiles.tsx
@@ -0,0 +1,238 @@
+import { useState } from 'react'
+import { type FigmaProject, type FigmaFile } from '../types'
+
+const API_BASE = 'http://localhost:3001'
+
+export default function FigmaFiles() {
+ const [token, setToken] = useState('')
+ const [teamId, setTeamId] = useState('')
+ const [projectId, setProjectId] = useState('')
+ const [mode, setMode] = useState<'team' | 'project'>('project')
+ const [projects, setProjects] = useState
+
+
+ Component Demo
++ Microsoft Fluent 2 Web design system ·{' '} + + View in Figma + +
+
+
+ {/* Button */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Input */}
+
+
+
+
+ {/* Select */}
+
+
+
+ {/* Checkbox */}
+
+
+
+ {/* Toggle */}
+
+
+
+ {/* Badge */}
+
+ Brand
+ Success
+ Warning
+ Danger
+ Info
+ Subtle
+
+
+
+ Filled
+ Tint
+ Outline
+ Ghost
+ 12
+ 3
+
+
+ {/* Avatar */}
+
+
+
+ {/* Tag */}
+
+ {tags.map(tag => (
+ setTags(t => t.filter(x => x !== tag))}>{tag}
+ ))}
+ Outline
+ Brand
+ Small
+ Large
+ Disabled
+
+
+ {/* Spinner */}
+
+
+
+ {/* ProgressBar */}
+
+
+
+ {/* MessageBar */}
+
+
+
+ {/* Tabs */}
+
+
+
+
+ 🔍} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You can reference Fluent 2 components directly from Figma.
+ Your settings have been saved successfully.
+ Your session will expire in 5 minutes.
+ Failed to connect to the server. Please try again.
+
+
+ Overview content goes here. },
+ { id: 'details', label: 'Details', icon: '≡', content:
+ Details content goes here.
}, + { id: 'history', label: 'History', icon: '⟳', content:History content goes here.
}, + ]} /> +
+
+ )
+}
diff --git a/src/pages/LeaveWizard.tsx b/src/pages/LeaveWizard.tsx
new file mode 100644
index 0000000..928fd14
--- /dev/null
+++ b/src/pages/LeaveWizard.tsx
@@ -0,0 +1,227 @@
+import { useState, useCallback, useMemo } from 'react'
+import Stepper from '../components/leave/Stepper'
+import ReasonForLeave from './leave/ReasonForLeave'
+import NewChildDetails from './leave/NewChildDetails'
+import WorkSchedule from './leave/WorkSchedule'
+import LeaveScheduleDuration from './leave/LeaveScheduleDuration'
+import LeaveEstimate from './leave/LeaveEstimate'
+import Compliance from './leave/Compliance'
+import ReviewSubmit from './leave/ReviewSubmit'
+import Confirmation from './leave/Confirmation'
+import { type LeaveFormData, type StepId, defaultFormData, CHILD_RELATED_REASONS } from './leave/types'
+
+const ALL_STEPS: StepId[] = [
+ 'reason', 'child-details', 'work-schedule', 'schedule-duration',
+ 'estimate', 'compliance', 'review', 'confirmation',
+]
+
+function getActiveSteps(formData: LeaveFormData): StepId[] {
+ const showChildDetails = CHILD_RELATED_REASONS.includes(formData.leaveReason)
+ return ALL_STEPS.filter(s => s !== 'child-details' || showChildDetails)
+}
+
+function getStepperConfig(currentStep: StepId, activeSteps: StepId[]) {
+ const labels = ['Start', 'Employee', 'Leave Reason', 'Details', 'Review & Submit']
+ const detailSteps: StepId[] = ['child-details', 'work-schedule', 'schedule-duration', 'estimate', 'compliance']
+ const currentIdx = activeSteps.indexOf(currentStep)
+ const reasonIdx = activeSteps.indexOf('reason')
+ const reviewIdx = activeSteps.indexOf('review')
+
+ return labels.map((label, i) => {
+ const stepNum = i + 1
+ let status: 'completed' | 'current' | 'upcoming'
+
+ if (stepNum <= 2) {
+ status = 'completed'
+ } else if (stepNum === 3) {
+ status = currentStep === 'reason' ? 'current' : currentIdx > reasonIdx ? 'completed' : 'upcoming'
+ } else if (stepNum === 4) {
+ if (detailSteps.includes(currentStep)) status = 'current'
+ else if (currentIdx <= reasonIdx) status = 'upcoming'
+ else status = 'completed'
+ } else {
+ if (currentStep === 'review') status = 'current'
+ else if (currentIdx > reviewIdx) status = 'completed'
+ else status = 'upcoming'
+ }
+
+ return { label, status }
+ })
+}
+
+interface Props {
+ onBack: () => void
+}
+
+export default function LeaveWizard({ onBack }: Props) {
+ const [formData, setFormData] = useState
+
+
+ {/* Credentials */}
+ Figma Files
+Browse your Figma team projects and files
+
+
+
+ {error && (
+
+
+ Connection
+
+
+
+
+
+
+ {mode === 'project' ? (
+
+ ) : (
+
+ )}
+
+
+ setToken(e.target.value)}
+ placeholder="figd_..."
+ className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-blue-500"
+ />
+
+
+ {mode === 'project' ? (
+ <>
+
+ setProjectId(e.target.value)}
+ placeholder="514415807"
+ className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-blue-500"
+ />
+
+ ) : (
+ <>
+
+ setTeamId(e.target.value)}
+ placeholder="123456789"
+ className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-blue-500"
+ />
+
+ )}
+
+
+ {error}
+
+ )}
+
+ {/* Projects */}
+ {projects.length > 0 && (
+
+
+ )}
+
+ {/* Files */}
+ {selectedProject && (
+ + Projects ({projects.length}) +
+
+ {projects.map(project => (
+
+ ))}
+
+
+
+ )}
+ + Files in {selectedProject.name} + {!loadingFiles && ( + ({files.length}) + )} +
+ + {loadingFiles && ( +Loading files…
+ )}
+
+ {!loadingFiles && files.length === 0 && (
+ No files found in this project.
+ )}
+
+ {!loadingFiles && files.length > 0 && (
+
+ {files.map(file => (
+
+ {file.thumbnail_url && (
+
+ )}
+
+ 
+
+ )}
+
+
+
+ ))}
+ {file.name}
+
+ {new Date(file.last_modified).toLocaleDateString()}
+
+
+
+ )
+ }
+
+ const stepperConfig = getStepperConfig(step, activeSteps)
+ const currentStepIndex = activeSteps.indexOf(step)
+ const totalFormSteps = activeSteps.length - 1 // exclude confirmation
+ const progressPercent = Math.round(((currentStepIndex + 1) / totalFormSteps) * 100)
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/pages/MoOPortal.tsx b/src/pages/MoOPortal.tsx
new file mode 100644
index 0000000..954581d
--- /dev/null
+++ b/src/pages/MoOPortal.tsx
@@ -0,0 +1,481 @@
+import { useState } from 'react'
+
+// ── Design Tokens ────────────────────────────────────────────────────────────
+const tokens = {
+ bg: { navy: '#0A1128', slate: '#101820' },
+ primary: '#0055A4',
+ text: { primary: '#F8FAFC', secondary: '#64748B' },
+ status: { success: '#108981', warning: '#F59E0B', error: '#EF4444', inactive: '#64748B' },
+ surface: {
+ card: 'rgba(255,255,255,0.05)',
+ hover: 'rgba(255,255,255,0.10)',
+ nav: 'rgba(10,17,40,0.8)',
+ },
+ border: 'rgba(255,255,255,0.08)',
+}
+
+// ── Types ────────────────────────────────────────────────────────────────────
+type NavPage = 'overview' | 'benefits' | 'claims'
+
+// ── Sub-components ───────────────────────────────────────────────────────────
+
+function StatusBadge({ status }: { status: 'Active' | 'Pending' | 'Denied' | 'Inactive' | 'Approved' }) {
+ const colors: Record
+
+
+
+
+ {/* Validation errors */}
+ {errors.length > 0 && (
+
+
+
+
+ Step {currentStepIndex + 1} of {totalFormSteps}
+
+
+
+ )}
+
+ {/* Step content with transition */}
+ Please fix the following:
+-
+ {errors.map((err, i) => (
+
- {err} + ))} +
+ {step === 'reason' && (
+
+
+ {children}
+
+ )
+}
+
+function StatCard({ label, value, sub, subColor }: { label: string; value: string; sub?: string; subColor?: string }) {
+ return (
+ {label}
+ {value}
+ {sub && {sub}
}
+
+ {cfg.icon}
+
+ )
+}
+
+function MoOButton({ children, variant = 'primary', size = 'md', onClick, icon }: {
+ children?: React.ReactNode;
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
+ size?: 'sm' | 'md' | 'lg';
+ onClick?: () => void;
+ icon?: string;
+}) {
+ const styles: Record
+
+ {dismissible && (
+
+ )}
+ {title}
+ {message}
+
+ {/* Stats row */}
+
+ )
+}
+
+function BenefitsPage() {
+ const plans = [
+ { icon: '🦷', name: 'Dental Plan', status: 'Active' as const, number: 'DEN-987654', level: 'Family', premium: '$45.00 / mo', color: tokens.primary },
+ { icon: '👁', name: 'Vision Plan', status: 'Active' as const, number: 'VIS-234567', level: 'Individual', premium: '$12.00 / mo', color: tokens.status.success },
+ { icon: '🏥', name: 'Medical Plan', status: 'Pending' as const, number: 'MED-345678', level: 'Family', premium: '$78.00 / mo', color: tokens.status.warning },
+ ]
+ return (
+
+
+
+ {/* Main content */}
+
+ {/* Recent Claims */}
+
+
+
+
+
+
+ {/* Alerts & quick actions */}
+
+
+ Recent Claims
+
+
+ Filter
+
+
+ 🔍
+ Search claims...
+
+ | {h} | + ))} +||||
|---|---|---|---|---|
| {row.date} | +{row.type} | +{row.provider} | +{row.amount} | +
+
+
+
+ Quick Actions
+
+ Submit Claim
+ Update Coverage
+ Learn More →
+
+
+
+ Add Dependent
+
+
+ )
+}
+
+function ClaimsPage() {
+ const claims = [
+ { id: '#CLM-001', date: 'Oct 15, 2023', type: '🦷 Dental', provider: 'Dr. Smith Family Dentistry', amount: '$150.00', status: 'Approved' as const },
+ { id: '#CLM-002', date: 'Sep 28, 2023', type: '👁 Vision', provider: 'ClearSight Optometry', amount: '$320.00', status: 'Pending' as const },
+ { id: '#CLM-003', date: 'Aug 10, 2023', type: '🏥 Medical', provider: 'General Hospital', amount: '$1,250.00', status: 'Denied' as const },
+ { id: '#CLM-004', date: 'Jul 22, 2023', type: '🦷 Dental', provider: 'Smile Dental Group', amount: '$89.00', status: 'Approved' as const },
+ { id: '#CLM-005', date: 'Jun 05, 2023', type: '👁 Vision', provider: 'EyeCare Plus', amount: '$210.00', status: 'Approved' as const },
+ ]
+ return (
+
+ {plans.map(plan => (
+
+
+ ))}
+
+ {/* Add Dependent card */}
+
+ {plan.icon} {plan.name}
+
+
+ {[['Policy Number', plan.number], ['Coverage Level', plan.level], ['Premium', plan.premium]].map(([k, v]) => (
+
+
+
+ {k}
+ {v}
+
+ ))}
+ ＋
+ Add New Dependent
+ Enroll family members to your active plans.
+
+
+
+
+
+
+
+ )
+}
+
+// ── Figma Sync Panel ─────────────────────────────────────────────────────────
+
+function FigmaSyncPanel() {
+ const [token, setToken] = useState('')
+ const [fileId, setFileId] = useState('npNBYNKgovYYmgK2kpALrI')
+ const [status, setStatus] = useState<'idle' | 'pushing' | 'success' | 'error'>('idle')
+ const [message, setMessage] = useState('')
+ const [open, setOpen] = useState(false)
+
+ async function pushToFigma() {
+ if (!token || !fileId) return
+ setStatus('pushing')
+ setMessage('')
+ try {
+ const res = await fetch('http://localhost:3001/api/figma/push-variables', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json', 'X-Figma-Token': token },
+ body: JSON.stringify({ fileId }),
+ })
+ const data = await res.json()
+ if (!res.ok) throw new Error(data.error || 'Failed')
+ setStatus('success')
+ setMessage(data.message)
+ } catch (err) {
+ setStatus('error')
+ setMessage(err instanceof Error ? err.message : 'Unknown error')
+ }
+ }
+
+ return (
+
+ Submit New Claim
+
+ {claims.length} claims found
+ | {h} | + ))} +|||||
|---|---|---|---|---|---|
| {row.id} | +{row.date} | +{row.type} | +{row.provider} | +{row.amount} | +
+
+
+ {open && (
+
+ )
+}
+
+// ── Main Portal ──────────────────────────────────────────────────────────────
+
+const navItems = [
+ { id: 'overview' as NavPage, label: 'Overview', icon: '⊞' },
+ { id: 'benefits' as NavPage, label: 'Benefits', icon: '🛡' },
+ { id: 'claims' as NavPage, label: 'Claims', icon: '📄' },
+]
+
+const pageTitle: Record
+ setToken(e.target.value)}
+ style={{
+ background: tokens.surface.card, border: `1px solid ${tokens.border}`,
+ borderRadius: 6, padding: '6px 10px', fontSize: 11,
+ color: tokens.text.primary, fontFamily: 'Inter, sans-serif', width: '100%', boxSizing: 'border-box',
+ }}
+ />
+ setFileId(e.target.value)}
+ style={{
+ background: tokens.surface.card, border: `1px solid ${tokens.border}`,
+ borderRadius: 6, padding: '6px 10px', fontSize: 11,
+ color: tokens.text.primary, fontFamily: 'Inter, sans-serif', width: '100%', boxSizing: 'border-box',
+ }}
+ />
+
+ {message && (
+
+ )}
+
+ {message}
+
+ )}
+
+
+ {/* Sidebar */}
+
+
+ {/* Main content */}
+
+ {/* Header */}
+
+
+ )
+}
diff --git a/src/pages/leave/Compliance.tsx b/src/pages/leave/Compliance.tsx
new file mode 100644
index 0000000..6443664
--- /dev/null
+++ b/src/pages/leave/Compliance.tsx
@@ -0,0 +1,105 @@
+import Card from '../../components/leave/Card'
+import RadioInline from '../../components/leave/RadioInline'
+import CheckboxItem from '../../components/leave/CheckboxItem'
+import WizardButtons from '../../components/leave/WizardButtons'
+import { type LeaveFormData } from './types'
+
+interface Props {
+ formData: LeaveFormData
+ onChange: (updates: Partial+ Regulatory & Compliance Information +
++ Answer these questions to ensure compliance with federal and state leave regulations. +
+ +
+ {/* Question 1 */}
+
+
+
+
+ onChange({ priorLeaveIn12Months: v })}
+ />
+ {formData.priorLeaveIn12Months === 'Yes' && (
+
+
+ {/* Question 2 */}
+ + Your case manager will review any prior leave usage to calculate remaining entitlements. +
+ )} +
+
+ onChange({ workersCompRelated: v })}
+ />
+ {formData.workersCompRelated === 'Yes' && (
+
+
+ {/* Question 3 */}
+ + Workers' compensation and FMLA leave may run concurrently. Additional information may be required. +
+ )} +
+
+ onChange({ needsAccommodations: v })}
+ />
+ {formData.needsAccommodations === 'Yes' && (
+
+
+ {/* Acknowledgment */}
+ + Your case manager will follow up to discuss accommodation options under the ADA. +
+ )} +
+ onChange({ complianceAcknowledged: v })}
+ label="I acknowledge that I have been informed of my rights and responsibilities under applicable federal and state leave laws."
+ helper="Including FMLA, ADA, and Washington Paid Family & Medical Leave."
+ />
+
+
+
+
+ {/* Hero */}
+
+ )
+}
diff --git a/src/pages/leave/LeaveEstimate.tsx b/src/pages/leave/LeaveEstimate.tsx
new file mode 100644
index 0000000..e8428c5
--- /dev/null
+++ b/src/pages/leave/LeaveEstimate.tsx
@@ -0,0 +1,137 @@
+import Card from '../../components/leave/Card'
+import CheckboxItem from '../../components/leave/CheckboxItem'
+import WizardButtons from '../../components/leave/WizardButtons'
+import { type LeaveFormData } from './types'
+
+function getBenefits(formData: LeaveFormData) {
+ const benefits: { icon: string; iconBg: string; iconColor: string; label: string; desc: string }[] = []
+
+ // FMLA is available for most leave types
+ const fmlaReasons = [
+ 'My own health condition', 'Care for a family member', 'Bond with a new child',
+ 'Pregnancy / maternity leave', 'Military family leave',
+ ]
+ if (fmlaReasons.includes(formData.leaveReason)) {
+ benefits.push({
+ icon: '✓', iconBg: 'bg-blue-400/10', iconColor: 'text-blue-500',
+ label: 'FMLA Leave',
+ desc: 'Up to 12 weeks of job-protected leave under the Family and Medical Leave Act',
+ })
+ }
+
+ // STD for own health conditions
+ if (['My own health condition', 'Pregnancy / maternity leave'].includes(formData.leaveReason)) {
+ benefits.push({
+ icon: '$', iconBg: 'bg-blue-600/[0.06]', iconColor: 'text-blue-600',
+ label: 'Short-Term Disability (STD)',
+ desc: 'Income replacement while unable to work due to your condition',
+ })
+ }
+
+ // State paid leave
+ if (formData.leaveReason !== 'Personal leave' && formData.leaveReason !== 'Other / employer-approved') {
+ benefits.push({
+ icon: '$', iconBg: 'bg-blue-600/[0.06]', iconColor: 'text-blue-600',
+ label: 'Washington Paid Family & Medical Leave',
+ desc: 'State-sponsored partial wage replacement during your leave',
+ })
+ }
+
+ // Bereavement pay
+ if (formData.leaveReason === 'Bereavement') {
+ benefits.push({
+ icon: '♡', iconBg: 'bg-purple-500/10', iconColor: 'text-purple-600',
+ label: 'Bereavement Leave',
+ desc: 'Up to 5 days of company-paid bereavement leave for immediate family members',
+ })
+ }
+
+ return benefits
+}
+
+interface Props {
+ formData: LeaveFormData
+ onChange: (updates: Partial
+
+
+ {/* Case Card */}
+
+ ✓
+
+ + Leave Request Successfully Submitted +
++ Your request has been received and is now being processed by our HR team. +
+
+
+
+ {/* What Happens Next */}
+
+
+
+
+
+
+
+
+ Leave Case Number
+{caseNumber}
+
+
+
+ Submitted Date
+ {today}
+
+
+ Leave Start Date
+ {formatDate(formData.leaveStartDate)}
+
+
+ Expected Return
+ {formatDate(formData.expectedReturnDate)}
+
+
+ Processing Time
+ 3–5 business days
+
+
+
+
+ {/* Quick Actions */}
+ + What Happens Next +
+
+ {nextSteps.map((step, i) => (
+
+
+
+ ))}
+
+ {i + 1}
+
+
+ {step.title}
+ {step.desc}
+
+
+ {[
+ { icon: '👁', label: 'View Status', action: onViewStatus },
+ { icon: '📤', label: 'Upload Documents', action: () => {} },
+ { icon: '📞', label: 'Contact HR', action: () => {} },
+ ].map((action) => (
+
+ ))}
+
+
+ {/* Email Notice */}
+
+ 📧
+
+ + A confirmation email with all details and instructions has been sent to + + {formData.employeeName.toLowerCase().replace(' ', '.')}@company.com + +
++ Leave Estimate +
++ Review your leave eligibility and estimated available leave time based on company policies + and applicable laws. +
+ +
+
+
+ {hasBenefits && (
+ + This is an estimate only. An initial determination will be made once your information has been + reviewed by your case manager. Eligibility and benefit amounts are subject to verification. +
+
+ {/* Header */}
+
+ )}
+
+
+
+
+ {/* Dynamic benefit rows */}
+ {benefits.map((b, i) => (
+
+ ✓
+
+
+
+ Preliminary Eligibility Confirmed
++ Based on your answers, you appear to meet the requirements for the following +
+
+
+ ))}
+
+
+
+ {b.icon}
+
+
+ {b.label}
+ {b.desc}
+
+
+
+
+ + What this means:{' '} + + We will file the applicable claims on your behalf. You do not need to file separately + for these benefits. Your case manager will confirm final eligibility and provide specific benefit amounts + after reviewing your complete file. + +
+
+ onChange({ estimateUnderstood: v })}
+ label="I understand this is an estimate and that final eligibility will be determined after review."
+ />
+
+
+ + Leave Schedule & Duration +
++ Specify when and how you'll take this leave. Use the date picker for accuracy. +
+ +
+
+
+
+
+ {patterns.map((p) => (
+ onChange({ leavePattern: p.label })}
+ />
+ ))}
+
+
+ {formData.leavePattern && (
+ <>
+
+
+ + {formData.leavePattern === 'Continuous Leave' ? 'Continuous Leave Dates' : + formData.leavePattern === 'Intermittent Leave' ? 'Intermittent Leave Period' : + 'Reduced Schedule Period'} +
+ +
+
+
+ {dateError && (
+
+
+ onChange({ leaveStartDate: e.target.value })}
+ className="w-full border border-[#d0d0d5] rounded-[7px] px-[15px] py-[13px] text-[15px] text-[#0f0f14] bg-white focus:outline-none focus:border-[#1a1a2e] focus:ring-1 focus:ring-[#1a1a2e] transition-colors"
+ />
+
+
+
+ onChange({ expectedReturnDate: e.target.value })}
+ className="w-full border border-[#d0d0d5] rounded-[7px] px-[15px] py-[13px] text-[15px] text-[#0f0f14] bg-white focus:outline-none focus:border-[#1a1a2e] focus:ring-1 focus:ring-[#1a1a2e] transition-colors"
+ />
+
+ {dateError}
+ )} + + {duration && ( +
+
+ )}
+
+ + Calculated Leave Duration: + + {duration.calendarDays} calendar days ({duration.workDays} work days) + +
+
+
+ onChange({ relatedToPriorLeave: v })}
+ />
+
+
+ )}
+
+
+
+ + {isPregnancy ? 'Pregnancy Details' : 'New Child Details'} +
++ {isPregnancy + ? "We'll use this information to set up your maternity leave." + : "Congratulations! Let's get your leave set up."} +
+ +
+ onChange({ childArrivalStatus: 'Child has already arrived' })}
+ />
+ onChange({ childArrivalStatus: 'Planning for a future arrival' })}
+ />
+
+
+ {/* Date field — dynamic label based on arrival status */}
+ {formData.childArrivalStatus && (
+
+
+ onChange({ expectedDeliveryDate: e.target.value })}
+ className="w-full border border-[#d0d0d5] rounded-[7px] px-[15px] py-[13px] text-[15px] text-[#0f0f14] bg-white focus:outline-none focus:border-[#1a1a2e] focus:ring-1 focus:ring-[#1a1a2e] transition-colors"
+ />
+ {isFutureArrival && (
+
+ )}
+
+ {formData.childArrivalStatus && (
+ <>
+
+ + Your best estimate is fine — this can be updated later. +
+ )} +
+ onChange({ spouseWorksForEmployer: v })}
+ />
+
+
+ )}
+
+ + Does your spouse or domestic partner also work for the same employer? +
++ Some leave entitlements may be shared between spouses employed by the same company. +
+
+
+ + Reason for Leave +
++ Select the option that best fits your situation. Your selection will customize the next screens to + collect relevant information for your leave type. +
+ +
+ {reasons.map((r) => (
+ onChange({
+ leaveReason: r.label,
+ // Reset child-related fields when switching away from child reasons
+ ...(!CHILD_RELATED_REASONS.includes(r.label) ? {
+ childArrivalStatus: '',
+ expectedDeliveryDate: '',
+ spouseWorksForEmployer: '',
+ } : {}),
+ })}
+ />
+ ))}
+
+
+ {formData.leaveReason && (
+
+
+ )}
+
+ + {isChildRelated + ? "Next, we'll collect details about your new child and expected dates." + : "Next, we'll confirm your work schedule and collect leave dates."} +
+
+
+ + Review & Submit +
++ Please review the summary below. If anything needs to change, click "Edit" to go back to that section. +
+ + {sections.map((section) => ( +
+
+ ))}
+
+
+
+ {section.title}
+
+
+
+ {section.rows.map((row, i) => (
+
+ {row.key}
+ {row.value}
+
+ ))}
+
+ onChange({ reviewConfirmed: v })}
+ label="I confirm that the information provided above is accurate and complete to the best of my knowledge."
+ />
+
+
+
+
+ + Work Schedule +
++ Confirm your standard work schedule. This is used to calculate leave duration and entitlements. +
+ +
+
+
+
+ Day
+ Scheduled Hours
+
+ {formData.schedule.map((row, i) => (
+
+ {row.day}
+
+ ))}
+ {/* Total row */}
+
+ updateHours(i, Math.max(0, Math.min(24, Number(e.target.value) || 0)))}
+ className="w-16 border border-[#d0d0d5] rounded px-2 py-1 text-[15px] text-[#0f0f14] text-center focus:outline-none focus:border-[#1a1a2e] focus:ring-1 focus:ring-[#1a1a2e] transition-colors"
+ />
+ hrs
+
+
+ Weekly Total
+ {totalWeeklyHours} hrs
+
+
+ onChange({ scheduleConfirmed: v })}
+ label="My entire schedule is correct as shown above"
+ />
+
+
+
+
+