Add Payment Gateway selection to Settings page
This commit is contained in:
@@ -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 →
|
||||
</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 */}
|
||||
|
||||
Reference in New Issue
Block a user