LeadDesk Mini

A responsive lead capture and management dashboard featuring real-time SLA tracking and secure database access.

---

🔗 Live Demo

Access the hosted application online:

Admin Dashboard credentials: admin@digitalheroes.com / DigitalHeroes2026!

---

💡 What This Solves

Incoming customer leads often go cold due to delayed response times and a lack of clear tracking. Without unified visibility, sales teams struggle to identify which inquiries need immediate attention or to extract structured lead datasets. LeadDesk Mini bridges this gap by providing an instant-capture form paired with an administrative interface that alerts operators to overdue leads and enables seamless, filtered data export.

---

🚀 Features

• Public Lead Capture Form

  • Instant and validation-guarded public intake form.
  • Automatic email duplication check matching exact existing records to prevent spam.
  • Indian Rupee (INR) project budget categories.

• Standout Features:

  • Live Overdue SLA Tracker (24h SLA)
    • Why this matters: Highlighted visually via a pulsing red indicator next to the status dropdown for any lead that has remained in the "New" state for longer than 24 hours. The calculation updates live on a periodic 60-second client-side interval without requiring page refreshes.
  • Filtered CSV Export
    • Why this matters: Generates and triggers a native browser download of leads formatted according to RFC 4180. The exported CSV automatically respects active search/filter queries, handles field comma-escaping correctly (preventing broken columns in Excel/Sheets), and disables itself if no records are visible.

---

🛠️ Tech Stack

Layer	Technology
Frontend Framework	React (v18) + Vite (v5)
Language	TypeScript
Styling	Tailwind CSS (v3)
Backend / Database	Supabase (Postgres)
Authentication	Supabase Auth (Email/Password)
Deployment	Vercel

---

📊 Data Model

leads Table Schema

Column	Type	Description
id	uuid (Primary Key)	Auto-generated unique identifier
name	text	Customer full name
email	text	Validated customer email address
budget_range	text	Budget option (Under ₹50k, ₹50k - ₹2L, ₹2L - ₹10L, ₹10L+)
message	text (Nullable)	Additional message from the customer
status	text	Lead state: defaults to 'New' (New, Contacted, Closed)
created_at	timestamptz	Date and time the lead was received

Row Level Security (RLS) Policies

Row Level Security is enabled on the leads table. Anonymous visitors (anon role) are permitted only to perform INSERT operations (i.e. submitting the intake form). Reading, filtering, and updating leads (SELECT and UPDATE operations) are restricted to authenticated users, ensuring admin data is strictly protected.

---

📐 Design Decisions

1. RLS-First Database Security: Instead of gating data access solely in application code, security is enforced directly at the database layer via Postgres RLS policies. Even if a bug exposes frontend code, unauthorized anonymous requests are rejected at the API level.

2. Supabase Auth Integration: Rather than hand-rolling custom token signing, refreshing, or cookie management, the dashboard integrates production-ready Supabase Auth. Route guarding is handled client-side via a ProtectedRoute wrapper checking active session states.

3. Optimistic UI with Revert-on-Failure: Changing a lead's status updates the UI instantly, keeping the dashboard snappy. The network call is resolved in the background; if it fails, the state is rolled back and an error toast notification alerts the operator.

---

📅 What I'd Do with Another Day

Read details

Timezone-aware SLA routing

Digital Heroes operates across five offices (New York, Delhi, London, Sydney, Lucknow) spanning three timezones, with different response-time SLAs per inbox (e.g. general enquiries at 1-day SLA, support tickets at 2-hour acknowledgment). A flat leads table with a single "New/Contacted/Closed" status can't represent that—a lead submitted at 11 PM IST and a lead submitted at 9 AM EST have completely different "overdue" thresholds depending on which regional team owns it.

Doing this properly would require:

• An offices table (name, timezone, business hours) and an enquiry_types table (name, sla_hours), rather than hardcoding a single 24-hour flag.
• Assigning each incoming lead to the correct office based on submitted region/timezone, and the correct SLA based on enquiry type.
• Computing "overdue" as a function of the assigned office's current local business hours, not just wall-clock time since submission—a lead sitting 20 hours old on a Friday evening in Sydney shouldn't be flagged the same way as one sitting 20 hours old on a Monday morning in New York.
• A dashboard view groupable by office, so each regional team only sees leads in their queue rather than one global list.

I didn't build this because it needs real schema design (not just a UI flag) and enough time to get the timezone/business-hours math actually correct rather than approximately correct—the kind of thing that's worse half-done than not done. The 24-hour flat SLA flag I did build is a simplified version of the same underlying idea, scoped to what I could verify correctly in the time available.

---

⚙️ Setup Instructions

Follow these steps to run LeadDesk Mini locally:

1. Clone the Repository:

   git clone https://github.com/ch1n-may/LeadDeskmini.git
   cd LeadDeskmini

2. Install Dependencies:

   npm install

3. Configure Environment Variables: Create a .env file in the root directory:

   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run Development Server:

   npm run dev

5. Build for Production:

   npm run build

---

Built for Digital Heroes Training Task