Month,Client,Total
Jan,Acme,100
Feb,Globex,250
Mar,Initech,175

{
  "$schema": "https://schemas.carmenlabs.com/mview/v1/schema.json",
  "id": "sales-dashboard",
  "name": "Sales Dashboard",
  "description": "Executive dashboard generated from sales.csv.",
  "version": "1.0.0",
  "prompt": "Create an executive dashboard from sales.csv showing monthly sales, top clients, and total sales.",
  "runtime": {
    "environment": "web",
    "renderer": "react",
    "version": "^19.0.0"
  },
  "author": "Victor Avila",
  "license": "MIT",
  "icon": "./resources/icon.svg",
  "accepts": ["table"],
  "source": {
    "path": "../sales.csv",
    "contentHash": "sha256:8d969eef6ecad3c29a3a629280e686cff8ca58e3f3f2d4d0c7d7f9f2e2f0f4ab"
  },
  "entry": {
    "parser": "./parser.ts",
    "component": "./Dashboard.tsx"
  },
  "resources": {
    "path": "./resources"
  },
  "settings": {
    "currency": "USD",
    "topClientsLimit": 10
  },
  "metadata": {
    "createdBy": "llm",
    "model": "gpt-5.5",
    "createdAt": "2026-07-11T05:00:00Z"
  }
}

export default async function parse(input: any, context: any) {
  const rows = input.rows ?? [];
 
  const totalSales = rows.reduce((sum: number, row: any) => {
    return sum + Number(row.Total ?? row.total ?? 0);
  }, 0);
 
  const salesByMonth = rows.map((row: any) => ({
    month: row.Month ?? row.month,
    total: Number(row.Total ?? row.total ?? 0)
  }));
 
  const topClients = [...rows]
    .sort((a: any, b: any) => Number(b.Total ?? b.total ?? 0) - Number(a.Total ?? a.total ?? 0))
    .slice(0, context.settings?.topClientsLimit ?? 10);
 
  return { totalSales, salesByMonth, topClients };
}

import React from "react";
 
export default function Dashboard({ data, settings }: any) {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui, sans-serif" }}>
      <h1>Sales Dashboard</h1>
 
      <section>
        <h2>Total Sales</h2>
        <strong>
          {settings?.currency ?? "USD"} {data.totalSales.toLocaleString()}
        </strong>
      </section>
 
      <section>
        <h2>Sales by Month</h2>
        <ul>
          {data.salesByMonth.map((item: any) => (
            <li key={item.month}>
              {item.month}: {item.total}
            </li>
          ))}
        </ul>
      </section>
 
      <section>
        <h2>Top Clients</h2>
        <table>
          <thead>
            <tr><th>Client</th><th>Total</th></tr>
          </thead>
          <tbody>
            {data.topClients.map((row: any, index: number) => (
              <tr key={index}>
                <td>{row.Client ?? row.client ?? "Unknown"}</td>
                <td>{row.Total ?? row.total ?? 0}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}

.mviews/sales-dashboard/
├── mview.json
├── parser.ts
├── Dashboard.tsx
└── resources/
    └── icon.svg