payouts

frontend/src/components/EarningsStatus.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+interface EarningsStatusProps {
+  hasStripeAccount: boolean;
+  onSetupClick: () => void;
+}
+
+const EarningsStatus: React.FC<EarningsStatusProps> = ({
+  hasStripeAccount,
+  onSetupClick,
+}) => {
+  // No Stripe account exists
+  if (!hasStripeAccount) {
+    return (
+      <div className="text-center">
+        <div className="mb-3">
+          <i
+            className="bi bi-exclamation-circle text-warning"
+            style={{ fontSize: "2.5rem" }}
+          ></i>
+        </div>
+        <h6>Earnings Not Set Up</h6>
+        <p className="text-muted small mb-3">
+          Set up earnings to automatically receive payments when rentals are
+          completed.
+        </p>
+        <button className="btn btn-primary" onClick={onSetupClick}>
+          Set Up Earnings
+        </button>
+      </div>
+    );
+  }
+
+  // Account exists and is set up
+  return (
+    <div className="text-center">
+      <div className="mb-3">
+        <i
+          className="bi bi-check-circle text-success"
+          style={{ fontSize: "2.5rem" }}
+        ></i>
+      </div>
+      <h6 className="text-success">Earnings Active</h6>
+      <p className="text-muted small mb-3">
+        Your earnings are set up and working. You'll receive payments
+        automatically.
+      </p>
+
+      <div className="small text-start">
+        <div className="d-flex justify-content-between mb-1">
+          <span>Earnings Enabled:</span>
+          <span className="text-success">
+            <i className="bi bi-check"></i> Yes
+          </span>
+        </div>
+        <div className="d-flex justify-content-between">
+          <span>Status:</span>
+          <span className="text-success">
+            <i className="bi bi-check"></i> Active
+          </span>
+        </div>
+      </div>
+
+      <hr />
+
+      <button
+        className="btn btn-outline-primary btn-sm"
+        onClick={() => window.open("https://dashboard.stripe.com", "_blank")}
+      >
+        <i className="bi bi-box-arrow-up-right"></i> Stripe Dashboard
+      </button>
+    </div>
+  );
+};
+
+export default EarningsStatus;