# Dashboard and UI Mockup Patterns

Patterns for creating dashboard interfaces, payment forms, and data displays in SVG.

## Dashboard Layout Structure

### Basic Dashboard Frame

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
  <defs>
    <filter id="card-shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.08"/>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="1200" height="800" fill="#f8fafc"/>
  
  <!-- Header bar -->
  <rect x="0" y="0" width="1200" height="60" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Sidebar (optional) -->
  <rect x="0" y="60" width="240" height="740" fill="#1e293b"/>
  
  <!-- Main content area -->
  <g id="main-content" transform="translate(260, 80)">
    <!-- Content cards go here -->
  </g>
</svg>
```

## Metric Cards

### Simple Metric Card

```svg
<g id="metric-card">
  <rect x="0" y="0" width="260" height="120" rx="12" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Label -->
  <text x="20" y="35" font-size="13" fill="#64748b">Net volume</text>
  
  <!-- Value -->
  <text x="20" y="75" font-size="28" font-weight="600" fill="#0f172a">₹35,28,198.72</text>
  
  <!-- Subtitle/time -->
  <text x="20" y="100" font-size="12" fill="#94a3b8">14:00</text>
</g>
```

### Metric Card with Change Indicator

```svg
<g id="metric-with-change">
  <rect x="0" y="0" width="280" height="140" rx="12" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Label -->
  <text x="20" y="35" font-size="13" fill="#64748b">Net volume from sales</text>
  
  <!-- Change badge -->
  <g transform="translate(180, 22)">
    <rect x="0" y="0" width="50" height="22" rx="11" fill="#dcfce7"/>
    <text x="25" y="15" text-anchor="middle" font-size="12" font-weight="500" fill="#16a34a">+32.8%</text>
  </g>
  
  <!-- Primary value -->
  <text x="20" y="80" font-size="32" font-weight="600" fill="#0f172a">₹39,274.29</text>
  
  <!-- Secondary value (previous period) -->
  <text x="20" y="105" font-size="14" fill="#94a3b8">₹29,573.54</text>
</g>
```

### Metric Card with Mini Chart

```svg
<g id="metric-with-chart">
  <rect x="0" y="0" width="280" height="180" rx="12" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Header -->
  <text x="20" y="35" font-size="13" fill="#64748b">New customers</text>
  <g transform="translate(200, 22)">
    <rect x="0" y="0" width="50" height="22" rx="11" fill="#dcfce7"/>
    <text x="25" y="15" text-anchor="middle" font-size="12" font-weight="500" fill="#16a34a">+32.1%</text>
  </g>
  
  <!-- Value -->
  <text x="20" y="70" font-size="28" font-weight="600" fill="#0f172a">37</text>
  <text x="60" y="70" font-size="14" fill="#94a3b8">28</text>
  
  <!-- Mini line chart -->
  <g transform="translate(20, 90)">
    <path d="M 0 60 L 30 55 L 60 45 L 90 50 L 120 35 L 150 40 L 180 25 L 210 15 L 240 5"
          stroke="#6366f1" stroke-width="2" fill="none" stroke-linecap="round"/>
  </g>
  
  <!-- X-axis labels -->
  <text x="20" y="165" font-size="10" fill="#94a3b8">20 Apr</text>
  <text x="240" y="165" font-size="10" fill="#94a3b8" text-anchor="end">Today</text>
