+
+ {t("myapp.newkey")}
+``` + +--- + +## 语言覆盖率 / Translation Coverage + +✅ **100%** - 底部导航栏 +✅ **100%** - 标签管理流程（类型选择 → 食品选择 → 打印） +✅ **100%** - More 页面及所有子页面 +✅ **90%+** - 其他核心页面 + +部分模拟数据（如食品名称、类别）保留英文，以保持数据真实性。 + +--- + +## 最佳实践 / Best Practices + +1. **始终使用翻译函数** + 永远不要在代码中硬编码文本，而是使用 `t()` 函数 + +2. **语义化的键名** + 使用有意义的键名，如 `labels.type.nutrition` 而不是 `lbl1` + +3. **保持一致性** + 相同的文本使用相同的翻译键，如 "Back" 始终使用 `common.back` + +4. **测试两种语言** + 在添加新功能时，确保两种语言都能正常显示 + +--- + +## 未来改进 / Future Improvements + +- [ ] 添加更多语言支持（西班牙语、法语等） +- [ ] 日期和数字的本地化格式 +- [ ] 动态加载语言包（减小打包体积） +- [ ] 翻译管理后台 + +--- + +## 常见问题 / FAQ + +**Q: 切换语言后需要刷新页面吗？** +A: 不需要，语言切换是实时生效的。 + +**Q: 语言设置会丢失吗？** +A: 不会，语言设置保存在浏览器本地存储中，除非清除浏览器数据。 + +**Q: 如何恢复默认语言？** +A: 在语言设置页面选择 English 即可。 + +**Q: 所有页面都支持中文吗？** +A: 是的，所有核心功能页面都已完全翻译。部分模拟数据可能保留英文。 diff --git a/美国版/Food Labeling Management App React/PAGE_REFERENCE.md b/美国版/Food Labeling Management App React/PAGE_REFERENCE.md new file mode 100644 index 0000000..6b6929b --- /dev/null +++ b/美国版/Food Labeling Management App React/PAGE_REFERENCE.md @@ -0,0 +1,240 @@ +# Page Reference Guide + +Quick reference for all pages in the Food Label System. + +## 📄 All Pages + +### Authentication +| Page | Route | Description | +|------|-------|-------------| +| Login | `/login` | Email/password authentication with remember me option | + +### Main Navigation (Bottom Tabs) + +#### 🏠 Dashboard +| Page | Route | Description | +|------|-------|-------------| +| Dashboard | `/` | Overview with stats cards and quick action buttons | + +#### 🏷️ Labels +| Page | Route | Description | +|------|-------|-------------| +| Label List | `/labels` | Browse, search, and filter labels by status | +| Print Label | `/labels/print/:id` | Configure and print label (template, quantity, printer) | +| Print Queue | `/labels/queue` | View print jobs (in progress, completed, failed) | + +#### ✅ Tasks +| Page | Route | Description | +|------|-------|-------------| +| Task List | `/tasks` | View tasks organized by status (overdue, open, completed) | +| Execute Task | `/tasks/:id` | Complete task with forms (temperature, checks, photos) | +| Report Issue | `/tasks/:id/issue` | Report issues with corrective actions and photos | + +#### ⚙️ More +| Page | Route | Description | +|------|-------|-------------| +| More Menu | `/more` | Settings and additional features menu | +| Profile | `/more/profile` | View and edit employee profile information | +| Printers | `/more/printers` | View printer status and configuration | +| Location Info | `/more/location` | Store location and contact information | +| Sync Status | `/more/sync` | Data synchronization status and manual sync | +| Support | `/more/support` | Help, support contacts, and resources | + +### Utility +| Page | Route | Description | +|------|-------|-------------| +| 404 Not Found | `*` | Catch-all for invalid routes | + +## 🎨 Page Elements + +### Common Header Pattern +```tsx +
+
+```
+
+### Common Back Button
+```tsx
+
+```
+
+### Status Badge Examples
+
+**Label Status**
+- 🟢 Normal: `bg-green-50 text-green-700 border-green-200`
+- 🟡 Expiring Soon: `bg-yellow-50 text-yellow-700 border-yellow-200`
+- 🔴 Expired: `bg-red-50 text-red-700 border-red-200`
+
+**Task Status**
+- 🔵 Open: `bg-blue-50 text-blue-700 border-blue-200`
+- 🟢 Completed: `bg-green-50 text-green-700 border-green-200`
+- 🔴 Overdue: `bg-red-50 text-red-700 border-red-200`
+
+**Printer Status**
+- 🟢 Online: `bg-green-50 text-green-700 border-green-200`
+- ⚫ Offline: `bg-gray-100 text-gray-600 border-gray-300`
+
+## 🔄 Page Flows
+
+### Flow 1: Print a Label
+1. `/` (Dashboard) → Tap "Labels" or "Scan & Print"
+2. `/labels` → Select label → Tap "Print Label"
+3. `/labels/print/:id` → Configure → Tap "Print Label"
+4. `/labels/queue` → View print status
+
+### Flow 2: Complete a Task
+1. `/` (Dashboard) → Tap "Tasks" or "Record Temperature"
+2. `/tasks` → Select task → Tap "Start Task"
+3. `/tasks/:id` → Fill form → Tap "Submit Task"
+4. If issue detected → `/tasks/:id/issue` → Report issue
+
+### Flow 3: Check Settings
+1. `/` (Dashboard) → Tap "More"
+2. `/more` → Select option
+3. `/more/profile` or `/more/printers` etc.
+
+### Flow 4: Logout
+1. `/more` → Scroll to "Logout"
+2. Confirm logout
+3. Redirected to `/login`
+
+## 📊 Data Models
+
+### Label
+```typescript
+interface Label {
+ id: string;
+ name: string;
+ batchNumber: string;
+ expiryDate: string;
+ status: "normal" | "expiring" | "expired";
+}
+```
+
+### Task
+```typescript
+interface Task {
+ id: string;
+ name: string;
+ type: "temperature" | "hygiene" | "equipment";
+ dueTime: string;
+ status: "open" | "completed" | "overdue";
+}
+```
+
+### Print Job
+```typescript
+interface PrintJob {
+ id: string;
+ labelName: string;
+ quantity: number;
+ printer: string;
+ status: "progress" | "completed" | "failed";
+ time: string;
+}
+```
+
+### Printer
+```typescript
+interface Printer {
+ id: string;
+ name: string;
+ location: string;
+ status: "online" | "offline";
+ model: string;
+}
+```
+
+## 🎯 Key UI Components
+
+### Buttons
+- **Primary Action**: Blue background, white text, h-12 minimum
+- **Secondary Action**: Outline style
+- **Destructive**: Red background (logout, delete)
+- **Icon Buttons**: Square, icon only
+
+### Cards
+- White background
+- Subtle border
+- Rounded corners (rounded-lg)
+- Padding: p-4 or p-6
+- Hover effect: hover:shadow-md
+
+### Form Elements
+- **Input**: h-12, rounded borders, text-base
+- **Select**: h-12, dropdown with chevron
+- **Textarea**: rows-4, resize-none
+- **Checkbox**: Large touch targets
+- **Radio**: Large touch targets with labels
+
+### Layout Constraints
+- **Max Width**: 480px (mobile simulation)
+- **Padding**: p-6 for sections
+- **Bottom Spacing**: pb-20 (for bottom nav)
+- **Fixed Bottom**: bottom-20 (above nav)
+
+## 🔐 Protected Routes
+
+All routes except `/login` are protected:
+- Check for `localStorage.getItem("isLoggedIn")`
+- Redirect to `/login` if not authenticated
+- Implemented in `Layout.tsx` component
+
+## 🚀 Quick Start Development
+
+1. **Add a new page**:
+ - Create file in `/src/app/pages/`
+ - Add route to `/src/app/routes.tsx`
+ - Follow page structure pattern
+
+2. **Add to navigation**:
+ - Bottom tabs: Edit `/src/app/components/Layout.tsx`
+ - Menu items: Edit relevant parent page
+
+3. **Add new status**:
+ - Define status type
+ - Create status config function
+ - Apply badge className pattern
+
+## 📱 Responsive Breakpoints
+
+Current: Mobile-first with max-width constraint
+
+Future considerations:
+- Tablet: `md:` prefix (768px+)
+- Desktop: `lg:` prefix (1024px+)
+- Wide: `xl:` prefix (1280px+)
+
+---
+
+**Navigation Structure**
+```
+Login
+ └── Layout (Bottom Nav)
+ ├── Dashboard (/)
+ ├── Labels (/labels)
+ │ ├── Print (/labels/print/:id)
+ │ └── Queue (/labels/queue)
+ ├── Tasks (/tasks)
+ │ ├── Execute (/tasks/:id)
+ │ └── Issue (/tasks/:id/issue)
+ └── More (/more)
+ ├── Profile
+ ├── Printers
+ ├── Location
+ ├── Sync
+ └── Support
+```
+
+**Color Reference**
+- Primary Blue: `#2563eb` (text-blue-600, bg-blue-600)
+- Success Green: `text-green-600`, `bg-green-50`
+- Warning Yellow: `text-yellow-600`, `bg-yellow-50`
+- Error Red: `text-red-600`, `bg-red-50`
+- Gray Scale: `text-gray-500`, `bg-gray-50`, etc.
diff --git a/美国版/Food Labeling Management App React/PROJECT_OVERVIEW.md b/美国版/Food Labeling Management App React/PROJECT_OVERVIEW.md
new file mode 100644
index 0000000..c613ca9
--- /dev/null
+++ b/美国版/Food Labeling Management App React/PROJECT_OVERVIEW.md
@@ -0,0 +1,212 @@
+# Food Label System - Employee Mobile App
+
+A professional, enterprise-grade mobile application for restaurant and food service operations, designed for the European and American markets.
+
+## 🎯 Overview
+
+This application enables food service employees to manage food labels, execute safety tasks, record temperatures, and maintain compliance with food safety regulations through an intuitive mobile interface.
+
+## 📱 Key Features
+
+### 1. **Dashboard**
+- Real-time statistics overview
+- Quick action buttons for common tasks
+- Store and employee information
+- Online/offline status indicator
+
+### 2. **Label Management**
+- Browse and search food labels
+- Filter by status (All, Expiring Soon, Expired)
+- Print labels with customizable templates
+- Manage print queue
+- Track print job status
+
+### 3. **Task Management**
+- View and execute safety tasks
+- Temperature recording with validation
+- Equipment condition checks
+- Photo upload capability
+- Issue reporting with corrective actions
+- Overdue task alerts
+
+### 4. **Settings & More**
+- Employee profile management
+- Printer configuration and status
+- Location information
+- Data synchronization status
+- Support and help resources
+
+## 🎨 Design Philosophy
+
+### Enterprise SaaS Aesthetic
+- **Minimalist & Professional**: Clean interface with generous white space
+- **Card-based Layout**: Organized information hierarchy
+- **High Contrast**: Accessible color schemes and clear visual hierarchy
+- **Typography**: Inter font family for modern, professional appearance
+
+### Design Specifications
+- **Font Sizes**:
+ - Headings: 22-24px
+ - Subheadings: 18-20px
+ - Body: 16-18px
+ - Buttons: 16px
+- **Buttons**: Minimum 48px height with 8-12px border radius
+- **Colors**:
+ - Primary: Enterprise Blue (#2563eb)
+ - Success: Green
+ - Warning: Orange/Yellow
+ - Error: Red
+ - Background: Light Gray/White
+
+### Mobile-First Design
+- Maximum width: 480px (centered on larger screens)
+- Touch-friendly interface elements
+- Bottom navigation for easy thumb access
+- Responsive across iOS and Android
+
+## 🚀 Navigation Structure
+
+### Bottom Tab Navigation
+1. **Dashboard** - Overview and quick actions
+2. **Labels** - Label management and printing
+3. **Tasks** - Safety and compliance tasks
+4. **More** - Settings and additional features
+
+### Page Flow
+
+```
+Login
+ └── Dashboard (Home)
+ ├── Labels
+ │ ├── Label Print
+ │ └── Print Queue
+ ├── Tasks
+ │ ├── Task Execute
+ │ └── Task Issue Report
+ └── More
+ ├── Profile
+ ├── Printers
+ ├── Location
+ ├── Sync Status
+ └── Support
+```
+
+## 🔐 Authentication
+
+- Email/password login
+- "Remember me" option
+- Forgot password functionality
+- Session persistence with localStorage
+
+## 📊 Core Workflows
+
+### 1. Print Label Workflow
+1. Browse labels or scan barcode
+2. Select label to print
+3. Configure print settings (quantity, template, printer)
+4. Preview label
+5. Send to print queue
+6. Track print status
+
+### 2. Task Execution Workflow
+1. View assigned tasks
+2. Select task to execute
+3. Fill in required information
+ - Temperature readings
+ - Equipment condition
+ - Safety checklists
+ - Photos
+4. Submit task
+5. Report issues if detected (automatic)
+
+### 3. Issue Reporting Workflow
+1. Automatic trigger when values are out of range
+2. Describe issue in detail
+3. Document corrective actions
+4. Upload before/after photos
+5. Submit for supervisor review
+
+## 🎯 User Experience Features
+
+### State Management
+- **Loading States**: Clear loading indicators
+- **Empty States**: Helpful messaging with illustrations
+- **Error States**: Network issues, print failures
+- **Success States**: Confirmation feedback
+
+### Data Visualization
+- Status badges (Open, Completed, Expired, etc.)
+- Color-coded alerts
+- Progress indicators
+- Real-time status updates
+
+### Offline Capability
+- Works offline with local data
+- Automatic sync when online
+- Sync status visibility
+- Manual sync option
+
+## 🛠️ Technology Stack
+
+- **Framework**: React 18
+- **Routing**: React Router v7
+- **Styling**: Tailwind CSS v4
+- **UI Components**: Radix UI
+- **Icons**: Lucide React
+- **Notifications**: Sonner
+- **Build Tool**: Vite
+
+## 📱 Screenshots & Use Cases
+
+### Restaurant Use Cases
+- Kitchen temperature monitoring
+- Food labeling and FIFO compliance
+- Hygiene inspection tracking
+- Equipment maintenance logs
+
+### Food Processing Use Cases
+- Batch label printing
+- Quality control tasks
+- Temperature logging
+- Waste reporting
+
+### Central Kitchen Use Cases
+- Multi-location label management
+- Standardized task execution
+- Centralized compliance tracking
+- Equipment status monitoring
+
+## 🌍 Target Markets
+
+- United States
+- Canada
+- United Kingdom
+- European Union
+- Australia/New Zealand
+
+## 📄 Compliance & Standards
+
+Designed to support:
+- FDA Food Code compliance
+- HACCP requirements
+- Local health department regulations
+- Food safety management systems
+
+## 🎓 Training & Support
+
+The app includes:
+- In-app help and support
+- Contact information for technical support
+- User guides and video tutorials
+- FAQ resources
+- Emergency support access
+
+## 📈 Future Enhancements
+
+Potential features for future releases:
+- Barcode scanning
+- Voice input for hands-free operation
+- Multi-language support
+- Real-time notifications
+- Advanced analytics dashboard
+- Integration with external systems
diff --git a/美国版/Food Labeling Management App React/QUICK_START.md b/美国版/Food Labeling Management App React/QUICK_START.md
new file mode 100644
index 0000000..d6e891f
--- /dev/null
+++ b/美国版/Food Labeling Management App React/QUICK_START.md
@@ -0,0 +1,236 @@
+# 快速启动指南 / Quick Start Guide
+
+## 🎯 系统概述 / System Overview
+
+**食品标签打印系统 (简化版) / Food Label Printing System (Simplified Version)**
+
+面向欧美市场的极简企业级SaaS工具，专注于核心标签打印功能。
+Minimalist enterprise SaaS tool for North American/European markets, focused on core label printing functionality.
+
+---
+
+## 🚀 如何使用 / How to Use
+
+### 1. 登录系统 / Login
+- 访问应用后会看到登录页面 / Visit the app to see the login page
+- 输入任意邮箱和密码即可登录（演示模式）/ Enter any email and password to login (demo mode)
+- 系统会保存登录状态 / System saves login state
+
+### 2. 选择店铺 / Select Store
+- 登录后选择工作店铺 / Select your working store after login
+- 4个可选店铺位置 / 4 available store locations
+- 店铺信息会显示在Dashboard / Store info displayed on Dashboard
+
+### 3. Dashboard（主页）
+**4个统计卡片 / 4 Statistics Cards:**
+- 今日标签 (247个) / Today's Labels (247)
+- 待办任务 (8个) / Open Tasks (8)
+- 系统警报 (5个) / Alerts (5)
+- 设备状态 (4台打印机) / Devices Status (4 printers)
+
+**2个快速操作 / 2 Quick Actions:**
+- 扫描打印 / Scan & Print
+- 批量打印 / Batch Print
+
+### 4. Labels（标签管理）- 核心功能
+**创建标签 / Create Labels:**
+1. 选择标签类型（6种）/ Select label type (6 types):
+ - 营养标签 / Nutrition Label
+ - 过敏原标签 / Allergen Label
+ - 储存标签 / Storage Label
+ - 保质期标签 / Expiry Date Label
+ - 批次追踪标签 / Batch Tracking Label
+ - 制备标签 / Preparation Label
+
+2. 选择食品项目 / Select food item
+3. 查看预览 / Preview label
+4. 确认打印 / Confirm and print
+
+**查看历史 / View History:**
+- 查看已打印标签 / View printed labels
+- 显示标签状态（活跃/过期）/ Display label status (Active/Expired)
+- 显示打印者和时间 / Show printer and time
+
+### 5. Tasks（任务管理）
+- 查看所有任务 / View all tasks
+- 执行任务（温度检查、卫生检查等）/ Execute tasks (temperature checks, hygiene inspections, etc.)
+- 上传照片 / Upload photos
+- 报告问题 / Report issues
+
+### 6. More（更多设置）
+**可用功能 / Available Features:**
+- 👤 个人资料 / My Profile
+- 📚 培训材料 / Training Materials
+- 🖨️ 打印机设置 / Printer Settings
+- 📍 位置/店铺 / Location
+- 🔄 同步状态 / Sync Status
+- 🌐 语言切换 / Language (English/中文)
+- ❓ 支持与帮助 / Support
+- 🚪 退出登录 / Logout
+
+---
+
+## 🌍 语言切换 / Language Switching
+
+### 切换方法 / How to Switch:
+1. 底部导航 → More / Bottom Nav → More
+2. 点击"Language / 语言" / Click "Language / 语言"
+3. 选择 English 或 中文（简体）/ Select English or 中文（简体）
+4. 整个界面立即切换 / Entire UI switches immediately
+
+### 支持的翻译 / Supported Translations:
+- ✅ 1400+ 翻译键值对 / 1400+ translation keys
+- ✅ 所有界面文本 / All UI text
+- ✅ 所有按钮和标签 / All buttons and labels
+- ✅ 所有提示和说明 / All tooltips and instructions
+
+---
+
+## 📱 设计规范 / Design Specifications
+
+### 字体 / Typography
+- **字体家族 / Font Family**: Inter (Google Fonts)
+- **字重 / Weights**: 400 (Regular), 500 (Medium), 600 (Semi-bold), 700 (Bold)
+- **基础字号 / Base Size**: 16px
+
+### 颜色系统 / Color System
+- **主色调 / Primary**: #2563eb (蓝色 / Blue)
+- **背景色 / Background**: #ffffff (白色 / White)
+- **次要背景 / Secondary BG**: #f9fafb (浅灰 / Light Gray)
+- **文字色 / Text**: #111827 (深灰 / Dark Gray)
+- **次要文字 / Secondary Text**: #6b7280 (中灰 / Medium Gray)
+
+### 组件规范 / Component Specs
+- **按钮高度 / Button Height**: 最小 48px / Minimum 48px (h-12)
+- **圆角 / Border Radius**: 0.625rem
+- **容器宽度 / Container Width**: 最大 480px / Max 480px
+- **间距单位 / Spacing Unit**: 4px (Tailwind default)
+
+---
+
+## 🏗️ 技术架构 / Technical Architecture
+
+### 前端框架 / Frontend
+- React 18.3.1
+- TypeScript
+- React Router 7.13.0
+
+### 样式系统 / Styling
+- Tailwind CSS v4
+- Custom CSS Variables
+- Radix UI Components
+
+### 状态管理 / State Management
+- React Context (语言切换 / Language switching)
+- localStorage (用户数据 / User data)
+
+---
+
+## 📋 标签打印流程 / Label Printing Workflow
+
+```
+1. Dashboard
+ ↓
+2. Labels > 创建 / Create
+ ↓
+3. 选择标签类型 / Select Label Type
+ ↓
+4. 选择食品项目 / Select Food Item
+ ↓
+5. 查看预览 / Preview Label
+ ↓
+6. 确认打印 / Confirm Print
+ ↓
+7. 成功提示 / Success Message
+ ↓
+8. 返回历史 / View in History
+```
+
+---
+
+## 🎨 界面特点 / UI Features
+
+### ✨ 极简设计 / Minimalist Design
+- 清晰的信息层级 / Clear information hierarchy
+- 充足的留白空间 / Ample white space
+- 直观的图标系统 / Intuitive icon system
+
+### 📱 移动优先 / Mobile First
+- 响应式设计 / Responsive design
+- 触摸友好的交互 / Touch-friendly interactions
+- 480px 最大宽度优化 / Optimized for 480px max-width
+
+### 🎯 用户体验 / User Experience
+- 底部导航易于触及 / Bottom nav within thumb reach
+- 卡片式设计便于点击 / Card-based design for easy tapping
+- 清晰的视觉反馈 / Clear visual feedback
+- Toast 通知提示 / Toast notifications
+
+---
+
+## 📦 移除的功能 / Removed Features
+
+为了专注于核心功能，以下功能已移除：
+To focus on core functionality, the following features were removed:
+
+- ❌ 温湿度监控 / Temperature & Humidity Monitoring
+- ❌ 电子标签设备管理 / Electronic Label Device Management
+- ❌ 推送通知 / Push Notifications
+- ❌ 环境监测仪表板 / Environmental Monitoring Dashboard
+
+---
+
+## 🔮 未来扩展 / Future Expansion
+
+可以考虑添加的功能：
+Features that can be considered for addition:
+
+1. **后端集成 / Backend Integration**
+ - Supabase 数据库 / Supabase Database
+ - 实时数据同步 / Real-time data sync
+ - 用户认证系统 / User authentication
+
+2. **高级功能 / Advanced Features**
+ - 真实打印机集成 / Real printer integration
+ - 条形码/二维码扫描 / Barcode/QR scanning
+ - 离线模式 / Offline mode
+ - 高级报表分析 / Advanced reporting
+
+3. **多语言支持 / Multi-language**
+ - 西班牙语 / Spanish
+ - 法语 / French
+ - 德语 / German
+ - 日语 / Japanese
+
+---
+
+## 💡 使用建议 / Usage Tips
+
+### 最佳实践 / Best Practices:
+1. 每天查看Dashboard了解工作概况 / Check Dashboard daily for overview
+2. 使用标签历史追踪打印记录 / Use label history to track printed records
+3. 及时完成待办任务 / Complete pending tasks promptly
+4. 定期查看培训材料提升技能 / Review training materials regularly
+
+### 常见操作 / Common Operations:
+- **快速打印** / Quick Print: Dashboard → 快速操作 / Quick Actions
+- **查找标签** / Find Label: Labels → 历史 / History
+- **切换店铺** / Switch Store: More → Location
+- **查看帮助** / Get Help: More → Support
+
+---
+
+## 📞 支持信息 / Support Information
+
+如需帮助，请访问：
+For help, please visit:
+
+- **应用内支持** / In-app Support: More → Support
+- **用户指南** / User Guide: Training Materials
+- **常见问题** / FAQ: Support section
+
+---
+
+**版本 / Version**: 1.0.0
+**更新日期 / Last Updated**: 2026年2月27日 / February 27, 2026
+**目标市场 / Target Market**: 北美和欧洲 / North America & Europe
diff --git a/美国版/Food Labeling Management App React/README.md b/美国版/Food Labeling Management App React/README.md
new file mode 100644
index 0000000..6ccfe32
--- /dev/null
+++ b/美国版/Food Labeling Management App React/README.md
@@ -0,0 +1,296 @@
+# 🍽️ Food Label System - Employee Mobile App
+
+A professional, enterprise-grade mobile application for restaurant and food service operations, designed for the European and American markets.
+
+
+
+
+
+
+---
+
+## 📱 Overview
+
+This mobile-first web application enables food service employees to:
+- 🏷️ Print and manage food labels
+- ✅ Execute safety and compliance tasks
+- 🌡️ Record temperatures with validation
+- 📸 Document issues with photos
+- 🖨️ Monitor printer status
+- 📊 Track daily operations
+
+**Design Philosophy**: Clean, professional, enterprise SaaS aesthetic with generous white space, card-based layouts, and high contrast elements optimized for mobile use.
+
+---
+
+## ✨ Key Features
+
+### 🏠 Dashboard
+- Real-time overview of daily operations
+- Quick access to common actions
+- Status indicators for labels, tasks, and devices
+- Store and employee information display
+
+### 🏷️ Label Management
+- Browse and search food labels
+- Filter by expiration status (Normal, Expiring Soon, Expired)
+- Configure print settings (template, quantity, printer)
+- Track print queue status
+- Retry failed print jobs
+
+### ✅ Task Execution
+- View tasks organized by priority (Overdue, Open, Completed)
+- Execute temperature checks with range validation
+- Complete equipment condition assessments
+- Upload photos and add notes
+- Automatic issue detection and reporting
+
+### ⚙️ Settings & More
+- Employee profile management
+- Printer configuration and monitoring
+- Location information
+- Data synchronization status
+- Support and help resources
+
+---
+
+## 🎨 Design Highlights
+
+### Visual Design
+- **Typography**: Inter font family for professional appearance
+- **Colors**: Enterprise blue primary, semantic status colors
+- **Layout**: Card-based with generous spacing
+- **Mobile-First**: Optimized for 480px width
+
+### UX Patterns
+- **Bottom Tab Navigation**: Easy thumb access
+- **Status Badges**: Clear visual indicators with text labels
+- **Touch Targets**: Minimum 48px height for all interactive elements
+- **State Management**: Loading, empty, error, and success states
+
+### Accessibility
+- High contrast color schemes
+- Clear typography hierarchy
+- Descriptive status labels
+- Touch-friendly interface
+
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Node.js 18+ or Bun
+- npm, pnpm, or yarn
+
+### Installation
+```bash
+# Install dependencies
+npm install
+# or
+pnpm install
+```
+
+### Development
+```bash
+# Start development server
+npm run dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+### Build
+```bash
+# Create production build
+npm run build
+# or
+pnpm build
+```
+
+---
+
+## 📖 Documentation
+
+| Document | Description |
+|----------|-------------|
+| [PROJECT_OVERVIEW.md](./PROJECT_OVERVIEW.md) | Complete project overview and features |
+| [USAGE_GUIDE.md](./USAGE_GUIDE.md) | User guide with step-by-step instructions |
+| [TECHNICAL_DOCS.md](./TECHNICAL_DOCS.md) | Technical architecture and implementation |
+| [PAGE_REFERENCE.md](./PAGE_REFERENCE.md) | Quick reference for all pages and routes |
+
+---
+
+## 🗺️ Navigation Structure
+
+```
+Login Page
+ └── Main App (Bottom Tab Navigation)
+ ├── 🏠 Dashboard - Overview and quick actions
+ ├── 🏷️ Labels - Label management
+ │ ├── Print Configuration
+ │ └── Print Queue
+ ├── ✅ Tasks - Task execution
+ │ ├── Task Details
+ │ └── Issue Reporting
+ └── ⚙️ More - Settings and support
+ ├── Profile
+ ├── Printers
+ ├── Location Info
+ ├── Sync Status
+ └── Support
+```
+
+---
+
+## 🛠️ Technology Stack
+
+### Core
+- **React** 18.3.1 - UI framework
+- **React Router** 7.13.0 - Navigation (Data mode)
+- **TypeScript** - Type safety
+- **Vite** 6.3.5 - Build tool
+
+### Styling
+- **Tailwind CSS** 4.1.12 - Utility-first CSS
+- **Radix UI** - Accessible component primitives
+- **Lucide React** - Icon library
+- **Inter Font** - Typography
+
+### State & Utilities
+- **Sonner** - Toast notifications
+- **localStorage** - Session persistence (demo)
+
+---
+
+## 📱 Demo Credentials
+
+The app runs in demo mode. Use any credentials to login:
+
+```
+Email: john@company.com
+Password: any password
+```
+
+---
+
+## 🎯 Use Cases
+
+### Restaurant Operations
+- Daily temperature logging
+- Food labeling for prep and storage
+- Kitchen hygiene inspections
+- Equipment maintenance checks
+
+### Food Processing
+- Batch label printing
+- Quality control task execution
+- Temperature monitoring
+- Waste documentation
+
+### Central Kitchen
+- Multi-location label management
+- Standardized task procedures
+- Centralized compliance tracking
+- Equipment status monitoring
+
+---
+
+## 📸 Screenshots
+
+### Login Page
+Clean, centered login form with company branding
+
+### Dashboard
+Statistics cards with quick action buttons
+
+### Label List
+Searchable list with color-coded status indicators
+
+### Task Execution
+Multi-step form with validation and photo upload
+
+### Print Queue
+Real-time status of print jobs with retry options
+
+---
+
+## 🌍 Target Markets
+
+- 🇺🇸 United States
+- 🇨🇦 Canada
+- 🇬🇧 United Kingdom
+- 🇪🇺 European Union
+- 🇦🇺 Australia / New Zealand
+
+---
+
+## 🔮 Future Enhancements
+
+### Planned Features
+- [ ] Barcode scanning with device camera
+- [ ] Offline-first architecture with service workers
+- [ ] Real-time updates via WebSockets
+- [ ] Multi-language support (i18n)
+- [ ] Push notifications
+- [ ] Voice input for hands-free operation
+- [ ] Advanced analytics dashboard
+- [ ] Integration with external POS systems
+
+### Technical Improvements
+- [ ] Progressive Web App (PWA) support
+- [ ] End-to-end testing suite
+- [ ] Performance monitoring
+- [ ] Error tracking (Sentry integration)
+- [ ] Backend API integration
+- [ ] Database persistence
+
+---
+
+## 📄 License
+
+Copyright © 2026 Food Label System. All rights reserved.
+
+---
+
+## 👥 Support
+
+### Getting Help
+- 📞 **Phone**: 1-800-SUPPORT (24/7)
+- 📧 **Email**: support@foodlabel.com
+- 💬 **Live Chat**: Mon-Fri 8 AM - 8 PM EST
+
+### Resources
+- User Guide
+- Video Tutorials
+- FAQ
+- Technical Documentation
+
+---
+
+## 🙏 Acknowledgments
+
+Built with:
+- [React](https://react.dev)
+- [Tailwind CSS](https://tailwindcss.com)
+- [Radix UI](https://radix-ui.com)
+- [Lucide Icons](https://lucide.dev)
+- [Vite](https://vitejs.dev)
+
+Design inspired by modern enterprise SaaS applications with a focus on usability, accessibility, and professional aesthetics.
+
+---
+
+**Version**: 1.0.0
+**Last Updated**: February 2026
+**Built for**: Food service professionals worldwide
+
+---
+
++ Page Title +
+
+
+### 🍽️ Making Food Safety Simple and Professional
+
+**[View Documentation](#-documentation)** • **[Quick Start](#-quick-start)** • **[Support](#-support)**
+
+
diff --git a/美国版/Food Labeling Management App React/SYSTEM_SUMMARY.md b/美国版/Food Labeling Management App React/SYSTEM_SUMMARY.md
new file mode 100644
index 0000000..fac3cb1
--- /dev/null
+++ b/美国版/Food Labeling Management App React/SYSTEM_SUMMARY.md
@@ -0,0 +1,156 @@
+# Food Label Printing System - Simplified Version
+
+## Overview
+A minimalist enterprise SaaS-style food label printing system for the North American/European market. Designed for restaurants, food processing, and central kitchen scenarios.
+
+## Design Principles
+- **European/American Enterprise Style**: Clean, professional interface using Inter font family
+- **Corporate Blue Theme**: Primary color #2563eb (blue-600)
+- **Accessibility**: Button minimum height ≥48px (h-12 in Tailwind)
+- **Responsive Design**: Optimized for mobile devices with max-width 480px
+- **Bilingual Support**: Complete English and Chinese (Simplified) language switching
+
+## Core Features
+
+### 1. Dashboard
+- Today's label printing statistics
+- Open tasks overview
+- System alerts
+- Quick actions for label printing
+- Device status monitoring
+
+### 2. Labels (Core Feature)
+**Label Types:**
+- Nutrition Labels
+- Allergen Labels
+- Storage Labels
+- Expiry Date Labels
+- Batch Tracking Labels
+- Preparation Labels
+
+**Workflow:**
+1. Select label type
+2. Choose food item from catalog
+3. Preview label
+4. Print label
+
+**Features:**
+- Create new labels
+- View printing history
+- Track label status (Active/Expired)
+
+### 3. Tasks
+- Task management system
+- Temperature checks
+- Hygiene inspections
+- Equipment safety checks
+- Task execution with photo upload
+- Issue reporting
+
+### 4. More (Settings)
+- User profile management
+- Training materials
+- Printer settings
+- Location/store selection
+- Data sync status
+- Language settings (English/中文)
+- Support and help resources
+
+## Technology Stack
+- **Frontend**: React 18.3.1 + TypeScript
+- **Routing**: React Router 7.13.0
+- **Styling**: Tailwind CSS v4 + Custom theme
+- **UI Components**: Radix UI primitives
+- **Icons**: Lucide React
+- **State Management**: React Context (Language)
+- **Notifications**: Sonner
+
+## Key Files
+
+### Configuration
+- `/src/styles/theme.css` - Design tokens and theme variables
+- `/src/styles/fonts.css` - Inter font configuration
+
+### Core Components
+- `/src/app/App.tsx` - Application entry point
+- `/src/app/routes.tsx` - Route configuration
+- `/src/app/components/Layout.tsx` - Main layout with bottom navigation
+- `/src/app/contexts/LanguageContext.tsx` - Bilingual support (1400+ translations)
+
+### Pages
+- `/src/app/pages/Dashboard.tsx` - Main dashboard
+- `/src/app/pages/Labels.tsx` - Label management
+- `/src/app/pages/LabelFoodSelect.tsx` - Food selection
+- `/src/app/pages/LabelPreview.tsx` - Label preview before printing
+- `/src/app/pages/Tasks.tsx` - Task management
+- `/src/app/pages/More.tsx` - Settings and more options
+
+## Navigation Structure
+Bottom navigation bar with 4 tabs:
+1. **Dashboard** - Overview and quick actions
+2. **Labels** - Label printing system (create & history)
+3. **Tasks** - Task management
+4. **More** - Settings and additional features
+
+## Removed Features (Simplified Version)
+The following features were removed to create this focused, core-functionality version:
+- ❌ Temperature & Humidity Monitoring
+- ❌ Electronic Label (ESL) Device Management
+- ❌ Push Notifications
+- ❌ Environmental Monitoring Dashboard
+
+## Design Specifications
+- **Font Family**: Inter (400, 500, 600, 700)
+- **Primary Color**: #2563eb (Corporate Blue)
+- **Button Height**: Minimum 48px (h-12)
+- **Container Max Width**: 480px (mobile-first)
+- **Border Radius**: 0.625rem (--radius)
+- **Base Font Size**: 16px
+
+## Getting Started
+
+### Development
+```bash
+# The project is already configured and ready to run
+# All dependencies are installed via package.json
+```
+
+### Login
+- Demo credentials: any email + password
+- System navigates to store selection after login
+- User info stored in localStorage
+
+### Language Switching
+- Available in More > Language Settings
+- Toggle between English and 中文（简体）
+- Preference saved to localStorage
+- Instant UI update across entire app
+
+## Multi-Store Support
+- Store selection on login
+- Current store displayed on Dashboard
+- Switch stores via More > Location
+
+## Label Printing Flow
+1. Dashboard > Quick Actions > Scan & Print
+ OR Dashboard > Bottom Nav > Labels
+2. Select label type (6 options)
+3. Browse and select food item
+4. Review label preview
+5. Confirm and print
+6. View in printing history
+
+## Future Expansion Possibilities
+- Supabase integration for backend/database
+- Real printer integration
+- Barcode/QR code scanning
+- Offline mode with sync
+- Multi-language expansion
+- Advanced reporting and analytics
+
+---
+
+**Version**: 1.0.0
+**Last Updated**: February 27, 2026
+**Target Market**: North America & Europe
+**License**: Enterprise
diff --git a/美国版/Food Labeling Management App React/SYSTEM_UPDATE_SUMMARY.md b/美国版/Food Labeling Management App React/SYSTEM_UPDATE_SUMMARY.md
new file mode 100644
index 0000000..42f55cc
--- /dev/null
+++ b/美国版/Food Labeling Management App React/SYSTEM_UPDATE_SUMMARY.md
@@ -0,0 +1,290 @@
+# 系统更新说明
+
+## 🎯 完成的三大需求
+
+### 1. ✅ 手机端只能使用标签（不能制作标签）
+
+**改动说明：**
+- ❌ 移除了标签打印功能（LabelPrint、LabelFoodSelect、LabelQueue 页面）
+- ✅ 改为"标签库"模式 - Labels 页面显示已有的标签
+- ✅ 员工可以查看标签详情并"使用"标签（记录使用）
+- ✅ 标签详情页面显示完整信息和有效期状态
+
+**新的标签使用流程：**
+```
+Labels（标签库）→ 选择标签 → 查看详情 → 使用标签
+```
+
+**标签状态：**
+- 🟢 Available（可用）- 标签有效，可以使用
+- 🟡 Expiring Soon（即将过期）- 1天内过期
+- 🔴 Expired（已过期）- 无法使用
+
+---
+
+### 2. ✅ 完整的中英文切换
+
+**翻译覆盖率：100%**
+
+已翻译的所有页面：
+- ✅ **Login** - 登录页面
+- ✅ **Dashboard** - 主页/仪表盘
+- ✅ **Labels** - 标签库（含标签详情页）
+- ✅ **Tasks** - 任务管理
+- ✅ **More** - 更多设置（所有子页面）
+ - Profile（个人资料）
+ - Printers（打印机设置）
+ - Location（工作地点）
+ - Sync Status（同步状态）
+ - Language Settings（语言设置）
+ - Support（支持中心）
+- ✅ **Bottom Navigation** - 底部导航栏
+- ✅ **所有按钮、表单、提示信息**
+
+**切换方式：**
+```
+More（更多）→ Language / 语言 → 选择 English 或 中文（简体）
+```
+
+**翻译文件：** `/src/app/contexts/LanguageContext.tsx`
+- 包含 700+ 翻译键值对
+- 支持动态参数替换
+- 语言设置持久化保存
+
+---
+
+### 3. ✅ 食品图片展示
+
+**图片展示位置：**
+- ✅ **Labels 页面**（标签列表）
+ - 每个标签卡片都有食品图片
+ - 图片尺寸：80x80px（缩略图）
+
+- ✅ **LabelDetail 页面**（标签详情）
+ - 大尺寸食品图片：全宽 x 256px
+ - 高质量展示
+
+**图片来源：**
+- 使用 Unsplash 高质量食品图片
+- 10+ 种不同食品的真实图片：
+ - 烤鸡胸肉（Grilled Chicken）
+ - 凯撒沙拉（Caesar Salad）
+ - 三文鱼（Fresh Salmon）
+ - 牛肉饼（Ground Beef Patties）
+ - 意面酱（Marinara Sauce）
+ - 蔬菜（Pre-cut Vegetables）
+ - 巧克力布朗尼（Chocolate Brownie）
+ - 虾意面（Shrimp Pasta）
+ - 冰淇淋（Ice Cream）
+ - 三明治（Pre-made Sandwiches）
+
+---
+
+## 📱 新的标签使用流程示意图
+
+```
+┌─────────────────────────────────────────────────┐
+│ Labels（标签库） │
+│ │
+│ 🥗 Grilled Chicken Breast [LB001] ✅ │
+│ Nutrition Label │
+│ Expiry: Mar 2, 2026 │
+│ ┌────────────────────┐ │
+│ │ [食品图片] │ │
+│ └────────────────────┘ │
+│ │
+│ ⚠️ Caesar Salad [LB002] ✅ │
+│ Allergen Label │
+│ Expiry: Feb 28, 2026 │
+└─────────────────────────────────────────────────┘
+ ↓ 点击标签
+┌─────────────────────────────────────────────────┐
+│ Label Detail（标签详情） │
+│ │
+│ ┌──────────────────────────────────────────┐ │
+│ │ │ │
+│ │ [大尺寸食品图片] │ │
+│ │ │ │
+│ └──────────────────────────────────────────┘ │
+│ │
+│ 🟢 Available for Use │
+│ This label is valid. Expires in 3 days. │
+│ │
+│ Label Information: │
+│ • Label ID: LB001 │
+│ • Category: Meat │
+│ • Printed Date: Feb 27, 2026 │
+│ • Expiry Date: Mar 2, 2026 │
+│ • Printed By: Maria Garcia │
+│ │
+│ Label Details: │
+│ • Serving Size: 150g │
+│ • Calories: 165 kcal │
+│ • Protein: 31g │
+│ • Fat: 3.6g │
+│ │
+│ Notes (Optional): │
+│ ┌─────────────────────────────────────┐ │
+│ │ Applied to container #3... │ │
+│ └─────────────────────────────────────┘ │
+│ │
+│ ┌──────────────────────────────────────────┐ │
+│ │ [Use This Label] │ │
+│ └──────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────┘
+```
+
+---
+
+## 🌐 语言切换效果示例
+
+### English（英文）
+```
+Dashboard
+├── Today's Labels: 247
+├── Open Tasks: 8
+├── Alerts: 5
+└── Quick Actions
+ ├── Scan & Print
+ ├── Batch Print
+ ├── Record Temperature
+ └── Report Waste
+```
+
+### 中文（简体）
+```
+主页
+├── 今日标签：247
+├── 待办任务：8
+├── 提醒：5
+└── 快捷操作
+ ├── 扫码打印
+ ├── 批量打印
+ ├── 记录温度
+ └── 报告浪费
+```
+
+---
+
+## 🎨 UI 特点
+
+### 设计风格
+- ✅ 极简企业级 SaaS 风格
+- ✅ 大留白设计
+- ✅ 卡片式布局
+- ✅ 企业蓝色主色调（#2563eb）
+- ✅ 专业感强
+
+### 按钮规范
+- ✅ 按钮高度 ≥ 48px（h-12）
+- ✅ 重要操作使用 56px（h-14）
+- ✅ 文本清晰，字体大（text-base/text-lg）
+
+### 状态展示
+- ✅ 所有状态使用文字标签
+- ✅ 配合颜色区分：
+ - 🟢 绿色 = 成功/可用/在线
+ - 🟡 黄色 = 警告/即将过期
+ - 🔴 红色 = 错误/过期/离线
+ - 🔵 蓝色 = 信息/待处理
+
+---
+
+## 📂 文件结构
+
+```
+/src/app/
+├── contexts/
+│ └── LanguageContext.tsx # 语言管理系统（700+ 翻译）
+├── pages/
+│ ├── Dashboard.tsx # ✅ 主页（已翻译）
+│ ├── Labels.tsx # ✅ 标签库（已重构 + 翻译）
+│ ├── LabelDetail.tsx # ✅ 标签详情（新页面）
+│ ├── Tasks.tsx # ✅ 任务管理（已翻译）
+│ ├── More.tsx # ✅ 更多设置（已翻译）
+│ └── more/
+│ ├── LanguageSettings.tsx # ✅ 语��设置（新页面）
+│ ├── Profile.tsx # 个人资料
+│ ├── Printers.tsx # 打印机设置
+│ ├── Location.tsx # 工作地点
+│ ├── SyncStatus.tsx # 同步状态
+│ └── Support.tsx # 支持中心
+└── routes.tsx # ✅ 路由配置（已更新）
+```
+
+---
+
+## 🚀 使用说明
+
+### 查看标签
+1. 点击底部 **Labels**（标签）标签
+2. 浏览可用标签列表（带食品图片）
+3. 使用搜索或分类筛选
+4. 点击标签查看详情
+
+### 使用标签
+1. 在标签详情页查看所有信息
+2. 确认标签状态（可用/即将过期/已过期）
+3. 可选：添加使用备注
+4. 点击 **Use This Label**（使用此标签）按钮
+5. 确认后标签使用记录被保存
+
+### 切换语言
+1. 点击底部 **More**（更多）标签
+2. 选择 **Language / 语言**
+3. 点击想要的语言（🇺🇸 English 或 🇨🇳 中文）
+4. 语言立即生效，无需刷新
+
+---
+
+## 🎯 核心改进总结
+
+| 项目 | 改进前 | 改进后 |
+|-----|-------|-------|
+| **标签功能** | 打印新标签 | 使用已有标签 |
+| **语言支持** | 仅英文 | 中英文切换 |
+| **食品展示** | 无图片 | 高质量图片 |
+| **用户体验** | 复杂流程 | 简化操作 |
+| **翻译覆盖** | 0% | 100% |
+| **图片展示** | 0 张 | 10+ 张 |
+
+---
+
+## ✨ 系统特色
+
+1. **移动优先**
+ - 专为手机端设计
+ - 单列布局，易于浏览
+ - 大按钮，易于点击
+
+2. **国际化**
+ - 完整中英文支持
+ - 即时切换
+ - 持久化保存
+
+3. **视觉化**
+ - 每个标签都有食品图片
+ - 状态清晰可见
+ - 专业的配色方案
+
+4. **简单易用**
+ - 减少操作步骤
+ - 清晰的信息层级
+ - 即时反馈
+
+---
+
+## 📝 技术栈
+
+- **Frontend**: React + TypeScript
+- **Routing**: React Router v7
+- **Styling**: Tailwind CSS v4
+- **UI Components**: shadcn/ui
+- **Icons**: Lucide React
+- **Notifications**: Sonner
+- **Images**: Unsplash API
+- **i18n**: Custom Context-based solution
+
+---
+
+Created on: February 27, 2026
diff --git a/美国版/Food Labeling Management App React/TECHNICAL_DOCS.md b/美国版/Food Labeling Management App React/TECHNICAL_DOCS.md
new file mode 100644
index 0000000..8c08956
--- /dev/null
+++ b/美国版/Food Labeling Management App React/TECHNICAL_DOCS.md
@@ -0,0 +1,327 @@
+# Technical Documentation - Food Label System
+
+## 🏗️ Project Structure
+
+```
+src/app/
+├── App.tsx # Main application entry point with RouterProvider
+├── routes.tsx # React Router configuration
+├── components/
+│ ├── Layout.tsx # Main layout with bottom navigation
+│ ├── states/ # Reusable state components
+│ │ ├── Loading.tsx
+│ │ ├── EmptyState.tsx
+│ │ ├── ErrorState.tsx
+│ │ └── SuccessState.tsx
+│ └── ui/ # Radix UI components (shadcn/ui)
+├── pages/
+│ ├── Login.tsx # Authentication page
+│ ├── Dashboard.tsx # Home dashboard
+│ ├── Labels.tsx # Label list view
+│ ├── LabelPrint.tsx # Label printing configuration
+│ ├── LabelQueue.tsx # Print queue management
+│ ├── Tasks.tsx # Task list view
+│ ├── TaskExecute.tsx # Task execution form
+│ ├── TaskIssue.tsx # Issue reporting form
+│ ├── More.tsx # Settings menu
+│ ├── NotFound.tsx # 404 page
+│ └── more/ # Settings sub-pages
+│ ├── Profile.tsx
+│ ├── Printers.tsx
+│ ├── Location.tsx
+│ ├── SyncStatus.tsx
+│ └── Support.tsx
+└── styles/
+ ├── fonts.css # Font imports (Inter)
+ ├── theme.css # Design system tokens
+ ├── tailwind.css # Tailwind directives
+ └── index.css # Global styles
+```
+
+## 🔧 Technology Stack
+
+### Core Dependencies
+- **React**: 18.3.1
+- **React Router**: 7.13.0 (Data mode with createBrowserRouter)
+- **Tailwind CSS**: 4.1.12
+- **Vite**: 6.3.5
+
+### UI Libraries
+- **Radix UI**: Complete suite of unstyled, accessible UI components
+- **Lucide React**: 0.487.0 - Icon library
+- **Sonner**: 2.0.3 - Toast notifications
+- **class-variance-authority**: For component variants
+- **tailwind-merge**: For className merging
+
+### Styling Approach
+- Tailwind CSS v4 with CSS custom properties
+- Design tokens in `theme.css`
+- Mobile-first responsive design
+- Max-width constraint (480px) for mobile simulation
+
+## 📐 Design System
+
+### Color Palette
+```css
+--primary: #2563eb /* Enterprise Blue */
+--background: #ffffff /* White */
+--foreground: oklch(0.145 0 0) /* Near Black */
+--destructive: #d4183d /* Error Red */
+```
+
+### Typography Scale
+```css
+--font-size: 16px /* Base size */
+h1: 24px (text-2xl)
+h2: 20px (text-xl)
+h3: 18px (text-lg)
+body: 16px (text-base)
+```
+
+### Spacing & Layout
+- **Container**: max-w-[480px] mx-auto
+- **Padding**: p-6 (24px) for page sections
+- **Card spacing**: space-y-3 to space-y-6
+- **Button height**: h-12 (48px) minimum
+
+### Border Radius
+- **Cards**: rounded-lg (10px)
+- **Buttons**: rounded-lg (10px)
+- **Badges**: rounded-lg (10px)
+
+## 🔀 Routing Architecture
+
+### Route Configuration
+Using React Router v7 Data mode:
+```tsx
+createBrowserRouter([
+ { path: "/login", Component: Login },
+ {
+ path: "/",
+ Component: Layout, // Wrapper with bottom nav
+ children: [...] // Nested routes
+ }
+])
+```
+
+### Navigation Patterns
+1. **Bottom Tab Navigation**: 4 main sections (Dashboard, Labels, Tasks, More)
+2. **Nested Routes**: Sub-pages within main sections
+3. **Protected Routes**: Auth check in Layout component
+4. **Not Found**: Catch-all route (*) for 404s
+
+### State Persistence
+- **localStorage** for authentication state
+- Session data: `isLoggedIn`, `userName`, `storeName`
+- Auto-redirect to `/login` if not authenticated
+
+## 🎨 Component Patterns
+
+### Page Structure
+```tsx
+
+ {/* Header */}
+
+```
+
+### Card Component Usage
+```tsx
+
+
+
+ {/* Content */}
+ + Page Title +
+
+ {/* Cards and content */}
+
+
+ {/* Fixed Bottom Button (if needed) */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/美国版/Food Labeling Management App React/src/app/components/Layout.tsx b/美国版/Food Labeling Management App React/src/app/components/Layout.tsx
new file mode 100644
index 0000000..5597812
--- /dev/null
+++ b/美国版/Food Labeling Management App React/src/app/components/Layout.tsx
@@ -0,0 +1,72 @@
+import { Outlet, useNavigate, useLocation } from "react-router";
+import { Home, Tag, Menu } from "lucide-react";
+import { useEffect } from "react";
+import { useLanguage } from "../contexts/LanguageContext";
+
+export default function Layout() {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { t } = useLanguage();
+
+ useEffect(() => {
+ // Check if user is logged in
+ const isLoggedIn = localStorage.getItem("isLoggedIn");
+ if (!isLoggedIn) {
+ navigate("/login");
+ }
+ }, [navigate]);
+
+ const navItems = [
+ { path: "/", icon: Home, label: t("nav.dashboard") },
+ { path: "/labels", icon: Tag, label: t("nav.labels") },
+ { path: "/more", icon: Menu, label: t("nav.more") },
+ ];
+
+ const isActive = (path: string) => {
+ if (path === "/") {
+ return location.pathname === "/";
+ }
+ return location.pathname.startsWith(path);
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+
+
+ + {t("expiryAlert.title")} +
++ {expiryItems.length} {t("expiryAlert.itemsExpiring")} +
+
+
+
+ {/* Actions */}
+ + {t("expiryAlert.message")} +
+ +
+ {expiryItems.map((item) => (
+
+
+
+ ))}
+
+
+
+
+ + {t(item.nameKey)} +
++ {t("expiryAlert.location")}: {item.location} +
++ {t("expiryAlert.expires")}: {item.expiryDate} +
+
+
+
+
+
+ {/* Main Content */}
+
+
+
+ {/* Bottom Navigation */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/美国版/Food Labeling Management App React/src/app/components/RootLayout.tsx b/美国版/Food Labeling Management App React/src/app/components/RootLayout.tsx
new file mode 100644
index 0000000..d746eb7
--- /dev/null
+++ b/美国版/Food Labeling Management App React/src/app/components/RootLayout.tsx
@@ -0,0 +1,13 @@
+import { LanguageProvider } from "../contexts/LanguageContext";
+import { Toaster } from "./ui/sonner";
+import { ExpiryAlert } from "./ExpiryAlert";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ ) : (
+
+ 
+
+
+
+ );
+}
diff --git a/美国版/Food Labeling Management App React/src/app/components/states/ErrorState.tsx b/美国版/Food Labeling Management App React/src/app/components/states/ErrorState.tsx
new file mode 100644
index 0000000..002a784
--- /dev/null
+++ b/美国版/Food Labeling Management App React/src/app/components/states/ErrorState.tsx
@@ -0,0 +1,62 @@
+import { WifiOff, AlertCircle } from "lucide-react";
+import { Button } from "../ui/button";
+
+interface ErrorStateProps {
+ type: "network" | "error" | "print-failed";
+ message?: string;
+ onRetry?: () => void;
+}
+
+export default function ErrorState({ type, message, onRetry }: ErrorStateProps) {
+ const configs = {
+ network: {
+ icon: WifiOff,
+ title: "No Internet Connection",
+ description:
+ message ||
+ "Please check your internet connection and try again. You can continue working offline.",
+ color: "text-orange-600",
+ bgColor: "bg-orange-100",
+ },
+ error: {
+ icon: AlertCircle,
+ title: "Something Went Wrong",
+ description: message || "An unexpected error occurred. Please try again.",
+ color: "text-red-600",
+ bgColor: "bg-red-100",
+ },
+ "print-failed": {
+ icon: AlertCircle,
+ title: "Print Failed",
+ description:
+ message ||
+ "Unable to print the label. Please check your printer connection and try again.",
+ color: "text-red-600",
+ bgColor: "bg-red-100",
+ },
+ };
+
+ const config = configs[type];
+ const Icon = config.icon;
+
+ return (
+
+
+ {title}
++ {description} +
+ {actionLabel && onAction && ( + + )} +
+
+ );
+}
diff --git a/美国版/Food Labeling Management App React/src/app/components/states/Loading.tsx b/美国版/Food Labeling Management App React/src/app/components/states/Loading.tsx
new file mode 100644
index 0000000..74c0c81
--- /dev/null
+++ b/美国版/Food Labeling Management App React/src/app/components/states/Loading.tsx
@@ -0,0 +1,14 @@
+import { Loader2 } from "lucide-react";
+
+interface LoadingProps {
+ message?: string;
+}
+
+export default function Loading({ message = "Loading..." }: LoadingProps) {
+ return (
+
+
+ + {config.title} +
++ {config.description} +
+ {onRetry && ( + + )} +
+
+ );
+}
diff --git a/美国版/Food Labeling Management App React/src/app/components/states/README.md b/美国版/Food Labeling Management App React/src/app/components/states/README.md
new file mode 100644
index 0000000..8e09c35
--- /dev/null
+++ b/美国版/Food Labeling Management App React/src/app/components/states/README.md
@@ -0,0 +1,51 @@
+# State Components
+
+This directory contains reusable state components for the application:
+
+## Components
+
+### Loading
+Shows a loading spinner with optional message
+```tsx
+{message}
+
+
+ );
+}
diff --git a/美国版/Food Labeling Management App React/src/app/components/ui/accordion.tsx b/美国版/Food Labeling Management App React/src/app/components/ui/accordion.tsx
new file mode 100644
index 0000000..bd6b1e3
--- /dev/null
+++ b/美国版/Food Labeling Management App React/src/app/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Accordion({
+ ...props
+}: React.ComponentProps
+
+ {title}
++ {description} +
+ {actionLabel && onAction && ( + + )} +{children}
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+