From 93474f2b2c3908a3ac31cf84c3d401dcd3d78805 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 15 Nov 2025 09:20:45 +0000
Subject: [PATCH] Create reusable Payouts widget component with Stripe Connect

cgen-241a86ab85104b0fa43d67c3c5ecfef4
---
 client/components/PayoutsWidget.tsx | 231 ++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)
 create mode 100644 client/components/PayoutsWidget.tsx

diff --git a/client/components/PayoutsWidget.tsx b/client/components/PayoutsWidget.tsx
new file mode 100644
index 00000000..85245f20
--- /dev/null
+++ b/client/components/PayoutsWidget.tsx
@@ -0,0 +1,231 @@
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { DollarSign, AlertCircle, CheckCircle, Clock, ExternalLink } from "lucide-react";
+
+export interface PayoutData {
+  available_for_payout: number;
+  pending_30_day_clearance: number;
+  total_earned: number;
+  stripe_connected: boolean;
+  stripe_account_id?: string;
+  last_payout_date?: string;
+  next_payout_date?: string;
+  payout_history?: PayoutRecord[];
+}
+
+export interface PayoutRecord {
+  id: string;
+  amount: number;
+  status: "completed" | "pending" | "failed";
+  date: string;
+  description?: string;
+}
+
+interface PayoutsWidgetProps {
+  data: PayoutData;
+  onConnectStripe?: () => void;
+  onRequestPayout?: () => void;
+  accentColor?: "purple" | "blue" | "cyan" | "green" | "amber" | "red";
+}
+
+const colorMap = {
+  purple: {
+    bg: "bg-gradient-to-br from-purple-950/40 to-purple-900/20",
+    border: "border-purple-500/20",
+    accent: "bg-purple-600 hover:bg-purple-700",
+    text: "text-purple-300",
+  },
+  blue: {
+    bg: "bg-gradient-to-br from-blue-950/40 to-blue-900/20",
+    border: "border-blue-500/20",
+    accent: "bg-blue-600 hover:bg-blue-700",
+    text: "text-blue-300",
+  },
+  cyan: {
+    bg: "bg-gradient-to-br from-cyan-950/40 to-cyan-900/20",
+    border: "border-cyan-500/20",
+    accent: "bg-cyan-600 hover:bg-cyan-700",
+    text: "text-cyan-300",
+  },
+  green: {
+    bg: "bg-gradient-to-br from-green-950/40 to-green-900/20",
+    border: "border-green-500/20",
+    accent: "bg-green-600 hover:bg-green-700",
+    text: "text-green-300",
+  },
+  amber: {
+    bg: "bg-gradient-to-br from-amber-950/40 to-amber-900/20",
+    border: "border-amber-500/20",
+    accent: "bg-amber-600 hover:bg-amber-700",
+    text: "text-amber-300",
+  },
+  red: {
+    bg: "bg-gradient-to-br from-red-950/40 to-red-900/20",
+    border: "border-red-500/20",
+    accent: "bg-red-600 hover:bg-red-700",
+    text: "text-red-300",
+  },
+};
+
+export function PayoutsWidget({
+  data,
+  onConnectStripe,
+  onRequestPayout,
+  accentColor = "purple",
+}: PayoutsWidgetProps) {
+  const colors = colorMap[accentColor];
+
+  if (!data.stripe_connected) {
+    return (
+      <Card className={`${colors.bg} border ${colors.border}`}>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <DollarSign className="h-5 w-5" />
+            Payout Information
+          </CardTitle>
+          <CardDescription>Manage how you receive payments</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="p-4 bg-black/30 rounded-lg border border-yellow-500/20 flex items-start gap-3">
+            <AlertCircle className="h-5 w-5 text-yellow-500 flex-shrink-0 mt-1" />
+            <div>
+              <p className="font-semibold text-white">Connect Stripe Account</p>
+              <p className="text-sm text-gray-400 mt-1">
+                To receive payouts for completed contracts, you need to connect your Stripe account.
+              </p>
+            </div>
+          </div>
+          <Button
+            onClick={onConnectStripe}
+            className={colors.accent}
+          >
+            <ExternalLink className="h-4 w-4 mr-2" />
+            Connect Stripe Account
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={`${colors.bg} border ${colors.border}`}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <DollarSign className="h-5 w-5" />
+          Payout Information
+        </CardTitle>
+        <CardDescription>
+          {data.stripe_account_id && (
+            <>Connected to {data.stripe_account_id} • </>
+          )}
+          Manage your earnings
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Main Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {/* Available for Payout */}
+          <div className="p-4 bg-black/30 rounded-lg border border-green-500/20 space-y-2">
+            <p className="text-sm text-gray-400">Available for Payout</p>
+            <p className="text-3xl font-bold text-green-400">
+              ${data.available_for_payout.toLocaleString('en-US', { minimumFractionDigits: 2 })}
+            </p>
+            <div className="flex gap-2 pt-2">
+              <Button
+                size="sm"
+                className="bg-green-600 hover:bg-green-700 flex-1"
+                onClick={onRequestPayout}
+              >
+                Request Payout
+              </Button>
+            </div>
+          </div>
+
+          {/* Pending Clearance */}
+          <div className="p-4 bg-black/30 rounded-lg border border-yellow-500/20 space-y-2">
+            <p className="text-sm text-gray-400">Pending (30-day Clearance)</p>
+            <p className="text-3xl font-bold text-yellow-400">
+              ${data.pending_30_day_clearance.toLocaleString('en-US', { minimumFractionDigits: 2 })}
+            </p>
+            <p className="text-xs text-gray-500">
+              Next payout: {data.next_payout_date ? new Date(data.next_payout_date).toLocaleDateString() : "TBD"}
+            </p>
+          </div>
+
+          {/* Total Earned */}
+          <div className="p-4 bg-black/30 rounded-lg border border-blue-500/20 space-y-2">
+            <p className="text-sm text-gray-400">Total Earned (All-Time)</p>
+            <p className="text-3xl font-bold text-blue-400">
+              ${data.total_earned.toLocaleString('en-US', { minimumFractionDigits: 2 })}
+            </p>
+            <p className="text-xs text-gray-500">
+              Last payout: {data.last_payout_date ? new Date(data.last_payout_date).toLocaleDateString() : "Never"}
+            </p>
+          </div>
+        </div>
+
+        {/* Payout History */}
+        {data.payout_history && data.payout_history.length > 0 && (
+          <div className="space-y-3">
+            <h3 className="font-semibold text-white">Payout History</h3>
+            <div className="space-y-2">
+              {data.payout_history.map((payout) => (
+                <div
+                  key={payout.id}
+                  className="flex items-center justify-between p-3 bg-black/30 rounded-lg border border-gray-500/10 hover:border-gray-500/30 transition"
+                >
+                  <div className="flex items-center gap-3 flex-1">
+                    {payout.status === "completed" ? (
+                      <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
+                    ) : payout.status === "pending" ? (
+                      <Clock className="h-5 w-5 text-yellow-500 flex-shrink-0" />
+                    ) : (
+                      <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0" />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <p className="font-semibold text-white">
+                        ${payout.amount.toLocaleString('en-US', { minimumFractionDigits: 2 })}
+                      </p>
+                      {payout.description && (
+                        <p className="text-xs text-gray-400 truncate">{payout.description}</p>
+                      )}
+                      <p className="text-xs text-gray-500">
+                        {new Date(payout.date).toLocaleDateString()}
+                      </p>
+                    </div>
+                  </div>
+                  <Badge
+                    className={
+                      payout.status === "completed"
+                        ? "bg-green-600/50 text-green-100"
+                        : payout.status === "pending"
+                        ? "bg-yellow-600/50 text-yellow-100"
+                        : "bg-red-600/50 text-red-100"
+                    }
+                  >
+                    {payout.status}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Info Box */}
+        <div className="p-4 bg-black/40 rounded-lg border border-gray-500/20 space-y-2">
+          <p className="text-sm font-semibold text-white">How Payouts Work</p>
+          <ul className="text-sm text-gray-400 space-y-1 list-disc list-inside">
+            <li>Earnings are available 30 days after contract completion</li>
+            <li>Payouts are processed on Mondays (if minimum balance met)</li>
+            <li>Stripe processes payments to your connected bank account</li>
+            <li>Check your Stripe dashboard for payment tracking</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default PayoutsWidget;