Billing Tax Form Upload

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing138.tsx instead.

Usage

The file also exports billing138Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing138, billing138Demo } from "@/components/blocks/billing/billing138";

export default function Page() {
  return <Billing138 {...billing138Demo} />;
}

Props

Types

interface TaxFormRecord {
  id: string;
  formType: string;
  taxYear: string;
  status: "Verified" | "Pending" | "Expired";
  uploadedDate: string;
}

Behavior notes

• The dropzone accepts both a click, which opens a hidden native file input, and a real HTML5 drag-and-drop, tracked with local isDragging state for the highlighted border.
• No upload progress is simulated. Selecting or dropping a file just records its name in state, submitting shows a fixed roughly 800ms loading state and then a confirmation, there's no fake progress bar or timer-driven percentage.
• The upload button stays disabled until both a tax year is selected and a file is chosen.
• Status badges for existing forms map Verified, Pending, and Expired to their own icon and color internally; there's no prop for custom statuses, add a case to the component's internal maps to extend the union.
• The existing-forms section only renders when existingForms is non-empty, so the block works standalone for a first-time upload with no history yet.

Frequently asked questions