From 8809a012d5589af1aeb0761b6ed6174256633627 Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Sun, 4 Jan 2026 01:30:30 -0500
Subject: [PATCH] Layout changes to Earnings page. Earnings Setup only shows if
 not set up yet

---
 frontend/src/pages/EarningsDashboard.tsx | 110 +++++------------------
 1 file changed, 20 insertions(+), 90 deletions(-)

diff --git a/frontend/src/pages/EarningsDashboard.tsx b/frontend/src/pages/EarningsDashboard.tsx
index 5c42a3f..78208e6 100644
--- a/frontend/src/pages/EarningsDashboard.tsx
+++ b/frontend/src/pages/EarningsDashboard.tsx
@@ -135,9 +135,9 @@ const EarningsDashboard: React.FC = () => {
             Manage your rental earnings and payment setup. Community Rentals
             charges a 10% Community Upkeep Fee to help keep us running.{" "}
             <Link to="/faq" target="_blank">
-              Calculate what you can earn here.
-            </Link>
-            .
+              Calculate what you can earn here
+            </Link>{" "}
+            or <Link to="/faq#earnings">learn how payouts work</Link>.
           </p>
         </div>
       </div>
@@ -148,8 +148,24 @@ const EarningsDashboard: React.FC = () => {
         </div>
       )}
 
+      {/* Earnings Setup - only show if not fully set up */}
+      {(!hasStripeAccount || !isOnboardingComplete) && (
+        <div className="card mb-4">
+          <div className="card-header">
+            <h5 className="mb-0">Earnings Setup</h5>
+          </div>
+          <div className="card-body">
+            <EarningsStatus
+              hasStripeAccount={hasStripeAccount}
+              isOnboardingComplete={isOnboardingComplete}
+              onSetupClick={() => setShowOnboarding(true)}
+            />
+          </div>
+        </div>
+      )}
+
       <div className="row">
-        <div className="col-md-8">
+        <div className="col-12">
           {/* Earnings Overview */}
           <div className="card mb-4">
             <div className="card-header">
@@ -294,92 +310,6 @@ const EarningsDashboard: React.FC = () => {
             </div>
           </div>
         </div>
-
-        {/* Sidebar */}
-        <div className="col-md-4">
-          {/* Earnings Setup Status */}
-          <div className="card mb-4">
-            <div className="card-header">
-              <h5 className="mb-0">Earnings Setup</h5>
-            </div>
-            <div className="card-body">
-              <EarningsStatus
-                hasStripeAccount={hasStripeAccount}
-                isOnboardingComplete={isOnboardingComplete}
-                onSetupClick={() => setShowOnboarding(true)}
-              />
-            </div>
-          </div>
-
-          {/* Quick Stats */}
-          <div className="card mb-4">
-            <div className="card-header">
-              <h5 className="mb-0">Quick Stats</h5>
-            </div>
-            <div className="card-body">
-              <div className="d-flex justify-content-between mb-2">
-                <span>Completed Rentals:</span>
-                <strong>{earningsData?.rentalsWithEarnings.length || 0}</strong>
-              </div>
-              <div className="d-flex justify-content-between mb-2">
-                <span>Average Earning:</span>
-                <strong>
-                  $
-                  {earningsData?.rentalsWithEarnings.length
-                    ? (
-                        (earningsData.totalEarnings || 0) /
-                        earningsData.rentalsWithEarnings.length
-                      ).toFixed(2)
-                    : "0.00"}
-                </strong>
-              </div>
-              <div className="d-flex justify-content-between">
-                <span>Community Upkeep Fee:</span>
-                <strong>10%</strong>
-              </div>
-            </div>
-          </div>
-
-          {/* How Payouts Work */}
-          <div className="card">
-            <div className="card-header">
-              <h5 className="mb-0">How Payouts Work</h5>
-            </div>
-            <div className="card-body">
-              <div className="d-flex align-items-start mb-3">
-                <span className="badge bg-success me-2">1</span>
-                <div>
-                  <strong>Transfer Initiated</strong>
-                  <p className="mb-0 small text-muted">
-                    Immediate when rental is marked complete
-                  </p>
-                </div>
-              </div>
-              <div className="d-flex align-items-start mb-3">
-                <span className="badge bg-success me-2">2</span>
-                <div>
-                  <strong>Funds in Stripe</strong>
-                  <p className="mb-0 small text-muted">
-                    Instant — view in your Stripe dashboard
-                  </p>
-                </div>
-              </div>
-              <div className="d-flex align-items-start">
-                <span className="badge bg-primary me-2">3</span>
-                <div>
-                  <strong>Funds in Bank</strong>
-                  <p className="mb-0 small text-muted">
-                    2-7 business days (Stripe's schedule)
-                  </p>
-                </div>
-              </div>
-              <hr />
-              <p className="small text-muted mb-0">
-                <Link to="/faq#earnings">Learn more in our FAQ</Link>
-              </p>
-            </div>
-          </div>
-        </div>
       </div>
 
       {/* Stripe Connect Onboarding Modal */}