Add CSV and Excel Import to a v0 App

Build a small subscription billing app with one page, on Next.js with the App
Router.

The Neon Postgres integration is already attached, so DATABASE_URL is set. Put a
SQL script in scripts/ that creates a table named subscriptions with these
columns, and leave the table empty.

  subscription_ref  text primary key
  customer_name     text not null
  plan              text
  billing_cycle     text
  quantity          integer not null
  unit_price        numeric(10,2) not null
  start_date        date not null
  renewal_date      date not null
  billing_email     text

Render /subscriptions as a server component that reads every row through
@neondatabase/serverless and shows those nine columns in a table, with the row
count above it and an empty state while the table holds nothing. Redirect / to
/subscriptions.

Keep the styling plain, and give the app one primary color, #2f5bd0. No
authentication, no seed data, no extra pages.

Build a CSV and Excel import screen for the subscriptions page. A button on that
page opens it as a modal wizard, our customers walk that wizard with the exports
their old billing tool produced, and it leaves them in a spreadsheet where they
clean what came in.

Where the fields come from
- Read the field list from my code, so the same screen serves the subscriptions
  page today and an invoices page later.
- Support text, whole numbers, decimals, dates and a fixed list of options, and
  let one field carry several rules at once.
- Check required, a range, a number of decimal places, uniqueness inside the
  file, and uniqueness against the subscriptions we already store.
- Show the customer our label for a field, and hand my code back the field name.
- Take subscription_ref as the key, so a second upload of the same file finds
  those subscriptions and updates them.
- Drop columns the file carries beyond that list.

Opening the files
- Take several files at once, by drop or by dialog, and show a card per file.
- Detect the encoding, strip a byte order mark, and read a Windows-1252 export
  without turning accented company names into question marks.
- Detect the delimiter. Commas, semicolons, tabs and pipes all arrive.
- Drop a first line shaped sep=; that Excel writes for some locales.
- Read .xlsx, .xls and .ods, open a workbook as one card per sheet, and let the
  customer choose which sheets go on.
- Find the real header row when a report title and an export date sit above it,
  and handle a file with duplicate headers or no header at all.
- Keep a row carrying one field too few, and say which fields it filled.

Reading what the cells hold
- Settle the date order per column, so 04/11/2026 does not become April.
- Read 1.240,50 and 1,240.50 as the same number.
- Keep 00417 as text, including a code Excel already turned into 417.
- Tell an empty cell apart from a cell holding the word null.

Matching the columns
- Map the file's headers onto my field list, one field per column.
- Match the obvious ones on arrival, and show the customer which of my fields
  reached nothing so they can point each one at a column by hand.
- Show a few values under every header, so the customer tells two similar
  columns apart.
- Remember the pairs the customer confirmed, so the next file of that shape
  arrives matched.

Matching the values
- Collect the distinct values of plan and billing cycle as the file spells them.
- Match each one to an option we allow, and let the customer place the rest.

Cleaning before the write
- Hand the finished file to a spreadsheet the customer works in, with my labels
  on top and every row in it.
- Mark what the customer changed. A new row, an edited cell and a deleted row
  each read differently at a glance.
- Run every rule the field list carries, and say which cell failed and why.
- Let the customer fix a cell in place, with the editor that fits the field. A
  date opens a calendar, a list opens its options, a number takes digits.
- Sort and filter, so the customer reaches the failing rows among the hundred
  thousand that pass.
- Copy and paste blocks between it and Excel or Google Sheets, and undo an edit.
- Stay smooth at a hundred thousand rows, with the reading off the main thread
  so the tab keeps responding.

Handing the rows over
- Tell me which rows are new, which changed, and which were deleted.
- Keep every row and every mapping on screen when my write to the database
  fails.

Add a spreadsheet import screen to the subscriptions page with the npm package
@updog/data-editor. Read https://updog.tech/updog.md and
https://docs.updog.tech first, and use only props documented there.

