@muskanmeet/invoicing-design-system 0.1.0

package/screens/invoices/invoices-screen.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+} from "@ds/components/card";
+import { Badge } from "@ds/components/badge";
+import { Button } from "@ds/components/button";
+import { Input } from "@ds/components/input";
+import { Checkbox } from "@ds/components/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ds/components/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ds/components/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@ds/components/dropdown-menu";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@ds/components/breadcrumb";
+import { DateRangePicker, type DateRange } from "@ds/components/date-picker";
+import { endOfDay, isWithinInterval, parse, startOfDay } from "date-fns";
+import Link from "next/link";
+import {
+  ArrowUpDown,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  MoreHorizontal,
+  Plus,
+  Search,
+} from "lucide-react";
+
+type Status = "Paid" | "Pending" | "Overdue" | "Draft";
+
+type Invoice = {
+  id: string;
+  client: string;
+  issued: string;
+  due: string;
+  amount: number;
+  status: Status;
+};
+
+const allInvoices: Invoice[] = [
+  { id: "INV-1042", client: "Acme Inc.", issued: "May 22", due: "Jun 21", amount: 2400, status: "Paid" },
+  { id: "INV-1041", client: "Globex", issued: "May 21", due: "Jun 20", amount: 880, status: "Pending" },
+  { id: "INV-1040", client: "Initech", issued: "May 18", due: "May 25", amount: 3120, status: "Overdue" },
+  { id: "INV-1039", client: "Umbrella", issued: "May 17", due: "Jun 16", amount: 540, status: "Draft" },
+  { id: "INV-1038", client: "Hooli", issued: "May 15", due: "Jun 14", amount: 1200, status: "Paid" },
+  { id: "INV-1037", client: "Soylent", issued: "May 14", due: "Jun 13", amount: 4800, status: "Pending" },
+  { id: "INV-1036", client: "Pied Piper", issued: "May 12", due: "May 19", amount: 720, status: "Overdue" },
+  { id: "INV-1035", client: "Stark Industries", issued: "May 10", due: "Jun 9", amount: 9600, status: "Paid" },
+  { id: "INV-1034", client: "Wayne Enterprises", issued: "May 09", due: "Jun 8", amount: 1340, status: "Draft" },
+  { id: "INV-1033", client: "Wonka Industries", issued: "May 07", due: "Jun 6", amount: 250, status: "Paid" },
+];
+
+const statusVariant: Record<Status, "success" | "warning" | "destructive" | "info"> = {
+  Paid: "success",
+  Pending: "warning",
+  Overdue: "destructive",
+  Draft: "info",
+};
+
+const PAGE_SIZE = 6;
+
+export function InvoicesScreen() {
+  const [query, setQuery] = React.useState("");
+  const [status, setStatus] = React.useState<Status | "all">("all");
+  const [sortDesc, setSortDesc] = React.useState(true);
+  const [page, setPage] = React.useState(1);
+  const [selected, setSelected] = React.useState<Set<string>>(new Set());
+  const [range, setRange] = React.useState<DateRange | undefined>();
+
+  const filtered = React.useMemo(() => {
+    const referenceYear = new Date().getFullYear();
+    const parseIssued = (s: string) => parse(`${s} ${referenceYear}`, "MMM d yyyy", new Date());
+    return allInvoices
+      .filter((i) =>
+        query
+          ? i.client.toLowerCase().includes(query.toLowerCase()) ||
+            i.id.toLowerCase().includes(query.toLowerCase())
+          : true
+      )
+      .filter((i) => (status === "all" ? true : i.status === status))
+      .filter((i) => {
+        if (!range?.from) return true;
+        const issued = startOfDay(parseIssued(i.issued));
+        return isWithinInterval(issued, {
+          start: startOfDay(range.from),
+          end: endOfDay(range.to ?? range.from),
+        });
+      })
+      .sort((a, b) => (sortDesc ? b.amount - a.amount : a.amount - b.amount));
+  }, [query, status, sortDesc, range]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages);
+  const pageRows = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+
+  const toggleAll = () => {
+    if (pageRows.every((r) => selected.has(r.id))) {
+      const next = new Set(selected);
+      pageRows.forEach((r) => next.delete(r.id));
+      setSelected(next);
+    } else {
+      const next = new Set(selected);
+      pageRows.forEach((r) => next.add(r.id));
+      setSelected(next);
+    }
+  };
+  const toggleOne = (id: string) => {
+    const next = new Set(selected);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setSelected(next);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <Breadcrumb className="mb-2">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link href="/">Home</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Invoices</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <h1 className="text-2xl font-semibold tracking-tight">Invoices</h1>
+          <p className="text-sm text-muted-foreground">
+            {filtered.length} invoice{filtered.length === 1 ? "" : "s"} matching your filters.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline">
+            <Download /> Export
+          </Button>
+          <Button>
+            <Plus /> New invoice
+          </Button>
+        </div>
+      </div>
+
+      <Card>
+        <div className="flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-center">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={query}
+              onChange={(e) => {
+                setQuery(e.target.value);
+                setPage(1);
+              }}
+              placeholder="Search by client or invoice #"
+              className="pl-9"
+            />
+          </div>
+          <Select
+            value={status}
+            onValueChange={(v) => {
+              setStatus(v as Status | "all");
+              setPage(1);
+            }}
+          >
+            <SelectTrigger className="sm:w-44">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="Paid">Paid</SelectItem>
+              <SelectItem value="Pending">Pending</SelectItem>
+              <SelectItem value="Overdue">Overdue</SelectItem>
+              <SelectItem value="Draft">Draft</SelectItem>
+            </SelectContent>
+          </Select>
+          <DateRangePicker
+            value={range}
+            onChange={(r) => {
+              setRange(r);
+              setPage(1);
+            }}
+            placeholder="Issued date"
+            align="end"
+            className="sm:w-56"
+          />
+        </div>
+
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10">
+                  <Checkbox
+                    checked={pageRows.length > 0 && pageRows.every((r) => selected.has(r.id))}
+                    onCheckedChange={toggleAll}
+                    aria-label="select all"
+                  />
+                </TableHead>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Client</TableHead>
+                <TableHead>Issued</TableHead>
+                <TableHead>Due</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">
+                  <button
+                    onClick={() => setSortDesc((s) => !s)}
+                    className="inline-flex items-center gap-1 text-xs uppercase tracking-wider hover:text-foreground"
+                  >
+                    Amount <ArrowUpDown className="h-3.5 w-3.5" />
+                  </button>
+                </TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pageRows.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={8} className="py-16 text-center text-sm text-muted-foreground">
+                    No invoices match your filters.
+                  </TableCell>
+                </TableRow>
+              )}
+              {pageRows.map((r) => (
+                <TableRow key={r.id} data-state={selected.has(r.id) ? "selected" : undefined}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selected.has(r.id)}
+                      onCheckedChange={() => toggleOne(r.id)}
+                      aria-label={`select ${r.id}`}
+                    />
+                  </TableCell>
+                  <TableCell className="font-mono text-sm">{r.id}</TableCell>
+                  <TableCell className="font-medium">{r.client}</TableCell>
+                  <TableCell className="text-muted-foreground">{r.issued}</TableCell>
+                  <TableCell className="text-muted-foreground">{r.due}</TableCell>
+                  <TableCell>
+                    <Badge variant={statusVariant[r.status]}>{r.status}</Badge>
+                  </TableCell>
+                  <TableCell className="text-right font-medium">
+                    ${r.amount.toLocaleString()}
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" aria-label="row actions">
+                          <MoreHorizontal />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>View</DropdownMenuItem>
+                        <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                        <DropdownMenuItem>Send reminder</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+
+        <div className="flex items-center justify-between border-t p-4 text-sm">
+          <div className="text-muted-foreground">
+            {selected.size > 0 ? `${selected.size} selected` : `Page ${safePage} of ${totalPages}`}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={safePage === 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft /> Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={safePage === totalPages}
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            >
+              Next <ChevronRight />
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/tailwind.config.ts

@@ -0,0 +1,110 @@
+import type { Config } from "tailwindcss";
+import { tokens } from "./design-system/tokens/tokens";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./design-system/**/*.{ts,tsx}",
+    "./screens/**/*.{ts,tsx}",
+  ],
+  theme: {
+    screens: tokens.breakpoints,
+    container: {
+      center: true,
+      padding: "1rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--ds-border))",
+        input: "hsl(var(--ds-input))",
+        ring: "hsl(var(--ds-ring))",
+        background: "hsl(var(--ds-background))",
+        foreground: "hsl(var(--ds-foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--ds-primary))",
+          foreground: "hsl(var(--ds-primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--ds-secondary))",
+          foreground: "hsl(var(--ds-secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--ds-destructive))",
+          foreground: "hsl(var(--ds-destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--ds-muted))",
+          foreground: "hsl(var(--ds-muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--ds-accent))",
+          foreground: "hsl(var(--ds-accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--ds-popover))",
+          foreground: "hsl(var(--ds-popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--ds-card))",
+          foreground: "hsl(var(--ds-card-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--ds-success))",
+          foreground: "hsl(var(--ds-success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--ds-warning))",
+          foreground: "hsl(var(--ds-warning-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--ds-info))",
+          foreground: "hsl(var(--ds-info-foreground))",
+        },
+        overlay: "hsl(var(--ds-overlay))",
+      },
+      borderRadius: {
+        lg: "var(--ds-radius)",
+        md: "calc(var(--ds-radius) - 4px)",
+        sm: "calc(var(--ds-radius) - 6px)",
+      },
+      fontFamily: {
+        sans: ["var(--ds-font-sans)", "system-ui", "sans-serif"],
+        mono: ["var(--ds-font-mono)", "ui-monospace", "monospace"],
+      },
+      // Semantic typography scale (desktop sizes). Responsive variants live as
+      // component classes in `design-system/styles.css` so the same name picks
+      // up the correct mobile size automatically.
+      fontSize: tokens.fontSize as unknown as Record<
+        string,
+        [string, { lineHeight: string; letterSpacing?: string; fontWeight?: string }]
+      >,
+      boxShadow: {
+        "ds-sm": "var(--ds-shadow-sm)",
+        "ds-md": "var(--ds-shadow-md)",
+        "ds-lg": "var(--ds-shadow-lg)",
+        "ds-xl": "var(--ds-shadow-xl)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@ds/*": ["./design-system/*"],
+      "@screens/*": ["./screens/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}