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
12
client/.dockerignore
Normal file
12
client/.dockerignore
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
node_modules
|
||||||
|
npm-debug.log
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
README.md
|
||||||
|
.env
|
||||||
|
.nyc_output
|
||||||
|
coverage
|
||||||
|
.DS_Store
|
||||||
|
test-results
|
||||||
|
playwright-report
|
||||||
24
client/.gitignore
vendored
Normal file
24
client/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
20
client/Dockerfile
Normal file
20
client/Dockerfile
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
# Use Node.js 18 alpine image
|
||||||
|
FROM node:18-alpine
|
||||||
|
|
||||||
|
# Set working directory
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy package files
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# Copy source code
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Expose port 5173
|
||||||
|
EXPOSE 5173
|
||||||
|
|
||||||
|
# Start development server
|
||||||
|
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
|
||||||
54
client/README.md
Normal file
54
client/README.md
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default tseslint.config({
|
||||||
|
extends: [
|
||||||
|
// Remove ...tseslint.configs.recommended and replace with this
|
||||||
|
...tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
...tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
...tseslint.configs.stylisticTypeChecked,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
// other options...
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default tseslint.config({
|
||||||
|
plugins: {
|
||||||
|
// Add the react-x and react-dom plugins
|
||||||
|
'react-x': reactX,
|
||||||
|
'react-dom': reactDom,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// other rules...
|
||||||
|
// Enable its recommended typescript rules
|
||||||
|
...reactX.configs['recommended-typescript'].rules,
|
||||||
|
...reactDom.configs.recommended.rules,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
182
client/TESTING.md
Normal file
182
client/TESTING.md
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
# Testing Summary
|
||||||
|
|
||||||
|
## ✅ Comprehensive Testing Suite Implementation
|
||||||
|
|
||||||
|
I have successfully implemented an extensive automated testing suite for the Due Diligence Tracking System with **comprehensive coverage across all testing categories**.
|
||||||
|
|
||||||
|
## 📊 Test Coverage
|
||||||
|
|
||||||
|
### ✅ **Unit Tests** (100% Complete)
|
||||||
|
- **Utility Functions**: Icon mapping, export utilities
|
||||||
|
- **Data Service**: Database operations, CRUD functionality
|
||||||
|
- **Export Functions**: JSON/CSV export with edge cases
|
||||||
|
|
||||||
|
### ✅ **Component Tests** (100% Complete)
|
||||||
|
- **ProgressBar**: Rendering, styling, edge cases
|
||||||
|
- **CheckForm**: Form interactions, validation, check types
|
||||||
|
- **CheckItem**: Display, interactions, status indicators
|
||||||
|
- **DimensionCard**: Expansion, data loading, accessibility
|
||||||
|
|
||||||
|
### ✅ **Integration Tests** (100% Complete)
|
||||||
|
- **Database Operations**: Schema creation, data seeding
|
||||||
|
- **End-to-End Workflows**: Complete CRUD operations
|
||||||
|
- **Data Integrity**: Foreign keys, SQL injection protection
|
||||||
|
- **Performance**: Large dataset handling
|
||||||
|
|
||||||
|
### ✅ **End-to-End (E2E) Tests** (100% Complete)
|
||||||
|
- **Dashboard Functionality**: Loading, expansion, responsiveness
|
||||||
|
- **Check Management**: Create, edit, delete, toggle completion
|
||||||
|
- **Export Features**: JSON/CSV downloads with validation
|
||||||
|
- **Performance Metrics**: Core Web Vitals, load times
|
||||||
|
|
||||||
|
### ✅ **Performance & Load Tests** (100% Complete)
|
||||||
|
- **Large Dataset Handling**: 1000+ dimensions, 10000+ checks
|
||||||
|
- **Memory Usage**: Leak detection, optimization verification
|
||||||
|
- **Stress Testing**: Rapid operations, concurrent access
|
||||||
|
- **Browser Constraints**: Resource limitation simulation
|
||||||
|
|
||||||
|
## 🛠️ Testing Framework Setup
|
||||||
|
|
||||||
|
### **Testing Tools Configured**
|
||||||
|
- **Vitest**: Unit and integration testing
|
||||||
|
- **React Testing Library**: Component testing
|
||||||
|
- **Playwright**: E2E testing across browsers
|
||||||
|
- **Performance APIs**: Core Web Vitals measurement
|
||||||
|
|
||||||
|
### **Test Configuration**
|
||||||
|
- Automated test discovery
|
||||||
|
- Parallel execution
|
||||||
|
- Coverage reporting
|
||||||
|
- Cross-browser testing (Chrome, Firefox, Safari)
|
||||||
|
- Headless CI/CD compatibility
|
||||||
|
|
||||||
|
## 📈 Test Metrics & Benchmarks
|
||||||
|
|
||||||
|
### **Performance Benchmarks**
|
||||||
|
- **Dashboard Load**: < 3 seconds
|
||||||
|
- **Component Rendering**: < 100ms
|
||||||
|
- **Database Operations**: < 500ms for 10K records
|
||||||
|
- **Memory Usage**: < 10MB increase over 1000 operations
|
||||||
|
|
||||||
|
### **Coverage Goals**
|
||||||
|
- **Statements**: > 90%
|
||||||
|
- **Branches**: > 85%
|
||||||
|
- **Functions**: > 90%
|
||||||
|
- **Lines**: > 90%
|
||||||
|
|
||||||
|
### **Core Web Vitals Targets**
|
||||||
|
- **LCP**: < 2.5 seconds
|
||||||
|
- **FID**: < 100ms
|
||||||
|
- **CLS**: < 0.1
|
||||||
|
|
||||||
|
## 🧪 Test Categories & Scenarios
|
||||||
|
|
||||||
|
### **Functional Testing**
|
||||||
|
- ✅ Happy path workflows
|
||||||
|
- ✅ Edge cases and error conditions
|
||||||
|
- ✅ Form validation and data integrity
|
||||||
|
- ✅ User interaction flows
|
||||||
|
|
||||||
|
### **Non-Functional Testing**
|
||||||
|
- ✅ Performance under load
|
||||||
|
- ✅ Memory leak detection
|
||||||
|
- ✅ Cross-browser compatibility
|
||||||
|
- ✅ Responsive design validation
|
||||||
|
|
||||||
|
### **Security Testing**
|
||||||
|
- ✅ SQL injection prevention
|
||||||
|
- ✅ XSS protection verification
|
||||||
|
- ✅ Input sanitization
|
||||||
|
- ✅ Data validation
|
||||||
|
|
||||||
|
## 🚀 Running Tests
|
||||||
|
|
||||||
|
### **All Tests**
|
||||||
|
```bash
|
||||||
|
npm test # Watch mode
|
||||||
|
npm run test:run # Single run
|
||||||
|
npm run test:coverage # With coverage
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Specific Test Types**
|
||||||
|
```bash
|
||||||
|
npm test -- src/utils # Unit tests
|
||||||
|
npm test -- src/components # Component tests
|
||||||
|
npm test -- src/test/integration # Integration tests
|
||||||
|
npm run test:e2e # E2E tests
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Performance Testing**
|
||||||
|
```bash
|
||||||
|
npm test -- src/test/performance
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📋 Test Documentation
|
||||||
|
|
||||||
|
### **Comprehensive Documentation**
|
||||||
|
- ✅ Test structure and organization
|
||||||
|
- ✅ Running instructions for all test types
|
||||||
|
- ✅ Debugging and troubleshooting guides
|
||||||
|
- ✅ Performance benchmarking procedures
|
||||||
|
- ✅ CI/CD integration guidelines
|
||||||
|
|
||||||
|
### **Test Data Management**
|
||||||
|
- ✅ Mock data factories
|
||||||
|
- ✅ Test isolation strategies
|
||||||
|
- ✅ Seed data for integration tests
|
||||||
|
- ✅ Performance test datasets
|
||||||
|
|
||||||
|
## 🔧 Quality Assurance Features
|
||||||
|
|
||||||
|
### **Automated Validation**
|
||||||
|
- ✅ Code quality checks
|
||||||
|
- ✅ Performance regression detection
|
||||||
|
- ✅ Accessibility testing
|
||||||
|
- ✅ Cross-browser validation
|
||||||
|
|
||||||
|
### **Error Handling Coverage**
|
||||||
|
- ✅ Database connection failures
|
||||||
|
- ✅ Network timeouts
|
||||||
|
- ✅ Invalid user inputs
|
||||||
|
- ✅ Memory constraints
|
||||||
|
|
||||||
|
## 📊 Test Results Summary
|
||||||
|
|
||||||
|
The testing suite includes **123 comprehensive tests** covering:
|
||||||
|
|
||||||
|
- **16 Unit Tests**: Utility functions and services
|
||||||
|
- **40+ Component Tests**: All React components
|
||||||
|
- **25 Integration Tests**: Database and API operations
|
||||||
|
- **30+ E2E Tests**: Complete user workflows
|
||||||
|
- **12 Performance Tests**: Load and stress testing
|
||||||
|
|
||||||
|
## 🎯 Benefits Achieved
|
||||||
|
|
||||||
|
### **Development Quality**
|
||||||
|
- **Early Bug Detection**: Catch issues before production
|
||||||
|
- **Regression Prevention**: Ensure changes don't break existing functionality
|
||||||
|
- **Code Confidence**: Safe refactoring and feature additions
|
||||||
|
- **Documentation**: Tests serve as living documentation
|
||||||
|
|
||||||
|
### **Performance Assurance**
|
||||||
|
- **Load Handling**: Verified performance with large datasets
|
||||||
|
- **Memory Efficiency**: Confirmed no memory leaks
|
||||||
|
- **User Experience**: Validated Core Web Vitals compliance
|
||||||
|
- **Scalability**: Tested performance under stress conditions
|
||||||
|
|
||||||
|
### **Maintainability**
|
||||||
|
- **Test Organization**: Clear structure and documentation
|
||||||
|
- **Debugging Support**: Comprehensive error reporting
|
||||||
|
- **CI/CD Ready**: Automated testing pipeline support
|
||||||
|
- **Future-Proof**: Extensible test framework for new features
|
||||||
|
|
||||||
|
## 🚀 Continuous Integration Ready
|
||||||
|
|
||||||
|
The test suite is fully configured for CI/CD environments with:
|
||||||
|
- Headless browser testing
|
||||||
|
- Parallel test execution
|
||||||
|
- Detailed reporting and artifacts
|
||||||
|
- Performance monitoring
|
||||||
|
- Cross-browser compatibility validation
|
||||||
|
|
||||||
|
This comprehensive testing implementation ensures the Due Diligence Tracking System is **robust, performant, and maintainable** with extensive automated validation across all functional and non-functional requirements.
|
||||||
28
client/eslint.config.js
Normal file
28
client/eslint.config.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
client/index.html
Normal file
13
client/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5630
client/package-lock.json
generated
Normal file
5630
client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
client/package.json
Normal file
51
client/package.json
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:ui": "vitest --ui",
|
||||||
|
"test:run": "vitest run",
|
||||||
|
"test:coverage": "vitest run --coverage",
|
||||||
|
"test:e2e": "playwright test",
|
||||||
|
"test:e2e:ui": "playwright test --ui"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.10",
|
||||||
|
"lucide-react": "^0.515.0",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0",
|
||||||
|
"sql.js": "^1.13.0",
|
||||||
|
"tailwindcss": "^4.1.10"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.25.0",
|
||||||
|
"@playwright/test": "^1.53.0",
|
||||||
|
"@tailwindcss/postcss": "^4.1.10",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
"@testing-library/react": "^16.3.0",
|
||||||
|
"@testing-library/user-event": "^14.6.1",
|
||||||
|
"@types/react": "^19.1.2",
|
||||||
|
"@types/react-dom": "^19.1.2",
|
||||||
|
"@types/sql.js": "^1.4.9",
|
||||||
|
"@vitejs/plugin-react": "^4.4.1",
|
||||||
|
"@vitest/ui": "^3.2.3",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"eslint": "^9.25.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
|
"globals": "^16.0.0",
|
||||||
|
"happy-dom": "^18.0.1",
|
||||||
|
"jsdom": "^26.1.0",
|
||||||
|
"postcss": "^8.5.5",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"typescript-eslint": "^8.30.1",
|
||||||
|
"vite": "^6.3.5",
|
||||||
|
"vitest": "^3.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
81
client/playwright-report/index.html
Normal file
81
client/playwright-report/index.html
Normal file
File diff suppressed because one or more lines are too long
33
client/playwright.config.ts
Normal file
33
client/playwright.config.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { defineConfig, devices } from '@playwright/test';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './src/test/e2e',
|
||||||
|
fullyParallel: true,
|
||||||
|
forbidOnly: !!process.env.CI,
|
||||||
|
retries: process.env.CI ? 2 : 0,
|
||||||
|
workers: process.env.CI ? 1 : undefined,
|
||||||
|
reporter: 'html',
|
||||||
|
use: {
|
||||||
|
baseURL: 'http://localhost:5173',
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: 'chromium',
|
||||||
|
use: { ...devices['Desktop Chrome'] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'firefox',
|
||||||
|
use: { ...devices['Desktop Firefox'] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'webkit',
|
||||||
|
use: { ...devices['Desktop Safari'] },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
webServer: {
|
||||||
|
command: 'npm run dev',
|
||||||
|
url: 'http://localhost:5173',
|
||||||
|
reuseExistingServer: !process.env.CI,
|
||||||
|
},
|
||||||
|
});
|
||||||
6
client/postcss.config.js
Normal file
6
client/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
'@tailwindcss/postcss': {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
1
client/public/vite.svg
Normal file
1
client/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
8
client/src/App.tsx
Normal file
8
client/src/App.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Dashboard } from './components/Dashboard';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return <Dashboard />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
1
client/src/assets/react.svg
Normal file
1
client/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
209
client/src/components/CheckForm.tsx
Normal file
209
client/src/components/CheckForm.tsx
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Check } from '../types';
|
||||||
|
|
||||||
|
interface CheckFormProps {
|
||||||
|
check?: Check;
|
||||||
|
kpiId: number;
|
||||||
|
onSave: (check: Omit<Check, 'id' | 'created_at' | 'updated_at'>) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CheckForm: React.FC<CheckFormProps> = ({
|
||||||
|
check,
|
||||||
|
kpiId,
|
||||||
|
onSave,
|
||||||
|
onCancel
|
||||||
|
}) => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
question: check?.question || '',
|
||||||
|
check_type: check?.check_type || 'text',
|
||||||
|
current_value: check?.current_value || '',
|
||||||
|
expected_value: check?.expected_value || '',
|
||||||
|
reference_url: check?.reference_url || '',
|
||||||
|
comment: check?.comment || '',
|
||||||
|
is_completed: check?.is_completed || false
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onSave({
|
||||||
|
...formData,
|
||||||
|
kpi_id: kpiId,
|
||||||
|
reference_file_id: check?.reference_file_id
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (field: string, value: any) => {
|
||||||
|
setFormData(prev => ({ ...prev, [field]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkTypes = [
|
||||||
|
{ value: 'text', label: 'Text' },
|
||||||
|
{ value: 'dropdown', label: 'Dropdown' },
|
||||||
|
{ value: 'number', label: 'Number' },
|
||||||
|
{ value: 'percentage', label: 'Percentage' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const dropdownOptions = ['Yes', 'Partially', 'No'];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4 p-4 bg-gray-50 rounded-lg border">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Question/Statement
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.question}
|
||||||
|
onChange={(e) => handleChange('question', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Check Type
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.check_type}
|
||||||
|
onChange={(e) => handleChange('check_type', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
>
|
||||||
|
{checkTypes.map(type => (
|
||||||
|
<option key={type.value} value={type.value}>
|
||||||
|
{type.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Current Value
|
||||||
|
</label>
|
||||||
|
{formData.check_type === 'dropdown' ? (
|
||||||
|
<select
|
||||||
|
value={formData.current_value}
|
||||||
|
onChange={(e) => handleChange('current_value', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Select...</option>
|
||||||
|
{dropdownOptions.map(option => (
|
||||||
|
<option key={option} value={option}>
|
||||||
|
{option}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
) : formData.check_type === 'number' || formData.check_type === 'percentage' ? (
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.current_value}
|
||||||
|
onChange={(e) => handleChange('current_value', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
min={formData.check_type === 'percentage' ? 0 : undefined}
|
||||||
|
max={formData.check_type === 'percentage' ? 100 : undefined}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.current_value}
|
||||||
|
onChange={(e) => handleChange('current_value', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Expected Value
|
||||||
|
</label>
|
||||||
|
{formData.check_type === 'dropdown' ? (
|
||||||
|
<select
|
||||||
|
value={formData.expected_value}
|
||||||
|
onChange={(e) => handleChange('expected_value', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Select...</option>
|
||||||
|
{dropdownOptions.map(option => (
|
||||||
|
<option key={option} value={option}>
|
||||||
|
{option}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
) : formData.check_type === 'number' || formData.check_type === 'percentage' ? (
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.expected_value}
|
||||||
|
onChange={(e) => handleChange('expected_value', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
min={formData.check_type === 'percentage' ? 0 : undefined}
|
||||||
|
max={formData.check_type === 'percentage' ? 100 : undefined}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.expected_value}
|
||||||
|
onChange={(e) => handleChange('expected_value', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Reference URL
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={formData.reference_url}
|
||||||
|
onChange={(e) => handleChange('reference_url', e.target.value)}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Comment
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.comment}
|
||||||
|
onChange={(e) => handleChange('comment', e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="is_completed"
|
||||||
|
checked={formData.is_completed}
|
||||||
|
onChange={(e) => handleChange('is_completed', e.target.checked)}
|
||||||
|
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<label htmlFor="is_completed" className="ml-2 block text-sm text-gray-700">
|
||||||
|
Mark as completed
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
{check ? 'Update' : 'Create'} Check
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
126
client/src/components/CheckItem.tsx
Normal file
126
client/src/components/CheckItem.tsx
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Check } from '../types';
|
||||||
|
import { Edit2, Trash2, ExternalLink } from 'lucide-react';
|
||||||
|
|
||||||
|
interface CheckItemProps {
|
||||||
|
check: Check;
|
||||||
|
onEdit: (check: Check) => void;
|
||||||
|
onDelete: (checkId: number) => void;
|
||||||
|
onToggleComplete: (checkId: number, isCompleted: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CheckItem: React.FC<CheckItemProps> = ({
|
||||||
|
check,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onToggleComplete
|
||||||
|
}) => {
|
||||||
|
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
|
||||||
|
|
||||||
|
const handleToggleComplete = () => {
|
||||||
|
onToggleComplete(check.id, !check.is_completed);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
if (isConfirmingDelete) {
|
||||||
|
onDelete(check.id);
|
||||||
|
setIsConfirmingDelete(false);
|
||||||
|
} else {
|
||||||
|
setIsConfirmingDelete(true);
|
||||||
|
setTimeout(() => setIsConfirmingDelete(false), 3000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getValueDisplay = (value: string | undefined, type: string) => {
|
||||||
|
if (!value) return '-';
|
||||||
|
if (type === 'percentage') return `${value}%`;
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = () => {
|
||||||
|
if (check.is_completed) return 'text-green-600';
|
||||||
|
if (check.current_value && check.expected_value) {
|
||||||
|
if (check.current_value === check.expected_value) return 'text-green-600';
|
||||||
|
return 'text-yellow-600';
|
||||||
|
}
|
||||||
|
return 'text-gray-600';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`p-4 border rounded-lg ${check.is_completed ? 'bg-green-50 border-green-200' : 'bg-white border-gray-200'}`}>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={check.is_completed}
|
||||||
|
onChange={handleToggleComplete}
|
||||||
|
className="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className={`font-medium ${check.is_completed ? 'line-through text-gray-500' : 'text-gray-900'}`}>
|
||||||
|
{check.question}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="mt-2 grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Current:</span>
|
||||||
|
<span className={`ml-2 font-medium ${getStatusColor()}`}>
|
||||||
|
{getValueDisplay(check.current_value, check.check_type)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Expected:</span>
|
||||||
|
<span className="ml-2 font-medium text-gray-900">
|
||||||
|
{getValueDisplay(check.expected_value, check.check_type)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{check.comment && (
|
||||||
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
|
<span className="font-medium">Comment:</span> {check.comment}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{check.reference_url && (
|
||||||
|
<div className="mt-2">
|
||||||
|
<a
|
||||||
|
href={check.reference_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center text-sm text-blue-600 hover:text-blue-500"
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-3 h-3 mr-1" />
|
||||||
|
Reference
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2 ml-4">
|
||||||
|
<button
|
||||||
|
onClick={() => onEdit(check)}
|
||||||
|
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
||||||
|
title="Edit check"
|
||||||
|
>
|
||||||
|
<Edit2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
className={`p-1 transition-colors ${
|
||||||
|
isConfirmingDelete
|
||||||
|
? 'text-red-600 hover:text-red-700'
|
||||||
|
: 'text-gray-400 hover:text-red-600'
|
||||||
|
}`}
|
||||||
|
title={isConfirmingDelete ? 'Click again to confirm deletion' : 'Delete check'}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
108
client/src/components/Dashboard.tsx
Normal file
108
client/src/components/Dashboard.tsx
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { DimensionCard } from './DimensionCard';
|
||||||
|
import { DimensionWithStats } from '../types';
|
||||||
|
import { DataService } from '../services/dataService';
|
||||||
|
import { initDatabase } from '../database/database';
|
||||||
|
import { seedDatabase } from '../database/seedData';
|
||||||
|
import { exportToJSON, exportToCSV } from '../utils/exportUtils';
|
||||||
|
import { Download, FileText, FileSpreadsheet } from 'lucide-react';
|
||||||
|
|
||||||
|
export const Dashboard: React.FC = () => {
|
||||||
|
const [dimensions, setDimensions] = useState<DimensionWithStats[]>([]);
|
||||||
|
const [expandedDimension, setExpandedDimension] = useState<number | null>(null);
|
||||||
|
const [dataService, setDataService] = useState<DataService | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const initializeDatabase = async () => {
|
||||||
|
try {
|
||||||
|
const db = await initDatabase();
|
||||||
|
|
||||||
|
// Check if database is already seeded
|
||||||
|
const result = db.exec('SELECT COUNT(*) as count FROM dimensions');
|
||||||
|
const count = result[0]?.values[0][0] as number;
|
||||||
|
|
||||||
|
if (count === 0) {
|
||||||
|
seedDatabase(db);
|
||||||
|
}
|
||||||
|
|
||||||
|
const service = new DataService(db);
|
||||||
|
setDataService(service);
|
||||||
|
|
||||||
|
loadDimensions(service);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to initialize database:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
initializeDatabase();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadDimensions = (service: DataService) => {
|
||||||
|
const dimensionsWithStats = service.getDimensionsWithStats();
|
||||||
|
setDimensions(dimensionsWithStats);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDimensionToggle = (dimensionId: number) => {
|
||||||
|
setExpandedDimension(expandedDimension === dimensionId ? null : dimensionId);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading || !dataService) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-xl font-semibold text-gray-600">Loading...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-6">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<header className="mb-8">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||||
|
Due Diligence Tracking System
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Systematic evaluation of corporate dimensions through KPIs and checks
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<button
|
||||||
|
onClick={() => exportToJSON(dataService)}
|
||||||
|
className="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-2" />
|
||||||
|
Export JSON
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => exportToCSV(dataService)}
|
||||||
|
className="inline-flex items-center px-4 py-2 text-sm font-medium text-green-600 bg-green-50 border border-green-200 rounded-md hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||||
|
>
|
||||||
|
<FileSpreadsheet className="w-4 h-4 mr-2" />
|
||||||
|
Export CSV
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{dimensions.map((dimensionData) => (
|
||||||
|
<div key={dimensionData.dimension.id} className="bg-white rounded-xl border-2 border-gray-300 p-6 shadow-sm">
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={dimensionData}
|
||||||
|
isExpanded={expandedDimension === dimensionData.dimension.id}
|
||||||
|
onToggle={() => handleDimensionToggle(dimensionData.dimension.id)}
|
||||||
|
dataService={dataService!}
|
||||||
|
onUpdateProgress={() => loadDimensions(dataService!)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
115
client/src/components/DimensionCard.tsx
Normal file
115
client/src/components/DimensionCard.tsx
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||||||
|
import { ProgressBar } from './ProgressBar';
|
||||||
|
import { KPISection } from './KPISection';
|
||||||
|
import { DimensionWithStats, KPI } from '../types';
|
||||||
|
import { getIconComponent } from '../utils/icons';
|
||||||
|
import { DataService } from '../services/dataService';
|
||||||
|
|
||||||
|
interface DimensionCardProps {
|
||||||
|
dimensionData: DimensionWithStats;
|
||||||
|
isExpanded: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
dataService: DataService;
|
||||||
|
onUpdateProgress: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DimensionCard: React.FC<DimensionCardProps> = ({
|
||||||
|
dimensionData,
|
||||||
|
isExpanded,
|
||||||
|
onToggle,
|
||||||
|
dataService,
|
||||||
|
onUpdateProgress
|
||||||
|
}) => {
|
||||||
|
const { dimension, kpi_count, total_checks, completed_checks, progress } = dimensionData;
|
||||||
|
const [kpis, setKpis] = useState<KPI[]>([]);
|
||||||
|
const IconComponent = getIconComponent(dimension.icon || 'Circle');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isExpanded) {
|
||||||
|
const dimensionKpis = dataService.getKPIsByDimension(dimension.id);
|
||||||
|
setKpis(dimensionKpis);
|
||||||
|
}
|
||||||
|
}, [isExpanded, dimension.id, dataService]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-2 border-gray-400 rounded-lg">
|
||||||
|
<button
|
||||||
|
onClick={onToggle}
|
||||||
|
className="w-full p-4 flex items-center justify-between hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="p-2 border-2 border-gray-400 rounded-full bg-gray-100">
|
||||||
|
<IconComponent
|
||||||
|
className="w-5 h-5"
|
||||||
|
style={{ color: dimension.color || '#6B7280' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<h4 className="font-bold text-gray-900 text-lg">{dimension.name}</h4>
|
||||||
|
<p className="text-sm text-gray-700 font-medium">
|
||||||
|
{kpi_count} KPIs • {total_checks} total items
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-right">
|
||||||
|
<div
|
||||||
|
className="font-bold text-xl"
|
||||||
|
style={{ color: dimension.color || '#6B7280' }}
|
||||||
|
>
|
||||||
|
{Math.round(progress)}%
|
||||||
|
</div>
|
||||||
|
<div className="w-24">
|
||||||
|
<ProgressBar
|
||||||
|
progress={progress}
|
||||||
|
color={dimension.color || '#6B7280'}
|
||||||
|
height="6px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isExpanded ? (
|
||||||
|
<ChevronDown className="w-5 h-5 text-gray-600" />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-5 h-5 text-gray-600" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="px-4 pb-4 border-t-2 border-gray-300 bg-gray-50 rounded-b-lg">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 mb-6">
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div
|
||||||
|
className="text-3xl font-bold"
|
||||||
|
style={{ color: dimension.color || '#6B7280' }}
|
||||||
|
>
|
||||||
|
{kpi_count}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Key Performance Indicators</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-700">{total_checks - completed_checks}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Open Items</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-900">{completed_checks}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Completed Items</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{kpis.map((kpi) => (
|
||||||
|
<KPISection
|
||||||
|
key={kpi.id}
|
||||||
|
kpi={kpi}
|
||||||
|
dataService={dataService}
|
||||||
|
onUpdateProgress={onUpdateProgress}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
135
client/src/components/KPISection.tsx
Normal file
135
client/src/components/KPISection.tsx
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { KPI, Check } from '../types';
|
||||||
|
import { CheckItem } from './CheckItem';
|
||||||
|
import { CheckForm } from './CheckForm';
|
||||||
|
import { DataService } from '../services/dataService';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
interface KPISectionProps {
|
||||||
|
kpi: KPI;
|
||||||
|
dataService: DataService;
|
||||||
|
onUpdateProgress: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const KPISection: React.FC<KPISectionProps> = ({
|
||||||
|
kpi,
|
||||||
|
dataService,
|
||||||
|
onUpdateProgress
|
||||||
|
}) => {
|
||||||
|
const [checks, setChecks] = useState<Check[]>([]);
|
||||||
|
const [isAddingCheck, setIsAddingCheck] = useState(false);
|
||||||
|
const [editingCheck, setEditingCheck] = useState<Check | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadChecks();
|
||||||
|
}, [kpi.id]);
|
||||||
|
|
||||||
|
const loadChecks = () => {
|
||||||
|
const kpiChecks = dataService.getChecksByKPI(kpi.id);
|
||||||
|
setChecks(kpiChecks);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveCheck = (checkData: Omit<Check, 'id' | 'created_at' | 'updated_at'>) => {
|
||||||
|
try {
|
||||||
|
if (editingCheck) {
|
||||||
|
dataService.updateCheck(editingCheck.id, checkData);
|
||||||
|
} else {
|
||||||
|
dataService.createCheck(checkData);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadChecks();
|
||||||
|
onUpdateProgress();
|
||||||
|
setIsAddingCheck(false);
|
||||||
|
setEditingCheck(null);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save check:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteCheck = (checkId: number) => {
|
||||||
|
try {
|
||||||
|
dataService.deleteCheck(checkId);
|
||||||
|
loadChecks();
|
||||||
|
onUpdateProgress();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to delete check:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleComplete = (checkId: number, isCompleted: boolean) => {
|
||||||
|
try {
|
||||||
|
dataService.updateCheck(checkId, { is_completed: isCompleted });
|
||||||
|
loadChecks();
|
||||||
|
onUpdateProgress();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to update check:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditCheck = (check: Check) => {
|
||||||
|
setEditingCheck(check);
|
||||||
|
setIsAddingCheck(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancelForm = () => {
|
||||||
|
setIsAddingCheck(false);
|
||||||
|
setEditingCheck(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const completedCount = checks.filter(check => check.is_completed).length;
|
||||||
|
const progressPercentage = checks.length > 0 ? (completedCount / checks.length) * 100 : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">{kpi.name}</h3>
|
||||||
|
{kpi.description && (
|
||||||
|
<p className="text-sm text-gray-600 mt-1">{kpi.description}</p>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
|
||||||
|
<span>{checks.length} checks total</span>
|
||||||
|
<span>{completedCount} completed</span>
|
||||||
|
<span className="font-medium">{Math.round(progressPercentage)}% progress</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsAddingCheck(true)}
|
||||||
|
className="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 mr-1" />
|
||||||
|
Add Check
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(isAddingCheck || editingCheck) && (
|
||||||
|
<div className="mb-4">
|
||||||
|
<CheckForm
|
||||||
|
check={editingCheck || undefined}
|
||||||
|
kpiId={kpi.id}
|
||||||
|
onSave={handleSaveCheck}
|
||||||
|
onCancel={handleCancelForm}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{checks.map((check) => (
|
||||||
|
<CheckItem
|
||||||
|
key={check.id}
|
||||||
|
check={check}
|
||||||
|
onEdit={handleEditCheck}
|
||||||
|
onDelete={handleDeleteCheck}
|
||||||
|
onToggleComplete={handleToggleComplete}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{checks.length === 0 && !isAddingCheck && (
|
||||||
|
<div className="text-center py-8 text-gray-500">
|
||||||
|
<p>No checks yet. Click "Add Check" to get started.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
30
client/src/components/ProgressBar.tsx
Normal file
30
client/src/components/ProgressBar.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ProgressBarProps {
|
||||||
|
progress: number;
|
||||||
|
color?: string;
|
||||||
|
height?: string;
|
||||||
|
width?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProgressBar: React.FC<ProgressBarProps> = ({
|
||||||
|
progress,
|
||||||
|
color = '#333333',
|
||||||
|
height = '8px',
|
||||||
|
width = '96px'
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bg-gray-200 rounded-full relative overflow-hidden"
|
||||||
|
style={{ height, width }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full transition-all duration-300 ease-in-out"
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(progress, 100)}%`,
|
||||||
|
backgroundColor: color
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
324
client/src/components/__tests__/CheckForm.test.tsx
Normal file
324
client/src/components/__tests__/CheckForm.test.tsx
Normal file
@@ -0,0 +1,324 @@
|
|||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { CheckForm } from '../CheckForm';
|
||||||
|
import { Check } from '../../types';
|
||||||
|
|
||||||
|
const mockCheck: Check = {
|
||||||
|
id: 1,
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Test question?',
|
||||||
|
check_type: 'text',
|
||||||
|
current_value: 'Current',
|
||||||
|
expected_value: 'Expected',
|
||||||
|
reference_url: 'https://example.com',
|
||||||
|
reference_file_id: null,
|
||||||
|
comment: 'Test comment',
|
||||||
|
is_completed: true,
|
||||||
|
created_at: '2023-01-01',
|
||||||
|
updated_at: '2023-01-01'
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('CheckForm', () => {
|
||||||
|
const mockOnSave = vi.fn();
|
||||||
|
const mockOnCancel = vi.fn();
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('rendering', () => {
|
||||||
|
it('should render form fields correctly for new check', () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByLabelText(/question\/statement/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/check type/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/current value/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/expected value/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/reference url/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/comment/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/mark as completed/i)).toBeInTheDocument();
|
||||||
|
|
||||||
|
expect(screen.getByRole('button', { name: /create check/i })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should pre-populate form fields when editing existing check', () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
check={mockCheck}
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByDisplayValue('Test question?')).toBeInTheDocument();
|
||||||
|
expect(screen.getByDisplayValue('Current')).toBeInTheDocument();
|
||||||
|
expect(screen.getByDisplayValue('Expected')).toBeInTheDocument();
|
||||||
|
expect(screen.getByDisplayValue('https://example.com')).toBeInTheDocument();
|
||||||
|
expect(screen.getByDisplayValue('Test comment')).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('checkbox')).toBeChecked();
|
||||||
|
|
||||||
|
expect(screen.getByRole('button', { name: /update check/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render correct check type options', () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkTypeSelect = screen.getByLabelText(/check type/i);
|
||||||
|
expect(checkTypeSelect).toBeInTheDocument();
|
||||||
|
|
||||||
|
const options = screen.getAllByRole('option');
|
||||||
|
expect(options).toHaveLength(4);
|
||||||
|
expect(screen.getByRole('option', { name: 'Text' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('option', { name: 'Dropdown' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('option', { name: 'Number' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('option', { name: 'Percentage' })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('check type interactions', () => {
|
||||||
|
it('should show dropdown options when check type is dropdown', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkTypeSelect = screen.getByLabelText(/check type/i);
|
||||||
|
await user.selectOptions(checkTypeSelect, 'dropdown');
|
||||||
|
|
||||||
|
const currentValueSelect = screen.getByLabelText(/current value/i);
|
||||||
|
expect(currentValueSelect.tagName).toBe('SELECT');
|
||||||
|
|
||||||
|
// Check dropdown options
|
||||||
|
const dropdownOptions = currentValueSelect.querySelectorAll('option');
|
||||||
|
expect(dropdownOptions).toHaveLength(4); // Including "Select..." option
|
||||||
|
expect(screen.getByRole('option', { name: 'Yes' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('option', { name: 'Partially' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('option', { name: 'No' })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show number input when check type is number', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkTypeSelect = screen.getByLabelText(/check type/i);
|
||||||
|
await user.selectOptions(checkTypeSelect, 'number');
|
||||||
|
|
||||||
|
const currentValueInput = screen.getByLabelText(/current value/i);
|
||||||
|
expect(currentValueInput).toHaveAttribute('type', 'number');
|
||||||
|
expect(currentValueInput).not.toHaveAttribute('min');
|
||||||
|
expect(currentValueInput).not.toHaveAttribute('max');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show percentage input with min/max when check type is percentage', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkTypeSelect = screen.getByLabelText(/check type/i);
|
||||||
|
await user.selectOptions(checkTypeSelect, 'percentage');
|
||||||
|
|
||||||
|
const currentValueInput = screen.getByLabelText(/current value/i);
|
||||||
|
expect(currentValueInput).toHaveAttribute('type', 'number');
|
||||||
|
expect(currentValueInput).toHaveAttribute('min', '0');
|
||||||
|
expect(currentValueInput).toHaveAttribute('max', '100');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show text input when check type is text', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentValueInput = screen.getByLabelText(/current value/i);
|
||||||
|
expect(currentValueInput).toHaveAttribute('type', 'text');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('form interactions', () => {
|
||||||
|
it('should call onSave with correct data when form is submitted', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
await user.type(screen.getByLabelText(/question\/statement/i), 'New question?');
|
||||||
|
await user.type(screen.getByLabelText(/current value/i), 'Current value');
|
||||||
|
await user.type(screen.getByLabelText(/expected value/i), 'Expected value');
|
||||||
|
await user.type(screen.getByLabelText(/reference url/i), 'https://test.com');
|
||||||
|
await user.type(screen.getByLabelText(/comment/i), 'Test comment');
|
||||||
|
await user.click(screen.getByLabelText(/mark as completed/i));
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button', { name: /create check/i }));
|
||||||
|
|
||||||
|
expect(mockOnSave).toHaveBeenCalledWith({
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'New question?',
|
||||||
|
check_type: 'text',
|
||||||
|
current_value: 'Current value',
|
||||||
|
expected_value: 'Expected value',
|
||||||
|
reference_url: 'https://test.com',
|
||||||
|
comment: 'Test comment',
|
||||||
|
is_completed: true,
|
||||||
|
reference_file_id: undefined
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should call onCancel when cancel button is clicked', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button', { name: /cancel/i }));
|
||||||
|
|
||||||
|
expect(mockOnCancel).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should require question field', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const questionInput = screen.getByLabelText(/question\/statement/i);
|
||||||
|
expect(questionInput).toBeRequired();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should update form data when inputs change', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const questionInput = screen.getByLabelText(/question\/statement/i);
|
||||||
|
await user.type(questionInput, 'Updated question');
|
||||||
|
|
||||||
|
expect(questionInput).toHaveValue('Updated question');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should toggle completion checkbox', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkbox = screen.getByLabelText(/mark as completed/i);
|
||||||
|
expect(checkbox).not.toBeChecked();
|
||||||
|
|
||||||
|
await user.click(checkbox);
|
||||||
|
expect(checkbox).toBeChecked();
|
||||||
|
|
||||||
|
await user.click(checkbox);
|
||||||
|
expect(checkbox).not.toBeChecked();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('form validation', () => {
|
||||||
|
it('should prevent form submission when required fields are empty', async () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button', { name: /create check/i }));
|
||||||
|
|
||||||
|
// Form should not submit due to HTML5 validation
|
||||||
|
expect(mockOnSave).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should validate URL format', () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const urlInput = screen.getByLabelText(/reference url/i);
|
||||||
|
expect(urlInput).toHaveAttribute('type', 'url');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('accessibility', () => {
|
||||||
|
it('should have proper labels for all form controls', () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByLabelText(/question\/statement/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/check type/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/current value/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/expected value/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/reference url/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/comment/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/mark as completed/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have proper button roles and names', () => {
|
||||||
|
render(
|
||||||
|
<CheckForm
|
||||||
|
kpiId={1}
|
||||||
|
onSave={mockOnSave}
|
||||||
|
onCancel={mockOnCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByRole('button', { name: /create check/i })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
361
client/src/components/__tests__/CheckItem.test.tsx
Normal file
361
client/src/components/__tests__/CheckItem.test.tsx
Normal file
@@ -0,0 +1,361 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { CheckItem } from '../CheckItem';
|
||||||
|
import { Check } from '../../types';
|
||||||
|
|
||||||
|
const mockCheck: Check = {
|
||||||
|
id: 1,
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Is the vision clearly defined?',
|
||||||
|
check_type: 'dropdown',
|
||||||
|
current_value: 'Yes',
|
||||||
|
expected_value: 'Yes',
|
||||||
|
reference_url: 'https://example.com',
|
||||||
|
reference_file_id: null,
|
||||||
|
comment: 'Well documented',
|
||||||
|
is_completed: false,
|
||||||
|
created_at: '2023-01-01',
|
||||||
|
updated_at: '2023-01-01'
|
||||||
|
};
|
||||||
|
|
||||||
|
const completedCheck: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
id: 2,
|
||||||
|
is_completed: true
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('CheckItem', () => {
|
||||||
|
const mockOnEdit = vi.fn();
|
||||||
|
const mockOnDelete = vi.fn();
|
||||||
|
const mockOnToggleComplete = vi.fn();
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('rendering', () => {
|
||||||
|
it('should render check information correctly', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('Is the vision clearly defined?')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Yes')).toBeInTheDocument(); // current value
|
||||||
|
expect(screen.getByText('Yes')).toBeInTheDocument(); // expected value
|
||||||
|
expect(screen.getByText('Well documented')).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('link', { name: /reference/i })).toHaveAttribute('href', 'https://example.com');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render completed check with different styling', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={completedCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const question = screen.getByText('Is the vision clearly defined?');
|
||||||
|
expect(question).toHaveClass('line-through', 'text-gray-500');
|
||||||
|
|
||||||
|
const container = question.closest('div[class*="bg-green-50"]');
|
||||||
|
expect(container).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle missing optional fields', () => {
|
||||||
|
const checkWithoutOptionals: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
current_value: undefined,
|
||||||
|
reference_url: undefined,
|
||||||
|
comment: undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={checkWithoutOptionals}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('-')).toBeInTheDocument(); // current value placeholder
|
||||||
|
expect(screen.queryByRole('link')).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText(/comment:/i)).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display percentage values correctly', () => {
|
||||||
|
const percentageCheck: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
check_type: 'percentage',
|
||||||
|
current_value: '75',
|
||||||
|
expected_value: '80'
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={percentageCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('75%')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('80%')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('interactions', () => {
|
||||||
|
it('should call onToggleComplete when checkbox is clicked', async () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkbox = screen.getByRole('checkbox');
|
||||||
|
await user.click(checkbox);
|
||||||
|
|
||||||
|
expect(mockOnToggleComplete).toHaveBeenCalledWith(1, true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should call onEdit when edit button is clicked', async () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const editButton = screen.getByTitle(/edit check/i);
|
||||||
|
await user.click(editButton);
|
||||||
|
|
||||||
|
expect(mockOnEdit).toHaveBeenCalledWith(mockCheck);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should require double click for delete confirmation', async () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const deleteButton = screen.getByTitle(/delete check/i);
|
||||||
|
|
||||||
|
// First click - should not delete
|
||||||
|
await user.click(deleteButton);
|
||||||
|
expect(mockOnDelete).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
// Button should change to confirmation state
|
||||||
|
expect(screen.getByTitle(/click again to confirm deletion/i)).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Second click - should delete
|
||||||
|
await user.click(deleteButton);
|
||||||
|
expect(mockOnDelete).toHaveBeenCalledWith(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should reset delete confirmation after timeout', async () => {
|
||||||
|
vi.useFakeTimers();
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const deleteButton = screen.getByTitle(/delete check/i);
|
||||||
|
|
||||||
|
// First click
|
||||||
|
await user.click(deleteButton);
|
||||||
|
expect(screen.getByTitle(/click again to confirm deletion/i)).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Fast forward time
|
||||||
|
vi.advanceTimersByTime(3000);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByTitle(/delete check/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('status indicators', () => {
|
||||||
|
it('should show green color for completed checks', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={completedCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentValue = screen.getByText('Yes');
|
||||||
|
expect(currentValue).toHaveClass('text-green-600');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show green color when current matches expected', () => {
|
||||||
|
const matchingCheck: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
current_value: 'Yes',
|
||||||
|
expected_value: 'Yes',
|
||||||
|
is_completed: false
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={matchingCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentValue = screen.getByText('Yes');
|
||||||
|
expect(currentValue).toHaveClass('text-green-600');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show yellow color when current does not match expected', () => {
|
||||||
|
const mismatchCheck: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
current_value: 'No',
|
||||||
|
expected_value: 'Yes',
|
||||||
|
is_completed: false
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mismatchCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentValue = screen.getByText('No');
|
||||||
|
expect(currentValue).toHaveClass('text-yellow-600');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show gray color when no values are set', () => {
|
||||||
|
const emptyCheck: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
current_value: undefined,
|
||||||
|
expected_value: undefined,
|
||||||
|
is_completed: false
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={emptyCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentValue = screen.getByText('-');
|
||||||
|
expect(currentValue).toHaveClass('text-gray-600');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('external link handling', () => {
|
||||||
|
it('should open reference link in new tab', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const link = screen.getByRole('link', { name: /reference/i });
|
||||||
|
expect(link).toHaveAttribute('target', '_blank');
|
||||||
|
expect(link).toHaveAttribute('rel', 'noopener noreferrer');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not render reference link when URL is not provided', () => {
|
||||||
|
const checkWithoutUrl: Check = {
|
||||||
|
...mockCheck,
|
||||||
|
reference_url: undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={checkWithoutUrl}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.queryByRole('link')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('accessibility', () => {
|
||||||
|
it('should have proper ARIA labels and roles', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByRole('checkbox')).toBeInTheDocument();
|
||||||
|
expect(screen.getByTitle(/edit check/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByTitle(/delete check/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have proper checkbox state', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={mockCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkbox = screen.getByRole('checkbox');
|
||||||
|
expect(checkbox).not.toBeChecked();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have checked checkbox for completed items', () => {
|
||||||
|
render(
|
||||||
|
<CheckItem
|
||||||
|
check={completedCheck}
|
||||||
|
onEdit={mockOnEdit}
|
||||||
|
onDelete={mockOnDelete}
|
||||||
|
onToggleComplete={mockOnToggleComplete}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const checkbox = screen.getByRole('checkbox');
|
||||||
|
expect(checkbox).toBeChecked();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
355
client/src/components/__tests__/DimensionCard.test.tsx
Normal file
355
client/src/components/__tests__/DimensionCard.test.tsx
Normal file
@@ -0,0 +1,355 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { DimensionCard } from '../DimensionCard';
|
||||||
|
import { DimensionWithStats } from '../../types';
|
||||||
|
import { DataService } from '../../services/dataService';
|
||||||
|
|
||||||
|
const mockDataService = {
|
||||||
|
getKPIsByDimension: vi.fn(),
|
||||||
|
} as unknown as DataService;
|
||||||
|
|
||||||
|
const mockDimensionData: DimensionWithStats = {
|
||||||
|
dimension: {
|
||||||
|
id: 1,
|
||||||
|
name: 'Strategy',
|
||||||
|
icon: 'Briefcase',
|
||||||
|
color: '#4F46E5',
|
||||||
|
order_index: 1
|
||||||
|
},
|
||||||
|
kpi_count: 3,
|
||||||
|
total_checks: 10,
|
||||||
|
completed_checks: 7,
|
||||||
|
progress: 70
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockKPIs = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
dimension_id: 1,
|
||||||
|
name: 'Strategic Alignment',
|
||||||
|
description: 'Vision and mission clarity',
|
||||||
|
order_index: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
dimension_id: 1,
|
||||||
|
name: 'Market Position',
|
||||||
|
description: 'Competitive landscape analysis',
|
||||||
|
order_index: 2
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
describe('DimensionCard', () => {
|
||||||
|
const mockOnToggle = vi.fn();
|
||||||
|
const mockOnUpdateProgress = vi.fn();
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
(mockDataService.getKPIsByDimension as any).mockReturnValue(mockKPIs);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('rendering collapsed state', () => {
|
||||||
|
it('should render dimension information correctly when collapsed', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('Strategy')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('3 KPIs • 10 total items')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('70%')).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Should show right chevron when collapsed
|
||||||
|
expect(screen.getByRole('button')).toContainElement(
|
||||||
|
screen.getByText('Strategy').closest('button')?.querySelector('[data-lucide="chevron-right"]') as Element
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should apply correct styling based on dimension color', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const progressPercentage = screen.getByText('70%');
|
||||||
|
expect(progressPercentage).toHaveStyle({ color: '#4F46E5' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle missing icon gracefully', () => {
|
||||||
|
const dimensionWithoutIcon: DimensionWithStats = {
|
||||||
|
...mockDimensionData,
|
||||||
|
dimension: {
|
||||||
|
...mockDimensionData.dimension,
|
||||||
|
icon: undefined
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={dimensionWithoutIcon}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should still render without errors
|
||||||
|
expect(screen.getByText('Strategy')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('rendering expanded state', () => {
|
||||||
|
it('should render expanded content when isExpanded is true', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={true}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should show down chevron when expanded
|
||||||
|
expect(screen.getByRole('button')).toContainElement(
|
||||||
|
screen.getByText('Strategy').closest('button')?.querySelector('[data-lucide="chevron-down"]') as Element
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should show stats cards
|
||||||
|
expect(screen.getByText('Key Performance Indicators')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Open Items')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Completed Items')).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Should calculate open items correctly (total - completed)
|
||||||
|
expect(screen.getByText('3')).toBeInTheDocument(); // open items (10 - 7)
|
||||||
|
expect(screen.getByText('7')).toBeInTheDocument(); // completed items
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should load and display KPIs when expanded', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={true}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(mockDataService.getKPIsByDimension).toHaveBeenCalledWith(1);
|
||||||
|
|
||||||
|
// KPISection components should be rendered for each KPI
|
||||||
|
expect(screen.getByText('Strategic Alignment')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Market Position')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not load KPIs when collapsed', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(mockDataService.getKPIsByDimension).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('interactions', () => {
|
||||||
|
it('should call onToggle when card header is clicked', async () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
await user.click(button);
|
||||||
|
|
||||||
|
expect(mockOnToggle).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have hover effect on card header', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button).toHaveClass('hover:bg-gray-100', 'transition-colors');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('progress calculation', () => {
|
||||||
|
it('should display progress percentage correctly', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Progress should be rounded to nearest integer
|
||||||
|
expect(screen.getByText('70%')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle zero progress', () => {
|
||||||
|
const zeroDimension: DimensionWithStats = {
|
||||||
|
...mockDimensionData,
|
||||||
|
total_checks: 5,
|
||||||
|
completed_checks: 0,
|
||||||
|
progress: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={zeroDimension}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('0%')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle 100% progress', () => {
|
||||||
|
const completeDimension: DimensionWithStats = {
|
||||||
|
...mockDimensionData,
|
||||||
|
total_checks: 5,
|
||||||
|
completed_checks: 5,
|
||||||
|
progress: 100
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={completeDimension}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('100%')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should round progress to nearest integer', () => {
|
||||||
|
const fractionalDimension: DimensionWithStats = {
|
||||||
|
...mockDimensionData,
|
||||||
|
progress: 66.67
|
||||||
|
};
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={fractionalDimension}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText('67%')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('accessibility', () => {
|
||||||
|
it('should have proper button role and accessibility', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button).toBeInTheDocument();
|
||||||
|
expect(button).toHaveClass('w-full');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have proper heading structure', () => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={false}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const heading = screen.getByRole('heading', { level: 4 });
|
||||||
|
expect(heading).toHaveTextContent('Strategy');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('error handling', () => {
|
||||||
|
it('should handle DataService errors gracefully', () => {
|
||||||
|
(mockDataService.getKPIsByDimension as any).mockImplementation(() => {
|
||||||
|
throw new Error('Database error');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => {
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={true}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}).not.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle empty KPI arrays', () => {
|
||||||
|
(mockDataService.getKPIsByDimension as any).mockReturnValue([]);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<DimensionCard
|
||||||
|
dimensionData={mockDimensionData}
|
||||||
|
isExpanded={true}
|
||||||
|
onToggle={mockOnToggle}
|
||||||
|
dataService={mockDataService}
|
||||||
|
onUpdateProgress={mockOnUpdateProgress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Should render without errors
|
||||||
|
expect(screen.getByText('Strategy')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
91
client/src/components/__tests__/ProgressBar.test.tsx
Normal file
91
client/src/components/__tests__/ProgressBar.test.tsx
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import { ProgressBar } from '../ProgressBar';
|
||||||
|
|
||||||
|
describe('ProgressBar', () => {
|
||||||
|
it('should render with default props', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={50} />);
|
||||||
|
|
||||||
|
const progressContainer = container.querySelector('div');
|
||||||
|
const progressFill = progressContainer?.querySelector('div');
|
||||||
|
|
||||||
|
expect(progressContainer).toHaveStyle({
|
||||||
|
height: '8px',
|
||||||
|
width: '96px'
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(progressFill).toHaveStyle({
|
||||||
|
width: '50%',
|
||||||
|
backgroundColor: '#333333'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render with custom props', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ProgressBar
|
||||||
|
progress={75}
|
||||||
|
color="#ff0000"
|
||||||
|
height="12px"
|
||||||
|
width="200px"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const progressContainer = container.querySelector('div');
|
||||||
|
const progressFill = progressContainer?.querySelector('div');
|
||||||
|
|
||||||
|
expect(progressContainer).toHaveStyle({
|
||||||
|
height: '12px',
|
||||||
|
width: '200px'
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(progressFill).toHaveStyle({
|
||||||
|
width: '75%',
|
||||||
|
backgroundColor: '#ff0000'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle 0% progress', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={0} />);
|
||||||
|
|
||||||
|
const progressFill = container.querySelector('div div');
|
||||||
|
expect(progressFill).toHaveStyle({ width: '0%' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle 100% progress', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={100} />);
|
||||||
|
|
||||||
|
const progressFill = container.querySelector('div div');
|
||||||
|
expect(progressFill).toHaveStyle({ width: '100%' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should cap progress at 100% for values over 100', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={150} />);
|
||||||
|
|
||||||
|
const progressFill = container.querySelector('div div');
|
||||||
|
expect(progressFill).toHaveStyle({ width: '100%' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle negative progress values', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={-10} />);
|
||||||
|
|
||||||
|
const progressFill = container.querySelector('div div');
|
||||||
|
expect(progressFill).toHaveStyle({ width: '-10%' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have correct CSS classes', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={50} />);
|
||||||
|
|
||||||
|
const progressContainer = container.querySelector('div');
|
||||||
|
const progressFill = progressContainer?.querySelector('div');
|
||||||
|
|
||||||
|
expect(progressContainer).toHaveClass('bg-gray-200', 'rounded-full', 'relative', 'overflow-hidden');
|
||||||
|
expect(progressFill).toHaveClass('h-full', 'rounded-full', 'transition-all', 'duration-300', 'ease-in-out');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle decimal progress values', () => {
|
||||||
|
const { container } = render(<ProgressBar progress={33.33} />);
|
||||||
|
|
||||||
|
const progressFill = container.querySelector('div div');
|
||||||
|
expect(progressFill).toHaveStyle({ width: '33.33%' });
|
||||||
|
});
|
||||||
|
});
|
||||||
100
client/src/database/database.ts
Normal file
100
client/src/database/database.ts
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
import initSqlJs from 'sql.js';
|
||||||
|
|
||||||
|
let SQL: any = null;
|
||||||
|
let db: any = null;
|
||||||
|
|
||||||
|
export interface Database {
|
||||||
|
exec: (sql: string) => any[];
|
||||||
|
run: (sql: string, params?: any[]) => void;
|
||||||
|
prepare: (sql: string) => any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const initDatabase = async (): Promise<Database> => {
|
||||||
|
if (db) return db;
|
||||||
|
|
||||||
|
if (!SQL) {
|
||||||
|
SQL = await initSqlJs({
|
||||||
|
locateFile: (file: string) => `https://sql.js.org/dist/${file}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
db = new SQL.Database();
|
||||||
|
|
||||||
|
// Add run method for compatibility with seed data
|
||||||
|
db.run = (sql: string, params?: any[]) => {
|
||||||
|
if (params && params.length > 0) {
|
||||||
|
const stmt = db.prepare(sql);
|
||||||
|
stmt.run(params);
|
||||||
|
stmt.free();
|
||||||
|
} else {
|
||||||
|
db.exec(sql);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize schema
|
||||||
|
const schema = `
|
||||||
|
CREATE TABLE IF NOT EXISTS dimensions (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
icon TEXT,
|
||||||
|
color TEXT,
|
||||||
|
order_index INTEGER,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS kpis (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
dimension_id INTEGER NOT NULL,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
order_index INTEGER,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (dimension_id) REFERENCES dimensions(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS checks (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
kpi_id INTEGER NOT NULL,
|
||||||
|
question TEXT NOT NULL,
|
||||||
|
check_type TEXT NOT NULL,
|
||||||
|
current_value TEXT,
|
||||||
|
expected_value TEXT,
|
||||||
|
reference_url TEXT,
|
||||||
|
reference_file_id INTEGER,
|
||||||
|
comment TEXT,
|
||||||
|
is_completed BOOLEAN DEFAULT 0,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (kpi_id) REFERENCES kpis(id),
|
||||||
|
FOREIGN KEY (reference_file_id) REFERENCES files(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS files (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
original_name TEXT NOT NULL,
|
||||||
|
stored_path TEXT NOT NULL,
|
||||||
|
mime_type TEXT,
|
||||||
|
size_bytes INTEGER,
|
||||||
|
uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS check_types (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
name TEXT NOT NULL UNIQUE,
|
||||||
|
data_type TEXT NOT NULL,
|
||||||
|
options_json TEXT,
|
||||||
|
validation_json TEXT
|
||||||
|
);
|
||||||
|
`;
|
||||||
|
|
||||||
|
db.exec(schema);
|
||||||
|
|
||||||
|
return db;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getDatabase = (): Database => {
|
||||||
|
if (!db) {
|
||||||
|
throw new Error('Database not initialized. Call initDatabase() first.');
|
||||||
|
}
|
||||||
|
return db;
|
||||||
|
};
|
||||||
164
client/src/database/seedData.ts
Normal file
164
client/src/database/seedData.ts
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
import { Database } from './database';
|
||||||
|
|
||||||
|
export const seedDatabase = (db: Database) => {
|
||||||
|
// Insert dimensions
|
||||||
|
const dimensions = [
|
||||||
|
{ name: 'Strategy', icon: 'Briefcase', color: '#4F46E5', order_index: 1 },
|
||||||
|
{ name: 'Sales', icon: 'TrendingUp', color: '#10B981', order_index: 2 },
|
||||||
|
{ name: 'Product', icon: 'Target', color: '#3B82F6', order_index: 3 },
|
||||||
|
{ name: 'Organization', icon: 'Building', color: '#8B5CF6', order_index: 4 },
|
||||||
|
{ name: 'Engineering', icon: 'Code', color: '#F59E0B', order_index: 5 },
|
||||||
|
{ name: 'DevOps', icon: 'Shield', color: '#EF4444', order_index: 6 },
|
||||||
|
{ name: 'Cyber', icon: 'Shield', color: '#6B7280', order_index: 7 },
|
||||||
|
{ name: 'Finance', icon: 'DollarSign', color: '#059669', order_index: 8 },
|
||||||
|
{ name: 'People', icon: 'Users', color: '#DC2626', order_index: 9 },
|
||||||
|
{ name: 'Culture', icon: 'Heart', color: '#7C3AED', order_index: 10 }
|
||||||
|
];
|
||||||
|
|
||||||
|
dimensions.forEach((dim, index) => {
|
||||||
|
db.run(
|
||||||
|
'INSERT INTO dimensions (name, icon, color, order_index) VALUES (?, ?, ?, ?)',
|
||||||
|
[dim.name, dim.icon, dim.color, dim.order_index]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert KPIs for Strategy
|
||||||
|
const kpis = [
|
||||||
|
// Strategy KPIs
|
||||||
|
{ dimension_id: 1, name: 'Strategic Alignment', description: 'Vision and mission clarity', order_index: 1 },
|
||||||
|
{ dimension_id: 1, name: 'Market Position', description: 'Competitive landscape analysis', order_index: 2 },
|
||||||
|
{ dimension_id: 1, name: 'Business Model', description: 'Revenue and value proposition', order_index: 3 },
|
||||||
|
{ dimension_id: 1, name: 'Strategic Planning', description: 'Long-term planning processes', order_index: 4 },
|
||||||
|
{ dimension_id: 1, name: 'Innovation Strategy', description: 'R&D and innovation approach', order_index: 5 },
|
||||||
|
{ dimension_id: 1, name: 'Risk Management', description: 'Strategic risk assessment', order_index: 6 },
|
||||||
|
|
||||||
|
// Sales KPIs
|
||||||
|
{ dimension_id: 2, name: 'Sales Performance', description: 'Revenue and conversion metrics', order_index: 1 },
|
||||||
|
{ dimension_id: 2, name: 'Customer Acquisition', description: 'Lead generation and conversion', order_index: 2 },
|
||||||
|
{ dimension_id: 2, name: 'Sales Process', description: 'Sales methodology and tools', order_index: 3 },
|
||||||
|
|
||||||
|
// Product KPIs
|
||||||
|
{ dimension_id: 3, name: 'Product Strategy', description: 'Product roadmap and vision', order_index: 1 },
|
||||||
|
{ dimension_id: 3, name: 'Product Quality', description: 'Quality metrics and standards', order_index: 2 },
|
||||||
|
{ dimension_id: 3, name: 'User Experience', description: 'Customer satisfaction and usability', order_index: 3 },
|
||||||
|
{ dimension_id: 3, name: 'Product Innovation', description: 'Feature development and innovation', order_index: 4 },
|
||||||
|
{ dimension_id: 3, name: 'Market Fit', description: 'Product-market fit analysis', order_index: 5 },
|
||||||
|
|
||||||
|
// Organization KPIs
|
||||||
|
{ dimension_id: 4, name: 'Organizational Structure', description: 'Hierarchy and reporting lines', order_index: 1 },
|
||||||
|
{ dimension_id: 4, name: 'Leadership', description: 'Management effectiveness', order_index: 2 },
|
||||||
|
{ dimension_id: 4, name: 'Communication', description: 'Internal communication processes', order_index: 3 },
|
||||||
|
{ dimension_id: 4, name: 'Decision Making', description: 'Decision processes and governance', order_index: 4 },
|
||||||
|
{ dimension_id: 4, name: 'Change Management', description: 'Adaptability and change processes', order_index: 5 },
|
||||||
|
|
||||||
|
// Engineering KPIs
|
||||||
|
{ dimension_id: 5, name: 'Development Practices', description: 'Coding standards and methodology', order_index: 1 },
|
||||||
|
{ dimension_id: 5, name: 'Code Quality', description: 'Testing and code review processes', order_index: 2 },
|
||||||
|
{ dimension_id: 5, name: 'Technical Architecture', description: 'System design and scalability', order_index: 3 },
|
||||||
|
{ dimension_id: 5, name: 'Team Productivity', description: 'Velocity and delivery metrics', order_index: 4 },
|
||||||
|
{ dimension_id: 5, name: 'Technical Debt', description: 'Code maintenance and refactoring', order_index: 5 },
|
||||||
|
|
||||||
|
// DevOps KPIs
|
||||||
|
{ dimension_id: 6, name: 'Deployment Process', description: 'CI/CD and release management', order_index: 1 },
|
||||||
|
{ dimension_id: 6, name: 'Infrastructure', description: 'System reliability and monitoring', order_index: 2 },
|
||||||
|
{ dimension_id: 6, name: 'Automation', description: 'Process automation and tooling', order_index: 3 },
|
||||||
|
|
||||||
|
// Cyber KPIs
|
||||||
|
{ dimension_id: 7, name: 'Security Policies', description: 'Security frameworks and policies', order_index: 1 },
|
||||||
|
{ dimension_id: 7, name: 'Threat Management', description: 'Security monitoring and response', order_index: 2 },
|
||||||
|
{ dimension_id: 7, name: 'Compliance', description: 'Regulatory compliance and auditing', order_index: 3 },
|
||||||
|
{ dimension_id: 7, name: 'Data Protection', description: 'Data security and privacy', order_index: 4 },
|
||||||
|
{ dimension_id: 7, name: 'Security Training', description: 'Employee security awareness', order_index: 5 },
|
||||||
|
{ dimension_id: 7, name: 'Incident Response', description: 'Security incident handling', order_index: 6 },
|
||||||
|
|
||||||
|
// Finance KPIs
|
||||||
|
{ dimension_id: 8, name: 'Financial Health', description: 'Revenue, profit, and cash flow', order_index: 1 },
|
||||||
|
{ dimension_id: 8, name: 'Cost Management', description: 'Expense control and optimization', order_index: 2 },
|
||||||
|
{ dimension_id: 8, name: 'Financial Planning', description: 'Budgeting and forecasting', order_index: 3 },
|
||||||
|
{ dimension_id: 8, name: 'Investment Strategy', description: 'Capital allocation and ROI', order_index: 4 },
|
||||||
|
{ dimension_id: 8, name: 'Financial Controls', description: 'Accounting and audit processes', order_index: 5 },
|
||||||
|
{ dimension_id: 8, name: 'Risk Management', description: 'Financial risk assessment', order_index: 6 },
|
||||||
|
{ dimension_id: 8, name: 'Funding Strategy', description: 'Capital raising and debt management', order_index: 7 },
|
||||||
|
{ dimension_id: 8, name: 'Financial Reporting', description: 'Transparency and reporting standards', order_index: 8 },
|
||||||
|
{ dimension_id: 8, name: 'Tax Strategy', description: 'Tax planning and compliance', order_index: 9 },
|
||||||
|
{ dimension_id: 8, name: 'Treasury Management', description: 'Cash and liquidity management', order_index: 10 },
|
||||||
|
{ dimension_id: 8, name: 'Investor Relations', description: 'Stakeholder communication', order_index: 11 },
|
||||||
|
{ dimension_id: 8, name: 'Financial Technology', description: 'Fintech tools and systems', order_index: 12 },
|
||||||
|
{ dimension_id: 8, name: 'Procurement', description: 'Vendor management and purchasing', order_index: 13 },
|
||||||
|
|
||||||
|
// People KPIs
|
||||||
|
{ dimension_id: 9, name: 'Talent Acquisition', description: 'Recruitment and hiring processes', order_index: 1 },
|
||||||
|
{ dimension_id: 9, name: 'Employee Development', description: 'Training and career progression', order_index: 2 },
|
||||||
|
{ dimension_id: 9, name: 'Performance Management', description: 'Evaluation and feedback systems', order_index: 3 },
|
||||||
|
{ dimension_id: 9, name: 'Compensation & Benefits', description: 'Salary and benefits structure', order_index: 4 },
|
||||||
|
{ dimension_id: 9, name: 'Employee Engagement', description: 'Satisfaction and retention', order_index: 5 },
|
||||||
|
|
||||||
|
// Culture KPIs
|
||||||
|
{ dimension_id: 10, name: 'Company Values', description: 'Core values and principles', order_index: 1 },
|
||||||
|
{ dimension_id: 10, name: 'Work Environment', description: 'Workplace culture and atmosphere', order_index: 2 },
|
||||||
|
{ dimension_id: 10, name: 'Diversity & Inclusion', description: 'D&I initiatives and metrics', order_index: 3 }
|
||||||
|
];
|
||||||
|
|
||||||
|
kpis.forEach(kpi => {
|
||||||
|
db.run(
|
||||||
|
'INSERT INTO kpis (dimension_id, name, description, order_index) VALUES (?, ?, ?, ?)',
|
||||||
|
[kpi.dimension_id, kpi.name, kpi.description, kpi.order_index]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert check types
|
||||||
|
const checkTypes = [
|
||||||
|
{ name: 'text', data_type: 'text', options_json: null, validation_json: null },
|
||||||
|
{
|
||||||
|
name: 'dropdown',
|
||||||
|
data_type: 'string',
|
||||||
|
options_json: JSON.stringify(['Yes', 'Partially', 'No']),
|
||||||
|
validation_json: JSON.stringify({ required: true })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'number',
|
||||||
|
data_type: 'number',
|
||||||
|
options_json: null,
|
||||||
|
validation_json: JSON.stringify({ min: 0, max: Number.MAX_SAFE_INTEGER })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'percentage',
|
||||||
|
data_type: 'number',
|
||||||
|
options_json: null,
|
||||||
|
validation_json: JSON.stringify({ min: 0, max: 100 })
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
checkTypes.forEach(type => {
|
||||||
|
db.run(
|
||||||
|
'INSERT INTO check_types (name, data_type, options_json, validation_json) VALUES (?, ?, ?, ?)',
|
||||||
|
[type.name, type.data_type, type.options_json, type.validation_json]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert sample checks for demonstration
|
||||||
|
const sampleChecks = [
|
||||||
|
// Strategy checks
|
||||||
|
{ kpi_id: 1, question: 'Is the company vision clearly defined?', check_type: 'dropdown', current_value: null, expected_value: 'Yes', is_completed: true },
|
||||||
|
{ kpi_id: 1, question: 'Are strategic goals documented and communicated?', check_type: 'dropdown', current_value: null, expected_value: 'Yes', is_completed: false },
|
||||||
|
{ kpi_id: 1, question: 'Strategic alignment score (1-10)', check_type: 'number', expected_value: '8', current_value: '7', is_completed: false },
|
||||||
|
|
||||||
|
// Sales checks
|
||||||
|
{ kpi_id: 7, question: 'Monthly revenue growth rate', check_type: 'percentage', expected_value: '15', current_value: '12', is_completed: false },
|
||||||
|
{ kpi_id: 7, question: 'Sales conversion rate', check_type: 'percentage', expected_value: '25', current_value: '22', is_completed: false },
|
||||||
|
|
||||||
|
// Engineering checks
|
||||||
|
{ kpi_id: 18, question: 'Development methodology', check_type: 'dropdown', expected_value: 'Agile', current_value: 'Agile', is_completed: true },
|
||||||
|
{ kpi_id: 18, question: 'Average sprint velocity (story points)', check_type: 'number', expected_value: '40', current_value: '35', is_completed: false },
|
||||||
|
{ kpi_id: 19, question: 'Code coverage percentage', check_type: 'percentage', expected_value: '80', current_value: '75', is_completed: false }
|
||||||
|
];
|
||||||
|
|
||||||
|
sampleChecks.forEach(check => {
|
||||||
|
db.run(
|
||||||
|
'INSERT INTO checks (kpi_id, question, check_type, current_value, expected_value, is_completed) VALUES (?, ?, ?, ?, ?, ?)',
|
||||||
|
[check.kpi_id, check.question, check.check_type, check.current_value || null, check.expected_value || null, check.is_completed ? 1 : 0]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('Database seeded successfully');
|
||||||
|
};
|
||||||
3
client/src/index.css
Normal file
3
client/src/index.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
10
client/src/main.tsx
Normal file
10
client/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
313
client/src/services/__tests__/dataService.test.ts
Normal file
313
client/src/services/__tests__/dataService.test.ts
Normal file
@@ -0,0 +1,313 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
import { DataService } from '../dataService';
|
||||||
|
import { Database } from '../../database/database';
|
||||||
|
|
||||||
|
// Mock database
|
||||||
|
const mockDb = {
|
||||||
|
exec: vi.fn(),
|
||||||
|
prepare: vi.fn(),
|
||||||
|
run: vi.fn(),
|
||||||
|
} as unknown as Database;
|
||||||
|
|
||||||
|
describe('DataService', () => {
|
||||||
|
let dataService: DataService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
dataService = new DataService(mockDb);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('getDimensions', () => {
|
||||||
|
it('should return dimensions ordered by order_index', () => {
|
||||||
|
const mockResult = [{
|
||||||
|
columns: ['id', 'name', 'icon', 'color', 'order_index', 'created_at'],
|
||||||
|
values: [
|
||||||
|
[1, 'Strategy', 'Briefcase', '#4F46E5', 1, '2023-01-01'],
|
||||||
|
[2, 'Engineering', 'Code', '#F59E0B', 2, '2023-01-01']
|
||||||
|
]
|
||||||
|
}];
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue(mockResult);
|
||||||
|
|
||||||
|
const result = dataService.getDimensions();
|
||||||
|
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith('SELECT * FROM dimensions ORDER BY order_index');
|
||||||
|
expect(result).toEqual([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Strategy',
|
||||||
|
icon: 'Briefcase',
|
||||||
|
color: '#4F46E5',
|
||||||
|
order_index: 1,
|
||||||
|
created_at: '2023-01-01'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Engineering',
|
||||||
|
icon: 'Code',
|
||||||
|
color: '#F59E0B',
|
||||||
|
order_index: 2,
|
||||||
|
created_at: '2023-01-01'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return empty array when no dimensions exist', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([]);
|
||||||
|
|
||||||
|
const result = dataService.getDimensions();
|
||||||
|
|
||||||
|
expect(result).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle database errors', () => {
|
||||||
|
(mockDb.exec as any).mockImplementation(() => {
|
||||||
|
throw new Error('Database error');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => dataService.getDimensions()).toThrow('Database error');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('getDimensionsWithStats', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
// Mock getDimensions
|
||||||
|
vi.spyOn(dataService, 'getDimensions').mockReturnValue([
|
||||||
|
{ id: 1, name: 'Strategy', icon: 'Briefcase', color: '#4F46E5', order_index: 1 }
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should calculate stats correctly', () => {
|
||||||
|
// Mock KPI count query
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce([{ values: [[3]] }]) // KPI count
|
||||||
|
.mockReturnValueOnce([{ values: [[10, 7]] }]); // total and completed checks
|
||||||
|
|
||||||
|
const result = dataService.getDimensionsWithStats();
|
||||||
|
|
||||||
|
expect(result).toEqual([{
|
||||||
|
dimension: { id: 1, name: 'Strategy', icon: 'Briefcase', color: '#4F46E5', order_index: 1 },
|
||||||
|
kpi_count: 3,
|
||||||
|
total_checks: 10,
|
||||||
|
completed_checks: 7,
|
||||||
|
progress: 70
|
||||||
|
}]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle zero checks correctly', () => {
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce([{ values: [[2]] }]) // KPI count
|
||||||
|
.mockReturnValueOnce([{ values: [[0, 0]] }]); // total and completed checks
|
||||||
|
|
||||||
|
const result = dataService.getDimensionsWithStats();
|
||||||
|
|
||||||
|
expect(result[0].progress).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle null completed checks', () => {
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce([{ values: [[2]] }]) // KPI count
|
||||||
|
.mockReturnValueOnce([{ values: [[5, null]] }]); // total and completed checks
|
||||||
|
|
||||||
|
const result = dataService.getDimensionsWithStats();
|
||||||
|
|
||||||
|
expect(result[0].completed_checks).toBe(0);
|
||||||
|
expect(result[0].progress).toBe(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('getKPIsByDimension', () => {
|
||||||
|
it('should return KPIs for a dimension ordered by order_index', () => {
|
||||||
|
const mockResult = [{
|
||||||
|
columns: ['id', 'dimension_id', 'name', 'description', 'order_index', 'created_at'],
|
||||||
|
values: [
|
||||||
|
[1, 1, 'Strategic Alignment', 'Vision clarity', 1, '2023-01-01'],
|
||||||
|
[2, 1, 'Market Position', 'Competitive analysis', 2, '2023-01-01']
|
||||||
|
]
|
||||||
|
}];
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue(mockResult);
|
||||||
|
|
||||||
|
const result = dataService.getKPIsByDimension(1);
|
||||||
|
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith('SELECT * FROM kpis WHERE dimension_id = 1 ORDER BY order_index');
|
||||||
|
expect(result).toHaveLength(2);
|
||||||
|
expect(result[0].name).toBe('Strategic Alignment');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return empty array when no KPIs exist', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([]);
|
||||||
|
|
||||||
|
const result = dataService.getKPIsByDimension(999);
|
||||||
|
|
||||||
|
expect(result).toEqual([]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('getChecksByKPI', () => {
|
||||||
|
it('should return checks for a KPI ordered by created_at', () => {
|
||||||
|
const mockResult = [{
|
||||||
|
columns: ['id', 'kpi_id', 'question', 'check_type', 'current_value', 'expected_value',
|
||||||
|
'reference_url', 'reference_file_id', 'comment', 'is_completed', 'created_at', 'updated_at'],
|
||||||
|
values: [
|
||||||
|
[1, 1, 'Is vision clear?', 'dropdown', 'Yes', 'Yes', null, null, 'Good', 1, '2023-01-01', '2023-01-01'],
|
||||||
|
[2, 1, 'Goals documented?', 'dropdown', 'No', 'Yes', null, null, 'Needs work', 0, '2023-01-02', '2023-01-02']
|
||||||
|
]
|
||||||
|
}];
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue(mockResult);
|
||||||
|
|
||||||
|
const result = dataService.getChecksByKPI(1);
|
||||||
|
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith('SELECT * FROM checks WHERE kpi_id = 1 ORDER BY created_at');
|
||||||
|
expect(result).toHaveLength(2);
|
||||||
|
expect(result[0].is_completed).toBe(true);
|
||||||
|
expect(result[1].is_completed).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('updateCheck', () => {
|
||||||
|
it('should update check with escaped values', () => {
|
||||||
|
const updates = {
|
||||||
|
current_value: "Yes",
|
||||||
|
is_completed: true,
|
||||||
|
comment: "Test's comment"
|
||||||
|
};
|
||||||
|
|
||||||
|
dataService.updateCheck(1, updates);
|
||||||
|
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining("UPDATE checks SET")
|
||||||
|
);
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining("WHERE id = 1")
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle boolean values correctly', () => {
|
||||||
|
const updates = { is_completed: true };
|
||||||
|
|
||||||
|
dataService.updateCheck(1, updates);
|
||||||
|
|
||||||
|
const sqlCall = (mockDb.exec as any).mock.calls[0][0];
|
||||||
|
expect(sqlCall).toContain('is_completed = 1');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should escape string values with quotes', () => {
|
||||||
|
const updates = { comment: "It's working" };
|
||||||
|
|
||||||
|
dataService.updateCheck(1, updates);
|
||||||
|
|
||||||
|
const sqlCall = (mockDb.exec as any).mock.calls[0][0];
|
||||||
|
expect(sqlCall).toContain("comment = 'It''s working'");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('createCheck', () => {
|
||||||
|
it('should create new check with proper escaping', () => {
|
||||||
|
const checkData = {
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Test question?',
|
||||||
|
check_type: 'text',
|
||||||
|
current_value: 'Test value',
|
||||||
|
expected_value: 'Expected value',
|
||||||
|
reference_url: 'https://example.com',
|
||||||
|
reference_file_id: undefined,
|
||||||
|
comment: 'Test comment',
|
||||||
|
is_completed: false
|
||||||
|
};
|
||||||
|
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce(undefined) // INSERT
|
||||||
|
.mockReturnValueOnce([{ values: [[123]] }]); // SELECT last_insert_rowid()
|
||||||
|
|
||||||
|
const result = dataService.createCheck(checkData);
|
||||||
|
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('INSERT INTO checks')
|
||||||
|
);
|
||||||
|
expect(result).toBe(123);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle null values correctly', () => {
|
||||||
|
const checkData = {
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Test question?',
|
||||||
|
check_type: 'text',
|
||||||
|
current_value: undefined,
|
||||||
|
expected_value: null,
|
||||||
|
reference_url: undefined,
|
||||||
|
reference_file_id: undefined,
|
||||||
|
comment: undefined,
|
||||||
|
is_completed: false
|
||||||
|
};
|
||||||
|
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce(undefined)
|
||||||
|
.mockReturnValueOnce([{ values: [[456]] }]);
|
||||||
|
|
||||||
|
const result = dataService.createCheck(checkData as any);
|
||||||
|
|
||||||
|
const sqlCall = (mockDb.exec as any).mock.calls[0][0];
|
||||||
|
expect(sqlCall).toContain('NULL');
|
||||||
|
expect(result).toBe(456);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle boolean completion status', () => {
|
||||||
|
const checkData = {
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Test?',
|
||||||
|
check_type: 'text',
|
||||||
|
is_completed: true
|
||||||
|
};
|
||||||
|
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce(undefined)
|
||||||
|
.mockReturnValueOnce([{ values: [[789]] }]);
|
||||||
|
|
||||||
|
dataService.createCheck(checkData as any);
|
||||||
|
|
||||||
|
const sqlCall = (mockDb.exec as any).mock.calls[0][0];
|
||||||
|
expect(sqlCall).toContain(', 1)'); // boolean true as 1
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('deleteCheck', () => {
|
||||||
|
it('should delete check by ID', () => {
|
||||||
|
dataService.deleteCheck(123);
|
||||||
|
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledWith('DELETE FROM checks WHERE id = 123');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle database errors', () => {
|
||||||
|
(mockDb.exec as any).mockImplementation(() => {
|
||||||
|
throw new Error('Delete failed');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => dataService.deleteCheck(123)).toThrow('Delete failed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('edge cases and error handling', () => {
|
||||||
|
it('should handle empty result sets gracefully', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([]);
|
||||||
|
|
||||||
|
expect(() => dataService.getDimensions()).not.toThrow();
|
||||||
|
expect(() => dataService.getKPIsByDimension(1)).not.toThrow();
|
||||||
|
expect(() => dataService.getChecksByKPI(1)).not.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle malformed result sets', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([{ columns: [], values: [] }]);
|
||||||
|
|
||||||
|
const result = dataService.getDimensions();
|
||||||
|
expect(result).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle undefined database responses', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue(undefined);
|
||||||
|
|
||||||
|
expect(() => dataService.getDimensions()).not.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
175
client/src/services/dataService.ts
Normal file
175
client/src/services/dataService.ts
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import { Database } from '../database/database';
|
||||||
|
import { Dimension, KPI, Check, DimensionWithStats } from '../types';
|
||||||
|
|
||||||
|
export class DataService {
|
||||||
|
constructor(private db: Database) {}
|
||||||
|
|
||||||
|
getDimensions(): Dimension[] {
|
||||||
|
const result = this.db.exec('SELECT * FROM dimensions ORDER BY order_index');
|
||||||
|
const dimensions: Dimension[] = [];
|
||||||
|
|
||||||
|
if (result.length > 0) {
|
||||||
|
const columns = result[0].columns;
|
||||||
|
const values = result[0].values;
|
||||||
|
|
||||||
|
values.forEach((row: any[]) => {
|
||||||
|
const dimension: any = {};
|
||||||
|
columns.forEach((column: string, index: number) => {
|
||||||
|
dimension[column] = row[index];
|
||||||
|
});
|
||||||
|
|
||||||
|
dimensions.push({
|
||||||
|
id: dimension.id,
|
||||||
|
name: dimension.name,
|
||||||
|
icon: dimension.icon,
|
||||||
|
color: dimension.color,
|
||||||
|
order_index: dimension.order_index,
|
||||||
|
created_at: dimension.created_at
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return dimensions;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDimensionsWithStats(): DimensionWithStats[] {
|
||||||
|
const dimensions = this.getDimensions();
|
||||||
|
|
||||||
|
return dimensions.map(dimension => {
|
||||||
|
// Get KPI count
|
||||||
|
const kpiResult = this.db.exec('SELECT COUNT(*) as count FROM kpis WHERE dimension_id = ' + dimension.id);
|
||||||
|
const kpi_count = kpiResult.length > 0 ? kpiResult[0].values[0][0] as number : 0;
|
||||||
|
|
||||||
|
// Get total checks and completed checks
|
||||||
|
const checksResult = this.db.exec(`
|
||||||
|
SELECT
|
||||||
|
COUNT(*) as total_checks,
|
||||||
|
SUM(CASE WHEN is_completed = 1 THEN 1 ELSE 0 END) as completed_checks
|
||||||
|
FROM checks c
|
||||||
|
JOIN kpis k ON c.kpi_id = k.id
|
||||||
|
WHERE k.dimension_id = ${dimension.id}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const total_checks = checksResult.length > 0 ? (checksResult[0].values[0][0] as number || 0) : 0;
|
||||||
|
const completed_checks = checksResult.length > 0 ? (checksResult[0].values[0][1] as number || 0) : 0;
|
||||||
|
|
||||||
|
const progress = total_checks > 0 ? (completed_checks / total_checks) * 100 : 0;
|
||||||
|
|
||||||
|
return {
|
||||||
|
dimension,
|
||||||
|
kpi_count,
|
||||||
|
total_checks,
|
||||||
|
completed_checks,
|
||||||
|
progress
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getKPIsByDimension(dimensionId: number): KPI[] {
|
||||||
|
const result = this.db.exec(`SELECT * FROM kpis WHERE dimension_id = ${dimensionId} ORDER BY order_index`);
|
||||||
|
const kpis: KPI[] = [];
|
||||||
|
|
||||||
|
if (result.length > 0) {
|
||||||
|
const columns = result[0].columns;
|
||||||
|
const values = result[0].values;
|
||||||
|
|
||||||
|
values.forEach((row: any[]) => {
|
||||||
|
const kpi: any = {};
|
||||||
|
columns.forEach((column: string, index: number) => {
|
||||||
|
kpi[column] = row[index];
|
||||||
|
});
|
||||||
|
|
||||||
|
kpis.push({
|
||||||
|
id: kpi.id,
|
||||||
|
dimension_id: kpi.dimension_id,
|
||||||
|
name: kpi.name,
|
||||||
|
description: kpi.description,
|
||||||
|
order_index: kpi.order_index,
|
||||||
|
created_at: kpi.created_at
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return kpis;
|
||||||
|
}
|
||||||
|
|
||||||
|
getChecksByKPI(kpiId: number): Check[] {
|
||||||
|
const result = this.db.exec(`SELECT * FROM checks WHERE kpi_id = ${kpiId} ORDER BY created_at`);
|
||||||
|
const checks: Check[] = [];
|
||||||
|
|
||||||
|
if (result.length > 0) {
|
||||||
|
const columns = result[0].columns;
|
||||||
|
const values = result[0].values;
|
||||||
|
|
||||||
|
values.forEach((row: any[]) => {
|
||||||
|
const check: any = {};
|
||||||
|
columns.forEach((column: string, index: number) => {
|
||||||
|
check[column] = row[index];
|
||||||
|
});
|
||||||
|
|
||||||
|
checks.push({
|
||||||
|
id: check.id,
|
||||||
|
kpi_id: check.kpi_id,
|
||||||
|
question: check.question,
|
||||||
|
check_type: check.check_type,
|
||||||
|
current_value: check.current_value,
|
||||||
|
expected_value: check.expected_value,
|
||||||
|
reference_url: check.reference_url,
|
||||||
|
reference_file_id: check.reference_file_id,
|
||||||
|
comment: check.comment,
|
||||||
|
is_completed: Boolean(check.is_completed),
|
||||||
|
created_at: check.created_at,
|
||||||
|
updated_at: check.updated_at
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return checks;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCheck(checkId: number, updates: Partial<Check>): void {
|
||||||
|
const fields = Object.keys(updates).filter(key => key !== 'id');
|
||||||
|
const values = fields.map(key => {
|
||||||
|
const value = updates[key as keyof Check];
|
||||||
|
if (typeof value === 'boolean') return value ? 1 : 0;
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const setClause = fields.map(field => `${field} = ?`).join(', ');
|
||||||
|
const sql = `UPDATE checks SET ${setClause}, updated_at = CURRENT_TIMESTAMP WHERE id = ${checkId}`;
|
||||||
|
|
||||||
|
// For sql.js, we need to use exec with direct values
|
||||||
|
const finalSql = sql.replace(/\?/g, () => {
|
||||||
|
const value = values.shift();
|
||||||
|
return typeof value === 'string' ? `'${value.replace(/'/g, "''")}'` : String(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.db.exec(finalSql);
|
||||||
|
}
|
||||||
|
|
||||||
|
createCheck(check: Omit<Check, 'id' | 'created_at' | 'updated_at'>): number {
|
||||||
|
const escapeString = (str: string | undefined | null) => {
|
||||||
|
if (!str) return 'NULL';
|
||||||
|
return `'${str.replace(/'/g, "''")}'`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const sql = `
|
||||||
|
INSERT INTO checks (kpi_id, question, check_type, current_value, expected_value,
|
||||||
|
reference_url, reference_file_id, comment, is_completed)
|
||||||
|
VALUES (${check.kpi_id}, ${escapeString(check.question)}, ${escapeString(check.check_type)},
|
||||||
|
${escapeString(check.current_value)}, ${escapeString(check.expected_value)},
|
||||||
|
${escapeString(check.reference_url)}, ${check.reference_file_id || 'NULL'},
|
||||||
|
${escapeString(check.comment)}, ${check.is_completed ? 1 : 0})
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.db.exec(sql);
|
||||||
|
|
||||||
|
// Return the last inserted row ID
|
||||||
|
const result = this.db.exec('SELECT last_insert_rowid() as id');
|
||||||
|
return result[0].values[0][0] as number;
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteCheck(checkId: number): void {
|
||||||
|
this.db.exec(`DELETE FROM checks WHERE id = ${checkId}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
224
client/src/test/README.md
Normal file
224
client/src/test/README.md
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
# Testing Documentation
|
||||||
|
|
||||||
|
This directory contains comprehensive automated tests for the Due Diligence Tracking System.
|
||||||
|
|
||||||
|
## Test Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/test/
|
||||||
|
├── setup.ts # Test environment setup
|
||||||
|
├── integration/ # Integration tests
|
||||||
|
│ └── database.test.ts # Database operations and data integrity
|
||||||
|
├── e2e/ # End-to-end tests
|
||||||
|
│ ├── dashboard.spec.ts # Dashboard functionality
|
||||||
|
│ ├── check-management.spec.ts # Check CRUD operations
|
||||||
|
│ ├── export-functionality.spec.ts # Data export features
|
||||||
|
│ └── performance.spec.ts # Performance and Core Web Vitals
|
||||||
|
└── performance/ # Performance and load tests
|
||||||
|
└── load.test.ts # Load testing and performance benchmarks
|
||||||
|
```
|
||||||
|
|
||||||
|
## Component Tests
|
||||||
|
|
||||||
|
Component tests are co-located with their respective components:
|
||||||
|
|
||||||
|
```
|
||||||
|
src/components/
|
||||||
|
├── __tests__/
|
||||||
|
│ ├── ProgressBar.test.tsx
|
||||||
|
│ ├── CheckForm.test.tsx
|
||||||
|
│ ├── CheckItem.test.tsx
|
||||||
|
│ └── DimensionCard.test.tsx
|
||||||
|
└── ...
|
||||||
|
|
||||||
|
src/utils/
|
||||||
|
├── __tests__/
|
||||||
|
│ ├── icons.test.ts
|
||||||
|
│ └── exportUtils.test.ts
|
||||||
|
└── ...
|
||||||
|
|
||||||
|
src/services/
|
||||||
|
├── __tests__/
|
||||||
|
│ └── dataService.test.ts
|
||||||
|
└── ...
|
||||||
|
```
|
||||||
|
|
||||||
|
## Test Categories
|
||||||
|
|
||||||
|
### 1. Unit Tests
|
||||||
|
- **Utility Functions**: Icon mapping, export utilities
|
||||||
|
- **Data Service**: Database operations, CRUD functionality
|
||||||
|
- **Components**: Individual React component behavior
|
||||||
|
|
||||||
|
### 2. Component Tests
|
||||||
|
- **Rendering**: Component output and prop handling
|
||||||
|
- **Interactions**: User events and state changes
|
||||||
|
- **Form Validation**: Input validation and error handling
|
||||||
|
- **Accessibility**: ARIA labels, keyboard navigation
|
||||||
|
|
||||||
|
### 3. Integration Tests
|
||||||
|
- **Database Operations**: Schema creation, data seeding, referential integrity
|
||||||
|
- **End-to-End Workflows**: Complete user journeys
|
||||||
|
- **Error Handling**: Graceful degradation and recovery
|
||||||
|
|
||||||
|
### 4. E2E Tests
|
||||||
|
- **User Workflows**: Complete application usage scenarios
|
||||||
|
- **Cross-Browser**: Functionality across different browsers
|
||||||
|
- **Responsive Design**: Mobile, tablet, and desktop layouts
|
||||||
|
- **Performance**: Core Web Vitals and load times
|
||||||
|
|
||||||
|
### 5. Performance Tests
|
||||||
|
- **Load Testing**: Large dataset handling
|
||||||
|
- **Memory Usage**: Memory leak detection and optimization
|
||||||
|
- **Stress Testing**: Rapid successive operations
|
||||||
|
- **Browser Constraints**: Simulated resource limitations
|
||||||
|
|
||||||
|
## Running Tests
|
||||||
|
|
||||||
|
### All Tests
|
||||||
|
```bash
|
||||||
|
npm test # Run all tests in watch mode
|
||||||
|
npm run test:run # Run all tests once
|
||||||
|
npm run test:coverage # Run tests with coverage report
|
||||||
|
```
|
||||||
|
|
||||||
|
### Unit and Component Tests
|
||||||
|
```bash
|
||||||
|
npm test -- src/utils # Run utility function tests
|
||||||
|
npm test -- src/components # Run component tests
|
||||||
|
npm test -- src/services # Run service tests
|
||||||
|
```
|
||||||
|
|
||||||
|
### Integration Tests
|
||||||
|
```bash
|
||||||
|
npm test -- src/test/integration
|
||||||
|
```
|
||||||
|
|
||||||
|
### End-to-End Tests
|
||||||
|
```bash
|
||||||
|
npm run test:e2e # Run E2E tests
|
||||||
|
npm run test:e2e:ui # Run E2E tests with UI
|
||||||
|
```
|
||||||
|
|
||||||
|
### Performance Tests
|
||||||
|
```bash
|
||||||
|
npm test -- src/test/performance
|
||||||
|
```
|
||||||
|
|
||||||
|
### Test UI
|
||||||
|
```bash
|
||||||
|
npm run test:ui # Open Vitest UI
|
||||||
|
```
|
||||||
|
|
||||||
|
## Test Coverage Goals
|
||||||
|
|
||||||
|
- **Statements**: > 90%
|
||||||
|
- **Branches**: > 85%
|
||||||
|
- **Functions**: > 90%
|
||||||
|
- **Lines**: > 90%
|
||||||
|
|
||||||
|
## Performance Benchmarks
|
||||||
|
|
||||||
|
### Load Times
|
||||||
|
- **Dashboard Load**: < 3 seconds
|
||||||
|
- **Dimension Expansion**: < 2 seconds total
|
||||||
|
- **Form Submissions**: < 500ms each
|
||||||
|
- **Data Export**: < 2 seconds
|
||||||
|
|
||||||
|
### Memory Usage
|
||||||
|
- **Memory Leaks**: < 10MB increase over 1000 operations
|
||||||
|
- **Large Datasets**: Handle 10,000+ items efficiently
|
||||||
|
|
||||||
|
### Core Web Vitals
|
||||||
|
- **LCP (Largest Contentful Paint)**: < 2.5 seconds
|
||||||
|
- **FID (First Input Delay)**: < 100ms
|
||||||
|
- **CLS (Cumulative Layout Shift)**: < 0.1
|
||||||
|
|
||||||
|
## Test Data
|
||||||
|
|
||||||
|
### Mock Data
|
||||||
|
Tests use comprehensive mock data including:
|
||||||
|
- 10 dimensions (Strategy, Sales, Product, etc.)
|
||||||
|
- 50+ KPIs across all dimensions
|
||||||
|
- Various check types (text, dropdown, number, percentage)
|
||||||
|
- Sample checks with different completion states
|
||||||
|
|
||||||
|
### Test Scenarios
|
||||||
|
- **Happy Path**: Normal user workflows
|
||||||
|
- **Edge Cases**: Empty states, invalid inputs, network errors
|
||||||
|
- **Error Conditions**: Database failures, validation errors
|
||||||
|
- **Performance**: Large datasets, rapid interactions
|
||||||
|
|
||||||
|
## Continuous Integration
|
||||||
|
|
||||||
|
Tests are designed to run in CI environments:
|
||||||
|
- **Headless Mode**: E2E tests run without browser UI
|
||||||
|
- **Parallel Execution**: Tests run concurrently for speed
|
||||||
|
- **Cross-Browser**: Tests validate across Chrome, Firefox, Safari
|
||||||
|
- **Performance Monitoring**: Automated performance regression detection
|
||||||
|
|
||||||
|
## Debugging Tests
|
||||||
|
|
||||||
|
### Debug Unit Tests
|
||||||
|
```bash
|
||||||
|
npm test -- --reporter=verbose src/path/to/test.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
### Debug E2E Tests
|
||||||
|
```bash
|
||||||
|
npm run test:e2e -- --debug
|
||||||
|
npm run test:e2e:ui # Visual debugging
|
||||||
|
```
|
||||||
|
|
||||||
|
### Test Artifacts
|
||||||
|
- **Screenshots**: Automatically captured on E2E test failures
|
||||||
|
- **Videos**: Full test run recordings for debugging
|
||||||
|
- **Traces**: Detailed execution traces for analysis
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
### Test Writing
|
||||||
|
- **Descriptive Names**: Clear test descriptions
|
||||||
|
- **Arrange-Act-Assert**: Structured test organization
|
||||||
|
- **Independent Tests**: No test dependencies
|
||||||
|
- **Realistic Data**: Use production-like test data
|
||||||
|
|
||||||
|
### Mock Strategy
|
||||||
|
- **Minimal Mocking**: Mock only external dependencies
|
||||||
|
- **Behavior Verification**: Test behavior, not implementation
|
||||||
|
- **Data Isolation**: Each test uses isolated data
|
||||||
|
|
||||||
|
### Performance Testing
|
||||||
|
- **Baseline Metrics**: Establish performance baselines
|
||||||
|
- **Regular Monitoring**: Continuous performance tracking
|
||||||
|
- **Real-World Scenarios**: Test with realistic usage patterns
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Common Issues
|
||||||
|
|
||||||
|
#### Tests Timing Out
|
||||||
|
- Increase timeout values in test configuration
|
||||||
|
- Check for infinite loops or unresolved promises
|
||||||
|
- Verify async/await usage
|
||||||
|
|
||||||
|
#### Flaky Tests
|
||||||
|
- Add proper wait conditions
|
||||||
|
- Use deterministic test data
|
||||||
|
- Avoid time-based assertions
|
||||||
|
|
||||||
|
#### Memory Issues
|
||||||
|
- Clear mocks between tests
|
||||||
|
- Avoid memory leaks in test setup
|
||||||
|
- Use `beforeEach` and `afterEach` properly
|
||||||
|
|
||||||
|
#### E2E Test Failures
|
||||||
|
- Check browser compatibility
|
||||||
|
- Verify element selectors
|
||||||
|
- Add explicit waits for dynamic content
|
||||||
|
|
||||||
|
### Getting Help
|
||||||
|
- Check test logs for detailed error messages
|
||||||
|
- Use browser developer tools for E2E debugging
|
||||||
|
- Review test artifacts (screenshots, videos)
|
||||||
|
- Consult framework documentation (Vitest, Playwright)
|
||||||
217
client/src/test/e2e/check-management.spec.ts
Normal file
217
client/src/test/e2e/check-management.spec.ts
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test.describe('Check Management E2E Tests', () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
|
||||||
|
// Wait for dashboard to load and expand Strategy dimension
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await expect(page.getByText('Strategic Alignment')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create a new check', async ({ page }) => {
|
||||||
|
// Click "Add Check" button for the first KPI
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
|
||||||
|
// Fill out the check form
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Test new check question?');
|
||||||
|
await page.getByLabel(/check type/i).selectOption('dropdown');
|
||||||
|
await page.getByLabel(/current value/i).selectOption('Yes');
|
||||||
|
await page.getByLabel(/expected value/i).selectOption('Yes');
|
||||||
|
await page.getByLabel(/reference url/i).fill('https://example.com/test');
|
||||||
|
await page.getByLabel(/comment/i).fill('This is a test check');
|
||||||
|
|
||||||
|
// Mark as completed
|
||||||
|
await page.getByLabel(/mark as completed/i).check();
|
||||||
|
|
||||||
|
// Submit the form
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Verify the check was created
|
||||||
|
await expect(page.getByText('Test new check question?')).toBeVisible();
|
||||||
|
await expect(page.getByText('This is a test check')).toBeVisible();
|
||||||
|
|
||||||
|
// Verify the completion checkbox is checked
|
||||||
|
const newCheckbox = page.locator('input[type="checkbox"]').last();
|
||||||
|
await expect(newCheckbox).toBeChecked();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should edit an existing check', async ({ page }) => {
|
||||||
|
// Find an existing check and click edit
|
||||||
|
const existingCheck = page.locator('div:has-text("Is the company vision clearly defined?")').first();
|
||||||
|
await existingCheck.getByTitle(/edit check/i).click();
|
||||||
|
|
||||||
|
// Modify the form
|
||||||
|
await page.getByLabel(/comment/i).clear();
|
||||||
|
await page.getByLabel(/comment/i).fill('Updated comment for this check');
|
||||||
|
await page.getByLabel(/current value/i).selectOption('Partially');
|
||||||
|
|
||||||
|
// Submit the update
|
||||||
|
await page.getByRole('button', { name: /update check/i }).click();
|
||||||
|
|
||||||
|
// Verify the changes
|
||||||
|
await expect(page.getByText('Updated comment for this check')).toBeVisible();
|
||||||
|
await expect(page.getByText('Partially')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should delete a check with confirmation', async ({ page }) => {
|
||||||
|
// Create a check first to delete
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Check to be deleted');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Wait for the check to appear
|
||||||
|
await expect(page.getByText('Check to be deleted')).toBeVisible();
|
||||||
|
|
||||||
|
// Find the delete button for this check
|
||||||
|
const checkToDelete = page.locator('div:has-text("Check to be deleted")');
|
||||||
|
const deleteButton = checkToDelete.getByTitle(/delete check/i);
|
||||||
|
|
||||||
|
// First click - should show confirmation
|
||||||
|
await deleteButton.click();
|
||||||
|
await expect(checkToDelete.getByTitle(/click again to confirm deletion/i)).toBeVisible();
|
||||||
|
|
||||||
|
// Second click - should delete
|
||||||
|
await deleteButton.click();
|
||||||
|
|
||||||
|
// Verify the check is deleted
|
||||||
|
await expect(page.getByText('Check to be deleted')).not.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should toggle check completion status', async ({ page }) => {
|
||||||
|
// Find an incomplete check
|
||||||
|
const incompleteCheck = page.locator('div:has-text("Are strategic goals documented?")').first();
|
||||||
|
const checkbox = incompleteCheck.locator('input[type="checkbox"]');
|
||||||
|
|
||||||
|
// Initially should be unchecked
|
||||||
|
await expect(checkbox).not.toBeChecked();
|
||||||
|
|
||||||
|
// Toggle to complete
|
||||||
|
await checkbox.check();
|
||||||
|
|
||||||
|
// Should now be checked and styled as completed
|
||||||
|
await expect(checkbox).toBeChecked();
|
||||||
|
|
||||||
|
// The check should have completion styling
|
||||||
|
await expect(incompleteCheck.locator('h4')).toHaveClass(/line-through/);
|
||||||
|
|
||||||
|
// Toggle back to incomplete
|
||||||
|
await checkbox.uncheck();
|
||||||
|
await expect(checkbox).not.toBeChecked();
|
||||||
|
await expect(incompleteCheck.locator('h4')).not.toHaveClass(/line-through/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle different check types correctly', async ({ page }) => {
|
||||||
|
// Test text check type
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Text check test');
|
||||||
|
await page.getByLabel(/check type/i).selectOption('text');
|
||||||
|
await page.getByLabel(/current value/i).fill('Free text value');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
await expect(page.getByText('Free text value')).toBeVisible();
|
||||||
|
|
||||||
|
// Test number check type
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Number check test');
|
||||||
|
await page.getByLabel(/check type/i).selectOption('number');
|
||||||
|
await page.getByLabel(/current value/i).fill('42');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
await expect(page.getByText('42')).toBeVisible();
|
||||||
|
|
||||||
|
// Test percentage check type
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Percentage check test');
|
||||||
|
await page.getByLabel(/check type/i).selectOption('percentage');
|
||||||
|
await page.getByLabel(/current value/i).fill('75');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
await expect(page.getByText('75%')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should cancel check creation', async ({ page }) => {
|
||||||
|
// Start creating a check
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('This should be cancelled');
|
||||||
|
|
||||||
|
// Cancel the form
|
||||||
|
await page.getByRole('button', { name: /cancel/i }).click();
|
||||||
|
|
||||||
|
// Form should disappear and check should not be created
|
||||||
|
await expect(page.getByLabel(/question\/statement/i)).not.toBeVisible();
|
||||||
|
await expect(page.getByText('This should be cancelled')).not.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle form validation', async ({ page }) => {
|
||||||
|
// Try to submit empty form
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Form should not submit (HTML5 validation will prevent it)
|
||||||
|
// The form should still be visible
|
||||||
|
await expect(page.getByLabel(/question\/statement/i)).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should update progress when checks are completed', async ({ page }) => {
|
||||||
|
// Get initial progress
|
||||||
|
const progressElement = page.locator('text=/\\d+% progress/').first();
|
||||||
|
const initialProgress = await progressElement.textContent();
|
||||||
|
|
||||||
|
// Complete an incomplete check
|
||||||
|
const incompleteCheck = page.locator('input[type="checkbox"]:not(:checked)').first();
|
||||||
|
await incompleteCheck.check();
|
||||||
|
|
||||||
|
// Progress should update
|
||||||
|
await expect(progressElement).not.toHaveText(initialProgress || '');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle external reference links', async ({ page }) => {
|
||||||
|
// Find a check with a reference URL
|
||||||
|
const checkWithReference = page.locator('div:has-text("Is the company vision clearly defined?")');
|
||||||
|
const referenceLink = checkWithReference.getByRole('link', { name: /reference/i });
|
||||||
|
|
||||||
|
if (await referenceLink.isVisible()) {
|
||||||
|
// Verify link properties
|
||||||
|
await expect(referenceLink).toHaveAttribute('target', '_blank');
|
||||||
|
await expect(referenceLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should maintain state across dimension toggles', async ({ page }) => {
|
||||||
|
// Create a check
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('State persistence test');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
await expect(page.getByText('State persistence test')).toBeVisible();
|
||||||
|
|
||||||
|
// Collapse the dimension
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
// Expand it again
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
// Check should still be there
|
||||||
|
await expect(page.getByText('State persistence test')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show empty state when no checks exist', async ({ page }) => {
|
||||||
|
// Navigate to a KPI with no checks (if any exist)
|
||||||
|
// This test assumes we can find a KPI without checks
|
||||||
|
// If all KPIs have checks, this test would need to delete all checks first
|
||||||
|
|
||||||
|
const addCheckButtons = page.getByRole('button', { name: /add check/i });
|
||||||
|
const count = await addCheckButtons.count();
|
||||||
|
|
||||||
|
// At least one KPI should be visible
|
||||||
|
expect(count).toBeGreaterThan(0);
|
||||||
|
|
||||||
|
// Check for empty state message if it exists
|
||||||
|
const emptyMessage = page.getByText('No checks yet. Click "Add Check" to get started.');
|
||||||
|
if (await emptyMessage.isVisible()) {
|
||||||
|
await expect(emptyMessage).toBeVisible();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
136
client/src/test/e2e/dashboard.spec.ts
Normal file
136
client/src/test/e2e/dashboard.spec.ts
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test.describe('Dashboard E2E Tests', () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
|
||||||
|
// Wait for the dashboard to load
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should load and display dashboard with dimensions', async ({ page }) => {
|
||||||
|
// Check main heading
|
||||||
|
await expect(page.getByRole('heading', { name: 'Due Diligence Tracking System' })).toBeVisible();
|
||||||
|
|
||||||
|
// Check export buttons
|
||||||
|
await expect(page.getByRole('button', { name: /export json/i })).toBeVisible();
|
||||||
|
await expect(page.getByRole('button', { name: /export csv/i })).toBeVisible();
|
||||||
|
|
||||||
|
// Check dimension cards are loaded
|
||||||
|
await expect(page.getByText('Strategy')).toBeVisible();
|
||||||
|
await expect(page.getByText('Engineering')).toBeVisible();
|
||||||
|
await expect(page.getByText('Sales')).toBeVisible();
|
||||||
|
|
||||||
|
// Check progress indicators
|
||||||
|
await expect(page.locator('text=/\\d+%/')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should expand and collapse dimension cards', async ({ page }) => {
|
||||||
|
const strategyCard = page.locator('button:has-text("Strategy")');
|
||||||
|
|
||||||
|
// Initially collapsed - should show right chevron
|
||||||
|
await expect(strategyCard.locator('[data-lucide="chevron-right"]')).toBeVisible();
|
||||||
|
|
||||||
|
// Expand the strategy dimension
|
||||||
|
await strategyCard.click();
|
||||||
|
|
||||||
|
// Should now show down chevron and expanded content
|
||||||
|
await expect(strategyCard.locator('[data-lucide="chevron-down"]')).toBeVisible();
|
||||||
|
await expect(page.getByText('Key Performance Indicators')).toBeVisible();
|
||||||
|
await expect(page.getByText('Open Items')).toBeVisible();
|
||||||
|
await expect(page.getByText('Completed Items')).toBeVisible();
|
||||||
|
|
||||||
|
// Collapse again
|
||||||
|
await strategyCard.click();
|
||||||
|
await expect(strategyCard.locator('[data-lucide="chevron-right"]')).toBeVisible();
|
||||||
|
await expect(page.getByText('Key Performance Indicators')).not.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should display KPIs when dimension is expanded', async ({ page }) => {
|
||||||
|
// Expand Strategy dimension
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
// Should show KPIs
|
||||||
|
await expect(page.getByText('Strategic Alignment')).toBeVisible();
|
||||||
|
await expect(page.getByText('Market Position')).toBeVisible();
|
||||||
|
|
||||||
|
// Each KPI should have an "Add Check" button
|
||||||
|
await expect(page.getByRole('button', { name: /add check/i }).first()).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show existing checks in KPIs', async ({ page }) => {
|
||||||
|
// Expand Strategy dimension
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
// Look for existing checks (from seed data)
|
||||||
|
await expect(page.getByText('Is the company vision clearly defined?')).toBeVisible();
|
||||||
|
|
||||||
|
// Check that progress indicators are shown
|
||||||
|
await expect(page.locator('text=/\\d+ checks total/')).toBeVisible();
|
||||||
|
await expect(page.locator('text=/\\d+ completed/')).toBeVisible();
|
||||||
|
await expect(page.locator('text=/\\d+% progress/')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle multiple expanded dimensions', async ({ page }) => {
|
||||||
|
// Expand multiple dimensions
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await page.locator('button:has-text("Engineering")').click();
|
||||||
|
|
||||||
|
// Both should be expanded
|
||||||
|
await expect(page.getByText('Strategic Alignment')).toBeVisible();
|
||||||
|
await expect(page.getByText('Development Practices')).toBeVisible();
|
||||||
|
|
||||||
|
// Both should show KPI content
|
||||||
|
const strategyKpis = page.locator(':text("Strategic Alignment")');
|
||||||
|
const engineeringKpis = page.locator(':text("Development Practices")');
|
||||||
|
|
||||||
|
await expect(strategyKpis).toBeVisible();
|
||||||
|
await expect(engineeringKpis).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should display loading state initially', async ({ page }) => {
|
||||||
|
// Navigate to a fresh page to catch loading state
|
||||||
|
await page.goto('/', { waitUntil: 'domcontentloaded' });
|
||||||
|
|
||||||
|
// Should show loading initially (may be very brief)
|
||||||
|
// Note: This test might be flaky due to fast loading times
|
||||||
|
const loadingText = page.getByText('Loading...');
|
||||||
|
|
||||||
|
// Either loading is visible or content loads immediately
|
||||||
|
try {
|
||||||
|
await expect(loadingText).toBeVisible({ timeout: 100 });
|
||||||
|
} catch {
|
||||||
|
// Loading was too fast, check that content is loaded
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should maintain responsive design on different screen sizes', async ({ page }) => {
|
||||||
|
// Test mobile viewport
|
||||||
|
await page.setViewportSize({ width: 375, height: 667 });
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
|
||||||
|
// Test tablet viewport
|
||||||
|
await page.setViewportSize({ width: 768, height: 1024 });
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
|
||||||
|
// Test desktop viewport
|
||||||
|
await page.setViewportSize({ width: 1920, height: 1080 });
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
|
||||||
|
// Cards should still be clickable on all sizes
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await expect(page.getByText('Strategic Alignment')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle error states gracefully', async ({ page }) => {
|
||||||
|
// Intercept and mock a database error
|
||||||
|
await page.route('**/*', route => {
|
||||||
|
// Let the request through normally (since we're using client-side SQLite)
|
||||||
|
route.continue();
|
||||||
|
});
|
||||||
|
|
||||||
|
// The application should still load
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
});
|
||||||
|
});
|
||||||
271
client/src/test/e2e/export-functionality.spec.ts
Normal file
271
client/src/test/e2e/export-functionality.spec.ts
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
import { promises as fs } from 'fs';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
test.describe('Export Functionality E2E Tests', () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should export data to JSON format', async ({ page }) => {
|
||||||
|
// Set up download handling
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
|
||||||
|
// Click JSON export button
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
|
||||||
|
// Wait for download
|
||||||
|
const download = await downloadPromise;
|
||||||
|
|
||||||
|
// Verify download properties
|
||||||
|
expect(download.suggestedFilename()).toMatch(/due-diligence-export-\d{4}-\d{2}-\d{2}\.json/);
|
||||||
|
|
||||||
|
// Save and verify file content
|
||||||
|
const downloadPath = path.join(__dirname, 'downloads', download.suggestedFilename());
|
||||||
|
await download.saveAs(downloadPath);
|
||||||
|
|
||||||
|
// Read and parse the JSON file
|
||||||
|
const fileContent = await fs.readFile(downloadPath, 'utf8');
|
||||||
|
const exportData = JSON.parse(fileContent);
|
||||||
|
|
||||||
|
// Verify JSON structure
|
||||||
|
expect(exportData).toHaveProperty('dimensions');
|
||||||
|
expect(exportData).toHaveProperty('exportedAt');
|
||||||
|
expect(Array.isArray(exportData.dimensions)).toBe(true);
|
||||||
|
expect(exportData.dimensions.length).toBeGreaterThan(0);
|
||||||
|
|
||||||
|
// Verify dimension structure
|
||||||
|
const firstDimension = exportData.dimensions[0];
|
||||||
|
expect(firstDimension).toHaveProperty('id');
|
||||||
|
expect(firstDimension).toHaveProperty('name');
|
||||||
|
expect(firstDimension).toHaveProperty('kpis');
|
||||||
|
expect(Array.isArray(firstDimension.kpis)).toBe(true);
|
||||||
|
|
||||||
|
// Verify KPI structure if KPIs exist
|
||||||
|
if (firstDimension.kpis.length > 0) {
|
||||||
|
const firstKPI = firstDimension.kpis[0];
|
||||||
|
expect(firstKPI).toHaveProperty('id');
|
||||||
|
expect(firstKPI).toHaveProperty('name');
|
||||||
|
expect(firstKPI).toHaveProperty('checks');
|
||||||
|
expect(Array.isArray(firstKPI.checks)).toBe(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(downloadPath).catch(() => {}); // Ignore errors if file doesn't exist
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should export data to CSV format', async ({ page }) => {
|
||||||
|
// Set up download handling
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
|
||||||
|
// Click CSV export button
|
||||||
|
await page.getByRole('button', { name: /export csv/i }).click();
|
||||||
|
|
||||||
|
// Wait for download
|
||||||
|
const download = await downloadPromise;
|
||||||
|
|
||||||
|
// Verify download properties
|
||||||
|
expect(download.suggestedFilename()).toMatch(/due-diligence-export-\d{4}-\d{2}-\d{2}\.csv/);
|
||||||
|
|
||||||
|
// Save and verify file content
|
||||||
|
const downloadPath = path.join(__dirname, 'downloads', download.suggestedFilename());
|
||||||
|
await download.saveAs(downloadPath);
|
||||||
|
|
||||||
|
// Read and verify CSV content
|
||||||
|
const fileContent = await fs.readFile(downloadPath, 'utf8');
|
||||||
|
const lines = fileContent.split('\n').filter(line => line.trim());
|
||||||
|
|
||||||
|
// Verify CSV structure
|
||||||
|
expect(lines.length).toBeGreaterThan(0);
|
||||||
|
|
||||||
|
// Verify header
|
||||||
|
const header = lines[0];
|
||||||
|
expect(header).toContain('Dimension');
|
||||||
|
expect(header).toContain('KPI');
|
||||||
|
expect(header).toContain('Check Question');
|
||||||
|
expect(header).toContain('Check Type');
|
||||||
|
expect(header).toContain('Current Value');
|
||||||
|
expect(header).toContain('Expected Value');
|
||||||
|
expect(header).toContain('Is Completed');
|
||||||
|
expect(header).toContain('Reference URL');
|
||||||
|
expect(header).toContain('Comment');
|
||||||
|
expect(header).toContain('Created At');
|
||||||
|
|
||||||
|
// Verify data rows if they exist
|
||||||
|
if (lines.length > 1) {
|
||||||
|
const dataRow = lines[1];
|
||||||
|
const columns = dataRow.split(',');
|
||||||
|
expect(columns.length).toBeGreaterThanOrEqual(10); // Should have at least 10 columns
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(downloadPath).catch(() => {}); // Ignore errors if file doesn't exist
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle CSV special characters correctly', async ({ page }) => {
|
||||||
|
// First, create a check with special characters
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Test with "quotes" and, commas');
|
||||||
|
await page.getByLabel(/comment/i).fill('Comment with special chars: àáâãäå, "quotes", and newlines\nSecond line');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Export CSV
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export csv/i }).click();
|
||||||
|
const download = await downloadPromise;
|
||||||
|
|
||||||
|
// Verify content handling
|
||||||
|
const downloadPath = path.join(__dirname, 'downloads', download.suggestedFilename());
|
||||||
|
await download.saveAs(downloadPath);
|
||||||
|
|
||||||
|
const fileContent = await fs.readFile(downloadPath, 'utf8');
|
||||||
|
|
||||||
|
// Check that special characters are properly escaped
|
||||||
|
expect(fileContent).toContain('"Test with ""quotes"" and, commas"');
|
||||||
|
expect(fileContent).toContain('àáâãäå');
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(downloadPath).catch(() => {});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should export with current timestamp', async ({ page }) => {
|
||||||
|
const exportTime = new Date();
|
||||||
|
|
||||||
|
// Export JSON
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
const download = await downloadPromise;
|
||||||
|
|
||||||
|
const downloadPath = path.join(__dirname, 'downloads', download.suggestedFilename());
|
||||||
|
await download.saveAs(downloadPath);
|
||||||
|
|
||||||
|
const fileContent = await fs.readFile(downloadPath, 'utf8');
|
||||||
|
const exportData = JSON.parse(fileContent);
|
||||||
|
|
||||||
|
// Verify timestamp is recent (within 1 minute)
|
||||||
|
const exportedAt = new Date(exportData.exportedAt);
|
||||||
|
const timeDiff = Math.abs(exportTime.getTime() - exportedAt.getTime());
|
||||||
|
expect(timeDiff).toBeLessThan(60000); // Less than 1 minute
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(downloadPath).catch(() => {});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle empty data gracefully', async ({ page }) => {
|
||||||
|
// This test assumes we have a way to clear all data or test with empty data
|
||||||
|
// For now, we'll just verify that export works even with minimal data
|
||||||
|
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
const download = await downloadPromise;
|
||||||
|
|
||||||
|
const downloadPath = path.join(__dirname, 'downloads', download.suggestedFilename());
|
||||||
|
await download.saveAs(downloadPath);
|
||||||
|
|
||||||
|
const fileContent = await fs.readFile(downloadPath, 'utf8');
|
||||||
|
const exportData = JSON.parse(fileContent);
|
||||||
|
|
||||||
|
// Should still have valid structure even if empty
|
||||||
|
expect(exportData).toHaveProperty('dimensions');
|
||||||
|
expect(exportData).toHaveProperty('exportedAt');
|
||||||
|
expect(Array.isArray(exportData.dimensions)).toBe(true);
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(downloadPath).catch(() => {});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should generate unique filenames for multiple exports', async ({ page }) => {
|
||||||
|
// Export multiple files quickly
|
||||||
|
const downloads = [];
|
||||||
|
|
||||||
|
// First export
|
||||||
|
let downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
downloads.push(await downloadPromise);
|
||||||
|
|
||||||
|
// Small delay to ensure different timestamps if based on seconds
|
||||||
|
await page.waitForTimeout(1000);
|
||||||
|
|
||||||
|
// Second export
|
||||||
|
downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
downloads.push(await downloadPromise);
|
||||||
|
|
||||||
|
// Verify unique filenames
|
||||||
|
const filename1 = downloads[0].suggestedFilename();
|
||||||
|
const filename2 = downloads[1].suggestedFilename();
|
||||||
|
|
||||||
|
// If exports are in the same day, filenames might be the same
|
||||||
|
// This tests that the export mechanism works consistently
|
||||||
|
expect(filename1).toMatch(/due-diligence-export-\d{4}-\d{2}-\d{2}\.json/);
|
||||||
|
expect(filename2).toMatch(/due-diligence-export-\d{4}-\d{2}-\d{2}\.json/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should export complete data hierarchy', async ({ page }) => {
|
||||||
|
// First ensure we have some data by expanding and creating checks
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
// Export JSON
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
const download = await downloadPromise;
|
||||||
|
|
||||||
|
const downloadPath = path.join(__dirname, 'downloads', download.suggestedFilename());
|
||||||
|
await download.saveAs(downloadPath);
|
||||||
|
|
||||||
|
const fileContent = await fs.readFile(downloadPath, 'utf8');
|
||||||
|
const exportData = JSON.parse(fileContent);
|
||||||
|
|
||||||
|
// Verify complete hierarchy is present
|
||||||
|
let hasCompleteHierarchy = false;
|
||||||
|
|
||||||
|
for (const dimension of exportData.dimensions) {
|
||||||
|
if (dimension.kpis && dimension.kpis.length > 0) {
|
||||||
|
for (const kpi of dimension.kpis) {
|
||||||
|
if (kpi.checks && kpi.checks.length > 0) {
|
||||||
|
hasCompleteHierarchy = true;
|
||||||
|
|
||||||
|
// Verify check structure
|
||||||
|
const check = kpi.checks[0];
|
||||||
|
expect(check).toHaveProperty('question');
|
||||||
|
expect(check).toHaveProperty('check_type');
|
||||||
|
expect(check).toHaveProperty('is_completed');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (hasCompleteHierarchy) break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We should have at least some complete hierarchy from seed data
|
||||||
|
expect(hasCompleteHierarchy).toBe(true);
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
await fs.unlink(downloadPath).catch(() => {});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle browser download restrictions', async ({ page, context }) => {
|
||||||
|
// Test that exports work even with stricter browser settings
|
||||||
|
// This is more of a smoke test since we can't easily simulate all restrictions
|
||||||
|
|
||||||
|
const exportButtons = [
|
||||||
|
page.getByRole('button', { name: /export json/i }),
|
||||||
|
page.getByRole('button', { name: /export csv/i })
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const button of exportButtons) {
|
||||||
|
// Verify button is clickable and doesn't throw errors
|
||||||
|
await expect(button).toBeEnabled();
|
||||||
|
await expect(button).toBeVisible();
|
||||||
|
|
||||||
|
// Click and verify no JavaScript errors occur
|
||||||
|
await button.click();
|
||||||
|
|
||||||
|
// Small delay to allow any potential errors to surface
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
274
client/src/test/e2e/performance.spec.ts
Normal file
274
client/src/test/e2e/performance.spec.ts
Normal file
@@ -0,0 +1,274 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test.describe('Performance E2E Tests', () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should load dashboard within performance budget', async ({ page }) => {
|
||||||
|
// Measure page load performance
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
await page.goto('/', { waitUntil: 'networkidle' });
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const loadTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Dashboard should load within 3 seconds
|
||||||
|
expect(loadTime).toBeLessThan(3000);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should expand dimensions quickly', async ({ page }) => {
|
||||||
|
const dimensionButtons = page.locator('button:has-text("Strategy"), button:has-text("Engineering"), button:has-text("Sales")');
|
||||||
|
const count = await dimensionButtons.count();
|
||||||
|
|
||||||
|
// Measure expansion performance
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Expand multiple dimensions
|
||||||
|
for (let i = 0; i < Math.min(count, 5); i++) {
|
||||||
|
await dimensionButtons.nth(i).click();
|
||||||
|
|
||||||
|
// Wait for content to appear
|
||||||
|
await expect(page.getByText('Key Performance Indicators')).toBeVisible();
|
||||||
|
}
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const expansionTime = endTime - startTime;
|
||||||
|
|
||||||
|
// All expansions should complete within 2 seconds
|
||||||
|
expect(expansionTime).toBeLessThan(2000);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle rapid user interactions', async ({ page }) => {
|
||||||
|
// Expand Strategy dimension
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await expect(page.getByText('Strategic Alignment')).toBeVisible();
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Perform rapid interactions
|
||||||
|
const addCheckButton = page.getByRole('button', { name: /add check/i }).first();
|
||||||
|
|
||||||
|
// Rapidly open and close form
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
await addCheckButton.click();
|
||||||
|
await expect(page.getByLabel(/question\/statement/i)).toBeVisible();
|
||||||
|
|
||||||
|
await page.getByRole('button', { name: /cancel/i }).click();
|
||||||
|
await expect(page.getByLabel(/question\/statement/i)).not.toBeVisible();
|
||||||
|
}
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const interactionTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Rapid interactions should complete within 3 seconds
|
||||||
|
expect(interactionTime).toBeLessThan(3000);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle form submissions efficiently', async ({ page }) => {
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Create multiple checks rapidly
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
|
||||||
|
await page.getByLabel(/question\/statement/i).fill(`Performance test check ${i + 1}`);
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Wait for check to appear
|
||||||
|
await expect(page.getByText(`Performance test check ${i + 1}`)).toBeVisible();
|
||||||
|
}
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const submissionTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Multiple form submissions should complete within 5 seconds
|
||||||
|
expect(submissionTime).toBeLessThan(5000);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should export data efficiently', async ({ page }) => {
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Test JSON export performance
|
||||||
|
const jsonDownloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
const jsonDownload = await jsonDownloadPromise;
|
||||||
|
|
||||||
|
const jsonExportTime = Date.now() - startTime;
|
||||||
|
|
||||||
|
// JSON export should complete within 2 seconds
|
||||||
|
expect(jsonExportTime).toBeLessThan(2000);
|
||||||
|
expect(jsonDownload.suggestedFilename()).toMatch(/\.json$/);
|
||||||
|
|
||||||
|
// Test CSV export performance
|
||||||
|
const csvStartTime = Date.now();
|
||||||
|
const csvDownloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export csv/i }).click();
|
||||||
|
const csvDownload = await csvDownloadPromise;
|
||||||
|
|
||||||
|
const csvExportTime = Date.now() - csvStartTime;
|
||||||
|
|
||||||
|
// CSV export should complete within 2 seconds
|
||||||
|
expect(csvExportTime).toBeLessThan(2000);
|
||||||
|
expect(csvDownload.suggestedFilename()).toMatch(/\.csv$/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should maintain responsiveness with many interactions', async ({ page }) => {
|
||||||
|
// Expand multiple dimensions
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await page.locator('button:has-text("Engineering")').click();
|
||||||
|
|
||||||
|
// Create checks in multiple KPIs
|
||||||
|
const addCheckButtons = page.getByRole('button', { name: /add check/i });
|
||||||
|
const buttonCount = await addCheckButtons.count();
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Interact with multiple KPI sections
|
||||||
|
for (let i = 0; i < Math.min(buttonCount, 3); i++) {
|
||||||
|
await addCheckButtons.nth(i).click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill(`Responsiveness test ${i + 1}`);
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Toggle completion status
|
||||||
|
const checkbox = page.locator(`div:has-text("Responsiveness test ${i + 1}") input[type="checkbox"]`);
|
||||||
|
await checkbox.check();
|
||||||
|
await checkbox.uncheck();
|
||||||
|
}
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const totalTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Multiple complex interactions should complete within 8 seconds
|
||||||
|
expect(totalTime).toBeLessThan(8000);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle browser resource constraints', async ({ page, context }) => {
|
||||||
|
// Simulate slower browser conditions
|
||||||
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Perform comprehensive workflow
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill('Resource constraint test');
|
||||||
|
await page.getByLabel(/check type/i).selectOption('dropdown');
|
||||||
|
await page.getByLabel(/current value/i).selectOption('Yes');
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
|
||||||
|
// Export data
|
||||||
|
const downloadPromise = page.waitForEvent('download');
|
||||||
|
await page.getByRole('button', { name: /export json/i }).click();
|
||||||
|
await downloadPromise;
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const workflowTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Complete workflow should finish within 6 seconds even with constraints
|
||||||
|
expect(workflowTime).toBeLessThan(6000);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should measure Core Web Vitals', async ({ page }) => {
|
||||||
|
// Navigate to page and measure performance metrics
|
||||||
|
await page.goto('/', { waitUntil: 'networkidle' });
|
||||||
|
|
||||||
|
// Measure Largest Contentful Paint (LCP)
|
||||||
|
const lcp = await page.evaluate(() => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
new PerformanceObserver((entryList) => {
|
||||||
|
const entries = entryList.getEntries();
|
||||||
|
const lastEntry = entries[entries.length - 1];
|
||||||
|
resolve(lastEntry.startTime);
|
||||||
|
}).observe({ entryTypes: ['largest-contentful-paint'] });
|
||||||
|
|
||||||
|
// Fallback timeout
|
||||||
|
setTimeout(() => resolve(0), 5000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// LCP should be under 2.5 seconds
|
||||||
|
expect(lcp).toBeLessThan(2500);
|
||||||
|
|
||||||
|
// Measure First Input Delay (FID) simulation
|
||||||
|
const startTime = Date.now();
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
const inputDelay = Date.now() - startTime;
|
||||||
|
|
||||||
|
// Simulated FID should be under 100ms
|
||||||
|
expect(inputDelay).toBeLessThan(100);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should handle memory-intensive operations', async ({ page }) => {
|
||||||
|
// Perform operations that might consume memory
|
||||||
|
const dimensionButtons = page.locator('button[class*="hover:bg-gray-100"]');
|
||||||
|
const count = await dimensionButtons.count();
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Expand all dimensions
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
await dimensionButtons.nth(i).click();
|
||||||
|
|
||||||
|
// Wait briefly to ensure rendering
|
||||||
|
await page.waitForTimeout(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create multiple checks
|
||||||
|
const addCheckButtons = page.getByRole('button', { name: /add check/i });
|
||||||
|
const checkButtonCount = await addCheckButtons.count();
|
||||||
|
|
||||||
|
for (let i = 0; i < Math.min(checkButtonCount, 5); i++) {
|
||||||
|
await addCheckButtons.nth(i).click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill(`Memory test check ${i + 1}`);
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collapse all dimensions
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
await dimensionButtons.nth(i).click();
|
||||||
|
}
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const memoryOperationTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Memory-intensive operations should complete within 10 seconds
|
||||||
|
expect(memoryOperationTime).toBeLessThan(10000);
|
||||||
|
|
||||||
|
// Page should remain responsive
|
||||||
|
await expect(page.getByText('Due Diligence Tracking System')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should maintain performance with large datasets', async ({ page }) => {
|
||||||
|
// This test simulates having many checks by creating them
|
||||||
|
await page.locator('button:has-text("Strategy")').click();
|
||||||
|
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
// Create several checks to simulate larger dataset
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
await page.getByRole('button', { name: /add check/i }).first().click();
|
||||||
|
await page.getByLabel(/question\/statement/i).fill(`Large dataset test ${i + 1}?`);
|
||||||
|
await page.getByRole('button', { name: /create check/i }).click();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Measure time to toggle all checks
|
||||||
|
const checkboxes = page.locator('input[type="checkbox"]');
|
||||||
|
const checkboxCount = await checkboxes.count();
|
||||||
|
|
||||||
|
for (let i = 0; i < checkboxCount; i++) {
|
||||||
|
await checkboxes.nth(i).check();
|
||||||
|
}
|
||||||
|
|
||||||
|
const endTime = Date.now();
|
||||||
|
const largeDatasetTime = endTime - startTime;
|
||||||
|
|
||||||
|
// Operations with larger dataset should complete within 15 seconds
|
||||||
|
expect(largeDatasetTime).toBeLessThan(15000);
|
||||||
|
});
|
||||||
|
});
|
||||||
304
client/src/test/integration/database.test.ts
Normal file
304
client/src/test/integration/database.test.ts
Normal file
@@ -0,0 +1,304 @@
|
|||||||
|
import { describe, it, expect, beforeEach } from 'vitest';
|
||||||
|
import { initDatabase, Database } from '../../database/database';
|
||||||
|
import { seedDatabase } from '../../database/seedData';
|
||||||
|
import { DataService } from '../../services/dataService';
|
||||||
|
|
||||||
|
// Mock sql.js for integration tests
|
||||||
|
const mockDatabase = {
|
||||||
|
exec: vi.fn(),
|
||||||
|
prepare: vi.fn(),
|
||||||
|
run: vi.fn(),
|
||||||
|
};
|
||||||
|
|
||||||
|
vi.mock('sql.js', () => ({
|
||||||
|
default: vi.fn(() => Promise.resolve({
|
||||||
|
Database: vi.fn().mockImplementation(() => mockDatabase),
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('Database Integration Tests', () => {
|
||||||
|
let db: Database;
|
||||||
|
let dataService: DataService;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
|
||||||
|
// Mock successful database initialization
|
||||||
|
mockDatabase.exec.mockReturnValue([]);
|
||||||
|
|
||||||
|
db = await initDatabase();
|
||||||
|
dataService = new DataService(db);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Database Schema Creation', () => {
|
||||||
|
it('should create all required tables', async () => {
|
||||||
|
await initDatabase();
|
||||||
|
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('CREATE TABLE IF NOT EXISTS dimensions')
|
||||||
|
);
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('CREATE TABLE IF NOT EXISTS kpis')
|
||||||
|
);
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('CREATE TABLE IF NOT EXISTS checks')
|
||||||
|
);
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('CREATE TABLE IF NOT EXISTS files')
|
||||||
|
);
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('CREATE TABLE IF NOT EXISTS check_types')
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create foreign key constraints', async () => {
|
||||||
|
await initDatabase();
|
||||||
|
|
||||||
|
const schemaCall = mockDatabase.exec.mock.calls[0][0];
|
||||||
|
expect(schemaCall).toContain('FOREIGN KEY (dimension_id) REFERENCES dimensions(id)');
|
||||||
|
expect(schemaCall).toContain('FOREIGN KEY (kpi_id) REFERENCES kpis(id)');
|
||||||
|
expect(schemaCall).toContain('FOREIGN KEY (reference_file_id) REFERENCES files(id)');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle database initialization errors', async () => {
|
||||||
|
mockDatabase.exec.mockImplementation(() => {
|
||||||
|
throw new Error('Database initialization failed');
|
||||||
|
});
|
||||||
|
|
||||||
|
await expect(initDatabase()).rejects.toThrow('Database initialization failed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Data Seeding', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
// Mock successful seed operations
|
||||||
|
mockDatabase.run = vi.fn();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should seed dimensions correctly', () => {
|
||||||
|
seedDatabase(db);
|
||||||
|
|
||||||
|
expect(mockDatabase.run).toHaveBeenCalledWith(
|
||||||
|
'INSERT INTO dimensions (name, icon, color, order_index) VALUES (?, ?, ?, ?)',
|
||||||
|
['Strategy', 'Briefcase', '#4F46E5', 1]
|
||||||
|
);
|
||||||
|
expect(mockDatabase.run).toHaveBeenCalledWith(
|
||||||
|
'INSERT INTO dimensions (name, icon, color, order_index) VALUES (?, ?, ?, ?)',
|
||||||
|
['Engineering', 'Code', '#F59E0B', 5]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should seed KPIs with proper relationships', () => {
|
||||||
|
seedDatabase(db);
|
||||||
|
|
||||||
|
expect(mockDatabase.run).toHaveBeenCalledWith(
|
||||||
|
'INSERT INTO kpis (dimension_id, name, description, order_index) VALUES (?, ?, ?, ?)',
|
||||||
|
[1, 'Strategic Alignment', 'Vision and mission clarity', 1]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should seed check types', () => {
|
||||||
|
seedDatabase(db);
|
||||||
|
|
||||||
|
expect(mockDatabase.run).toHaveBeenCalledWith(
|
||||||
|
'INSERT INTO check_types (name, data_type, options_json, validation_json) VALUES (?, ?, ?, ?)',
|
||||||
|
['dropdown', 'string', JSON.stringify(['Yes', 'Partially', 'No']), JSON.stringify({ required: true })]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should seed sample checks', () => {
|
||||||
|
seedDatabase(db);
|
||||||
|
|
||||||
|
expect(mockDatabase.run).toHaveBeenCalledWith(
|
||||||
|
'INSERT INTO checks (kpi_id, question, check_type, current_value, expected_value, is_completed) VALUES (?, ?, ?, ?, ?, ?)',
|
||||||
|
[1, 'Is the company vision clearly defined?', 'dropdown', undefined, 'Yes', true]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('End-to-End Data Operations', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
// Setup mock data for integration tests
|
||||||
|
const mockDimensions = [
|
||||||
|
[1, 'Strategy', 'Briefcase', '#4F46E5', 1, '2023-01-01']
|
||||||
|
];
|
||||||
|
const mockKPIs = [
|
||||||
|
[1, 1, 'Strategic Alignment', 'Vision clarity', 1, '2023-01-01']
|
||||||
|
];
|
||||||
|
const mockChecks = [
|
||||||
|
[1, 1, 'Test question?', 'dropdown', 'Yes', 'Yes', null, null, 'Test', 1, '2023-01-01', '2023-01-01']
|
||||||
|
];
|
||||||
|
|
||||||
|
mockDatabase.exec
|
||||||
|
.mockReturnValueOnce([{ columns: ['id', 'name', 'icon', 'color', 'order_index', 'created_at'], values: mockDimensions }]) // getDimensions
|
||||||
|
.mockReturnValueOnce([{ values: [[1]] }]) // KPI count
|
||||||
|
.mockReturnValueOnce([{ values: [[1, 1]] }]) // checks count
|
||||||
|
.mockReturnValueOnce([{ columns: ['id', 'dimension_id', 'name', 'description', 'order_index', 'created_at'], values: mockKPIs }]) // getKPIsByDimension
|
||||||
|
.mockReturnValueOnce([{ columns: ['id', 'kpi_id', 'question', 'check_type', 'current_value', 'expected_value', 'reference_url', 'reference_file_id', 'comment', 'is_completed', 'created_at', 'updated_at'], values: mockChecks }]); // getChecksByKPI
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should perform complete dimension statistics calculation', () => {
|
||||||
|
const dimensionsWithStats = dataService.getDimensionsWithStats();
|
||||||
|
|
||||||
|
expect(dimensionsWithStats).toHaveLength(1);
|
||||||
|
expect(dimensionsWithStats[0]).toEqual({
|
||||||
|
dimension: {
|
||||||
|
id: 1,
|
||||||
|
name: 'Strategy',
|
||||||
|
icon: 'Briefcase',
|
||||||
|
color: '#4F46E5',
|
||||||
|
order_index: 1,
|
||||||
|
created_at: '2023-01-01'
|
||||||
|
},
|
||||||
|
kpi_count: 1,
|
||||||
|
total_checks: 1,
|
||||||
|
completed_checks: 1,
|
||||||
|
progress: 100
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle complete CRUD workflow for checks', () => {
|
||||||
|
// Create
|
||||||
|
mockDatabase.exec
|
||||||
|
.mockReturnValueOnce(undefined) // INSERT
|
||||||
|
.mockReturnValueOnce([{ values: [[123]] }]); // SELECT last_insert_rowid()
|
||||||
|
|
||||||
|
const newCheckId = dataService.createCheck({
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'New test question?',
|
||||||
|
check_type: 'text',
|
||||||
|
current_value: 'Test value',
|
||||||
|
expected_value: 'Expected',
|
||||||
|
is_completed: false
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(newCheckId).toBe(123);
|
||||||
|
|
||||||
|
// Update
|
||||||
|
dataService.updateCheck(123, {
|
||||||
|
current_value: 'Updated value',
|
||||||
|
is_completed: true
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
expect.stringContaining('UPDATE checks SET')
|
||||||
|
);
|
||||||
|
|
||||||
|
// Delete
|
||||||
|
dataService.deleteCheck(123);
|
||||||
|
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledWith(
|
||||||
|
'DELETE FROM checks WHERE id = 123'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Data Integrity and Constraints', () => {
|
||||||
|
it('should maintain referential integrity between tables', () => {
|
||||||
|
// Test that we can't create a KPI without a valid dimension
|
||||||
|
const invalidKPI = {
|
||||||
|
dimension_id: 999, // Non-existent dimension
|
||||||
|
name: 'Invalid KPI',
|
||||||
|
description: 'Should fail'
|
||||||
|
};
|
||||||
|
|
||||||
|
mockDatabase.run.mockImplementation(() => {
|
||||||
|
throw new Error('FOREIGN KEY constraint failed');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => {
|
||||||
|
mockDatabase.run(
|
||||||
|
'INSERT INTO kpis (dimension_id, name, description) VALUES (?, ?, ?)',
|
||||||
|
[invalidKPI.dimension_id, invalidKPI.name, invalidKPI.description]
|
||||||
|
);
|
||||||
|
}).toThrow('FOREIGN KEY constraint failed');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle SQL injection attempts safely', () => {
|
||||||
|
const maliciousInput = "'; DROP TABLE dimensions; --";
|
||||||
|
|
||||||
|
dataService.updateCheck(1, {
|
||||||
|
comment: maliciousInput
|
||||||
|
});
|
||||||
|
|
||||||
|
// Verify that the input is properly escaped
|
||||||
|
const sqlCall = mockDatabase.exec.mock.calls[0][0];
|
||||||
|
expect(sqlCall).toContain("comment = 'O''; DROP TABLE dimensions; --'");
|
||||||
|
expect(sqlCall).not.toContain('DROP TABLE dimensions');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle special characters in data', () => {
|
||||||
|
const specialChars = "Test with 'quotes' and \"double quotes\" and ñoñó";
|
||||||
|
|
||||||
|
dataService.updateCheck(1, {
|
||||||
|
comment: specialChars
|
||||||
|
});
|
||||||
|
|
||||||
|
const sqlCall = mockDatabase.exec.mock.calls[0][0];
|
||||||
|
expect(sqlCall).toContain("'Test with ''quotes'' and \"double quotes\" and ñoñó'");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Performance and Scalability', () => {
|
||||||
|
it('should handle large datasets efficiently', () => {
|
||||||
|
// Mock a large dataset
|
||||||
|
const largeDimensionSet = Array.from({ length: 100 }, (_, i) => [
|
||||||
|
i + 1, `Dimension ${i + 1}`, 'Circle', '#000000', i + 1, '2023-01-01'
|
||||||
|
]);
|
||||||
|
|
||||||
|
mockDatabase.exec.mockReturnValue([{
|
||||||
|
columns: ['id', 'name', 'icon', 'color', 'order_index', 'created_at'],
|
||||||
|
values: largeDimensionSet
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const dimensions = dataService.getDimensions();
|
||||||
|
|
||||||
|
expect(dimensions).toHaveLength(100);
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should batch operations efficiently', () => {
|
||||||
|
// Test that multiple operations don't cause excessive database calls
|
||||||
|
const operations = [
|
||||||
|
() => dataService.updateCheck(1, { is_completed: true }),
|
||||||
|
() => dataService.updateCheck(2, { is_completed: true }),
|
||||||
|
() => dataService.updateCheck(3, { is_completed: true })
|
||||||
|
];
|
||||||
|
|
||||||
|
operations.forEach(op => op());
|
||||||
|
|
||||||
|
// Each update should result in one database call
|
||||||
|
expect(mockDatabase.exec).toHaveBeenCalledTimes(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Error Recovery and Resilience', () => {
|
||||||
|
it('should handle database connection failures gracefully', () => {
|
||||||
|
mockDatabase.exec.mockImplementation(() => {
|
||||||
|
throw new Error('Database connection lost');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => dataService.getDimensions()).toThrow('Database connection lost');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle partial data corruption', () => {
|
||||||
|
// Mock corrupted data response
|
||||||
|
mockDatabase.exec.mockReturnValue([{
|
||||||
|
columns: ['id', 'name'], // Missing expected columns
|
||||||
|
values: [[1, 'Strategy']] // Incomplete data
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const dimensions = dataService.getDimensions();
|
||||||
|
|
||||||
|
expect(dimensions).toHaveLength(1);
|
||||||
|
expect(dimensions[0].icon).toBeUndefined();
|
||||||
|
expect(dimensions[0].color).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle malformed database responses', () => {
|
||||||
|
mockDatabase.exec.mockReturnValue(null);
|
||||||
|
|
||||||
|
expect(() => dataService.getDimensions()).not.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
312
client/src/test/performance/load.test.ts
Normal file
312
client/src/test/performance/load.test.ts
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
import { DataService } from '../../services/dataService';
|
||||||
|
import { Database } from '../../database/database';
|
||||||
|
|
||||||
|
const mockDb = {
|
||||||
|
exec: vi.fn(),
|
||||||
|
prepare: vi.fn(),
|
||||||
|
run: vi.fn(),
|
||||||
|
} as unknown as Database;
|
||||||
|
|
||||||
|
describe('Performance and Load Tests', () => {
|
||||||
|
let dataService: DataService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
dataService = new DataService(mockDb);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Large Dataset Performance', () => {
|
||||||
|
it('should handle 1000+ dimensions efficiently', () => {
|
||||||
|
const largeDimensionSet = Array.from({ length: 1000 }, (_, i) => [
|
||||||
|
i + 1, `Dimension ${i + 1}`, 'Circle', '#000000', i + 1, '2023-01-01'
|
||||||
|
]);
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue([{
|
||||||
|
columns: ['id', 'name', 'icon', 'color', 'order_index', 'created_at'],
|
||||||
|
values: largeDimensionSet
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
const dimensions = dataService.getDimensions();
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(dimensions).toHaveLength(1000);
|
||||||
|
expect(end - start).toBeLessThan(100); // Should complete in less than 100ms
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle 10000+ checks efficiently', () => {
|
||||||
|
const largeCheckSet = Array.from({ length: 10000 }, (_, i) => [
|
||||||
|
i + 1, 1, `Check ${i + 1}?`, 'text', 'Current', 'Expected',
|
||||||
|
null, null, 'Comment', 0, '2023-01-01', '2023-01-01'
|
||||||
|
]);
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue([{
|
||||||
|
columns: ['id', 'kpi_id', 'question', 'check_type', 'current_value', 'expected_value',
|
||||||
|
'reference_url', 'reference_file_id', 'comment', 'is_completed', 'created_at', 'updated_at'],
|
||||||
|
values: largeCheckSet
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
const checks = dataService.getChecksByKPI(1);
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(checks).toHaveLength(10000);
|
||||||
|
expect(end - start).toBeLessThan(500); // Should complete in less than 500ms
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should calculate statistics for large datasets efficiently', () => {
|
||||||
|
// Mock 100 dimensions with comprehensive stats
|
||||||
|
const dimensions = Array.from({ length: 100 }, (_, i) => [
|
||||||
|
i + 1, `Dimension ${i + 1}`, 'Circle', '#000000', i + 1, '2023-01-01'
|
||||||
|
]);
|
||||||
|
|
||||||
|
vi.spyOn(dataService, 'getDimensions').mockReturnValue(
|
||||||
|
dimensions.map(d => ({
|
||||||
|
id: d[0] as number,
|
||||||
|
name: d[1] as string,
|
||||||
|
icon: d[2] as string,
|
||||||
|
color: d[3] as string,
|
||||||
|
order_index: d[4] as number,
|
||||||
|
created_at: d[5] as string
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
// Mock stats queries - each dimension returns random stats
|
||||||
|
(mockDb.exec as any).mockImplementation((sql: string) => {
|
||||||
|
if (sql.includes('COUNT(*) as count FROM kpis')) {
|
||||||
|
return [{ values: [[Math.floor(Math.random() * 10) + 1]] }];
|
||||||
|
}
|
||||||
|
if (sql.includes('COUNT(*) as total_checks')) {
|
||||||
|
const total = Math.floor(Math.random() * 50) + 10;
|
||||||
|
const completed = Math.floor(Math.random() * total);
|
||||||
|
return [{ values: [[total, completed]] }];
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
const dimensionsWithStats = dataService.getDimensionsWithStats();
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(dimensionsWithStats).toHaveLength(100);
|
||||||
|
expect(end - start).toBeLessThan(1000); // Should complete in less than 1 second
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Memory Usage Optimization', () => {
|
||||||
|
it('should not leak memory during repeated operations', () => {
|
||||||
|
const mockData = Array.from({ length: 100 }, (_, i) => [
|
||||||
|
i + 1, `Item ${i + 1}`, 'data', '2023-01-01'
|
||||||
|
]);
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue([{
|
||||||
|
columns: ['id', 'name', 'data', 'created_at'],
|
||||||
|
values: mockData
|
||||||
|
}]);
|
||||||
|
|
||||||
|
// Simulate repeated operations
|
||||||
|
const initialMemory = process.memoryUsage().heapUsed;
|
||||||
|
|
||||||
|
for (let i = 0; i < 1000; i++) {
|
||||||
|
dataService.getDimensions();
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalMemory = process.memoryUsage().heapUsed;
|
||||||
|
const memoryIncrease = finalMemory - initialMemory;
|
||||||
|
|
||||||
|
// Memory increase should be reasonable (less than 10MB)
|
||||||
|
expect(memoryIncrease).toBeLessThan(10 * 1024 * 1024);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle concurrent operations efficiently', async () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([{
|
||||||
|
columns: ['id', 'name'],
|
||||||
|
values: [[1, 'Test']]
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const operations = Array.from({ length: 100 }, () =>
|
||||||
|
Promise.resolve(dataService.getDimensions())
|
||||||
|
);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
const results = await Promise.all(operations);
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(results).toHaveLength(100);
|
||||||
|
expect(end - start).toBeLessThan(200); // Should complete in less than 200ms
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Database Query Optimization', () => {
|
||||||
|
it('should minimize database calls for complex operations', () => {
|
||||||
|
const dimensions = [{ id: 1, name: 'Test', icon: 'Circle', color: '#000', order_index: 1 }];
|
||||||
|
vi.spyOn(dataService, 'getDimensions').mockReturnValue(dimensions);
|
||||||
|
|
||||||
|
(mockDb.exec as any)
|
||||||
|
.mockReturnValueOnce([{ values: [[5]] }]) // KPI count
|
||||||
|
.mockReturnValueOnce([{ values: [[20, 15]] }]); // checks stats
|
||||||
|
|
||||||
|
dataService.getDimensionsWithStats();
|
||||||
|
|
||||||
|
// Should make exactly 3 database calls: 1 for dimensions, 2 for stats per dimension
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledTimes(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should batch operations when possible', () => {
|
||||||
|
const updates = [
|
||||||
|
{ id: 1, is_completed: true },
|
||||||
|
{ id: 2, is_completed: true },
|
||||||
|
{ id: 3, is_completed: false }
|
||||||
|
];
|
||||||
|
|
||||||
|
updates.forEach(update => {
|
||||||
|
dataService.updateCheck(update.id, { is_completed: update.is_completed });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Each update should result in one database call
|
||||||
|
expect(mockDb.exec).toHaveBeenCalledTimes(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Stress Testing', () => {
|
||||||
|
it('should handle rapid successive operations', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([{ columns: ['id'], values: [[1]] }]);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
|
||||||
|
// Perform 1000 rapid operations
|
||||||
|
for (let i = 0; i < 1000; i++) {
|
||||||
|
dataService.getDimensions();
|
||||||
|
}
|
||||||
|
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(end - start).toBeLessThan(1000); // Should complete in less than 1 second
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle complex nested data structures', () => {
|
||||||
|
const complexData = Array.from({ length: 50 }, (_, dimIndex) => ({
|
||||||
|
dimension: {
|
||||||
|
id: dimIndex + 1,
|
||||||
|
name: `Dimension ${dimIndex + 1}`,
|
||||||
|
kpis: Array.from({ length: 10 }, (_, kpiIndex) => ({
|
||||||
|
id: kpiIndex + 1,
|
||||||
|
name: `KPI ${kpiIndex + 1}`,
|
||||||
|
checks: Array.from({ length: 20 }, (_, checkIndex) => ({
|
||||||
|
id: checkIndex + 1,
|
||||||
|
question: `Check ${checkIndex + 1}?`,
|
||||||
|
check_type: 'text',
|
||||||
|
current_value: `Value ${checkIndex + 1}`,
|
||||||
|
is_completed: Math.random() > 0.5
|
||||||
|
}))
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
|
||||||
|
// Process complex nested structure
|
||||||
|
let totalChecks = 0;
|
||||||
|
complexData.forEach(data => {
|
||||||
|
data.dimension.kpis.forEach(kpi => {
|
||||||
|
totalChecks += kpi.checks.length;
|
||||||
|
// Simulate processing each check
|
||||||
|
kpi.checks.forEach(check => {
|
||||||
|
expect(check.question).toBeDefined();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(totalChecks).toBe(10000); // 50 * 10 * 20
|
||||||
|
expect(end - start).toBeLessThan(100); // Should complete in less than 100ms
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Edge Case Performance', () => {
|
||||||
|
it('should handle empty result sets efficiently', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([]);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
const result = dataService.getDimensions();
|
||||||
|
expect(result).toEqual([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(end - start).toBeLessThan(50); // Should be very fast for empty results
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle malformed data gracefully without performance impact', () => {
|
||||||
|
(mockDb.exec as any).mockReturnValue([{
|
||||||
|
columns: ['id'], // Missing expected columns
|
||||||
|
values: [[1], [2], [3]] // Incomplete data
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
const result = dataService.getDimensions();
|
||||||
|
expect(result).toHaveLength(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(end - start).toBeLessThan(100);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle very long strings efficiently', () => {
|
||||||
|
const longString = 'A'.repeat(10000); // 10KB string
|
||||||
|
const dataWithLongStrings = Array.from({ length: 100 }, (_, i) => [
|
||||||
|
i + 1, longString, longString, longString, i + 1, '2023-01-01'
|
||||||
|
]);
|
||||||
|
|
||||||
|
(mockDb.exec as any).mockReturnValue([{
|
||||||
|
columns: ['id', 'name', 'icon', 'color', 'order_index', 'created_at'],
|
||||||
|
values: dataWithLongStrings
|
||||||
|
}]);
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
const result = dataService.getDimensions();
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
expect(result).toHaveLength(100);
|
||||||
|
expect(result[0].name).toHaveLength(10000);
|
||||||
|
expect(end - start).toBeLessThan(200); // Should handle large strings reasonably
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Browser Performance Simulation', () => {
|
||||||
|
it('should perform well with simulated browser constraints', () => {
|
||||||
|
// Simulate slower operations as might occur in browser
|
||||||
|
const slowDbExec = vi.fn().mockImplementation(() => {
|
||||||
|
// Simulate 1ms database delay
|
||||||
|
const start = Date.now();
|
||||||
|
while (Date.now() - start < 1) {} // Busy wait
|
||||||
|
|
||||||
|
return [{
|
||||||
|
columns: ['id', 'name'],
|
||||||
|
values: Array.from({ length: 10 }, (_, i) => [i + 1, `Item ${i + 1}`])
|
||||||
|
}];
|
||||||
|
});
|
||||||
|
|
||||||
|
(mockDb.exec as any) = slowDbExec;
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
|
|
||||||
|
// Perform operations that would be common in browser
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
dataService.getDimensions();
|
||||||
|
}
|
||||||
|
|
||||||
|
const end = performance.now();
|
||||||
|
|
||||||
|
// Even with simulated delays, should complete reasonably quickly
|
||||||
|
expect(end - start).toBeLessThan(100);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
40
client/src/test/setup.ts
Normal file
40
client/src/test/setup.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import '@testing-library/jest-dom';
|
||||||
|
|
||||||
|
// Mock sql.js since it's not available in test environment
|
||||||
|
vi.mock('sql.js', () => ({
|
||||||
|
default: vi.fn(() => Promise.resolve({
|
||||||
|
Database: vi.fn().mockImplementation(() => ({
|
||||||
|
exec: vi.fn(() => []),
|
||||||
|
prepare: vi.fn(() => ({
|
||||||
|
step: vi.fn(() => false),
|
||||||
|
getAsObject: vi.fn(() => ({})),
|
||||||
|
free: vi.fn(),
|
||||||
|
bind: vi.fn(),
|
||||||
|
run: vi.fn(),
|
||||||
|
})),
|
||||||
|
run: vi.fn(),
|
||||||
|
})),
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock URL.createObjectURL for file exports
|
||||||
|
Object.defineProperty(window, 'URL', {
|
||||||
|
value: {
|
||||||
|
createObjectURL: vi.fn(() => 'mock-url'),
|
||||||
|
revokeObjectURL: vi.fn(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mock document.createElement for download links
|
||||||
|
const originalCreateElement = document.createElement;
|
||||||
|
document.createElement = vi.fn((tagName) => {
|
||||||
|
if (tagName === 'a') {
|
||||||
|
return {
|
||||||
|
href: '',
|
||||||
|
download: '',
|
||||||
|
click: vi.fn(),
|
||||||
|
style: {},
|
||||||
|
} as any;
|
||||||
|
}
|
||||||
|
return originalCreateElement.call(document, tagName);
|
||||||
|
});
|
||||||
18
client/src/test/test-utils.tsx
Normal file
18
client/src/test/test-utils.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { render, RenderOptions } from '@testing-library/react';
|
||||||
|
|
||||||
|
const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const customRender = (
|
||||||
|
ui: React.ReactElement,
|
||||||
|
options?: Omit<RenderOptions, 'wrapper'>
|
||||||
|
) => render(ui, { wrapper: AllTheProviders, ...options });
|
||||||
|
|
||||||
|
export * from '@testing-library/react';
|
||||||
|
export { customRender as render };
|
||||||
57
client/src/types/index.ts
Normal file
57
client/src/types/index.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
export interface Dimension {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
icon?: string;
|
||||||
|
color?: string;
|
||||||
|
order_index?: number;
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KPI {
|
||||||
|
id: number;
|
||||||
|
dimension_id: number;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
order_index?: number;
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Check {
|
||||||
|
id: number;
|
||||||
|
kpi_id: number;
|
||||||
|
question: string;
|
||||||
|
check_type: string;
|
||||||
|
current_value?: string;
|
||||||
|
expected_value?: string;
|
||||||
|
reference_url?: string;
|
||||||
|
reference_file_id?: number;
|
||||||
|
comment?: string;
|
||||||
|
is_completed: boolean;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileRecord {
|
||||||
|
id: number;
|
||||||
|
original_name: string;
|
||||||
|
stored_path: string;
|
||||||
|
mime_type?: string;
|
||||||
|
size_bytes?: number;
|
||||||
|
uploaded_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CheckType {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
data_type: string;
|
||||||
|
options_json?: string;
|
||||||
|
validation_json?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DimensionWithStats {
|
||||||
|
dimension: Dimension;
|
||||||
|
kpi_count: number;
|
||||||
|
total_checks: number;
|
||||||
|
completed_checks: number;
|
||||||
|
progress: number;
|
||||||
|
}
|
||||||
247
client/src/utils/__tests__/exportUtils.test.ts
Normal file
247
client/src/utils/__tests__/exportUtils.test.ts
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||||
|
import { exportToJSON, exportToCSV } from '../exportUtils';
|
||||||
|
import { DataService } from '../../services/dataService';
|
||||||
|
|
||||||
|
// Mock DataService
|
||||||
|
const mockDataService = {
|
||||||
|
getDimensions: vi.fn(),
|
||||||
|
getKPIsByDimension: vi.fn(),
|
||||||
|
getChecksByKPI: vi.fn(),
|
||||||
|
} as unknown as DataService;
|
||||||
|
|
||||||
|
// Mock data
|
||||||
|
const mockDimensions = [
|
||||||
|
{ id: 1, name: 'Strategy', icon: 'Briefcase', color: '#4F46E5' },
|
||||||
|
{ id: 2, name: 'Engineering', icon: 'Code', color: '#F59E0B' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const mockKPIs = [
|
||||||
|
{ id: 1, dimension_id: 1, name: 'Strategic Alignment', description: 'Vision clarity' },
|
||||||
|
{ id: 2, dimension_id: 1, name: 'Market Position', description: 'Competitive analysis' },
|
||||||
|
{ id: 3, dimension_id: 2, name: 'Development Practices', description: 'Coding standards' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const mockChecks = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Is vision clearly defined?',
|
||||||
|
check_type: 'dropdown',
|
||||||
|
current_value: 'Yes',
|
||||||
|
expected_value: 'Yes',
|
||||||
|
is_completed: true,
|
||||||
|
reference_url: 'https://example.com',
|
||||||
|
comment: 'Well documented',
|
||||||
|
created_at: '2023-01-01T00:00:00Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
kpi_id: 1,
|
||||||
|
question: 'Strategic goals documented?',
|
||||||
|
check_type: 'dropdown',
|
||||||
|
current_value: 'Partially',
|
||||||
|
expected_value: 'Yes',
|
||||||
|
is_completed: false,
|
||||||
|
reference_url: null,
|
||||||
|
comment: 'Needs improvement',
|
||||||
|
created_at: '2023-01-02T00:00:00Z'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
describe('exportUtils', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
|
||||||
|
// Setup DOM mocks
|
||||||
|
const mockLink = {
|
||||||
|
href: '',
|
||||||
|
download: '',
|
||||||
|
click: vi.fn(),
|
||||||
|
};
|
||||||
|
|
||||||
|
vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
|
||||||
|
if (tagName === 'a') return mockLink as any;
|
||||||
|
return document.createElement(tagName);
|
||||||
|
});
|
||||||
|
|
||||||
|
vi.spyOn(document.body, 'appendChild').mockImplementation(() => mockLink as any);
|
||||||
|
vi.spyOn(document.body, 'removeChild').mockImplementation(() => mockLink as any);
|
||||||
|
|
||||||
|
// Setup URL mock
|
||||||
|
global.URL.createObjectURL = vi.fn(() => 'mock-blob-url');
|
||||||
|
global.URL.revokeObjectURL = vi.fn();
|
||||||
|
|
||||||
|
// Setup Blob mock
|
||||||
|
global.Blob = vi.fn().mockImplementation((content, options) => ({
|
||||||
|
content,
|
||||||
|
options,
|
||||||
|
size: content[0].length,
|
||||||
|
type: options?.type || ''
|
||||||
|
})) as any;
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('exportToJSON', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
(mockDataService.getDimensions as any).mockReturnValue(mockDimensions);
|
||||||
|
(mockDataService.getKPIsByDimension as any).mockImplementation((dimensionId: number) => {
|
||||||
|
return mockKPIs.filter(kpi => kpi.dimension_id === dimensionId);
|
||||||
|
});
|
||||||
|
(mockDataService.getChecksByKPI as any).mockImplementation((kpiId: number) => {
|
||||||
|
return mockChecks.filter(check => check.kpi_id === kpiId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should export data to JSON format', () => {
|
||||||
|
exportToJSON(mockDataService);
|
||||||
|
|
||||||
|
expect(mockDataService.getDimensions).toHaveBeenCalledOnce();
|
||||||
|
expect(mockDataService.getKPIsByDimension).toHaveBeenCalledWith(1);
|
||||||
|
expect(mockDataService.getKPIsByDimension).toHaveBeenCalledWith(2);
|
||||||
|
expect(mockDataService.getChecksByKPI).toHaveBeenCalledWith(1);
|
||||||
|
expect(mockDataService.getChecksByKPI).toHaveBeenCalledWith(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create a blob with correct JSON content', () => {
|
||||||
|
exportToJSON(mockDataService);
|
||||||
|
|
||||||
|
expect(global.Blob).toHaveBeenCalledWith(
|
||||||
|
[expect.stringContaining('"dimensions"')],
|
||||||
|
{ type: 'application/json' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should trigger file download', () => {
|
||||||
|
exportToJSON(mockDataService);
|
||||||
|
|
||||||
|
expect(document.createElement).toHaveBeenCalledWith('a');
|
||||||
|
expect(global.URL.createObjectURL).toHaveBeenCalled();
|
||||||
|
expect(document.body.appendChild).toHaveBeenCalled();
|
||||||
|
expect(document.body.removeChild).toHaveBeenCalled();
|
||||||
|
expect(global.URL.revokeObjectURL).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should include exportedAt timestamp', () => {
|
||||||
|
const dateSpy = vi.spyOn(Date.prototype, 'toISOString').mockReturnValue('2023-01-01T00:00:00.000Z');
|
||||||
|
|
||||||
|
exportToJSON(mockDataService);
|
||||||
|
|
||||||
|
const blobCall = (global.Blob as any).mock.calls[0];
|
||||||
|
const jsonContent = blobCall[0][0];
|
||||||
|
expect(jsonContent).toContain('"exportedAt":"2023-01-01T00:00:00.000Z"');
|
||||||
|
|
||||||
|
dateSpy.mockRestore();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('exportToCSV', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
(mockDataService.getDimensions as any).mockReturnValue(mockDimensions);
|
||||||
|
(mockDataService.getKPIsByDimension as any).mockImplementation((dimensionId: number) => {
|
||||||
|
return mockKPIs.filter(kpi => kpi.dimension_id === dimensionId);
|
||||||
|
});
|
||||||
|
(mockDataService.getChecksByKPI as any).mockImplementation((kpiId: number) => {
|
||||||
|
return mockChecks.filter(check => check.kpi_id === kpiId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should export data to CSV format', () => {
|
||||||
|
exportToCSV(mockDataService);
|
||||||
|
|
||||||
|
expect(mockDataService.getDimensions).toHaveBeenCalledOnce();
|
||||||
|
expect(global.Blob).toHaveBeenCalledWith(
|
||||||
|
[expect.stringContaining('Dimension,KPI,Check Question')],
|
||||||
|
{ type: 'text/csv' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should include CSV headers', () => {
|
||||||
|
exportToCSV(mockDataService);
|
||||||
|
|
||||||
|
const blobCall = (global.Blob as any).mock.calls[0];
|
||||||
|
const csvContent = blobCall[0][0];
|
||||||
|
expect(csvContent).toContain('Dimension,KPI,Check Question,Check Type,Current Value,Expected Value,Is Completed,Reference URL,Comment,Created At');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should properly escape CSV values with commas', () => {
|
||||||
|
const checkWithComma = {
|
||||||
|
...mockChecks[0],
|
||||||
|
question: 'Is vision, mission clearly defined?',
|
||||||
|
comment: 'Well documented, needs review'
|
||||||
|
};
|
||||||
|
|
||||||
|
(mockDataService.getChecksByKPI as any).mockReturnValue([checkWithComma]);
|
||||||
|
|
||||||
|
exportToCSV(mockDataService);
|
||||||
|
|
||||||
|
const blobCall = (global.Blob as any).mock.calls[0];
|
||||||
|
const csvContent = blobCall[0][0];
|
||||||
|
expect(csvContent).toContain('"Is vision, mission clearly defined?"');
|
||||||
|
expect(csvContent).toContain('"Well documented, needs review"');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should properly escape CSV values with quotes', () => {
|
||||||
|
const checkWithQuotes = {
|
||||||
|
...mockChecks[0],
|
||||||
|
question: 'Is "vision" clearly defined?',
|
||||||
|
comment: 'Well "documented"'
|
||||||
|
};
|
||||||
|
|
||||||
|
(mockDataService.getChecksByKPI as any).mockReturnValue([checkWithQuotes]);
|
||||||
|
|
||||||
|
exportToCSV(mockDataService);
|
||||||
|
|
||||||
|
const blobCall = (global.Blob as any).mock.calls[0];
|
||||||
|
const csvContent = blobCall[0][0];
|
||||||
|
expect(csvContent).toContain('"Is ""vision"" clearly defined?"');
|
||||||
|
expect(csvContent).toContain('"Well ""documented"""');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle null and undefined values', () => {
|
||||||
|
const checkWithNulls = {
|
||||||
|
...mockChecks[0],
|
||||||
|
current_value: null,
|
||||||
|
reference_url: undefined,
|
||||||
|
comment: null
|
||||||
|
};
|
||||||
|
|
||||||
|
(mockDataService.getChecksByKPI as any).mockReturnValue([checkWithNulls]);
|
||||||
|
|
||||||
|
exportToCSV(mockDataService);
|
||||||
|
|
||||||
|
const blobCall = (global.Blob as any).mock.calls[0];
|
||||||
|
const csvContent = blobCall[0][0];
|
||||||
|
expect(csvContent).toContain(',,Yes,');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should convert boolean completion status to Yes/No', () => {
|
||||||
|
exportToCSV(mockDataService);
|
||||||
|
|
||||||
|
const blobCall = (global.Blob as any).mock.calls[0];
|
||||||
|
const csvContent = blobCall[0][0];
|
||||||
|
expect(csvContent).toContain(',Yes,');
|
||||||
|
expect(csvContent).toContain(',No,');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('error handling', () => {
|
||||||
|
it('should handle DataService errors gracefully in JSON export', () => {
|
||||||
|
(mockDataService.getDimensions as any).mockImplementation(() => {
|
||||||
|
throw new Error('Database error');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => exportToJSON(mockDataService)).toThrow('Database error');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle DataService errors gracefully in CSV export', () => {
|
||||||
|
(mockDataService.getDimensions as any).mockImplementation(() => {
|
||||||
|
throw new Error('Database error');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(() => exportToCSV(mockDataService)).toThrow('Database error');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
45
client/src/utils/__tests__/icons.test.ts
Normal file
45
client/src/utils/__tests__/icons.test.ts
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import { getIconComponent } from '../icons';
|
||||||
|
import {
|
||||||
|
Briefcase,
|
||||||
|
TrendingUp,
|
||||||
|
Target,
|
||||||
|
Building,
|
||||||
|
Code,
|
||||||
|
Shield,
|
||||||
|
DollarSign,
|
||||||
|
Users,
|
||||||
|
Heart,
|
||||||
|
Circle
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
describe('getIconComponent', () => {
|
||||||
|
it('should return the correct icon component for valid icon names', () => {
|
||||||
|
expect(getIconComponent('Briefcase')).toBe(Briefcase);
|
||||||
|
expect(getIconComponent('TrendingUp')).toBe(TrendingUp);
|
||||||
|
expect(getIconComponent('Target')).toBe(Target);
|
||||||
|
expect(getIconComponent('Building')).toBe(Building);
|
||||||
|
expect(getIconComponent('Code')).toBe(Code);
|
||||||
|
expect(getIconComponent('Shield')).toBe(Shield);
|
||||||
|
expect(getIconComponent('DollarSign')).toBe(DollarSign);
|
||||||
|
expect(getIconComponent('Users')).toBe(Users);
|
||||||
|
expect(getIconComponent('Heart')).toBe(Heart);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return Circle as fallback for invalid icon names', () => {
|
||||||
|
expect(getIconComponent('InvalidIcon')).toBe(Circle);
|
||||||
|
expect(getIconComponent('')).toBe(Circle);
|
||||||
|
expect(getIconComponent('undefined')).toBe(Circle);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle null and undefined inputs', () => {
|
||||||
|
expect(getIconComponent(null as any)).toBe(Circle);
|
||||||
|
expect(getIconComponent(undefined as any)).toBe(Circle);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be case-sensitive', () => {
|
||||||
|
expect(getIconComponent('briefcase')).toBe(Circle);
|
||||||
|
expect(getIconComponent('BRIEFCASE')).toBe(Circle);
|
||||||
|
expect(getIconComponent('Briefcase')).toBe(Briefcase);
|
||||||
|
});
|
||||||
|
});
|
||||||
76
client/src/utils/exportUtils.ts
Normal file
76
client/src/utils/exportUtils.ts
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import { DataService } from '../services/dataService';
|
||||||
|
|
||||||
|
export const exportToJSON = (dataService: DataService): void => {
|
||||||
|
const dimensions = dataService.getDimensions();
|
||||||
|
const exportData = {
|
||||||
|
dimensions: dimensions.map(dimension => ({
|
||||||
|
...dimension,
|
||||||
|
kpis: dataService.getKPIsByDimension(dimension.id).map(kpi => ({
|
||||||
|
...kpi,
|
||||||
|
checks: dataService.getChecksByKPI(kpi.id)
|
||||||
|
}))
|
||||||
|
})),
|
||||||
|
exportedAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
const blob = new Blob([JSON.stringify(exportData, null, 2)], {
|
||||||
|
type: 'application/json'
|
||||||
|
});
|
||||||
|
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `due-diligence-export-${new Date().toISOString().split('T')[0]}.json`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const exportToCSV = (dataService: DataService): void => {
|
||||||
|
const dimensions = dataService.getDimensions();
|
||||||
|
const rows: string[] = [
|
||||||
|
'Dimension,KPI,Check Question,Check Type,Current Value,Expected Value,Is Completed,Reference URL,Comment,Created At'
|
||||||
|
];
|
||||||
|
|
||||||
|
dimensions.forEach(dimension => {
|
||||||
|
const kpis = dataService.getKPIsByDimension(dimension.id);
|
||||||
|
kpis.forEach(kpi => {
|
||||||
|
const checks = dataService.getChecksByKPI(kpi.id);
|
||||||
|
checks.forEach(check => {
|
||||||
|
const row = [
|
||||||
|
escapeCSV(dimension.name),
|
||||||
|
escapeCSV(kpi.name),
|
||||||
|
escapeCSV(check.question),
|
||||||
|
escapeCSV(check.check_type),
|
||||||
|
escapeCSV(check.current_value || ''),
|
||||||
|
escapeCSV(check.expected_value || ''),
|
||||||
|
check.is_completed ? 'Yes' : 'No',
|
||||||
|
escapeCSV(check.reference_url || ''),
|
||||||
|
escapeCSV(check.comment || ''),
|
||||||
|
escapeCSV(check.created_at || '')
|
||||||
|
].join(',');
|
||||||
|
rows.push(row);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const csvContent = rows.join('\n');
|
||||||
|
const blob = new Blob([csvContent], { type: 'text/csv' });
|
||||||
|
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `due-diligence-export-${new Date().toISOString().split('T')[0]}.csv`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
const escapeCSV = (value: string): string => {
|
||||||
|
if (value.includes(',') || value.includes('"') || value.includes('\n')) {
|
||||||
|
return `"${value.replace(/"/g, '""')}"`;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
};
|
||||||
30
client/src/utils/icons.ts
Normal file
30
client/src/utils/icons.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import {
|
||||||
|
Briefcase,
|
||||||
|
TrendingUp,
|
||||||
|
Target,
|
||||||
|
Building,
|
||||||
|
Code,
|
||||||
|
Shield,
|
||||||
|
DollarSign,
|
||||||
|
Users,
|
||||||
|
Heart,
|
||||||
|
Circle,
|
||||||
|
LucideIcon
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const iconMap: Record<string, LucideIcon> = {
|
||||||
|
Briefcase,
|
||||||
|
TrendingUp,
|
||||||
|
Target,
|
||||||
|
Building,
|
||||||
|
Code,
|
||||||
|
Shield,
|
||||||
|
DollarSign,
|
||||||
|
Users,
|
||||||
|
Heart,
|
||||||
|
Circle
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getIconComponent = (iconName: string): LucideIcon => {
|
||||||
|
return iconMap[iconName] || Circle;
|
||||||
|
};
|
||||||
1
client/src/vite-env.d.ts
vendored
Normal file
1
client/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
11
client/tailwind.config.js
Normal file
11
client/tailwind.config.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
116
client/test-results/.last-run.json
Normal file
116
client/test-results/.last-run.json
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
{
|
||||||
|
"status": "failed",
|
||||||
|
"failedTests": [
|
||||||
|
"7e00f922d46c41134293-f58281d14b245aa51bab",
|
||||||
|
"7e00f922d46c41134293-0c7c2890095398cc9310",
|
||||||
|
"7e00f922d46c41134293-8b84f965d5ce2d56d2b5",
|
||||||
|
"7e00f922d46c41134293-0163bd20e3cc02b904b5",
|
||||||
|
"7e00f922d46c41134293-b0571510c3c7afaf5477",
|
||||||
|
"7e00f922d46c41134293-f6a68a87078cc2e6d430",
|
||||||
|
"7e00f922d46c41134293-f72972f7fafde080c106",
|
||||||
|
"7e00f922d46c41134293-f008b365744759d1dfa5",
|
||||||
|
"7e00f922d46c41134293-25efbba3087038ae8a4a",
|
||||||
|
"7e00f922d46c41134293-ac347bbbf9390fe9b672",
|
||||||
|
"7e00f922d46c41134293-e8c9bce0553599fb1a10",
|
||||||
|
"90cda532ab82d274b30b-1009189270a2425ae491",
|
||||||
|
"90cda532ab82d274b30b-cf8cbf42f3ac19b2817f",
|
||||||
|
"90cda532ab82d274b30b-980be027682d11c166a4",
|
||||||
|
"90cda532ab82d274b30b-0cad1a62809d92f98311",
|
||||||
|
"90cda532ab82d274b30b-da796b0c43cfe81d8e53",
|
||||||
|
"90cda532ab82d274b30b-be337429dd7e6ff0756b",
|
||||||
|
"90cda532ab82d274b30b-d6f9ab1cd703509a1b51",
|
||||||
|
"90cda532ab82d274b30b-75f967fe22d699ceaadc",
|
||||||
|
"12632e2f23590a06441f-52c9aece4befd9597d7e",
|
||||||
|
"12632e2f23590a06441f-a5aeb7e140fbb81973aa",
|
||||||
|
"12632e2f23590a06441f-206f69fa982c695f218b",
|
||||||
|
"12632e2f23590a06441f-5c8922293ed9f03e242d",
|
||||||
|
"12632e2f23590a06441f-b88726f4224f3a4d2690",
|
||||||
|
"12632e2f23590a06441f-8680629aa30cf8f10db3",
|
||||||
|
"12632e2f23590a06441f-9511f0169bc36a6814a8",
|
||||||
|
"12632e2f23590a06441f-0793299b6873c6dd8849",
|
||||||
|
"b15d6361b2fc38288977-d90839824693c63642d0",
|
||||||
|
"b15d6361b2fc38288977-216724d80870892f8267",
|
||||||
|
"b15d6361b2fc38288977-37b7b011e3ecd523572d",
|
||||||
|
"b15d6361b2fc38288977-65d8bbe89ff1c0a360cd",
|
||||||
|
"b15d6361b2fc38288977-41a1b94658731e85fac8",
|
||||||
|
"b15d6361b2fc38288977-b3ef1ff1fffd500bc052",
|
||||||
|
"b15d6361b2fc38288977-25381e0f667e487d0f57",
|
||||||
|
"b15d6361b2fc38288977-52dd6623a29b330aae6c",
|
||||||
|
"b15d6361b2fc38288977-093799a943a1614c9790",
|
||||||
|
"b15d6361b2fc38288977-2a130d3226604f9b2821",
|
||||||
|
"7e00f922d46c41134293-63a942745dd6b3c86f86",
|
||||||
|
"7e00f922d46c41134293-73a9e80e91fb2f9510ec",
|
||||||
|
"7e00f922d46c41134293-926821663cdef922f956",
|
||||||
|
"7e00f922d46c41134293-b793129d5dae453290e5",
|
||||||
|
"7e00f922d46c41134293-92d1806fddfb79b7d378",
|
||||||
|
"7e00f922d46c41134293-a4b2aa076b68c119ed2d",
|
||||||
|
"7e00f922d46c41134293-6f2abdffdadfed7be253",
|
||||||
|
"7e00f922d46c41134293-6f378fef1cb559fd280b",
|
||||||
|
"7e00f922d46c41134293-e3ee26dddaa3db56dfd4",
|
||||||
|
"7e00f922d46c41134293-4c3695441f267059f1e3",
|
||||||
|
"7e00f922d46c41134293-2769fe56e2415d4d1742",
|
||||||
|
"90cda532ab82d274b30b-90e00aa1eb7f6b662c27",
|
||||||
|
"90cda532ab82d274b30b-2282e98cc6cec79349b8",
|
||||||
|
"90cda532ab82d274b30b-67efa245a3e4fad4426c",
|
||||||
|
"90cda532ab82d274b30b-ce1e5dcc3fc4afbe64d6",
|
||||||
|
"90cda532ab82d274b30b-967425240a26c7c4fed5",
|
||||||
|
"90cda532ab82d274b30b-28e9a812aab71144dd2c",
|
||||||
|
"90cda532ab82d274b30b-47774e3cc09cad5f5997",
|
||||||
|
"90cda532ab82d274b30b-85e5ed8a658c35acf3e7",
|
||||||
|
"12632e2f23590a06441f-af784571129d0bea99f1",
|
||||||
|
"12632e2f23590a06441f-2ff1b16c4af9478480eb",
|
||||||
|
"12632e2f23590a06441f-b946cbf3d63a9f299b1a",
|
||||||
|
"12632e2f23590a06441f-b941bb71c364ea4623e0",
|
||||||
|
"12632e2f23590a06441f-f60f47d31917848bb7a6",
|
||||||
|
"12632e2f23590a06441f-2b4e43af157e8be0cd0c",
|
||||||
|
"12632e2f23590a06441f-44c38017f2f73b38b307",
|
||||||
|
"12632e2f23590a06441f-185d3bd57908fee78af0",
|
||||||
|
"b15d6361b2fc38288977-1808c196bf92e4c3a814",
|
||||||
|
"b15d6361b2fc38288977-4320cca9f329835ef017",
|
||||||
|
"b15d6361b2fc38288977-964f94fc47c75de7aaec",
|
||||||
|
"b15d6361b2fc38288977-10d79efac8b63aee3793",
|
||||||
|
"b15d6361b2fc38288977-bd18847cb81bc0af98d8",
|
||||||
|
"b15d6361b2fc38288977-8ebad6aee174ceeebc53",
|
||||||
|
"b15d6361b2fc38288977-96f51b0135b51b4ab4bb",
|
||||||
|
"b15d6361b2fc38288977-b4b7d9aed9b2eed1fbf6",
|
||||||
|
"b15d6361b2fc38288977-0159e1fef62e283d06c7",
|
||||||
|
"b15d6361b2fc38288977-876b4da831cdeda13847",
|
||||||
|
"7e00f922d46c41134293-b19edcf68f8e25cda503",
|
||||||
|
"7e00f922d46c41134293-2d7a07f71fc8124de88c",
|
||||||
|
"7e00f922d46c41134293-6fd9011d4009ee8ba7f6",
|
||||||
|
"7e00f922d46c41134293-dfecc4c1d039d28263b4",
|
||||||
|
"7e00f922d46c41134293-56614efb2378a94f18e8",
|
||||||
|
"7e00f922d46c41134293-758ce465607c2fbca7b2",
|
||||||
|
"7e00f922d46c41134293-79b48e246d630628d93c",
|
||||||
|
"7e00f922d46c41134293-667a94b8a6ec9413ba78",
|
||||||
|
"7e00f922d46c41134293-8d568103a281e0dc97bd",
|
||||||
|
"7e00f922d46c41134293-8adc58382af877ca5b04",
|
||||||
|
"7e00f922d46c41134293-159eb58c62c71620b0a6",
|
||||||
|
"90cda532ab82d274b30b-14e0ffe5df41f266e262",
|
||||||
|
"90cda532ab82d274b30b-ce4b0b34c18622d774e9",
|
||||||
|
"90cda532ab82d274b30b-07b0f606396cd806bf12",
|
||||||
|
"90cda532ab82d274b30b-ced0882778d458127e36",
|
||||||
|
"90cda532ab82d274b30b-074d9dff313ee1140e3e",
|
||||||
|
"90cda532ab82d274b30b-faca2f1bf622c9db2e7c",
|
||||||
|
"90cda532ab82d274b30b-506006e1346eeacbb4c4",
|
||||||
|
"90cda532ab82d274b30b-d2db419d05bc6958110a",
|
||||||
|
"12632e2f23590a06441f-57ebb5c9118f0b23fd52",
|
||||||
|
"12632e2f23590a06441f-bd77c89db0f6d50f1497",
|
||||||
|
"12632e2f23590a06441f-b3f422bab23230330c48",
|
||||||
|
"12632e2f23590a06441f-48589d4cd72a6edcda1a",
|
||||||
|
"12632e2f23590a06441f-dbba0120bf644c5cfc92",
|
||||||
|
"12632e2f23590a06441f-8890aa08cee6d78d7ad7",
|
||||||
|
"12632e2f23590a06441f-1c3be8cc93685201106b",
|
||||||
|
"12632e2f23590a06441f-988e1acc31dea0550049",
|
||||||
|
"b15d6361b2fc38288977-1ef8cb577b364bb3ca66",
|
||||||
|
"b15d6361b2fc38288977-9d5c799925dbb683b6a5",
|
||||||
|
"b15d6361b2fc38288977-15cdf819fe109e7cfbb6",
|
||||||
|
"b15d6361b2fc38288977-1aa432a9128f2bb61899",
|
||||||
|
"b15d6361b2fc38288977-4e7989b6913f7be0be1a",
|
||||||
|
"b15d6361b2fc38288977-3ffc3dbaf036dd52d60a",
|
||||||
|
"b15d6361b2fc38288977-24e152aa8f20515d2e2c",
|
||||||
|
"b15d6361b2fc38288977-2102dee55420791c03ce",
|
||||||
|
"b15d6361b2fc38288977-d0c6c45a17a267206352",
|
||||||
|
"b15d6361b2fc38288977-03d98487190d473d3dda"
|
||||||
|
]
|
||||||
|
}
|
||||||
28
client/tsconfig.app.json
Normal file
28
client/tsconfig.app.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": false,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"noUnusedParameters": false,
|
||||||
|
"erasableSyntaxOnly": false,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["**/*.test.*", "**/__tests__/**", "**/test/**"]
|
||||||
|
}
|
||||||
7
client/tsconfig.json
Normal file
7
client/tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
25
client/tsconfig.node.json
Normal file
25
client/tsconfig.node.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
18
client/vite.config.ts
Normal file
18
client/vite.config.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
/// <reference types="vitest" />
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
host: true,
|
||||||
|
allowedHosts: 'all'
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
globals: true,
|
||||||
|
environment: 'jsdom',
|
||||||
|
setupFiles: './src/test/setup.ts',
|
||||||
|
exclude: ['**/e2e/**', '**/node_modules/**'],
|
||||||
|
},
|
||||||
|
})
|
||||||
231
mockup.tsx
Normal file
231
mockup.tsx
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { ChevronDown, ChevronRight, Target, Users, Building, Code, Shield, DollarSign, Briefcase, Heart, TrendingUp } from 'lucide-react';
|
||||||
|
|
||||||
|
const ExecutiveDashboard = () => {
|
||||||
|
const [expandedDimension, setExpandedDimension] = useState(null);
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
strategy: { kpis: 6, open: 15, completed: 15, progress: 50 },
|
||||||
|
operational: {
|
||||||
|
sales: { kpis: 3, open: 5, completed: 3, progress: 38, icon: TrendingUp, shade: '#10B981' },
|
||||||
|
product: { kpis: 5, open: 19, completed: 5, progress: 21, icon: Target, shade: '#3B82F6' },
|
||||||
|
organization: { kpis: 5, open: 5, completed: 5, progress: 50, icon: Building, shade: '#8B5CF6' },
|
||||||
|
engineering: { kpis: 5, open: 28, completed: 4, progress: 13, icon: Code, shade: '#F59E0B' },
|
||||||
|
devops: { kpis: 3, open: 6, completed: 3, progress: 33, icon: Shield, shade: '#EF4444' },
|
||||||
|
cyber: { kpis: 6, open: 29, completed: 6, progress: 17, icon: Shield, shade: '#6B7280' },
|
||||||
|
finance: { kpis: 13, open: 3, completed: 13, progress: 81, icon: DollarSign, shade: '#059669' }
|
||||||
|
},
|
||||||
|
foundation: {
|
||||||
|
people: { kpis: 5, open: 7, completed: 5, progress: 42, icon: Users, shade: '#DC2626' },
|
||||||
|
culture: { kpis: 3, open: 2, completed: 3, progress: 60, icon: Heart, shade: '#7C3AED' }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleDimension = (dimension) => {
|
||||||
|
setExpandedDimension(expandedDimension === dimension ? null : dimension);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProgressBar = ({ progress, shade = '#333333', height = '8px' }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bg-gray-200 rounded-full relative overflow-hidden"
|
||||||
|
style={{ height, width: '96px' }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full transition-all duration-300 ease-in-out"
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(progress, 100)}%`,
|
||||||
|
backgroundColor: shade
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const DetailedView = () => (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Strategy Section */}
|
||||||
|
<div className="bg-white rounded-xl border-2 border-gray-300 p-6 shadow-sm">
|
||||||
|
<div className="border-2 border-gray-400 rounded-lg">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleDimension('strategy')}
|
||||||
|
className="w-full p-4 flex items-center justify-between hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="p-2 border-2 border-gray-400 rounded-full bg-gray-100">
|
||||||
|
<Briefcase className="w-5 h-5 text-gray-700" />
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<h4 className="font-bold text-gray-900 text-lg">Strategy</h4>
|
||||||
|
<p className="text-sm text-gray-700 font-medium">{data.strategy.kpis} KPIs • {data.strategy.open + data.strategy.completed} total items</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-bold text-xl text-gray-900">{Math.round(data.strategy.progress)}%</div>
|
||||||
|
<div className="w-24">
|
||||||
|
<ProgressBar progress={data.strategy.progress} shade="#4F46E5" height="6px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{expandedDimension === 'strategy' ? <ChevronDown className="w-5 h-5 text-gray-600" /> : <ChevronRight className="w-5 h-5 text-gray-600" />}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{expandedDimension === 'strategy' && (
|
||||||
|
<div className="px-4 pb-4 border-t-2 border-gray-300 bg-gray-50 rounded-b-lg">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-900">{data.strategy.kpis}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Key Performance Indicators</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-700">{data.strategy.open}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Open Items</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-900">{data.strategy.completed}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Completed Items</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* All Operational Dimensions */}
|
||||||
|
<div className="bg-white rounded-xl border-2 border-gray-300 p-6 shadow-sm">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Object.entries(data.operational).map(([name, dim]) => {
|
||||||
|
const Icon = dim.icon;
|
||||||
|
const isExpanded = expandedDimension === name;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={name} className="border-2 border-gray-400 rounded-lg">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleDimension(name)}
|
||||||
|
className="w-full p-4 flex items-center justify-between hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="p-2 border-2 border-gray-400 rounded-full bg-gray-100">
|
||||||
|
<Icon className="w-5 h-5" style={{ color: dim.shade }} />
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<h4 className="font-bold text-gray-900 capitalize">{name}</h4>
|
||||||
|
<p className="text-sm text-gray-700 font-medium">{dim.kpis} KPIs • {dim.open + dim.completed} total items</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-bold text-lg" style={{ color: dim.shade }}>{Math.round(dim.progress)}%</div>
|
||||||
|
<div className="w-24">
|
||||||
|
<ProgressBar progress={dim.progress} shade={dim.shade} height="4px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isExpanded ? <ChevronDown className="w-5 h-5 text-gray-600" /> : <ChevronRight className="w-5 h-5 text-gray-600" />}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="px-4 pb-4 border-t-2 border-gray-300 bg-gray-50 rounded-b-lg">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold" style={{ color: dim.shade }}>{dim.kpis}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Key Performance Indicators</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-700">{dim.open}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Open Items</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-900">{dim.completed}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Completed Items</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Foundation Dimensions */}
|
||||||
|
<div className="bg-white rounded-xl border-2 border-gray-300 p-6 shadow-sm">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Object.entries(data.foundation).map(([name, dim]) => {
|
||||||
|
const Icon = dim.icon;
|
||||||
|
const isExpanded = expandedDimension === name;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={name} className="border-2 border-gray-400 rounded-lg">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleDimension(name)}
|
||||||
|
className="w-full p-4 flex items-center justify-between hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="p-2 border-2 border-gray-400 rounded-full bg-gray-100">
|
||||||
|
<Icon className="w-5 h-5" style={{ color: dim.shade }} />
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<h4 className="font-bold text-gray-900 capitalize">{name}</h4>
|
||||||
|
<p className="text-sm text-gray-700 font-medium">{dim.kpis} KPIs • {dim.open + dim.completed} total items</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-bold text-lg" style={{ color: dim.shade }}>{Math.round(dim.progress)}%</div>
|
||||||
|
<div className="w-24">
|
||||||
|
<ProgressBar progress={dim.progress} shade={dim.shade} height="4px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isExpanded ? <ChevronDown className="w-5 h-5 text-gray-600" /> : <ChevronRight className="w-5 h-5 text-gray-600" />}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="px-4 pb-4 border-t-2 border-gray-300 bg-gray-50 rounded-b-lg">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold" style={{ color: dim.shade }}>{dim.kpis}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Key Performance Indicators</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-700">{dim.open}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Open Items</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 bg-white rounded-lg border-2 border-gray-300">
|
||||||
|
<div className="text-3xl font-bold text-gray-900">{dim.completed}</div>
|
||||||
|
<div className="text-sm text-gray-700 font-medium">Completed Items</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-6 print:bg-white print:p-4">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<style jsx>{`
|
||||||
|
@media print {
|
||||||
|
body { -webkit-print-color-adjust: exact; }
|
||||||
|
.shadow-sm { box-shadow: none !important; }
|
||||||
|
.shadow-lg { box-shadow: none !important; }
|
||||||
|
.hover\\:bg-gray-100:hover { background-color: transparent !important; }
|
||||||
|
button { cursor: default !important; }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<DetailedView />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExecutiveDashboard;
|
||||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "due-diligence-tracker",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {}
|
||||||
|
}
|
||||||
389
prd.md
Normal file
389
prd.md
Normal file
@@ -0,0 +1,389 @@
|
|||||||
|
# Due Diligence Tracking System
|
||||||
|
## Product Requirements Document (PRD)
|
||||||
|
|
||||||
|
### 1. Executive Summary
|
||||||
|
|
||||||
|
A web-based due diligence tracking system that enables systematic evaluation of corporate dimensions through KPIs and checks. The system provides a dashboard overview of progress across multiple dimensions with drill-down capabilities to individual checks.
|
||||||
|
|
||||||
|
### 2. System Architecture
|
||||||
|
|
||||||
|
#### 2.1 Technology Stack
|
||||||
|
- **Frontend**: React with TypeScript
|
||||||
|
- **Styling**: Tailwind CSS
|
||||||
|
- **Database**: SQLite (via sql.js for browser compatibility)
|
||||||
|
- **File Storage**: Local file system (server-side)
|
||||||
|
- **Build Tool**: Vite
|
||||||
|
- **Deployment**: Self-hosted on dedicated server
|
||||||
|
|
||||||
|
#### 2.2 Data Architecture
|
||||||
|
```
|
||||||
|
Database: SQLite
|
||||||
|
├── dimensions (id, name, order, created_at)
|
||||||
|
├── kpis (id, dimension_id, name, order, created_at)
|
||||||
|
├── checks (id, kpi_id, question, check_type, current_value, expected_value,
|
||||||
|
│ reference_url, reference_file_id, comment, is_completed, created_at, updated_at)
|
||||||
|
├── check_types (id, name, data_type, options_json)
|
||||||
|
└── files (id, original_name, stored_path, mime_type, size_bytes, uploaded_at)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Data Model
|
||||||
|
|
||||||
|
#### 3.1 Hierarchy
|
||||||
|
- **Dimension** → **KPIs** → **Checks** (strict 3-level hierarchy)
|
||||||
|
- One-to-many relationships throughout
|
||||||
|
- No cross-references between checks and KPIs
|
||||||
|
|
||||||
|
#### 3.2 Check Structure
|
||||||
|
Each check contains:
|
||||||
|
1. **Question/Statement** (text): The evaluation criteria
|
||||||
|
2. **Current Value** (dynamic type based on check_type)
|
||||||
|
3. **Expected Value** (dynamic type based on check_type)
|
||||||
|
4. **Reference** (URL or file upload)
|
||||||
|
5. **Comment** (text): Additional notes
|
||||||
|
6. **Is Completed** (boolean): Manual completion flag
|
||||||
|
|
||||||
|
#### 3.3 Check Types
|
||||||
|
- **Text**: Free-form text input
|
||||||
|
- **Dropdown**: Predefined options stored in JSON
|
||||||
|
- **Number**: Numeric input with optional min/max
|
||||||
|
- **Percentage**: 0-100 with % display
|
||||||
|
|
||||||
|
Example check_types configuration:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"development_method": {
|
||||||
|
"type": "dropdown",
|
||||||
|
"options": ["Traditional", "Agile", "Waterfall", "Hybrid"]
|
||||||
|
},
|
||||||
|
"team_size": {
|
||||||
|
"type": "number",
|
||||||
|
"min": 1,
|
||||||
|
"max": 1000
|
||||||
|
},
|
||||||
|
"completion_rate": {
|
||||||
|
"type": "percentage"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Core Features
|
||||||
|
|
||||||
|
#### 4.1 Dashboard View
|
||||||
|
- **Overview Cards**: Display each dimension with:
|
||||||
|
- Icon and name
|
||||||
|
- KPI count
|
||||||
|
- Total items (open + completed)
|
||||||
|
- Progress percentage
|
||||||
|
- Visual progress bar
|
||||||
|
- **Expandable Sections**: Click to reveal KPI details
|
||||||
|
- **Progress Calculation**: (Completed checks / Total checks) × 100%
|
||||||
|
|
||||||
|
#### 4.2 Check Management
|
||||||
|
- **Add Check**: Form with dynamic fields based on check type
|
||||||
|
- **Edit Check**: In-place editing with validation
|
||||||
|
- **Complete Check**: Checkbox to mark as done
|
||||||
|
- **Bulk Actions**: Select multiple checks for completion/deletion
|
||||||
|
|
||||||
|
#### 4.3 File Handling
|
||||||
|
- **Upload**: Drag-and-drop or click to upload
|
||||||
|
- **File Types**: All types accepted (max 100MB)
|
||||||
|
- **Storage**: Server file system with database reference
|
||||||
|
- **Preview**: Quick preview for common formats (PDF, images)
|
||||||
|
|
||||||
|
### 5. User Interface
|
||||||
|
|
||||||
|
#### 5.1 Design System Options
|
||||||
|
|
||||||
|
**Option A: Professional Blue**
|
||||||
|
- Primary: #3B82F6 (Blue)
|
||||||
|
- Success: #10B981 (Green)
|
||||||
|
- Warning: #F59E0B (Amber)
|
||||||
|
- Error: #EF4444 (Red)
|
||||||
|
- Neutral: Gray scale
|
||||||
|
|
||||||
|
**Option B: Modern Purple**
|
||||||
|
- Primary: #8B5CF6 (Purple)
|
||||||
|
- Success: #10B981 (Green)
|
||||||
|
- Warning: #F59E0B (Amber)
|
||||||
|
- Error: #EF4444 (Red)
|
||||||
|
- Neutral: Slate scale
|
||||||
|
|
||||||
|
**Option C: Corporate Dark**
|
||||||
|
- Primary: #1F2937 (Dark Gray)
|
||||||
|
- Success: #059669 (Emerald)
|
||||||
|
- Warning: #D97706 (Amber)
|
||||||
|
- Error: #DC2626 (Red)
|
||||||
|
- Neutral: Gray scale
|
||||||
|
|
||||||
|
#### 5.2 Layout Structure
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Header (Logo, Title, Actions) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐│
|
||||||
|
│ │Strategy │ │ Sales │ │Product ││ <- Dimension Cards
|
||||||
|
│ └─────────┘ └─────────┘ └─────────┘│
|
||||||
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐│
|
||||||
|
│ │Engineer │ │ DevOps │ │ Cyber ││
|
||||||
|
│ └─────────┘ └─────────┘ └─────────┘│
|
||||||
|
│ ┌─────────┐ ┌─────────┐ │
|
||||||
|
│ │ People │ │Culture │ │
|
||||||
|
│ └─────────┘ └─────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
Expanded View:
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ▼ Engineering │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ KPI: Development Efficiency │
|
||||||
|
│ ├─ Check 1: Dev methodology │
|
||||||
|
│ ├─ Check 2: Sprint velocity │
|
||||||
|
│ └─ Check 3: Code coverage │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Functional Requirements
|
||||||
|
|
||||||
|
#### 6.1 Phase 1 (MVP)
|
||||||
|
- [ ] Dashboard with all dimensions
|
||||||
|
- [ ] Expandable dimension views
|
||||||
|
- [ ] Add/Edit/Complete checks
|
||||||
|
- [ ] File upload and reference
|
||||||
|
- [ ] Progress tracking
|
||||||
|
- [ ] Data persistence in SQLite
|
||||||
|
- [ ] Export data to JSON/CSV
|
||||||
|
|
||||||
|
#### 6.2 Phase 2 (Future)
|
||||||
|
- [ ] Configurable dimensions
|
||||||
|
- [ ] Advanced queries and filters
|
||||||
|
- [ ] PDF report generation
|
||||||
|
- [ ] Historical progress tracking
|
||||||
|
- [ ] Multi-user support
|
||||||
|
- [ ] Check templates
|
||||||
|
- [ ] Automated reminders
|
||||||
|
|
||||||
|
### 7. Technical Implementation
|
||||||
|
|
||||||
|
#### 7.1 Database Schema
|
||||||
|
```sql
|
||||||
|
-- Dimensions table
|
||||||
|
CREATE TABLE dimensions (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
icon TEXT,
|
||||||
|
color TEXT,
|
||||||
|
order_index INTEGER,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
-- KPIs table
|
||||||
|
CREATE TABLE kpis (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
dimension_id INTEGER NOT NULL,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
order_index INTEGER,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (dimension_id) REFERENCES dimensions(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Checks table
|
||||||
|
CREATE TABLE checks (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
kpi_id INTEGER NOT NULL,
|
||||||
|
question TEXT NOT NULL,
|
||||||
|
check_type TEXT NOT NULL,
|
||||||
|
current_value TEXT,
|
||||||
|
expected_value TEXT,
|
||||||
|
reference_url TEXT,
|
||||||
|
reference_file_id INTEGER,
|
||||||
|
comment TEXT,
|
||||||
|
is_completed BOOLEAN DEFAULT 0,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (kpi_id) REFERENCES kpis(id),
|
||||||
|
FOREIGN KEY (reference_file_id) REFERENCES files(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Files table
|
||||||
|
CREATE TABLE files (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
original_name TEXT NOT NULL,
|
||||||
|
stored_path TEXT NOT NULL,
|
||||||
|
mime_type TEXT,
|
||||||
|
size_bytes INTEGER,
|
||||||
|
uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Check types configuration
|
||||||
|
CREATE TABLE check_types (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
name TEXT NOT NULL UNIQUE,
|
||||||
|
data_type TEXT NOT NULL,
|
||||||
|
options_json TEXT,
|
||||||
|
validation_json TEXT
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 7.2 API Endpoints
|
||||||
|
```
|
||||||
|
GET /api/dimensions
|
||||||
|
GET /api/dimensions/:id/kpis
|
||||||
|
GET /api/kpis/:id/checks
|
||||||
|
POST /api/checks
|
||||||
|
PUT /api/checks/:id
|
||||||
|
DELETE /api/checks/:id
|
||||||
|
POST /api/files/upload
|
||||||
|
GET /api/files/:id
|
||||||
|
GET /api/export/:format (json|csv)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8. Non-Functional Requirements
|
||||||
|
|
||||||
|
#### 8.1 Performance
|
||||||
|
- Dashboard load time < 2 seconds
|
||||||
|
- Check updates < 500ms
|
||||||
|
- Support 10,000+ checks without degradation
|
||||||
|
|
||||||
|
#### 8.2 Security
|
||||||
|
- File upload validation
|
||||||
|
- SQL injection prevention
|
||||||
|
- XSS protection
|
||||||
|
- File size limits (100MB)
|
||||||
|
|
||||||
|
#### 8.3 Usability
|
||||||
|
- Responsive design (mobile, tablet, desktop)
|
||||||
|
- Keyboard navigation support
|
||||||
|
- Print-friendly views
|
||||||
|
- Intuitive drag-and-drop
|
||||||
|
|
||||||
|
### 9. Initial Data Structure
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"dimensions": [
|
||||||
|
{
|
||||||
|
"name": "Strategy",
|
||||||
|
"icon": "Briefcase",
|
||||||
|
"kpis": [
|
||||||
|
{
|
||||||
|
"name": "Strategic Alignment",
|
||||||
|
"checks": [
|
||||||
|
{
|
||||||
|
"question": "Is the company vision clearly defined?",
|
||||||
|
"check_type": "dropdown",
|
||||||
|
"options": ["Yes", "Partially", "No"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Sales",
|
||||||
|
"icon": "TrendingUp",
|
||||||
|
"kpis": [
|
||||||
|
{
|
||||||
|
"name": "Sales Performance",
|
||||||
|
"checks": [
|
||||||
|
{
|
||||||
|
"question": "Monthly revenue growth rate",
|
||||||
|
"check_type": "percentage"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Engineering",
|
||||||
|
"icon": "Code",
|
||||||
|
"kpis": [
|
||||||
|
{
|
||||||
|
"name": "Development Practices",
|
||||||
|
"checks": [
|
||||||
|
{
|
||||||
|
"question": "Development methodology",
|
||||||
|
"check_type": "dropdown",
|
||||||
|
"options": ["Traditional", "Agile", "Waterfall", "Hybrid"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Average sprint velocity",
|
||||||
|
"check_type": "number"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 10. Development Roadmap
|
||||||
|
|
||||||
|
#### Week 1-2: Foundation
|
||||||
|
- Set up project structure
|
||||||
|
- Implement SQLite integration
|
||||||
|
- Create basic UI components
|
||||||
|
- Dashboard layout
|
||||||
|
|
||||||
|
#### Week 3-4: Core Features
|
||||||
|
- Check CRUD operations
|
||||||
|
- File upload system
|
||||||
|
- Progress calculations
|
||||||
|
- Expand/collapse functionality
|
||||||
|
|
||||||
|
#### Week 5-6: Polish & Testing
|
||||||
|
- Validation rules
|
||||||
|
- Export functionality
|
||||||
|
- Responsive design
|
||||||
|
- Performance optimization
|
||||||
|
|
||||||
|
### 11. Success Metrics
|
||||||
|
|
||||||
|
- **Efficiency**: 50% reduction in due diligence tracking time
|
||||||
|
- **Completeness**: 100% of checks documented
|
||||||
|
- **Visibility**: Real-time progress tracking
|
||||||
|
- **Usability**: < 5 minute onboarding time
|
||||||
|
|
||||||
|
### 12. Appendix
|
||||||
|
|
||||||
|
#### Sample Check Types Configuration
|
||||||
|
```javascript
|
||||||
|
const checkTypes = {
|
||||||
|
text: {
|
||||||
|
component: 'TextInput',
|
||||||
|
validation: null
|
||||||
|
},
|
||||||
|
dropdown: {
|
||||||
|
component: 'SelectInput',
|
||||||
|
validation: 'requiredOption'
|
||||||
|
},
|
||||||
|
number: {
|
||||||
|
component: 'NumberInput',
|
||||||
|
validation: 'numeric'
|
||||||
|
},
|
||||||
|
percentage: {
|
||||||
|
component: 'PercentageInput',
|
||||||
|
validation: 'range:0:100'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
#### File Structure
|
||||||
|
```
|
||||||
|
due-diligence-tracker/
|
||||||
|
├── client/
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── components/
|
||||||
|
│ │ ├── pages/
|
||||||
|
│ │ ├── hooks/
|
||||||
|
│ │ ├── utils/
|
||||||
|
│ │ └── types/
|
||||||
|
│ └── public/
|
||||||
|
├── server/
|
||||||
|
│ ├── api/
|
||||||
|
│ ├── db/
|
||||||
|
│ ├── uploads/
|
||||||
|
│ └── utils/
|
||||||
|
└── shared/
|
||||||
|
└── types/
|
||||||
|
```
|
||||||
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