1. Install @updog/data-editor and import "@updog/data-editor/styles.css".
2. Put "use client" at the top of the file that renders the editor. The package
   ships no "use client" of its own, so a server component cannot hold it.
3. Add an "Import subscriptions" button above the table, holding one open state.
   The editor opens as a modal, which is its default: pass open={open} and an
   onClose that closes it. Wrap it in nothing and give it no height of its own,
   because the modal sizes itself.
4. Render <DataEditor /> with apiKey="updog-v0-demo", which is all the key a v0
   preview or a vercel.app host needs, variant="uploader",
   primaryKey="subscription_ref", enableDeleteRow="all" and these nine columns,
   written as id, title, then type and rules:
   subscription_ref "Subscription ref" text, required, unique
   customer_name "Customer" text, required
   plan "Plan" select: Lite, Core, Agency
   billing_cycle "Billing cycle" select: Monthly, Quarterly, Annual
   quantity "Quantity" number, whole, minimum 1, required
   unit_price "Unit price" number, two decimals, minimum 0, required
   start_date "Start date" date, required
   renewal_date "Renewal date" date, required
   billing_email "Billing email" text, email
   The ids are the subscriptions table's own column names on purpose, so no
   field is renamed between the editor and the database.
5. In a stylesheet loaded after "@updog/data-editor/styles.css", set
   --updog-brand on :root to this app's primary color, written as a plain color
   value.
6. onComplete receives result.sources, and every entry in a source's rows is a
   wrapper shaped { row, isNew, isChanged, isDeleted, isValid }. Read the four
   flags off the wrapper and the cell values off entry.row. Skip an entry whose
   isValid is false.
7. entry.row is keyed by those same ids, so send it to the database as it is.
   Write no mapper and no Number call. Postgres casts a text parameter to the
   column's own type.
8. POST the rows to a route handler at app/api/subscriptions/route.ts, the new
   and changed ones as one list and the deleted subscription_ref values as
   another. The handler upserts with INSERT ... ON CONFLICT (subscription_ref)
   DO UPDATE and deletes by subscription_ref, both through the Neon serverless
   driver.
9. Throw from onComplete when the POST fails. The editor clears its rows as soon
   as onComplete resolves, so a swallowed error loses the import. When it
   succeeds, close the modal and call router.refresh(), so the subscriptions
   table reloads with the imported rows.
10. Do not build an uploader of your own, do not parse the file yourself, and do
    not invent props.

import {
  DataEditor,
  type DataEditorColumn,
  type DataEditorResult,
} from "@updog/data-editor";
import "@updog/data-editor/styles.css";

type Subscription = {
  subscription_ref: string;
  customer_name: string;
  plan: string;
  billing_cycle: string;
  quantity: string;
  unit_price: string;
  start_date: string;
  renewal_date: string;
  billing_email: string;
};

const columns: DataEditorColumn[] = [
  {
    id: "subscription_ref",
    title: "Subscription ref",
    validators: [{ type: "required" }, { type: "unique" }],
  },
  {
    id: "customer_name",
    title: "Customer",
    validators: [{ type: "required" }],
  },
  {
    id: "plan",
    title: "Plan",
    editor: {
      type: "select",
      options: ["Lite", "Core", "Agency"],
      enableCustomValue: false,
    },
  },
  {
    id: "billing_cycle",
    title: "Billing cycle",
    editor: {
      type: "select",
      options: ["Monthly", "Quarterly", "Annual"],
      enableCustomValue: false,
    },
  },
  {
    id: "quantity",
    title: "Quantity",
    editor: { type: "number" },
    validators: [
      { type: "required" },
      { type: "number", min: 1, decimalPlaces: 0 },
    ],
  },
  {
    id: "unit_price",
    title: "Unit price",
    editor: { type: "number" },
    validators: [
      { type: "required" },
      { type: "number", min: 0, decimalPlaces: 2 },
    ],
  },
  {
    id: "start_date",
    title: "Start date",
    editor: { type: "date" },
    validators: [{ type: "required" }],
  },
  {
    id: "renewal_date",
    title: "Renewal date",
    editor: { type: "date" },
    validators: [{ type: "required" }],
  },
  {
    id: "billing_email",
    title: "Billing email",
    validators: [{ type: "email" }],
  },
];

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function SubscriptionImporter() {
  const [open, setOpen] = useState(false);
  const router = useRouter();

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Import subscriptions
      </button>

      <DataEditor<Subscription>
        apiKey="updog-v0-demo"
        variant="uploader"
        open={open}
        onClose={() => {
          setOpen(false);
        }}
        columns={columns}
        primaryKey="subscription_ref"
        enableDeleteRow="all"
        onComplete={handleComplete}
      />
    </>
  );
}

