Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -619,6 +619,145 @@ Cloudflare Workers AI supports various models:
- **@cf/baai/bge-base-en-v1.5** - Text embeddings
- **@cf/microsoft/resnet-50** - Image classification

## 📊 CRM Features

This template has been extended with a full-featured CRM system for managing contacts and sales pipelines.

### Core CRM Modules

**Contacts Management:**
- ✅ Full CRUD operations (Create, Read, Update, Delete)
- ✅ Search by name, email, company (case-insensitive)
- ✅ Tag system with many-to-many relationships
- ✅ Custom user-defined tags with color coding
- ✅ Ownership verification and data isolation
- ✅ Responsive grid layout

**Deals Pipeline:**
- ✅ Kanban-style pipeline board with 6 stages
- Prospecting → Qualification → Proposal → Negotiation → Closed Won → Closed Lost
- ✅ Link deals to contacts (optional)
- ✅ Multi-currency support (AUD, USD, EUR, GBP)
- ✅ Expected close date tracking
- ✅ Pipeline value calculation (excludes closed deals)
- ✅ Stage-specific color badges

**Dashboard Metrics:**
- ✅ Total contacts count
- ✅ New contacts this month (with trend indicator)
- ✅ Active deals count
- ✅ Pipeline value (formatted currency)
- ✅ Deals won this month
- ✅ Win rate percentage
- ✅ Quick action cards (New Contact, New Deal, View Pipeline)
- ✅ Responsive 3-column metrics grid

### CRM Database Schema

**4 New Tables:**
1. **contacts** - Contact profiles with name, email, phone, company, job title, notes
2. **contact_tags** - User-defined tags for organizing contacts
3. **contacts_to_tags** - Junction table for many-to-many tag relationships
4. **deals** - Sales pipeline deals with stage tracking and value management

**Key Relationships:**
- User → Contacts (CASCADE delete)
- User → Tags (CASCADE delete)
- User → Deals (CASCADE delete)
- Contact → Deals (SET NULL on contact delete - keeps deals)
- Contacts ↔ Tags (Many-to-many via junction table)

See `docs/DATABASE_SCHEMA.md` for complete schema documentation.

### CRM Development Commands

```bash
# Seed the database with sample CRM data
pnpm run db:seed

# Run the test suite
# See docs/TESTING.md for manual testing checklist

# Access database studio
pnpm run db:studio:local
```

### CRM Module Structure

```
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add language specification to fenced code block.

Fenced code blocks should declare a language for proper syntax highlighting. The module structure block at line 687 should specify a language or use a plain text representation.

Apply this diff to add language specification:

- ```
- src/modules/
+ ```
+ src/modules/

Alternatively, use triple backticks with a language identifier if this represents a file tree:

- ```
+ ```tree
  src/modules/
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)

687-687: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents
In README.md around line 687, the fenced code block closing/backticks lack a
language specifier; update that block to include either a plain-text fenced
block or a language identifier (e.g., tree) so the snippet is properly
highlighted — replace the current triple backticks with either ``` src/modules/
``` wrapped in ``` ``` or use a language tag like ```tree src/modules/ ``` to
mark the block as a tree listing.

src/modules/
├── contacts/
│ ├── actions/ # Server actions
│ │ ├── create-contact.action.ts
│ │ ├── get-contacts.action.ts
│ │ ├── update-contact.action.ts
│ │ ├── delete-contact.action.ts
│ │ └── tag-management.actions.ts
│ ├── components/ # UI components
│ │ ├── contact-form.tsx
│ │ ├── contact-card.tsx
│ │ └── delete-contact.tsx
│ ├── schemas/ # Database schemas
│ │ └── contact.schema.ts
│ └── contacts.route.ts # Route constants
├── deals/
│ ├── actions/
│ │ ├── create-deal.action.ts
│ │ ├── get-deals.action.ts
│ │ ├── update-deal.action.ts
│ │ └── delete-deal.action.ts
│ ├── components/
│ │ ├── deal-form.tsx
│ │ ├── deal-card.tsx
│ │ └── delete-deal.tsx
│ ├── schemas/
│ │ └── deal.schema.ts
│ ├── models/
│ │ └── deal.enum.ts
│ └── deals.route.ts
└── dashboard/
├── actions/
│ └── get-dashboard-metrics.action.ts
├── components/
│ ├── stat-card.tsx
│ └── quick-action-card.tsx
└── dashboard.page.tsx
```

