-
-
-
-
-
+
)
}
-export default App
+function App() {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default App
\ No newline at end of file
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..463a74a
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,63 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from './ui/Button';
+
+interface Props {
+ children: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error?: Error;
+}
+
+export class ErrorBoundary extends Component {
+ public state: State = {
+ hasError: false,
+ };
+
+ public static getDerivedStateFromError(error: Error): State {
+ return { hasError: true, error };
+ }
+
+ public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ console.error('Uncaught error:', error, errorInfo);
+ }
+
+ public render() {
+ if (this.state.hasError) {
+ return (
+ {
+ variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+ size?: 'sm' | 'md' | 'lg';
+ loading?: boolean;
+ icon?: ReactNode;
+}
+
+export function Button({
+ variant = 'primary',
+ size = 'md',
+ loading = false,
+ icon,
+ children,
+ className = '',
+ disabled,
+ ...props
+}: ButtonProps) {
+ const base = 'btn';
+ const variants = {
+ primary: 'btn-primary',
+ secondary: 'btn-secondary',
+ ghost: 'btn-ghost',
+ danger: 'btn-danger',
+ };
+ const sizes = {
+ sm: 'px-3 py-1.5 text-xs',
+ md: 'px-4 py-2.5 text-sm',
+ lg: 'px-6 py-3 text-base',
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/ui/Card.tsx b/frontend/src/components/ui/Card.tsx
new file mode 100644
index 0000000..528cc00
--- /dev/null
+++ b/frontend/src/components/ui/Card.tsx
@@ -0,0 +1,37 @@
+import { cn } from '../../lib/utils';
+
+interface CardProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function Card({ children, className }: CardProps) {
+ return {
+ label?: string;
+ error?: string;
+ hint?: string;
+}
+
+export const Input = forwardRef(
+ ({ label, error, hint, className, ...props }, ref) => {
+ return (
+ {
+ label?: string;
+ error?: string;
+ hint?: string;
+ options: Array<{ value: string; label: string }>;
+}
+
+export const Select = forwardRef(
+ ({ label, error, hint, options, className, ...props }, ref) => {
+ return (
+ {
+ label?: string;
+ error?: string;
+ hint?: string;
+}
+
+export const Textarea = forwardRef(
+ ({ label, error, hint, className, ...props }, ref) => {
+ return (
+
,
)
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 8b677e2..ecc2bce 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,63 +1,129 @@
import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import { CookingPot, CalendarDays, ShoppingCart, ChevronRight, Sparkles } from 'lucide-react'
import { mealPlannerApi } from '../api'
import type { MealPlan, MealPlanItem } from '../types'
+import { Badge } from '../components/ui/Badge'
+import { Card, CardBody, CardHeader } from '../components/ui/Card'
+import { SkeletonCard, Skeleton } from '../components/ui/Skeleton'
+import { EmptyState } from '../components/ui/EmptyState'
-const DAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const FULL_DAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
const MEAL_TYPES = ['breakfast', 'lunch', 'dinner'] as const
function MealCard({ item }: { item: MealPlanItem }) {
+ const totalTime = item.recipe?.total_time_minutes ??
+ (item.recipe?.prep_time_minutes || 0) + (item.recipe?.cook_time_minutes || 0)
+
+ const statusVariant =
+ item.approval_status === 'approved' ? 'success' :
+ item.approval_status === 'denied' ? 'danger' :
+ item.approval_status === 'swapped' ? 'warning' :
+ 'neutral'
+
return (
-
+
+
+
+
+
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/frontend/src/components/ui/Badge.tsx b/frontend/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..54d080b
--- /dev/null
+++ b/frontend/src/components/ui/Badge.tsx
@@ -0,0 +1,24 @@
+import { cn } from '../../lib/utils';
+
+interface BadgeProps {
+ variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function Badge({ variant = 'neutral', children, className }: BadgeProps) {
+ const variants = {
+ primary: 'bg-primary-50 text-primary-700 border border-primary-200',
+ success: 'bg-success-50 text-success-700 border border-success-200',
+ warning: 'bg-warning-50 text-warning-700 border border-warning-200',
+ danger: 'bg-danger-50 text-danger-700 border border-danger-200',
+ info: 'bg-blue-50 text-blue-700 border border-blue-200',
+ neutral: 'bg-surface-100 text-surface-600 border border-surface-200',
+ };
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
new file mode 100644
index 0000000..69e2090
--- /dev/null
+++ b/frontend/src/components/ui/Button.tsx
@@ -0,0 +1,53 @@
+import { Loader2 } from 'lucide-react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes
+
+
+
+ Something went wrong
++ We encountered an unexpected error. Try refreshing the page or going back to the dashboard. +
+ {this.state.error && ( +
+
+ )}
+ {this.state.error.message}
+
+ }
+ onClick={() => window.location.reload()}
+ >
+ Refresh page
+
+
+
+ {children}
;
+}
+
+interface CardHeaderProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function CardHeader({ children, className }: CardHeaderProps) {
+ return {children}
;
+}
+
+interface CardBodyProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function CardBody({ children, className }: CardBodyProps) {
+ return {children}
;
+}
+
+interface CardFooterProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function CardFooter({ children, className }: CardFooterProps) {
+ return {children}
;
+}
diff --git a/frontend/src/components/ui/EmptyState.tsx b/frontend/src/components/ui/EmptyState.tsx
new file mode 100644
index 0000000..7af6e35
--- /dev/null
+++ b/frontend/src/components/ui/EmptyState.tsx
@@ -0,0 +1,29 @@
+import { LucideIcon } from 'lucide-react';
+import { Button } from './Button';
+
+interface EmptyStateProps {
+ icon: LucideIcon;
+ title: string;
+ description: string;
+ action?: {
+ label: string;
+ onClick: () => void;
+ };
+}
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+ return (
+
+
+ );
+}
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
new file mode 100644
index 0000000..3700229
--- /dev/null
+++ b/frontend/src/components/ui/Input.tsx
@@ -0,0 +1,31 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+interface InputProps extends InputHTMLAttributes
+
+ {title}
+{description}
+ {action && ( + + )} +
+ {label && }
+
+ {error &&
+ );
+ }
+);
+
+Input.displayName = 'Input';
diff --git a/frontend/src/components/ui/LoadingSpinner.tsx b/frontend/src/components/ui/LoadingSpinner.tsx
new file mode 100644
index 0000000..2850db2
--- /dev/null
+++ b/frontend/src/components/ui/LoadingSpinner.tsx
@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface LoadingSpinnerProps {
+ size?: 'sm' | 'md' | 'lg';
+ className?: string;
+ label?: string;
+}
+
+export function LoadingSpinner({ size = 'md', className, label }: LoadingSpinnerProps) {
+ const sizes = {
+ sm: 'w-4 h-4',
+ md: 'w-6 h-6',
+ lg: 'w-8 h-8',
+ };
+
+ return (
+ {error}
} + {hint && !error &&{hint}
} +
+
+ );
+}
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
new file mode 100644
index 0000000..58a932a
--- /dev/null
+++ b/frontend/src/components/ui/Select.tsx
@@ -0,0 +1,39 @@
+import { cn } from '../../lib/utils';
+import type { SelectHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+interface SelectProps extends SelectHTMLAttributes
+ {label && }
+
+ {error &&
+ );
+ }
+);
+
+Select.displayName = 'Select';
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..ae89819
--- /dev/null
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -0,0 +1,37 @@
+interface SkeletonProps {
+ className?: string;
+ count?: number;
+}
+
+export function Skeleton({ className = 'h-4 w-full', count = 1 }: SkeletonProps) {
+ return (
+ <>
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+ );
+}
+
+export function SkeletonCard() {
+ return (
+ {error}
} + {hint && !error &&{hint}
} +
+
+ );
+}
+
+export function SkeletonText({ lines = 3 }: { lines?: number }) {
+ return (
+
+
+
+ {Array.from({ length: lines }).map((_, i) => (
+
+ );
+}
diff --git a/frontend/src/components/ui/Textarea.tsx b/frontend/src/components/ui/Textarea.tsx
new file mode 100644
index 0000000..b4ce7d4
--- /dev/null
+++ b/frontend/src/components/ui/Textarea.tsx
@@ -0,0 +1,31 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+interface TextareaProps extends TextareaHTMLAttributes
+ {label && }
+
+ {error &&
+ );
+ }
+);
+
+Textarea.displayName = 'Textarea';
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 56a1688..c01b3ee 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,10 +1,77 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+@layer base {
+ html {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ }
+
+ body {
+ margin: 0;
+ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background-color: #f5f5f5;
+ color: #171717;
+ line-height: 1.5;
+ }
+
+ * {
+ border-color: #e5e5e5;
+ }
+
+ :focus-visible {
+ outline: 2px solid #0ea5e9;
+ outline-offset: 2px;
+ }
+
+ ::selection {
+ background-color: #bae6fd;
+ color: #0c4a6e;
+ }
+}
+
+@layer components {
+ .btn {
+ @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .btn-primary {
+ @apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm;
+ }
+
+ .btn-secondary {
+ @apply btn bg-white text-surface-700 border border-surface-300 hover:bg-surface-50 active:bg-surface-100;
+ }
+
+ .btn-ghost {
+ @apply btn text-surface-600 hover:bg-surface-100 active:bg-surface-200;
+ }
+
+ .btn-danger {
+ @apply btn bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
+ }
+
+ .card {
+ @apply bg-white rounded-xl shadow-sm border border-surface-200 overflow-hidden;
+ }
+
+ .input {
+ @apply w-full px-3 py-2.5 rounded-lg border border-surface-300 bg-white text-sm text-surface-900 placeholder:text-surface-400 transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .label {
+ @apply block text-sm font-medium text-surface-700 mb-1.5;
+ }
+
+ .badge {
+ @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium;
+ }
+
+ .skeleton {
+ @apply animate-shimmer bg-gradient-to-r from-surface-200 via-surface-300 to-surface-200 bg-[length:200%_100%] rounded-md;
+ }
}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 964aeb4..6e547e2 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,40 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
+import { Toaster } from 'react-hot-toast'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
{error}
} + {hint && !error &&{hint}
} +
- {item.recipe?.image_url && (
- 
- )}
-
-
{item.recipe?.name || 'Unknown Recipe'}
- {item.recipe && ( -- {item.recipe.total_time_minutes || (item.recipe.prep_time_minutes || 0) + (item.recipe.cook_time_minutes || 0)} min - {' · '} - {item.recipe.servings} servings -
+ +
+ {item.recipe?.image_url ? (
+
+ ) : (
+
+
)}
-
-
- {item.approval_status}
-
- {item.estimated_cost && (
- ${item.estimated_cost.toFixed(2)}
- )}
+
+
+ )
+}
+
+function DayColumn({ dayIndex, items }: { dayIndex: number; items: MealPlanItem[] }) {
+ const today = new Date().getDay()
+ const isToday = today === (dayIndex + 1) % 7
+
+ return (
+
+
+ {item.recipe?.name || 'Unknown Recipe'} +
++ {totalTime > 0 && `${totalTime} min · `} + {item.recipe?.servings} servings +
+
+
+ {item.approval_status}
+
+ {item.estimated_cost && (
+
+ ${item.estimated_cost.toFixed(2)}
+
+ )}
+
+
)
}
-function DayColumn({ dayIndex, items }: { dayIndex: number; items: MealPlanItem[] }) {
+function DashboardSkeleton() {
return (
-
+
+
+
+ {FULL_DAY_NAMES[dayIndex]}
+
+ {isToday && Today }
+
+ {DAY_NAMES[dayIndex]}
+
+ {MEAL_TYPES.map(mealType => {
+ const item = items.find(i => i.meal_type === mealType)
+ return (
+
+
+ {mealType}
+
+ {item ? (
+
+ )
+ })}
+
+ —
+
+ )}
+
-
- {DAY_NAMES[dayIndex]}
+
+
+
-
+
- {MEAL_TYPES.map(mealType => {
- const item = items.find(i => i.meal_type === mealType)
- return (
-
)
@@ -70,23 +136,22 @@ export default function Dashboard() {
})
if (isLoading) {
- return (
-
- {mealType}
- {item ?
- )
- })}
+
+ {Array.from({ length: 7 }).map((_, i) => (
+
+
+
+ ))}
+
+
-
-
- )
+ return
-
This Week's Meal Plan
-
- {} }}
+ />
)
}
@@ -95,59 +160,106 @@ export default function Dashboard() {
mealPlan.items.filter(item => item.day_of_week === i + 1)
)
+ const statusVariant =
+ mealPlan.status === 'approved' ? 'success' :
+ mealPlan.status === 'locked' ? 'primary' :
+ mealPlan.status === 'pending_approval' ? 'warning' :
+ 'neutral'
+
return (
No meal plan generated yet
- +
+
+ This Week's Meal Plan
-
-
- Week of {new Date(mealPlan.week_start_date).toLocaleDateString()} -
-
-
- {mealPlan.status.replace('_', ' ')}
-
- {mealPlan.total_estimated_cost && (
-
- ${mealPlan.total_estimated_cost.toFixed(2)} total
-
+ {/* Header */}
+
+
-
+
+
+
+
+
+ + Week of {new Date(mealPlan.week_start_date).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })} +
++ {mealPlan.items.length} meals planned · {mealPlan.items.filter(i => i.approval_status === 'approved').length} approved +
+
+
+ {mealPlan.status.replace(/_/g, ' ')}
+
+ {mealPlan.total_estimated_cost !== undefined && (
+
+
+ ${mealPlan.total_estimated_cost.toFixed(2)}
+
+ total
+
)}
-
)
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index bce4d66..eecc495 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,5 +1,9 @@
import { useState } from 'react'
+import { Lock, ArrowRight } from 'lucide-react'
import { mealPlannerApi } from '../api'
+import { Button } from '../components/ui/Button'
+import { Card, CardBody } from '../components/ui/Card'
+import { Input } from '../components/ui/Input'
export default function Login() {
const [password, setPassword] = useState('')
@@ -21,33 +25,41 @@ export default function Login() {
}
return (
- Weekly Overview
-
-
+
+
+ {/* Quick Actions */}
+ {/* Weekly Grid */}
+
+
+
+
+
- Weekly Overview
+
{itemsByDay.map((items, index) => (
-
-
+
+
+
+
+
+
+
+
-
- Shopping List
- - View shopping list → - -
-
+ Quick Actions
- -
+
+
+
+
+
+ Shopping List
++ View your aisle-organized shopping list with sale tracking. +
+ + View shopping list
+
+
+
+
+
+ Quick Actions
+
+
+ Manage Pantry
+
-
-
MealPlanner
-Family login
-