/* loaded after @updog/data-editor/styles.css */
:root {
  --updog-brand: #2f5bd0;
}

Subscription ID        →  Subscription ref
Account name           →  Customer
Billing frequency      →  Billing cycle
Price per unit         →  Unit price
Contract start         →  Start date
Renewal due            →  Renewal date
Billing contact email  →  Billing email

const handleComplete = async (result: DataEditorResult<Subscription>) => {
  const rows = result.sources.flatMap((source) => source.rows);

  const upserts = rows
    .filter((entry) => entry.isValid && !entry.isDeleted)
    .filter((entry) => entry.isNew || entry.isChanged)
    .map((entry) => entry.row);

  const deletes = rows
    .filter((entry) => entry.isDeleted && !entry.isNew)
    .map((entry) => entry.row.subscription_ref);

  const response = await fetch("/api/subscriptions", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ upserts, deletes }),
  });

  if (!response.ok) {
    throw new Error(\`Import failed with \${response.status}\`);
  }

  setOpen(false);
  router.refresh();
};

{
  sources: [
    {
      sourceId: "source_…",
      sourceName: "larkmead-subscriptions.xlsx",
      rows: [
        {
          row: {
            subscription_ref: "LM-0001",
            customer_name: "Ashvale Studio Ltd",
            plan: "Core",
            billing_cycle: "Monthly",
            quantity: "9",
            unit_price: "8.14",
            start_date: "2024-01-14",
            renewal_date: "2026-09-14",
            billing_email: "[email protected]",
          },
          isNew: true,
          isChanged: false,
          isDeleted: false,
          isValid: true,
        },
        // 239 more rows
      ],
    },
  ],
  counts: { new: 240, changed: 0, deleted: 0, invalid: 0 },
  learnedSynonyms: { columns: [], values: [] },
}

import { neon } from "@neondatabase/serverless";

const sql = neon(process.env.DATABASE_URL!);

export async function POST(request: Request) {
  const { upserts, deletes } = await request.json();

  if (upserts.length > 0) {
    await sql.transaction(
      upserts.map((row) => {
        return sql\`
          INSERT INTO subscriptions (
            subscription_ref, customer_name, plan, billing_cycle,
            quantity, unit_price, start_date, renewal_date, billing_email
          )
          VALUES (
            \${row.subscription_ref}, \${row.customer_name}, \${row.plan},
            \${row.billing_cycle}, \${row.quantity}, \${row.unit_price},
            \${row.start_date}, \${row.renewal_date}, \${row.billing_email}
          )
          ON CONFLICT (subscription_ref) DO UPDATE SET
            customer_name = EXCLUDED.customer_name,
            plan = EXCLUDED.plan,
            billing_cycle = EXCLUDED.billing_cycle,
            quantity = EXCLUDED.quantity,
            unit_price = EXCLUDED.unit_price,
            start_date = EXCLUDED.start_date,
            renewal_date = EXCLUDED.renewal_date,
            billing_email = EXCLUDED.billing_email
        \`;
      }),
    );
  }

  if (deletes.length > 0) {
    await sql\`
      DELETE FROM subscriptions WHERE subscription_ref = ANY(\${deletes})
    \`;
  }

  return Response.json({
    upserted: upserts.length,
    deleted: deletes.length,
  });
}