</g>
```

## Charts in Dashboard Context

### Line Chart with Area Fill

```svg
<g id="dashboard-line-chart">
  <rect x="0" y="0" width="560" height="200" rx="12" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Chart area -->
  <g transform="translate(20, 40)">
    <!-- Gradient fill under line -->
    <defs>
      <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#6366f1" stop-opacity="0.2"/>
        <stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
      </linearGradient>
    </defs>
    
    <!-- Area -->
    <path d="M 0 120 L 0 80 L 100 70 L 200 60 L 300 65 L 400 40 L 500 30 L 500 120 Z"
          fill="url(#areaGrad)"/>
    
    <!-- Line -->
    <path d="M 0 80 L 100 70 L 200 60 L 300 65 L 400 40 L 500 30"
          stroke="#6366f1" stroke-width="2" fill="none" stroke-linecap="round"/>
    
    <!-- Current time marker -->
    <line x1="400" y1="0" x2="400" y2="120" stroke="#e2e8f0" stroke-dasharray="4"/>
    <circle cx="400" cy="40" r="4" fill="#6366f1"/>
    <text x="400" y="135" text-anchor="middle" font-size="10" fill="#6366f1">Now, 14:00</text>
  </g>
  
  <!-- Time labels -->
  <text x="20" y="175" font-size="10" fill="#94a3b8">00:00</text>
  <text x="540" y="175" font-size="10" fill="#94a3b8" text-anchor="end">23:59</text>
</g>
```

## Payment Form UI

### Card Payment Form

```svg
<g id="payment-form">
  <!-- Card container -->
  <rect x="0" y="0" width="320" height="450" rx="16" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Product image area -->
  <rect x="40" y="30" width="80" height="100" rx="8" fill="#fef3c7"/>
  <text x="80" y="85" text-anchor="middle" font-size="10" fill="#92400e">Issue 001</text>
  
  <!-- Product name -->
  <text x="160" y="160" text-anchor="middle" font-size="16" font-weight="600" fill="#0f172a">
    Abstraction Magazine
  </text>
  <text x="160" y="180" text-anchor="middle" font-size="14" fill="#64748b">₹19 per month</text>
  
  <!-- Apple Pay button -->
  <rect x="20" y="200" width="280" height="44" rx="6" fill="#0f172a"/>
  <text x="160" y="228" text-anchor="middle" font-size="14" font-weight="500" fill="white"> Pay</text>
  
  <!-- Divider -->
  <line x1="20" y1="260" x2="300" y2="260" stroke="#e2e8f0"/>
  <text x="160" y="265" text-anchor="middle" font-size="12" fill="#94a3b8" 
        style="background:white">Or pay with card</text>
  
  <!-- Email input -->
  <text x="20" y="295" font-size="13" fill="#374151">Email</text>
  <rect x="20" y="305" width="280" height="44" rx="6" fill="white" stroke="#d1d5db"/>
  
  <!-- Card input -->
  <text x="20" y="370" font-size="13" fill="#374151">Card Information</text>
  <rect x="20" y="380" width="280" height="44" rx="6" fill="white" stroke="#d1d5db"/>
  
  <!-- Card icons -->
  <g transform="translate(240, 392)">
    <rect x="0" y="0" width="24" height="16" rx="2" fill="#1a1f71"/><!-- Visa -->
    <rect x="28" y="0" width="24" height="16" rx="2" fill="#eb001b"/><!-- MC -->
  </g>
</g>
```

## Invoice/Table Display

### Invoice Summary

```svg
<g id="invoice-card">
  <rect x="0" y="0" width="260" height="180" rx="12" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Header -->
  <text x="20" y="35" font-size="14" font-weight="600" fill="#0f172a">Invoices</text>
  
  <!-- Progress bar -->
  <rect x="20" y="50" width="220" height="6" rx="3" fill="#e2e8f0"/>
  <rect x="20" y="50" width="160" height="6" rx="3" fill="#10b981"/>
  <rect x="180" y="50" width="40" height="6" rx="3" fill="#3b82f6"/>
  
  <!-- Invoice rows -->
  <g transform="translate(20, 70)">
    <!-- Row 1 -->
    <circle cx="8" cy="12" r="6" fill="#a855f7"/>
    <text x="22" y="16" font-size="13" fill="#374151">Paid</text>
    <text x="200" y="16" font-size="13" fill="#0f172a" text-anchor="end">₹25,000.00</text>
    
    <!-- Row 2 -->
    <circle cx="8" cy="42" r="6" fill="#3b82f6"/>
    <text x="22" y="46" font-size="13" fill="#374151">Open</text>
    <text x="200" y="46" font-size="13" fill="#0f172a" text-anchor="end">₹20,000.00</text>
    
    <!-- Row 3 -->
    <circle cx="8" cy="72" r="6" fill="#22d3ee"/>
    <text x="22" y="76" font-size="13" fill="#374151">Past due</text>
    <text x="200" y="76" font-size="13" fill="#0f172a" text-anchor="end">₹1,000.00</text>
  </g>
  
  <!-- Footer timestamp -->
  <text x="20" y="165" font-size="11" fill="#94a3b8">Updated today 07:50</text>
