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!