import * as React from 'react'; import Head from 'next/head'; import Link from 'next/link'; import { BottomNav, MobileHeader, InstallPrompt, PullToRefresh } from 'components/mobile'; import { isOnline, syncAll } from 'lib/mobile/offline'; interface QuickAction { href: string; icon: React.ReactNode; label: string; color: string; } const quickActions: QuickAction[] = [ { href: '/m/scan', icon: ( ), label: 'Scan QR', color: 'bg-blue-500', }, { href: '/m/quick-add', icon: ( ), label: 'Add Plant', color: 'bg-green-500', }, { href: '/plants/explore', icon: ( ), label: 'Explore', color: 'bg-purple-500', }, { href: '/plants/register', icon: ( ), label: 'Register', color: 'bg-orange-500', }, ]; interface StatCardProps { label: string; value: string | number; icon: React.ReactNode; trend?: 'up' | 'down'; trendValue?: string; } function StatCard({ label, value, icon, trend, trendValue }: StatCardProps) { return (

{label}

{value}

{trend && trendValue && (

{trend === 'up' ? '+' : '-'}{trendValue}

)}
{icon}
); } export default function MobileHome() { const [online, setOnline] = React.useState(true); const [refreshing, setRefreshing] = React.useState(false); const [stats] = React.useState({ plants: 24, tracked: 18, carbonSaved: '12.5', foodMiles: '156', }); React.useEffect(() => { setOnline(isOnline()); const handleOnline = () => setOnline(true); const handleOffline = () => setOnline(false); window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); const handleRefresh = async () => { setRefreshing(true); try { await syncAll(); // Simulate data refresh await new Promise((resolve) => setTimeout(resolve, 1000)); } finally { setRefreshing(false); } }; return ( <> LocalGreenChain - Mobile
{/* Offline indicator */} {!online && (
You're offline. Some features may be limited.
)}
{/* Welcome Section */}

Welcome back

Track your plants, save the planet.

{/* Quick Actions */}

Quick Actions

{quickActions.map((action) => (
{action.icon}
{action.label} ))}
{/* Stats Grid */}

Your Impact

} /> } /> } /> } />
{/* Recent Activity */}

Recent Activity

View all
} iconBg="bg-green-100" iconColor="text-green-600" /> } iconBg="bg-blue-100" iconColor="text-blue-600" /> } iconBg="bg-purple-100" iconColor="text-purple-600" />
); } interface ActivityItemProps { title: string; description: string; time: string; icon: React.ReactNode; iconBg: string; iconColor: string; } function ActivityItem({ title, description, time, icon, iconBg, iconColor }: ActivityItemProps) { return (
{icon}

{title}

{description}

{time}
); }