</g>
```

## Navigation Elements

### Top Navigation Bar

```svg
<g id="top-nav">
  <rect x="0" y="0" width="1200" height="56" fill="white"/>
  
  <!-- Logo area -->
  <rect x="20" y="12" width="32" height="32" rx="8" fill="#6366f1"/>
  
  <!-- Company name -->
  <text x="64" y="35" font-size="15" font-weight="600" fill="#0f172a">ROCKET RIDES</text>
  
  <!-- Search bar -->
  <rect x="240" y="12" width="300" height="32" rx="6" fill="#f1f5f9"/>
  <text x="260" y="33" font-size="13" fill="#94a3b8">Search</text>
  
  <!-- Right icons -->
  <g transform="translate(1080, 16)">
    <circle cx="12" cy="12" r="12" fill="#f1f5f9"/>
    <circle cx="52" cy="12" r="12" fill="#f1f5f9"/>
    <circle cx="92" cy="12" r="12" fill="#f1f5f9"/>
  </g>
</g>
```

### Balance/Payout Widget

```svg
<g id="balance-widget">
  <rect x="0" y="0" width="200" height="100" rx="12" fill="white" filter="url(#card-shadow)"/>
  
  <!-- Label with dropdown indicator -->
  <text x="16" y="28" font-size="12" fill="#64748b">INR Balance</text>
  <text x="130" y="28" font-size="12" fill="#6366f1">View</text>
  
  <!-- Amount -->
  <text x="16" y="55" font-size="20" font-weight="600" fill="#0f172a">₹5,53,257.51</text>
  
  <!-- Subtitle -->
  <text x="16" y="75" font-size="11" fill="#94a3b8">Available to pay out</text>
</g>
```

## Action Buttons/Icons (Right Rail)

```svg
<g id="action-buttons" transform="translate(1150, 300)">
  <!-- Button 1 -->
  <rect x="0" y="0" width="40" height="40" rx="8" fill="white" filter="url(#card-shadow)"/>
  <rect x="10" y="10" width="20" height="20" rx="4" fill="#0f172a"/>
  
  <!-- Button 2 -->
  <rect x="0" y="50" width="40" height="40" rx="8" fill="white" filter="url(#card-shadow)"/>
  <circle cx="20" cy="70" r="10" fill="#10b981"/>
  
  <!-- Button 3 -->
  <rect x="0" y="100" width="40" height="40" rx="8" fill="white" filter="url(#card-shadow)"/>
  <rect x="10" y="110" width="20" height="20" rx="4" fill="#f59e0b"/>
</g>
```

## Color Scheme for Dashboards

### Stripe-style Colors
- Background: `#f8fafc` (slate-50)
- Card background: `#ffffff`
- Primary text: `#0f172a` (slate-900)
- Secondary text: `#64748b` (slate-500)
- Muted text: `#94a3b8` (slate-400)
- Border: `#e2e8f0` (slate-200)
- Primary accent: `#6366f1` (indigo-500)
- Success: `#10b981` (emerald-500), badge bg: `#dcfce7`
- Warning: `#f59e0b` (amber-500)
- Error: `#ef4444` (red-500)

### Shadow for Cards
```svg
<filter id="card-shadow" x="-10%" y="-10%" width="120%" height="120%">
  <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.08"/>
</filter>
```

## Layout Spacing Guidelines

- Card padding: 16-20px
- Card gap: 16-24px
- Section gap: 32-40px
- Border radius: 8-16px for cards
- Font sizes: 11-13px labels, 14-16px body, 20-32px values