### CRM Implementation Highlights

**Server Actions Pattern:**
- All mutations use Next.js Server Actions
- Automatic revalidation with `revalidatePath()`
- Type-safe with Zod validation
- Ownership verification on all updates/deletes

**Type Safety:**
- End-to-end TypeScript from database to UI
- Drizzle ORM for type-safe queries
- Zod schemas for runtime validation
- Inferred types from database schema

**Performance:**
- Optimized SQL queries with proper indexes
- LEFT JOIN for fetching related data
- Prevents N+1 queries
- Uses semantic colors (no raw Tailwind colors)

**Security:**
- User data isolation (filter by userId on all queries)
- Ownership verification before mutations
- SQL injection prevention (Drizzle ORM parameterization)
- Authentication required for all CRM routes

### CRM Documentation

- **Implementation Guide**: `docs/IMPLEMENTATION_PHASES.md`
- **Database Schema**: `docs/DATABASE_SCHEMA.md`
- **Testing Checklist**: `docs/TESTING.md`

---

## 🔧 Advanced Configuration

### Database Schema Changes
Expand Down
105 changes: 105 additions & 0 deletions SESSION.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
# Session State

**Current Phase**: All phases complete! 🎉
**Current Stage**: Production Ready
**Last Checkpoint**: 44607b1 (2025-11-08)
**Planning Docs**: `docs/IMPLEMENTATION_PHASES.md`, `docs/DATABASE_SCHEMA.md`

---

## Phase 1: Project Setup ✅
**Completed**: 2025-11-08 | **Checkpoint**: 20bf287
**Summary**: Cloned project, configured new D1 database (a1d231c7-b7e7-4e7a-aa0e-78a56c2e123a), updated wrangler.jsonc and drizzle.config.ts, applied initial migrations, verified dev environment works.

## Phase 2: Database Schema ✅
**Completed**: 2025-11-08
**Summary**: Created Drizzle schemas for contacts (with tags junction table) and deals. Generated and applied migration 0001_fantastic_captain_flint.sql. Verified all 4 tables created in D1 (contacts, contact_tags, contacts_to_tags, deals) with proper foreign keys, defaults, and data types.

**Key Files Created**:
- `src/modules/contacts/schemas/contact.schema.ts` (contacts, contactTags, contactsToTags tables + Zod schemas)
- `src/modules/deals/models/deal.enum.ts` (DealStage enum)
- `src/modules/deals/schemas/deal.schema.ts` (deals table + Zod schemas)
- `src/db/schema.ts` (updated exports)
- `src/drizzle/0001_fantastic_captain_flint.sql` (migration)

## Phase 3: Contacts Module ✅
**Completed**: 2025-11-08 | **Checkpoint**: b34adb7
**Summary**: Implemented complete contacts CRUD with search, tags, and ownership verification. Built 5 server actions (create, get, update, delete, tag management), 3 UI components (form, card, delete dialog), and 3 pages (list, new, edit). Added Contacts navigation link. Build successful with no errors.

**Key Features**:
- Search by name/email/company (LIKE queries, case-insensitive)
- Tag system with many-to-many relationship
- Ownership verification on update/delete
- Form validation (at least one name, email format)
- Responsive grid layout

