roadmkt

byrohit kumar

Build a complete, responsive, server-less Sales Canvassing and Lead Tracker web application (named "Road MKT") integrated with Supabase (PostgreSQL) as the backend. The application features a custom, dense, utilitarian design system (Outfit & Inter fonts, dark/light theme options, minimal 4px border-radius, flat container panels with no box-shadows, and high contrast layout elements). Ensure the output matches the following specifications for database schema, logic layer, and page views: ========================================= 1. DATABASE & STORAGE ARCHITECTURE ========================================= The database uses Supabase PostgreSQL, but utilizes a "flexible schema" pattern where Firestore-style collections are represented as tables. Each table must have: - `id` (TEXT PRIMARY KEY) representing the document ID. - `data` (JSONB) containing all document fields. - `created_at` and `updated_at` (TIMESTAMPTZ) handling timestamps automatically. Recreate the following tables: - `users`: Stores user profile data. Fields inside `data`: `role` ('super', 'admin', 'user'), `email`, `warehouseId`, `pinColor`, `needsPasswordSetup` (boolean). (No plaintext passwords must be stored). - `visits`: The core lead-tracking table. Fields inside `data`: `biz` (business name), `rep` (username), `date` (MM/DD/YYYY), `comments`, `leads` (status), `lat` (latitude), `lng` (longitude), `warehouseId`, `followup` (Yes/No), `postal`, `addr`, `city`, `phone`, `email`. - `pending_users`: Stores registration requests before admin approval. Fields: `pass` (plaintext temporary password), `warehouseId`, `role`, `requestedAt`. - `settings`: Application configuration settings (e.g. `sheetAccess` configurations, form config, cycle info). - `configs`: Custom per-warehouse settings (e.g. table columns). - `activity_logs`: Audit trail for user operations (e.g. logouts, logins, visit saving). - `lockouts`: Tracks failed sign-in attempts by username. ========================================= 2. CLIENT-SIDE SUPABASE COMPATIBILITY LAYER ========================================= Write a compatibility script (`lib/supabase.js`) that wraps the Supabase JS SDK client to expose a Firestore-compatible interface. This allows the application logic to call Firestore-like APIs. Recreate: - `db.collection(name)`: returns a CollectionReference. - `CollectionReference.doc(id)`: returns a DocRef. - `DocRef.get()`: fetches document, returns DocSnapshot with `.id`, `.exists`, `.data()`, and `.ref`. - `DocRef.set(data, { merge: true })`: upserts document. If merge is true, reads existing JSONB data, merges new fields, and writes back. - `DocRef.update(data)`: updates specific JSONB fields. - `DocRef.delete()`: deletes the row by id. - `CollectionReference.add(data)`: generates a custom 20-character alphanumeric ID, inserts a new row, and returns a DocRef. - `db.batch()`: returns a WriteBatch containing `.set()`, `.update()`, and `.delete()`. `.commit()` runs all batch operations concurrently. - Queries chaining: `.where(field, op, value)`, `.orderBy(field, direction)`, and `.limit(n)`. - Server-side Filtering & Pagination: Re-map where conditions to Supabase queries using Postgres JSONB containment (`data->>field`). Implement pagination (page looping by calling `.range(offset, offset + limit)`) to automatically fetch all matching records, bypassing PostgREST's 1,000-row limit. - Re-map Firebase Auth calls: `firebase.auth().signInWithEmailAndPassword(email, password)` maps to `supabase.auth.signInWithPassword`. `firebase.auth().signOut()` maps to `supabase.auth.signOut`. ========================================= 3. PAGE LAYOUTS & USER INTERFACES ========================================= --- A. LOGIN & REGISTRATION HUB (login.html) --- Create a clean, responsive login page utilizing a split-pane layout: - Left pane (desktop only): Features a dark cover graphic representing Costco, overlayed with a brand badge ("Road MKT") and a checklist of core features (Live Geolocation, Secure Auth, Performance Dashboards). - Right pane (or centered full width on mobile): Holds a secure sign-in card. - User ID input accepts usernames or email addresses. If username is inputted, automatically append a generic email suffix (e.g. `@yourdomain.com`) behind the scenes to authenticate. - Support 6-character password constraint check: If the password is shorter than 6 characters, automatically pad it with trailing zeroes (e.g. '123' -> '123000') during authentication calls to comply with Supabase restrictions. - Contains links that switch to a "Request Account" registration form, saving requests to `pending_users`. --- B. DESKTOP WORKSPACE PORTAL (index.html & app.js) --- Create a multi-pane control room for sales reps and admins: - Header: Displays "Road MKT Portal", active user role badge, and user name menu. - Sidebar Navigation: Allows navigating between Map, Log List, Analytics, and Admin Settings. - Interactive Map View: Employs Google Maps JS API. Draws active pins representing visits. Each pin must have: - Rep-specific color coding. - Interactive InfoWindow showing business name, rep name, comment, date, status, and an admin-only "Delete Visit" button. - Sidebar Log List: Dense list of visits for the rep's warehouse with search, filtering, and "Pencil" Edit / "Trash" Delete buttons. - Quick Log Form Modal: Input fields for logging new canvassing visits (Business, Specific Industry, Status, Comments, Follow-up date/reason, Address, City, Postal Code, Phone, Email). Auto-geocodes addresses via Google Maps Geocoder or falls back to browser's getCurrentPosition. - Deletion Logic: Clicking delete prompts confirmation. Upon confirmation, locates the record by ID (resolving local timestamp vs database key) and deletes it from both memory and the Supabase backend. --- C. MOBILE COMPACT PORTAL (mobile.html) --- A compact, touch-optimized page designed for sales reps on the go: - Dense single-column interface fitting mobile status bars with safe-area insets. - Navigation bar with quick buttons: Toggle Map view vs List view, Log New Visit, User Profile, Sync Status (offline indicator). - Bottom bottom-sheet for quick logs and history checks. - Incorporates location watcher to continuously display the rep's current position and automatically pre-fill lat/lng coordinates. --- D. ADMIN CONTROL DASHBOARD (dashboard.html & analytics.html) --- - User Approvals Tab: Lists pending user requests from `pending_users`. Clicking "Approve" registers the user in Supabase Auth via admin tools and creates their profile in the `users` table, then deletes the request. Clicking "Deny" deletes the request. - Excel Databases Tab: Allows importing database records by uploading `.xlsx` files (parsed client-side and upserted in batches), and includes database clear functions ("Clear Firefly Data", "Clear Custom Locations"). - Analytics Dashboard: Embedded visual reports (charts showing visits by rep, visits by city, top-performing warehouses, status breakdowns). Make sure the logic is cleanly separated, all references to Firebase libraries are completely removed and replaced with Supabase SDK, and the code contains NO hardcoded credentials.