@muskanmeet/invoicing-design-system 0.1.0

package/screens/auth/auth-screen.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@ds/components/button";
+import { Input } from "@ds/components/input";
+import { Label } from "@ds/components/label";
+import { Checkbox } from "@ds/components/checkbox";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@ds/components/card";
+import { Separator } from "@ds/components/separator";
+import { FileText, Github, Mail } from "lucide-react";
+
+type Mode = "login" | "signup";
+
+export function AuthScreen({ mode, otherHref }: { mode: Mode; otherHref: string }) {
+  const isLogin = mode === "login";
+  return (
+    <div className="min-h-screen bg-muted/30">
+      <div className="mx-auto grid min-h-screen max-w-6xl items-center px-4 py-12 lg:grid-cols-2 lg:gap-16">
+        <div className="hidden lg:block">
+          <div className="flex items-center gap-2">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <FileText className="h-5 w-5" />
+            </div>
+            <div className="text-lg font-semibold">Invoicely</div>
+          </div>
+          <h2 className="mt-10 text-3xl font-semibold tracking-tight">
+            Simple, beautiful invoicing for modern teams.
+          </h2>
+          <p className="mt-3 max-w-md text-muted-foreground">
+            Create, send, and track invoices in seconds. Get paid faster with
+            automated reminders and a delightful client experience.
+          </p>
+          <ul className="mt-8 space-y-3 text-sm">
+            {[
+              "Branded invoices with one-click sending",
+              "Recurring invoices and auto-charge",
+              "Real-time payment notifications",
+              "Tax-ready exports your accountant will love",
+            ].map((f) => (
+              <li key={f} className="flex items-start gap-2">
+                <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
+                <span className="text-muted-foreground">{f}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <Card className="mx-auto w-full max-w-md">
+            <CardHeader>
+              <CardTitle className="text-2xl">
+                {isLogin ? "Welcome back" : "Create your account"}
+              </CardTitle>
+              <CardDescription>
+                {isLogin
+                  ? "Sign in to your Invoicely workspace."
+                  : "Start sending invoices in under a minute."}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-2">
+                <Button variant="outline">
+                  <Github /> GitHub
+                </Button>
+                <Button variant="outline">
+                  <Mail /> Google
+                </Button>
+              </div>
+              <div className="relative">
+                <Separator />
+                <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs uppercase tracking-wider text-muted-foreground">
+                  or with email
+                </span>
+              </div>
+
+              <form
+                className="space-y-4"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                }}
+              >
+                {!isLogin && (
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Full name</Label>
+                    <Input id="name" placeholder="Sara Anders" required />
+                  </div>
+                )}
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input id="email" type="email" placeholder="you@company.com" required />
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="password">Password</Label>
+                    {isLogin && (
+                      <a href="#" className="text-xs text-primary hover:underline">
+                        Forgot password?
+                      </a>
+                    )}
+                  </div>
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="••••••••"
+                    required
+                  />
+                </div>
+
+                {isLogin ? (
+                  <div className="flex items-center gap-2">
+                    <Checkbox id="remember" />
+                    <Label htmlFor="remember" className="text-sm font-normal">
+                      Remember me for 30 days
+                    </Label>
+                  </div>
+                ) : (
+                  <div className="flex items-start gap-2">
+                    <Checkbox id="terms" required className="mt-0.5" />
+                    <Label htmlFor="terms" className="text-sm font-normal leading-snug">
+                      I agree to the{" "}
+                      <a href="#" className="text-primary hover:underline">
+                        Terms
+                      </a>{" "}
+                      and{" "}
+                      <a href="#" className="text-primary hover:underline">
+                        Privacy Policy
+                      </a>
+                      .
+                    </Label>
+                  </div>
+                )}
+
+                <Button type="submit" className="w-full" size="lg">
+                  {isLogin ? "Sign in" : "Create account"}
+                </Button>
+              </form>
+            </CardContent>
+            <CardFooter className="justify-center text-sm text-muted-foreground">
+              {isLogin ? "Don't have an account?" : "Already have an account?"}{" "}
+              <a href={otherHref} className="ml-1 text-primary hover:underline">
+                {isLogin ? "Sign up" : "Sign in"}
+              </a>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

package/screens/dashboard/dashboard-screen.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@ds/components/card";
+import { Badge } from "@ds/components/badge";
+import { Button } from "@ds/components/button";
+import { Avatar, AvatarFallback } from "@ds/components/avatar";
+import { DateRangePicker, type DateRange } from "@ds/components/date-picker";
+import { subDays } from "date-fns";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@ds/components/breadcrumb";
+import Link from "next/link";
+import { ArrowUpRight, Plus, TrendingDown, TrendingUp } from "lucide-react";
+
+const kpis = [
+  { label: "Outstanding", value: "$48,320", delta: "+12.4%", trend: "up" as const },
+  { label: "Paid this month", value: "$182,940", delta: "+4.2%", trend: "up" as const },
+  { label: "Overdue", value: "$6,150", delta: "-2.1%", trend: "down" as const },
+  { label: "Active clients", value: "84", delta: "+3", trend: "up" as const },
+];
+
+const recent = [
+  { id: "INV-1042", client: "Acme Inc.", amount: "$2,400.00", status: "Paid" as const },
+  { id: "INV-1041", client: "Globex", amount: "$880.00", status: "Pending" as const },
+  { id: "INV-1040", client: "Initech", amount: "$3,120.00", status: "Overdue" as const },
+  { id: "INV-1039", client: "Umbrella", amount: "$540.00", status: "Draft" as const },
+  { id: "INV-1038", client: "Hooli", amount: "$1,200.00", status: "Paid" as const },
+];
+
+function StatusBadge({ status }: { status: (typeof recent)[number]["status"] }) {
+  const map = {
+    Paid: "success",
+    Pending: "warning",
+    Overdue: "destructive",
+    Draft: "info",
+  } as const;
+  return <Badge variant={map[status]}>{status}</Badge>;
+}
+
+export function DashboardScreen() {
+  const today = React.useMemo(() => new Date(), []);
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: subDays(today, 29),
+    to: today,
+  });
+  return (
+    <div className="space-y-8">
+      <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>Dashboard</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+          <p className="text-sm text-muted-foreground">
+            Welcome back, Sara. Here's how your business is doing this month.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <DateRangePicker value={range} onChange={setRange} align="end" />
+          <Button>
+            <Plus /> New invoice
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {kpis.map((k) => {
+          const Trend = k.trend === "up" ? TrendingUp : TrendingDown;
+          return (
+            <Card key={k.label}>
+              <CardHeader className="pb-2">
+                <CardDescription>{k.label}</CardDescription>
+                <CardTitle className="text-2xl">{k.value}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div
+                  className={
+                    "inline-flex items-center gap-1 text-xs font-medium " +
+                    (k.trend === "up" ? "text-success" : "text-destructive")
+                  }
+                >
+                  <Trend className="h-3.5 w-3.5" />
+                  {k.delta}
+                  <span className="text-muted-foreground"> vs last period</span>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle>Revenue</CardTitle>
+                <CardDescription>Paid invoices over the last 30 days</CardDescription>
+              </div>
+              <Button variant="ghost" size="sm">
+                View report <ArrowUpRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <ChartPlaceholder />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Activity</CardTitle>
+            <CardDescription>Latest events from your team</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {[
+              { who: "Mia", what: "marked INV-1041 as sent", when: "2m ago" },
+              { who: "Leo", what: "added a payment of $1,200", when: "1h ago" },
+              { who: "Sara", what: "created invoice INV-1042", when: "3h ago" },
+              { who: "QA", what: "approved Acme proposal", when: "yesterday" },
+            ].map((a, i) => (
+              <div key={i} className="flex items-start gap-3">
+                <Avatar className="h-8 w-8">
+                  <AvatarFallback>{a.who.slice(0, 2).toUpperCase()}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 text-sm">
+                  <span className="font-medium">{a.who}</span>{" "}
+                  <span className="text-muted-foreground">{a.what}</span>
+                  <div className="text-xs text-muted-foreground">{a.when}</div>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Recent invoices</CardTitle>
+              <CardDescription>Your five most recent invoices</CardDescription>
+            </div>
+            <Button variant="outline" size="sm">
+              View all
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="divide-y">
+            {recent.map((r) => (
+              <div key={r.id} className="flex items-center justify-between py-3">
+                <div className="flex items-center gap-4">
+                  <span className="font-mono text-sm text-muted-foreground">
+                    {r.id}
+                  </span>
+                  <span className="font-medium">{r.client}</span>
+                </div>
+                <div className="flex items-center gap-6">
+                  <StatusBadge status={r.status} />
+                  <span className="w-24 text-right font-medium">{r.amount}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ChartPlaceholder() {
+  const bars = [40, 55, 30, 70, 60, 90, 75, 85, 50, 65, 80, 95, 70, 60];
+  return (
+    <div className="flex h-48 items-end gap-2">
+      {bars.map((h, i) => (
+        <div
+          key={i}
+          className="flex-1 rounded-t bg-primary/15 transition-all hover:bg-primary/30"
+          style={{ height: `${h}%` }}
+        />
+      ))}
+    </div>
+  );
+}

package/screens/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Public barrel for the final invoicing screens.
+ *
+ * These components are framework-agnostic React + TypeScript. They only depend
+ * on `@ds/*` (the design system). No Next.js server APIs are used, so a
+ * downstream consumer can drop them into a plain Vite/CRA React app as well
+ * as a Next.js project.
+ *
+ * Caveat: AppShell uses plain <a> tags. In a Next.js host, wrap the screen in
+ * a route that controls navigation, or swap <a> for next/link at the call site
+ * by re-exporting a tweaked AppShell.
+ */
+
+export { AppShell } from "./_shared/app-shell";
+export { DashboardScreen } from "./dashboard/dashboard-screen";
+export { InvoicesScreen } from "./invoices/invoices-screen";
+export { AuthScreen } from "./auth/auth-screen";