## Phase 4: Deals Module ✅
**Completed**: 2025-11-08 | **Checkpoint**: a0bc3e3
**Summary**: Implemented complete deals/pipeline management with Kanban board. Built 4 server actions (create, get with JOIN, update, delete), 3 UI components (form with contact dropdown, card with currency formatting, delete dialog), and 3 pages (pipeline board, new, edit). Added Deals navigation link. Build successful with no errors.

**Key Features**:
- Pipeline Kanban board with 6 stage columns (responsive grid)
- Link deals to contacts via dropdown (optional)
- Currency formatting (AUD/USD/EUR/GBP with Intl.NumberFormat)
- Expected close date (HTML date input)
- Pipeline value calculation (excludes closed deals)
- Stage-specific color badges
- Ownership verification

## Phase 5: Dashboard Integration ✅
**Completed**: 2025-11-08 | **Checkpoint**: 3950032
**Summary**: Transformed dashboard from TodoApp to CRM-centric command center with live metrics and quick actions. Created metrics action with 6 SQL queries, 2 reusable components (StatCard, QuickActionCard), redesigned dashboard page, and updated navigation title.

**Key Features**:
- 6 CRM metrics: total contacts, new contacts this month, active deals, pipeline value, deals won this month, win rate
- Responsive 3-column grid (1/2/3 columns on mobile/tablet/desktop)
- Quick action cards: New Contact, New Deal, View Pipeline
- Currency formatting (AUD) and percentage formatting
- Semantic color usage throughout (no raw Tailwind colors)
- Graceful error handling (returns zero values on failure)

**Key Files Created**:
- `src/modules/dashboard/actions/get-dashboard-metrics.action.ts` (6 SQL queries with Drizzle ORM)
- `src/modules/dashboard/components/stat-card.tsx` (reusable metric card with icon/value/trend)
- `src/modules/dashboard/components/quick-action-card.tsx` (action link card with hover effects)

**Key Files Modified**:
- `src/modules/dashboard/dashboard.page.tsx` (complete redesign for CRM)
- `src/components/navigation.tsx` (changed title from "TodoApp" to "CRM")

## Phase 6: Testing & Documentation ✅
**Completed**: 2025-11-08 | **Checkpoint**: df75e37
**Summary**: Created comprehensive testing and documentation suite. Added seed script with realistic data (10 contacts, 5 tags, 5 deals), complete testing checklist (TESTING.md), verified DATABASE_SCHEMA.md accuracy, and updated README.md with CRM features section.

**Key Deliverables**:
- Seed script: `src/lib/seed.ts` with 10 contacts, 5 tags, 5 deals across all pipeline stages
- Testing guide: `docs/TESTING.md` with 60+ manual test cases covering all features
- Database docs: `docs/DATABASE_SCHEMA.md` verified and accurate
- README update: Added comprehensive CRM features section with module structure
- Package.json: Added `db:seed` script command
- Build: ✅ Successful, all pages compile

**Testing Coverage**:
- Contacts: Create, search, edit, delete, tags (10 test cases)
- Deals: Create, pipeline board, edit, delete, currency/dates (8 test cases)
- Dashboard: Metrics accuracy, quick actions (6 test cases)
- Security: Auth, ownership, data isolation (3 test cases)
- UI/UX: Forms, responsive, console errors (5 test cases)
- Edge cases: Data integrity, formatting, empty states (8 test cases)

**Documentation Complete**:
- Implementation phases guide
- Database schema with ERD and query patterns
- Testing checklist with manual test procedures
- README with CRM features overview and module structure

---

## Post-Launch Bug Fixes

### Bug Fix: Radix UI Select Empty Value (2025-11-08)
**Issue**: Deal form crashed when opening contact dropdown due to empty string value in SelectItem
**Root Cause**: Radix UI Select doesn't support empty string values
**Fix**: Replaced `value=""` with sentinel value `"__none__"` and updated onChange logic
**File**: `src/modules/deals/components/deal-form.tsx` (lines 133, 136, 144)
**Status**: ✅ Fixed and tested
Loading