docs: update documentation with mobile stat cards UI improvements

- Added StatCard component description to README
- Updated frontend architecture in PROJECT_ARCHITECTURE.md
- Documented responsive design improvements (v1.9.21+)
- Mobile-first responsive design for inventory management
This commit is contained in:
Daniel Bedeleanu
2026-04-15 11:39:50 +03:00
parent 546eca6b9a
commit 10d75619bf
2 changed files with 19 additions and 2 deletions

View File

@@ -16,8 +16,14 @@ A unified system to maintain an inventory of "items" and their quantities, inclu
### 2.2 Frontend (Web & PWA)
- **Architecture:** Next.js 15+ (App Router)
- **Styling:** Tailwind CSS (Readability-first config)
- **Styling:** Tailwind CSS (Readability-first config, mobile-first responsive)
- **Icons:** Lucide Icons (React components)
- **Components:**
- **StatCard** (v1.9.21+): Responsive stat display component for mobile/desktop
- Two-column flexbox layout (label left, number right)
- Responsive font sizing with Tailwind breakpoints (text-sm→md, text-lg→xl)
- Label truncation with ellipsis for overflow handling
- Accessibility: `role="status"`, `aria-hidden` on decorative icons
- **Offline persistence:** Dexie.js (IndexedDB wrapper)
- **Scanner:** `html5-qrcode` (Client-side, offline-only)
- **Sync:** Axios with bulk-sync idempotency (UUID-based)