ddtracker/prompt.md

Due Diligence Tracking System
I need you to build a due diligence tracking system based on the attached PRD and mockup. This is a web application for tracking corporate evaluation progress across multiple dimensions.

Project Overview
Build a React/TypeScript application with:

Dashboard showing dimensions (Strategy, Sales, Product, Engineering, etc.) with progress tracking
Expandable cards revealing KPIs and their associated checks
SQLite database for data persistence
Local file storage for document references
Clean, professional UI matching the attached mockup
Technical Requirements
Stack:

Frontend: React 18+ with TypeScript
Styling: Tailwind CSS
Database: SQLite (use sql.js for browser or better-sqlite3 for Node)
Build: Vite
Backend: Express.js (minimal API)
Key Features to Implement:

Dashboard Layout
Dimension cards with icon, name, KPI count, and progress bars
Expandable sections showing KPI details
Progress calculated as (completed checks / total checks) × 100%
Responsive design with print support
Data Model
Dimensions → KPIs → Checks (strict hierarchy)
Check structure: question, current_value, expected_value, reference, comment, is_completed
Check types: text, dropdown, number, percentage
File uploads up to 100MB
Core Functionality
CRUD operations for checks
Mark checks as complete/incomplete
File upload with drag-and-drop
Export data to JSON/CSV
Progress tracking per dimension/KPI
Implementation Steps
Project Setup
bash
# Create the project structure
due-diligence-tracker/
├── client/          # React frontend
├── server/          # Express backend
└── shared/          # Shared types
Database Schema
Create SQLite database with tables: dimensions, kpis, checks, files, check_types
Seed with initial data (Strategy, Sales, Product, etc.)
Set up migrations
Frontend Components
components/
├── Dashboard/
│   ├── DimensionCard.tsx
│   ├── ProgressBar.tsx
│   └── KPIExpanded.tsx
├── Checks/
│   ├── CheckForm.tsx
│   ├── CheckList.tsx
│   └── CheckItem.tsx
└── Common/
    ├── FileUpload.tsx
    └── DynamicInput.tsx
API Endpoints
GET    /api/dimensions          # With nested KPIs and check counts
GET    /api/kpis/:id/checks    # All checks for a KPI
POST   /api/checks             # Create check
PUT    /api/checks/:id         # Update check
POST   /api/files/upload       # Handle file uploads
GET    /api/export/:format     # Export data
UI/UX Requirements
Match the gray theme from mockup with customizable accent colors
Smooth expand/collapse animations
Loading states and error handling
Keyboard navigation support
Specific Implementation Details
Check Type System:

typescript
interface CheckType {
  type: 'text' | 'dropdown' | 'number' | 'percentage';
  options?: string[];  // For dropdowns
  validation?: {
    min?: number;
    max?: number;
    required?: boolean;
  };
}

// Dynamic rendering based on check type
const DynamicInput = ({ checkType, value, onChange }) => {
  switch(checkType.type) {
    case 'dropdown': return <Select options={checkType.options} ... />
    case 'percentage': return <PercentageInput ... />
    // etc.
  }
}
Progress Calculation:

typescript
// For each dimension
const calculateProgress = (checks: Check[]) => {
  const completed = checks.filter(c => c.is_completed).length;
  return (completed / checks.length) * 100;
}
File Handling:

Store files in server/uploads/ with UUID filenames
Save metadata in database
Support drag-and-drop and click-to-upload
Show file preview for common types
Initial Data Structure
Please use this seed data for dimensions:

javascript
const seedData = {
  dimensions: [
    { name: 'Strategy', icon: 'Briefcase', color: '#4F46E5' },
    { name: 'Sales', icon: 'TrendingUp', color: '#10B981' },
    { name: 'Product', icon: 'Target', color: '#3B82F6' },
    { name: 'Organization', icon: 'Building', color: '#8B5CF6' },
    { name: 'Engineering', icon: 'Code', color: '#F59E0B' },
    { name: 'DevOps', icon: 'Shield', color: '#EF4444' },
    { name: 'Cyber', icon: 'Shield', color: '#6B7280' },
    { name: 'Finance', icon: 'DollarSign', color: '#059669' },
    { name: 'People', icon: 'Users', color: '#DC2626' },
    { name: 'Culture', icon: 'Heart', color: '#7C3AED' }
  ]
};
Code Quality Requirements
TypeScript: Strict mode, proper interfaces for all data structures
Error Handling: Try-catch blocks, user-friendly error messages
Performance: Lazy loading for checks, debounced search
Accessibility: ARIA labels, keyboard navigation
Testing: Basic unit tests for critical functions
Styling Guidelines
Use Tailwind classes matching the mockup:

Cards: bg-white rounded-xl border-2 border-gray-300 p-6 shadow-sm
Buttons: hover:bg-gray-100 transition-colors
Progress bars: Custom component with dynamic color based on dimension
Icons: Use lucide-react icons as shown in mockup
Development Priorities
Phase 1: Get the dashboard working with static data
Phase 2: Add database and CRUD operations
Phase 3: Implement file uploads and references
Phase 4: Add export functionality
Phase 5: Polish UI and add validation
Important Notes
Keep the UI clean and professional - avoid over-designing
The mockup's expand/collapse functionality is critical
Progress bars should update in real-time as checks are completed
Make it easy to add new dimensions/KPIs/checks in the future
File storage is local - no cloud integration needed
Focus on desktop experience first, then make responsive
Example Usage Flow
User sees dashboard with all dimensions
Clicks on "Engineering" dimension to expand
Sees list of KPIs with their checks
Clicks on a check to edit
Updates current value from "Traditional" to "Agile"
Uploads a PDF reference document
Marks check as complete
Progress bar updates automatically
Please start by setting up the project structure and creating the dashboard with expandable dimension cards. Let me know if you need clarification on any requirements!