# CH-09 & CH-10: Finance Charts — Figma Production Specs

---

## 1. CH-09: DUAL LINE — Financial Projection

### Use Case
AdminDashboard (ADM-01) and ADM-22 Invoices.

### Chart Config

```javascript
{
    chart: { type: 'line', height: 328 },
    series: [
        {
            name: 'Realized Revenue',
            data: [12000, 15000, 18000, 22000, 25000, 28000],
            color: '#22C55E',
            lineWidth: 3,
            curve: 'smooth'
        },
        {
            name: 'Projected Revenue',
            data: [14000, 17000, 20000, 24000, 27000, 30000],
            color: '#94A3B8',
            lineWidth: 2,
            lineDashArray: [8, 4],
            curve: 'smooth'
        }
    ],
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        labels: { style: { colors: '#64748B', fontSize: '12px' } }
    },
    yaxis: {
        labels: {
            formatter: (v) => '₵ ' + v.toLocaleString(),
            style: { colors: '#64748B', fontSize: '12px' }
        },
        min: 0
    },
    tooltip: {
        shared: true,
        y: { formatter: (v) => '₵ ' + v.toLocaleString() }
    },
    legend: { position: 'bottom', horizontalAlign: 'center' },
    grid: { borderColor: '#E2E8F0', strokeDashArray: 4 },
    stroke: { width: [3, 2] }
}
```

### Visual Spec

```
┌──────────────────────────────────────────────────┐
│  Revenue Trend                                   │
│  ₵ 30,000 ····································· │
│  ₵ 25,000 ··········●━━━━━━━━━━━━━━━━━●· ·····│
│  ₵ 20,000 ······●━━━━●····················· ···│
│  ₵ 15,000 ·●━━━━━●························· ···│
│  ₵ 10,000 ●━━━━··························· ···│
│  ₵  5,000 ································ ···│
│           Jan  Feb  Mar  Apr  May  Jun           │
│  ━━━ Realized    - - Projected                   │
└──────────────────────────────────────────────────┘
```

### Dark Mode

| Element | Light | Dark |
|---------|-------|------|
| Realized line | #22C55E | #4ADE80 |
| Projected line | #94A3B8 | #64748B |
| Grid lines | #E2E8F0 | #334155 |
| Axis labels | #64748B | #94A3B8 |
| Tooltip BG | #FFFFFF | #1E293B |
| Tooltip border | #E2E8F0 | #334155 |
| Chart BG | transparent | transparent |

---

## 2. CH-10: FUNNEL — Payment Conversion

### Use Case
Admin Dashboard (ADM-01) — tracks payment conversion from invoice to receipt.

### Chart Config

```javascript
{
    chart: { type: 'bar', height: 328 },
    series: [{
        name: 'Students',
        data: [245, 210, 180, 155, 142]
    }],
    plotOptions: {
        bar: {
            horizontal: true,
            borderRadius: 6,
            barHeight: '60%',
            colors: {
                ranges: [
                    { from: 0, to: 245, color: '#1E5FA8' },
                    { from: 0, to: 210, color: '#22C55E' },
                    { from: 0, to: 180, color: '#F59E0B' },
                    { from: 0, to: 155, color: '#8B5CF6' },
                    { from: 0, to: 142, color: '#D4A017' }
                ]
            }
        }
    },
    xaxis: {
        categories: ['Invoices Sent', 'Viewed', 'Payment Started', 'Payment Completed', 'Receipt Generated'],
        labels: { style: { colors: '#64748B', fontSize: '12px' } }
    },
    yaxis: {
        labels: { style: { colors: '#64748B', fontSize: '12px' } }
    },
    tooltip: {
        y: { formatter: (v) => v + ' students' }
    },
    dataLabels: {
        enabled: true,
        formatter: (v) => v + ' (' + Math.round(v/245*100) + '%)',
        style: { colors: ['#FFFFFF'], fontSize: '12px' }
    }
}
```

### Visual Spec

```
┌──────────────────────────────────────────────────┐
│  Payment Conversion Funnel                       │
│                                                  │
│  ████████████████████████████████  245 (100%)    │
│  Invoices Sent                                   │
│                                                  │
│  ████████████████████████████  210 (86%)         │
│  Viewed                                          │
│                                                  │
│  ████████████████████████  180 (73%)             │
│  Payment Started                                 │
│                                                  │
│  ████████████████████  155 (63%)                 │
│  Payment Completed                               │
│                                                  │
│  ██████████████████  142 (58%)                   │
│  Receipt Generated                               │
│                                                  │
│  Drop-off: 103 students (42%)                    │
└──────────────────────────────────────────────────┘
```

### Dark Mode

| Element | Light | Dark |
|---------|-------|------|
| Bar colors | Same | Same |
| Bar border | none | none |
| Labels | #64748B | #94A3B8 |
| Data labels | #FFFFFF | #FFFFFF |
| Chart BG | transparent | transparent |
| Grid lines | #E2E8F0 | #334155 |

### Conversion Metrics

```
Funnel conversion rates:
├── Sent → Viewed:     86% (210/245)
├── Viewed → Started:  86% (180/210)
├── Started → Done:    86% (155/180)
├── Done → Receipt:    92% (142/155)
└── Overall:           58% (142/245)