fix: switching issues in payments dashboard

apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx

@@ -1,10 +1,10 @@
 'use client'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { motion } from 'framer-motion'
 import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
 import Link from 'next/link'
 import { getUriWithOrg } from '@services/config/config'
-import { CreditCard, Settings, Repeat, BookOpen, Users, DollarSign, Gem } from 'lucide-react'
+import { Settings, Users, Gem } from 'lucide-react'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { useOrg } from '@components/Contexts/OrgContext'
 import PaymentsConfigurationPage from '@components/Dashboard/Pages/Payments/PaymentsConfigurationPage'
@@ -20,18 +20,37 @@ export type PaymentsParams = {
 function PaymentsPage({ params }: { params: PaymentsParams }) {
   const session = useLHSession() as any
   const org = useOrg() as any
-  const [selectedSubPage, setSelectedSubPage] = useState(params.subpage || 'general')
+  const subpage = params.subpage || 'customers'
-  const [H1Label, setH1Label] = useState('')
-  const [H2Label, setH2Label] = useState('')
   
   const isPaymentsEnabled = useFeatureFlag({
     path: ['features', 'payments', 'enabled'],
     defaultValue: false
   })
 
-  useEffect(() => {
+  const getPageTitle = () => {
-    handleLabels()
+    switch (subpage) {
-  }, [selectedSubPage])
+      case 'customers':
+        return {
+          h1: 'Customers',
+          h2: 'View and manage your customer information'
+        }
+      case 'paid-products':
+        return {
+          h1: 'Paid Products',
+          h2: 'Manage your paid products and pricing'
+        }
+      case 'configuration':
+        return {
+          h1: 'Payment Configuration',
+          h2: 'Set up and manage your payment gateway'
+        }
+      default:
+        return {
+          h1: 'Payments',
+          h2: 'Overview of your payment settings and transactions'
+        }
+    }
+  }
 
   if (!isPaymentsEnabled) {
     return (
@@ -45,66 +64,41 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
     )
   }
 
-  function handleLabels() {
+  const { h1, h2 } = getPageTitle()
-    if (selectedSubPage === 'general') {
-      setH1Label('Payments')
-      setH2Label('Overview of your payment settings and transactions')
-    }
-    if (selectedSubPage === 'configuration') {
-      setH1Label('Payment Configuration')
-      setH2Label('Set up and manage your payment gateway')
-    }
-    if (selectedSubPage === 'subscriptions') {
-      setH1Label('Subscriptions')
-      setH2Label('Manage your subscription plans')
-    }
-    if (selectedSubPage === 'paid-products') {
-      setH1Label('Paid Products')
-      setH2Label('Manage your paid products and pricing')
-    }
-    if (selectedSubPage === 'customers') {
-      setH1Label('Customers')
-      setH2Label('View and manage your customer information')
-    }
-  }
 
   return (
     <div className="h-screen w-full bg-[#f8f8f8] flex flex-col">
-      <div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
+      <div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 nice-shadow">
         <BreadCrumbs type="payments" />
-        <div className="my-2  py-3">
+        <div className="my-2 py-2">
           <div className="w-100 flex flex-col space-y-1">
             <div className="pt-3 flex font-bold text-4xl tracking-tighter">
-              {H1Label}
+              {h1}
             </div>
             <div className="flex font-medium text-gray-400 text-md">
-              {H2Label}{' '}
+              {h2}
             </div>
           </div>
         </div>
-        <div className="flex space-x-5 font-black text-sm">
+        <div className="flex space-x-0.5 font-black text-sm">
           <TabLink
             href={getUriWithOrg(params.orgslug, '/dash/payments/customers')}
             icon={<Users size={16} />}
             label="Customers"
-            isActive={selectedSubPage === 'customers'}
+            isActive={subpage === 'customers'}
-            onClick={() => setSelectedSubPage('customers')}
           />
           <TabLink
             href={getUriWithOrg(params.orgslug, '/dash/payments/paid-products')}
             icon={<Gem size={16} />}
             label="Products & Subscriptions"
-            isActive={selectedSubPage === 'paid-products'}
+            isActive={subpage === 'paid-products'}
-            onClick={() => setSelectedSubPage('paid-products')}
           />
           <TabLink
             href={getUriWithOrg(params.orgslug, '/dash/payments/configuration')}
             icon={<Settings size={16} />}
             label="Configuration"
-            isActive={selectedSubPage === 'configuration'}
+            isActive={subpage === 'configuration'}
-            onClick={() => setSelectedSubPage('configuration')}
           />
-
         </div>
       </div>
       <div className="h-6"></div>
@@ -115,21 +109,18 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
         transition={{ duration: 0.1, type: 'spring', stiffness: 80 }}
         className="flex-1 overflow-y-auto"
       >
-        {selectedSubPage === 'general' && <div>General</div>}
+        {subpage === 'configuration' && <PaymentsConfigurationPage />}
-        {selectedSubPage === 'configuration' && <PaymentsConfigurationPage />}
+        {subpage === 'paid-products' && <PaymentsProductPage />}
-        {selectedSubPage === 'paid-products' && <PaymentsProductPage />}
+        {subpage === 'customers' && <PaymentsCustomersPage />}
-        {selectedSubPage === 'customers' && <PaymentsCustomersPage />}
       </motion.div>
     </div>
   )
 }
 
-const TabLink = ({ href, icon, label, isActive, onClick }: { href: string, icon: React.ReactNode, label: string, isActive: boolean, onClick: () => void }) => (
+const TabLink = ({ href, icon, label, isActive }: { href: string, icon: React.ReactNode, label: string, isActive: boolean }) => (
   <Link href={href}>
     <div
-      onClick={onClick}
+      className={`py-2 w-fit text-center border-black transition-all ease-linear ${isActive ? 'border-b-4' : 'opacity-50'} cursor-pointer`}
-      className={`py-2 w-fit text-center border-black transition-all ease-linear ${isActive ? 'border-b-4' : 'opacity-50'
-        } cursor-pointer`}
     >
       <div className="flex items-center space-x-2.5 mx-2">
         {icon}

apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx

@@ -83,7 +83,7 @@ const PaymentsConfigurationPage: React.FC = () => {
 
     return (
         <div>
-            <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
+            <div className="ml-10 mr-10 mx-auto bg-white rounded-xl nice-shadow px-4 py-4">
                 <div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
                     <h1 className="font-bold text-xl text-gray-800">Payments Configuration</h1>
                     <h2 className="text-gray-500 text-md">Manage your organization payments configuration</h2>

apps/web/components/Dashboard/Pages/Payments/PaymentsCustomersPage.tsx

@@ -141,7 +141,7 @@ function PaymentsCustomersPage() {
   if (!customers) return <div>No customer data available</div>
 
   return (
-    <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
+    <div className="ml-10 mr-10 mx-auto bg-white rounded-xl nice-shadow px-4 py-4">
       <div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
         <h1 className="font-bold text-xl text-gray-800">Customers</h1>
         <h2 className="text-gray-500 text-md">View and manage your customer information</h2>