Initial commit: Due Diligence Tracker project
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Alexander Domene
164
prompt.md
Normal file
164
prompt.md
Normal file
@@ -0,0 +1,164 @@
|
||||
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!
|
||||
Reference in New Issue
Block a user