Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout changes to Earnings page. Earnings Setup only shows if not set up yet

Browse Source
This commit is contained in:
jackiettran
2026-01-04 01:30:30 -05:00
parent a0d63ff04a
commit 8809a012d5
1 changed files with 20 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/pages/EarningsDashboard.tsx
View File

@@ -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 */}