From fc0da761b504bb33c2781d2388a070cd74992659 Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Mon, 10 Mar 2025 18:32:07 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ui):=20Improve=20dashboard?=
 =?UTF-8?q?=20layout=20and=20enhance=20button=20functionality;=20open=20ch?=
 =?UTF-8?q?eckout=20URLs=20in=20a=20new=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(main)/(user)/dashboard/content.tsx   | 31 ++++++++++++++++---
 apps/user/app/(main)/(user)/payment/page.tsx  |  2 +-
 .../user/app/(main)/purchasing/order/page.tsx |  2 +-
 apps/user/components/footer.tsx               | 14 +++++----
 apps/user/components/header.tsx               |  2 +-
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/apps/user/app/(main)/(user)/dashboard/content.tsx b/apps/user/app/(main)/(user)/dashboard/content.tsx
index 315a262..b2ccdce 100644
--- a/apps/user/app/(main)/(user)/dashboard/content.tsx
+++ b/apps/user/app/(main)/(user)/dashboard/content.tsx
@@ -57,7 +57,11 @@ export default function Content() {
 
   const [protocol, setProtocol] = useState('');
 
-  const { data: userSubscribe = [], refetch } = useQuery({
+  const {
+    data: userSubscribe = [],
+    refetch,
+    isLoading,
+  } = useQuery({
     queryKey: ['queryUserSubscribe'],
     queryFn: async () => {
       const { data } = await queryUserSubscribe();
@@ -88,10 +92,27 @@ export default function Content() {
     <>
       {userSubscribe.length ? (
         <>
-          <h2 className='flex items-center gap-1.5 font-semibold'>
-            <Icon icon='uil:servers' className='size-5' />
-            {t('mySubscriptions')}
-          </h2>
+          <div className='flex items-center justify-between'>
+            <h2 className='flex items-center gap-1.5 font-semibold'>
+              <Icon icon='uil:servers' className='size-5' />
+              {t('mySubscriptions')}
+            </h2>
+            <div className='flex gap-2'>
+              <Button
+                size='sm'
+                variant='outline'
+                onClick={() => {
+                  refetch();
+                }}
+                className={isLoading ? 'animate-pulse' : ''}
+              >
+                <Icon icon='uil:sync' />
+              </Button>
+              <Button size='sm' asChild>
+                <Link href='/subscribe'>{t('purchaseSubscription')}</Link>
+              </Button>
+            </div>
+          </div>
           <div className='flex flex-wrap justify-between gap-4'>
             <Tabs
               value={platform}
diff --git a/apps/user/app/(main)/(user)/payment/page.tsx b/apps/user/app/(main)/(user)/payment/page.tsx
index a4c362c..f584adc 100644
--- a/apps/user/app/(main)/(user)/payment/page.tsx
+++ b/apps/user/app/(main)/(user)/payment/page.tsx
@@ -56,7 +56,7 @@ export default function Page() {
         returnUrl: window.location.href,
       });
       if (data.data?.type === 'url' && data.data.checkout_url) {
-        window.location.href = data.data.checkout_url;
+        window.open(data.data.checkout_url, '_blank');
       }
       return data?.data;
     },
diff --git a/apps/user/app/(main)/purchasing/order/page.tsx b/apps/user/app/(main)/purchasing/order/page.tsx
index 39c2d7c..1e3096f 100644
--- a/apps/user/app/(main)/purchasing/order/page.tsx
+++ b/apps/user/app/(main)/purchasing/order/page.tsx
@@ -60,7 +60,7 @@ export default function Page() {
         returnUrl: window.location.href,
       });
       if (data.data?.type === 'url' && data.data?.checkout_url) {
-        window.location.href = data.data?.checkout_url;
+        window.open(data.data.checkout_url, '_blank');
       }
       return data?.data;
     },
diff --git a/apps/user/components/footer.tsx b/apps/user/components/footer.tsx
index f45aa52..09be8a0 100644
--- a/apps/user/components/footer.tsx
+++ b/apps/user/components/footer.tsx
@@ -67,12 +67,14 @@ export default function Footer() {
         </nav>
         <div>
           <strong className='text-foreground'>{site.site_name}</strong> © All rights reserved.
-          <Link href='/tos' className='ml-2 underline'>
-            {t('tos')}
-          </Link>
-          <Link href='/privacy-policy' className='ml-2 underline'>
-            {t('privacyPolicy')}
-          </Link>
+          <div>
+            <Link href='/tos' className='underline'>
+              {t('tos')}
+            </Link>
+            <Link href='/privacy-policy' className='ml-2 underline'>
+              {t('privacyPolicy')}
+            </Link>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/apps/user/components/header.tsx b/apps/user/components/header.tsx
index b3bc992..aa1c1b8 100644
--- a/apps/user/components/header.tsx
+++ b/apps/user/components/header.tsx
@@ -19,7 +19,7 @@ export default function Header() {
       {site.site_logo && (
         <Image src={site.site_logo} width={48} height={48} alt='logo' unoptimized />
       )}
-      <span>{site.site_name}</span>
+      <span className=''>{site.site_name}</span>
     </Link>
   );
   return (