Index Dashboard — Preview

📁 File Structure 24 files

index-dashboard/ ├── LICENSE ├── README.md ├── package.json ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── CompositionPie.tsx │ │ ├── DriftMonitor.tsx │ │ ├── FeeTracker.tsx │ │ ├── HolderTable.tsx │ │ ├── Layout.tsx │ │ ├── NAVChart.tsx │ │ └── RebalanceTimeline.tsx │ ├── hooks/ │ │ ├── useFeeAccrual.ts │ │ ├── useIndex.ts │ │ └── useIndexHistory.ts │ ├── lib/ │ │ ├── constants.ts │ │ └── format.ts │ ├── main.tsx │ ├── pages/ │ │ └── Dashboard.tsx │ ├── styles/ │ │ └── globals.css │ └── types/ │ └── index.ts ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

index-dashboard

Real-time React dashboard for tokenized index monitoring — NAV tracking, composition, drift, fee accrual, and rebalance history.

Price: $12.99 | Store: index-lab | Product #4

Overview

index-dashboard is a production-ready React dashboard template for monitoring tokenized index portfolios. It connects directly to index token contracts via wagmi/viem, displays real-time on-chain data, and renders historical charts using Recharts.

Features

Feature	Description
NAV Tracking	Net Asset Value with 24h delta and historical chart
Composition View	Pie chart of token weights with live prices
Drift Monitor	Real-time component drift vs target with alert thresholds
Fee Tracker	Streaming fee accrual visualization and projections
Holder Table	Top holders with share percentages
Rebalance Timeline	Historical rebalance events with trade details
Dark Theme	CryptoForge branded dark UI with responsive layout

Views

1. Dashboard — KPI cards (NAV, AUM, components, holders) + NAV chart + composition pie

2. Drift Monitor — Per-component drift bars with configurable alert thresholds

3. Fee Tracker — Streaming fee configuration, accrued fees, and projection chart

4. Rebalance Timeline — Historical rebalance events with trade volume and gas cost

Installation


# Clone the product
cp -r index-dashboard/ my-index-dashboard/
cd my-index-dashboard

# Install dependencies
npm install

# Start development server
npm run dev

The dashboard opens at http://localhost:3000.

Prerequisites

Node.js 18+
npm 9+ or pnpm 8+
An RPC endpoint (Alchemy, Infura, or public)

Configuration

1. Set your index token address

... continues with setup instructions, usage examples, and more.

📄 Code Sample .js preview

tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], darkMode: "class", theme: { extend: { colors: { // CryptoForge brand palette — dark theme first cf: { bg: { DEFAULT: "#0D0D1A", card: "#13132B", hover: "#1A1A3E", input: "#0A0A15", }, primary: { DEFAULT: "#FF6B00", light: "#FF8A33", dark: "#CC5500", muted: "rgba(255, 107, 0, 0.15)", }, accent: { DEFAULT: "#FFD700", light: "#FFE44D", muted: "rgba(255, 215, 0, 0.15)", }, text: { DEFAULT: "#E8E8F0", muted: "#8888AA", dim: "#555577", }, success: "#00D97E", danger: "#FF4D6A", warning: "#FFB020", border: "#2A2A4A", }, }, fontFamily: { sans: ['"Inter"', "system-ui", "-apple-system", "sans-serif"], mono: ['"JetBrains Mono"', '"Fira Code"', "monospace"], }, boxShadow: { glow: "0 0 20px rgba(255, 107, 0, 0.15)", "glow-accent": "0 0 20px rgba(255, 215, 0, 0.15)", }, animation: { "pulse-slow": "pulse 3s ease-in-out infinite", }, }, }, # ... 3 more lines ...