Add Payment Gateway selection to Settings page

This commit is contained in:
CycroftX
2026-02-03 21:04:57 +05:30
parent 456c2d7d57
commit 10e8e28c52
2 changed files with 138 additions and 31 deletions

View File

@@ -3,6 +3,7 @@ import { OrganizationProfileCard } from '@/features/settings/components/Organiza
import { PayoutBankingCard } from '@/features/settings/components/PayoutBankingCard';
import { TeamSecurityCard } from '@/features/settings/components/TeamSecurityCard';
import { DeveloperSection } from '@/features/settings/components/DeveloperSection';
import { PaymentGatewayCard } from '@/features/settings/components/PaymentGatewayCard';
export default function Settings() {
return (
@@ -11,42 +12,16 @@ export default function Settings() {
description="Manage platform configuration and critical operations."
>
<div className="space-y-6 max-w-[1200px]">
{/* Top Grid */}
{/* Top Grid: Identity & Banking */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[400px]">
{/* Box 1: Organization Identity (High Priority) */}
<OrganizationProfileCard />
{/* Box 2: Financials & Banking (High Priority) */}
<PayoutBankingCard />
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Box 3: Security (Full Width on Mobile, 2/3 on Desktop if needed, but here simple 1/3 stack or full width row) */}
{/* Adjusting layout: Let's make Security taking full row or sidebar style.
Based on requirements "2x2 Grid or Vertical Stack".
Let's stick to a clean layout where Security sits next to maybe a logs panel or just takes full width.
Actually, the requirements said "Layout: 2x2 Grid".
Let's put Team & Security as the 3rd box, and maybe Developer as 4th?
But Developer is collapsible.
*/}
<div className="lg:col-span-2">
<TeamSecurityCard />
</div>
<div className="lg:col-span-1">
{/* Placeholder or Tip card? Or maybe just make TeamSecurityCard full width if it has lists.
The TeamSecurityCard design I made is card-like.
Let's span it across 2 columns for better readability of the list.
*/}
<div className="neu-card p-6 h-full bg-gradient-to-br from-primary/5 to-transparent border-primary/20">
<h4 className="font-bold text-lg mb-2">Need Help?</h4>
<p className="text-sm text-muted-foreground mb-4">
Contact our dedicated support team for assistance with account configurations.
</p>
<button className="text-sm font-bold text-primary hover:underline">
Open Support Ticket &rarr;
</button>
</div>
</div>
{/* Middle Grid: Gateways & Security */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto">
<PaymentGatewayCard />
<TeamSecurityCard />
</div>
{/* Collapsible Developer Section */}