🐛 fix(ui): Improve dashboard layout and enhance button functionality; open checkout URLs in a new tab

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}

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;
     },

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;
     },

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>

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 (