Bootstrap Prompts — CA Compliance Tracker (Worked Example)

Scaffold a new Next.js 15 project for my personal CA compliance tracking app.

Project details:
- Name: [your-app-name] (e.g. ca-practice-manager)
- What it does: tracks my CA clients and their GST/ITR/audit filing deadlines
- Stack: Next.js 15 (App Router), TypeScript strict mode, Tailwind CSS

Steps:
1. Create the Next.js project with: npx create-next-app@latest [your-app-name] --typescript --tailwind --app
2. Open the new project folder
3. Delete the default home page content
4. Replace it with a simple centered heading: "[Your App Name]" and a subheading "Coming soon"
5. Create a .gitignore that includes .env, .env.local, node_modules, .next
6. Create a .env.local placeholder file with these keys (empty values):
   NEXT_PUBLIC_SUPABASE_URL=
   NEXT_PUBLIC_SUPABASE_ANON_KEY=
   SUPABASE_SERVICE_ROLE_KEY=
7. Initialize a git repo, make the first commit: "init: scaffold CA Practice Manager"
8. Tell me the exact commands to create a GitHub repository and push to it

Create a CLAUDE.md at the root of the current project with this content:

# CLAUDE.md — [Your App Name]

## What This App Is
A personal compliance management dashboard for my CA practice. I use it to track
my clients' GST, income tax, and audit filing deadlines — and to record when each
filing is completed.

Only I use this app. One user, one Supabase project, simple RLS.

**Supabase project ref:** `[your-supabase-project-ref]`

---

## Tech Stack
| Layer | Technology |
|-------|-----------|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript (strict mode) |
| Styling | Tailwind CSS |
| Backend | Supabase (database + auth) |
| Server state | React Query |
| Forms | React Hook Form + Zod |
| Deploy | Vercel |

---

