Prompt: LifeTrack – Personal Lifecycle Tracker (React + LocalStorage) v1.1 Premium Flow (Responsive + Theme + Filters) Build a fully functional, responsive web application called LifeTrack – Personal Lifecycle Tracker using React JS and LocalStorage only (no backend, no external DB). This system tracks lifecycle/expiry items (SIM cards, subscriptions, licenses, warranties, memberships). It must include hardcoded authentication, a professional dashboard, full CRUD, automatic status computation, dark/light mode, status filtering, search, smart sorting by urgency, and mobile + PC optimized layouts. Core Stack React JS (Vite preferred) React Router DOM Tailwind CSS LocalStorage for database + auth + UI preferences Do NOT use: Backend / Firebase / Supabase Any database (Mongo/MySQL/Postgres) JSON server LocalStorage only. Authentication (Hardcoded Only) Credential (hardcode exactly): Email: admin@gmail.com Password: admin123 Do NOT allow: Register Forgot password Change password Auth storage: On successful login, set LocalStorage: Key: lifetrack_auth_key Value: LT_AUTH_KEY_SECURE_2026 Auto-login / route guarding: On app load: if auth key exists → go /dashboard, else /login Protect /dashboard, /add, /edit/:id via ProtectedRoute Logout removes auth key and redirects /login LocalStorage Database Storage key: lifetrack_records Record shape: { "id": "uuid", "title": "Simcard Expired", "description": "Hotlink prepaid", "startDate": "2026-01-01", "endDate": "2026-06-01", "createdAt": "2026-02-22", "updatedAt": "2026-02-22" } Rules: UUID required (uuid package) title/startDate/endDate required description optional Validate startDate <= endDate createdAt on create, updatedAt on edit (YYYY-MM-DD) Date + Status Logic (Must Be Reliable) Dates stored as YYYY-MM-DD. Parse as local date (avoid UTC parsing bugs). Implement a utility that converts YYYY-MM-DD to a local Date using split parts. Status computed dynamically (do not store status): today < startDate → Upcoming (gray) startDate <= today <= endDate → Active (green) today > endDate → Expired (red) Also compute: daysRemaining when Active/Upcoming (optional display) “Ends soon” indicator for Active ending within 7 days (optional badge) Dashboard UX v1.1 (Premium Flow) Dashboard must include: Overview header strip with counts: Upcoming / Active / Expired “Next expiring” highlight card (shows the record with nearest endDate among Active, then Upcoming if none Active) Controls row: Add Record button Search input (title + description) Status filter dropdown/segmented control: All / Upcoming / Active / Expired Theme toggle (light/dark) Logout Filtering + Search (Client-side) Default filter: All Search updates instantly Filtering uses the same computed status logic as badges Persist dashboard preferences in LocalStorage: Key: lifetrack_theme → light|dark Key: lifetrack_filter → all|upcoming|active|expired Key: lifetrack_search (optional) → last search text Smart Sorting (Default) Default sorting should help users not miss expiries: Primary: status priority (Expired first OR Active ending soon first — choose one and implement consistently) Recommended: Active (endDate soonest) → Upcoming (startDate soonest) → Expired (most recent expired first) Secondary: date ascending for upcoming/active; date descending for expired Provide optional sort selector (optional; not required) Responsive Layout Requirements (Mobile + PC) Must look great on both. Mobile (<= md): Records displayed as stacked cards (RecordCard) Sticky bottom action bar (optional) or top-right Add button Filters/search collapse nicely (e.g., search full width, filter dropdown) Comfortable tap targets, no dense tables Desktop (>= lg): Records displayed as a table OR grid (professional) Column headers: Title, Start, End, Status, Actions Inline edit/delete buttons Overview strip visible and aligned Empty states: If no records at all: show “Add your first item” CTA If no matches due to filter/search: show “No results” with reset button Feedback: Use toast/snackbar messages (Saved / Updated / Deleted) Delete confirmation modal required Optional Undo delete (bonus): keep last deleted in memory for 5 seconds Pages + Routing Routes: /login /dashboard /add /edit/:id / redirects by auth state Login Page Email + Password Wrong credential shows inline error On success → dashboard Add Record Page Record form (Title, Description, Start Date, End Date) Save: validate and persist to LocalStorage, redirect dashboard, toast “Saved” Cancel: back to dashboard Edit Record Page Load record by id Save updates record + updatedAt, redirect dashboard, toast “Updated” If id missing: “Record not found” + Back button Delete Confirmation modal After confirm: delete, update UI immediately, toast “Deleted” Dark/Light Mode Tailwind dark mode must be implemented via class strategy: Toggle sets LocalStorage lifetrack_theme Apply/remove dark class on (recommended) Theme should apply on first paint (initTheme in main/App) Folder Structure src/ components/ RecordCard.jsx RecordTable.jsx StatusBadge.jsx RecordForm.jsx ThemeToggle.jsx StatusFilter.jsx SearchBar.jsx OverviewStrip.jsx ConfirmModal.jsx Toast.jsx pages/ LoginPage.jsx DashboardPage.jsx AddRecordPage.jsx EditRecordPage.jsx routes/ ProtectedRoute.jsx services/ authService.js recordService.js themeService.js preferenceService.js utils/ statusUtils.js dateUtils.js sortUtils.js App.jsx main.jsx Services (Must Implement) authService.js login(email, password) logout() checkAuth() recordService.js getAllRecords() getRecordById(id) addRecord(record) updateRecord(id, updatedRecord) deleteRecord(id) themeService.js initTheme() getTheme() setTheme(theme) preferenceService.js getFilter/setFilter getSearch/setSearch Deliverable A fully working LifeTrack app that: Auth gates correctly with auto-login + logout Stores records in LocalStorage with full CRUD Computes and displays status badges correctly (local-date safe) Supports dark/light mode with persistence Dashboard has search + status filtering + smart sorting + overview counts Looks professional on both mobile and desktop with responsive layouts