feat(billing): implement invoice display and retrieval functionality

- Added `ShowInvoices` component to display user invoices with status and actions.
- Integrated Stripe API to fetch invoices for the authenticated user.
- Updated `ShowBilling` component to conditionally render invoices if the user has a Stripe customer ID.

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -24,6 +24,7 @@ import { Progress } from "@/components/ui/progress";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { ShowInvoices } from "./show-invoices";
 
 const stripePromise = loadStripe(
 	process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
@@ -75,8 +76,8 @@ export const ShowBilling = () => {
 	const safePercentage = Math.min(percentage, 100);
 
 	return (
-		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
+		<div className="w-full space-y-6">
+			<Card className="bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="">
 						<CardTitle className="text-xl flex flex-row gap-2">
@@ -319,6 +320,8 @@ export const ShowBilling = () => {
 					</CardContent>
 				</div>
 			</Card>
+
+			{admin?.user.stripeCustomerId && <ShowInvoices />}
 		</div>
 	);
 };

apps/dokploy/components/dashboard/settings/billing/show-invoices.tsx

@@ -0,0 +1,159 @@
+import { Download, ExternalLink, FileText, Loader2 } from "lucide-react";
+import type Stripe from "stripe";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+const formatDate = (timestamp: number | null) => {
+	if (!timestamp) return "-";
+	return new Date(timestamp * 1000).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+};
+
+const formatAmount = (amount: number, currency: string) => {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: currency.toUpperCase(),
+	}).format(amount / 100);
+};
+
+const getStatusBadge = (status: Stripe.Invoice.Status | null) => {
+	const statusConfig: Record<
+		Stripe.Invoice.Status,
+		{ label: string; variant: "default" | "secondary" | "destructive" }
+	> = {
+		paid: { label: "Paid", variant: "default" },
+		open: { label: "Open", variant: "secondary" },
+		draft: { label: "Draft", variant: "secondary" },
+		void: { label: "Void", variant: "destructive" },
+		uncollectible: { label: "Uncollectible", variant: "destructive" },
+	};
+
+	if (!status) {
+		return <Badge variant="secondary">Unknown</Badge>;
+	}
+
+	const config = statusConfig[status] || {
+		label: status,
+		variant: "secondary" as const,
+	};
+
+	return <Badge variant={config.variant}>{config.label}</Badge>;
+};
+
+export const ShowInvoices = () => {
+	const { data: invoices, isLoading } = api.stripe.getInvoices.useQuery();
+
+	return (
+		<Card className="bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+			<div className="rounded-xl bg-background shadow-md">
+				<CardHeader>
+					<CardTitle className="text-xl flex flex-row gap-2">
+						<FileText className="size-6 text-muted-foreground self-center" />
+						Invoices
+					</CardTitle>
+					<CardDescription>
+						View and download your billing invoices
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="space-y-2 py-4 border-t">
+					{isLoading ? (
+						<div className="flex items-center justify-center min-h-[20vh]">
+							<span className="text-base text-muted-foreground flex flex-row gap-3 items-center">
+								Loading invoices...
+								<Loader2 className="animate-spin" />
+							</span>
+						</div>
+					) : invoices && invoices.length > 0 ? (
+						<div className="rounded-md border">
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Invoice</TableHead>
+										<TableHead>Date</TableHead>
+										<TableHead>Due Date</TableHead>
+										<TableHead>Amount</TableHead>
+										<TableHead>Status</TableHead>
+										<TableHead className="text-right">Actions</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{invoices.map((invoice) => (
+										<TableRow key={invoice.id}>
+											<TableCell className="font-medium">
+												{invoice.number || invoice.id.slice(0, 12)}
+											</TableCell>
+											<TableCell>{formatDate(invoice.created)}</TableCell>
+											<TableCell>{formatDate(invoice.dueDate)}</TableCell>
+											<TableCell>
+												{formatAmount(invoice.amountDue, invoice.currency)}
+											</TableCell>
+											<TableCell>{getStatusBadge(invoice.status)}</TableCell>
+											<TableCell className="text-right">
+												<div className="flex justify-end gap-2">
+													{invoice.hostedInvoiceUrl && (
+														<Button
+															variant="outline"
+															size="sm"
+															onClick={() =>
+																window.open(
+																	invoice.hostedInvoiceUrl || "",
+																	"_blank",
+																)
+															}
+														>
+															<ExternalLink className="h-4 w-4" />
+														</Button>
+													)}
+													{invoice.invoicePdf && (
+														<Button
+															variant="outline"
+															size="sm"
+															onClick={() =>
+																window.open(invoice.invoicePdf || "", "_blank")
+															}
+														>
+															<Download className="h-4 w-4" />
+														</Button>
+													)}
+												</div>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+					) : (
+						<div className="flex flex-col items-center justify-center min-h-[20vh] gap-2">
+							<FileText className="size-12 text-muted-foreground" />
+							<p className="text-base text-muted-foreground">
+								No invoices found
+							</p>
+							<p className="text-sm text-muted-foreground">
+								Your invoices will appear here once you have a subscription
+							</p>
+						</div>
+					)}
+				</CardContent>
+			</div>
+		</Card>
+	);
+};

apps/dokploy/server/api/routers/stripe.ts

@@ -129,4 +129,39 @@ export const stripeRouter = createTRPCRouter({
 
 		return servers.length < user.serversQuantity;
 	}),
+
+	getInvoices: adminProcedure.query(async ({ ctx }) => {
+		const user = await findUserById(ctx.user.ownerId);
+		const stripeCustomerId = user.stripeCustomerId;
+
+		if (!stripeCustomerId) {
+			return [];
+		}
+
+		const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+			apiVersion: "2024-09-30.acacia",
+		});
+
+		try {
+			const invoices = await stripe.invoices.list({
+				customer: stripeCustomerId,
+				limit: 100,
+			});
+
+			return invoices.data.map((invoice) => ({
+				id: invoice.id,
+				number: invoice.number,
+				status: invoice.status,
+				amountDue: invoice.amount_due,
+				amountPaid: invoice.amount_paid,
+				currency: invoice.currency,
+				created: invoice.created,
+				dueDate: invoice.due_date,
+				hostedInvoiceUrl: invoice.hosted_invoice_url,
+				invoicePdf: invoice.invoice_pdf,
+			}));
+		} catch (_) {
+			return [];
+		}
+	}),
 });