← Back to all products
$10
Coverage Dashboard
Dashboard for coverage positions, claims history, pool health, and premium earnings.
TypeScriptMarkdownJSONJavaScriptReact
📁 File Structure 25 files
coverage-dashboard/
├── LICENSE
├── README.md
├── package.json
├── security-notes.md
├── src/
│ ├── App.tsx
│ ├── components/
│ │ ├── ClaimList.tsx
│ │ ├── Layout.tsx
│ │ ├── PolicyTable.tsx
│ │ ├── PoolChart.tsx
│ │ ├── RiskBreakdown.tsx
│ │ └── StatCard.tsx
│ ├── hooks/
│ │ ├── useClaims.ts
│ │ ├── usePolicies.ts
│ │ └── usePoolData.ts
│ ├── lib/
│ │ ├── constants.ts
│ │ └── format.ts
│ ├── main.tsx
│ ├── pages/
│ │ ├── ClaimsPage.tsx
│ │ ├── DashboardPage.tsx
│ │ └── PoliciesPage.tsx
│ ├── styles/
│ │ └── globals.css
│ └── types/
│ └── index.ts
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
📖 Documentation Preview README excerpt
Coverage Dashboard
React dashboard: active policies, premium income, claims ratio, utilization, risk breakdown.
Quick Start
npm install
npm run dev
Features
- Pool overview stats (capital, exposure, utilization, premium income)
- Historical charts (capital, utilization, premium income trends)
- Risk tier breakdown pie chart
- Policy listing with status and risk tier
- Claims list with voting progress
- Dark theme, CryptoForge branded
Stack
React 18, TypeScript, Vite, TailwindCSS, Recharts, wagmi/viem
License
MIT
📄 Code Sample .js preview
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{ts,tsx}', './index.html'],
theme: {
extend: {
colors: {
'cf-primary': '#FF6B00',
'cf-secondary': '#1A1A2E',
'cf-accent': '#FFD700',
'cf-bg': '#0D0D1A',
'cf-surface': '#141420',
'cf-surface-2': '#1E1E2E',
'cf-text': '#E0E0E0',
'cf-muted': '#8888AA',
'cf-success': '#00E676',
'cf-warning': '#FF9100',
'cf-error': '#FF1744',
},
fontFamily: {
heading: ['JetBrains Mono', 'monospace'],
body: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
};