## Quick Commands
\`\`\`bash
npm run dev        # dev server at localhost:3000
npm run build      # production build
npx tsc --noEmit   # type check
\`\`\`

---

## Database Tables
| Table | Purpose |
|-------|---------|
| clients | My CA clients — name, GSTIN, entity type, state, contact |
| compliance_tasks | Filing tasks per client — type, period, due date, status, filed date |

---

## Key Business Rules
- Only I (the logged-in CA) can see or edit my own clients and tasks
- Clients and tasks are soft-deleted (is_deleted = true) — never hard-deleted
- Monetary amounts stored as paise (integers) — not floats
- All dates in IST for display, UTC for storage
- Overdue status is computed (due_date < today and status != 'filed') — not stored

---

## Task Status Flow
pending → in_progress → filed
Overdue: computed at query time — due_date < today and status != filed

---

## Skill Routing
- "build, add, create" → new-feature skill
- "fix, bug, broken" → bug-fix skill
- "database, schema, migration, RLS" → supabase-migration skill
- "before demo, audit, check" → pre-launch-audit skill

Build the client list UI for my CA Practice Manager. No database yet — local state only.

I need:
1. A navigation bar at the top with my app name and a "Dashboard" and "Clients" link
2. A Clients page at /clients with:
   - An "Add Client" button at the top right
   - Clicking it opens a modal/dialog with this form:
     · Legal Name: text, required, min 2 characters
     · GSTIN: text, optional — if provided, must be exactly 15 characters, uppercase
     · Entity Type: select — Private Limited / LLP / Partnership / Proprietorship / Individual
     · State: select — all 29 Indian states + 8 UTs (use their standard 2-letter codes)
     · Contact Email: email format, optional
     · Contact Phone: optional — 10 digits starting 6-9 (/^[6-9][0-9]{9}$/)
   - Submit adds the client to a list below
   - The list shows: legal name, GSTIN (or "Not GST registered"), entity type, state
   - Each row has an "Edit" button that re-opens the form pre-filled
3. Zod schema for the form validation
4. Use shadcn/ui Dialog for the modal and Form/Input/Select for the fields
5. Store clients in React useState — no Supabase yet

The design should be clean and professional. This is a tool I use daily.

Connect my CA Practice Manager to Supabase. Replace local state with real database.

Supabase project ref is in my project CLAUDE.md. The schema is:

TABLE: clients
  id uuid primary key default gen_random_uuid(),
  created_at timestamptz default now(),
  user_id uuid references auth.users(id) on delete cascade not null,
  legal_name text not null,
  gstin text,
  entity_type text not null,
  state_code text not null,
  contact_email text,
  contact_phone text,
  notes text,
  is_deleted boolean not null default false

TABLE: compliance_tasks
  id uuid primary key default gen_random_uuid(),
  created_at timestamptz default now(),
  client_id uuid references clients(id) on delete cascade not null,
  user_id uuid references auth.users(id) not null,
  task_type text not null,
  period text not null,
  due_date date not null,
  status text not null default 'pending',
  filed_date date,
  filing_ref text,
  notes text,
  is_deleted boolean not null default false

Please:
1. Apply both migrations to Supabase via CLI
2. Enable RLS on both tables
3. Add these policies to clients:
   - "CA can read own clients": select using (auth.uid() = user_id and not is_deleted)
   - "CA can create clients": insert with check (auth.uid() = user_id)
   - "CA can update clients": update using (auth.uid() = user_id)
4. Add the same three policies (select/insert/update) to compliance_tasks using the same pattern
5. Set up Supabase Auth with email+password sign-in
6. Create a /login page with email + password form + Zod validation
7. Protect all routes — redirect to /login if not authenticated (middleware)
8. Install @supabase/ssr and create browser/server client helpers
9. Replace the useState client list with a useClients React Query hook
10. Make the add-client form save to Supabase via a mutation
11. After saving, invalidate the useClients query so the list refreshes

Test by adding a client, closing the browser, reopening, confirming it persists.

Add compliance tasks to my CA Practice Manager.

I need:
1. Apply the compliance_tasks migration and RLS policies to Supabase (if not already done)
2. A client detail page at /clients/[id] that shows:
   - Client header: legal name, GSTIN (or "Not GST registered"), entity type, state
   - A list of compliance tasks sorted by due_date ascending
   - An "Add Task" button

3. The add task form (in a dialog):
   - Task type: select (GSTR-1 / GSTR-3B / GSTR-9 Annual / ITR / Tax Audit / Statutory Audit / ROC Annual Return / Other)
   - Period: text input (e.g. "Apr 2026", "FY 2025-26", "Q4 FY2025-26")
   - Due date: date input
   - Notes: textarea, optional
   - Zod validation — all required fields filled

4. A useComplianceTasks(clientId) React Query hook:
   - Fetches from compliance_tasks where client_id = clientId and not is_deleted
   - Sorted by due_date ascending

5. Task display in the list:
   - Task type (bold), period, due date formatted as "12 Apr 2026"
   - Status badge: pending=grey, in_progress=blue, filed=green, overdue=red
   - Overdue = due_date < today and status != 'filed' (computed, not stored)

Build the dashboard home page for my CA Practice Manager.

Replace the placeholder home page with a real dashboard.

Two sections:

SECTION 1: "Due This Week"
- Compliance tasks where due_date is between today and today + 7 days
- Status is not "filed" and not is_deleted
- Show each as a row: client legal_name (linked to /clients/[id]), task_type, period, due_date as "Tue 12 Apr"
- Sort by due_date ascending
- Empty state: green checkmark icon + "All clear — nothing due in the next 7 days"

SECTION 2: "Overdue" (only show this section if there ARE overdue items)
- Compliance tasks where due_date < today and status != 'filed' and not is_deleted
- Show same columns + "X days overdue" in red text
- Sort by due_date ascending (most overdue first)

Create a useDashboard React Query hook:
- Joins compliance_tasks with clients (select ct.*, c.legal_name, c.gstin)
- Returns { dueThisWeek: Task[], overdue: Task[] }
- Refresh every 10 minutes (staleTime: 10 * 60 * 1000)

The dashboard should be the page I open every morning. Make it clean and readable.
IST note: "today" means the current date in IST, not UTC. Use the local date extraction pattern (getFullYear/getMonth/getDate) to avoid the UTC-vs-IST date shift.

Add status update functionality to my CA Practice Manager.

On the client detail page, each task row needs an "Update" button that opens a dialog:
- Status: select (pending / in_progress / filed)
- Filed date: date input — required when status = "filed", hidden otherwise
- Filing reference: text input, optional (for ARN or acknowledgement numbers)
- Notes: textarea, optional

When saved:
- Update the compliance_tasks row in Supabase
- Invalidate useComplianceTasks(clientId) and useDashboard caches
- Show sonner success toast: "Task updated"
- Close the dialog

On the client detail page, separate tasks into two sections:
- "Active" (status != 'filed') — existing list at top
- "Completed" (status = 'filed') — collapsed section at bottom, expandable

Filed tasks never appear on the dashboard (the query already filters status != 'filed').

Create an updateComplianceTask mutation in useComplianceTasks.

My CA Practice Manager is feature-complete. Run the pre-launch audit skill on my codebase.

After the audit:
1. Fix all Critical findings
2. Do a mobile pass at 375px — check every page, fix any layout issues
3. Add loading skeletons to the dashboard and client detail pages while React Query fetches
4. Add a simple favicon — use a plain coloured square with my app's initials
5. Make sure all empty states are polished and friendly
6. Confirm the build passes: npm run build

Report the audit findings before fixing so I can review them.

My [clients / compliance tasks / dashboard] data is not showing up.

Expected: [what should appear]
Actual: [what I see — blank, loading forever, error message]
Browser console: [paste any red errors from DevTools → Console]
Network tab: [any red requests in DevTools → Network?]

Check: the React Query hook, the RLS policy, and whether I'm authenticated.

My [add client / add task / update status] form is not submitting.

When I click Submit: [what happens — nothing, spinner, error toast]
Error in console: [paste if any]

Check: the Zod schema validation, the Supabase mutation, and the React Query invalidation.

I have this TypeScript error and don't understand it:
[paste the full error including the file and line number]

Fix the type — do not use 'any' or '@ts-ignore'.