functional redirect auth screen

web/src/app/auth/sso-callback/page.tsx

@@ -3,6 +3,10 @@ import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Card, Text } from "@tremor/react";
 import { Spinner } from "@/components/Spinner";
+import { SpinnerBall } from "@phosphor-icons/react/dist/ssr";
+import LogoType from "@/components/header/LogoType";
+import { Logo } from "@/components/Logo";
+import { HeaderTitle } from "@/components/header/HeaderTitle";
 
 export default function SSOCallback() {
   const router = useRouter();
@@ -35,7 +39,7 @@ export default function SSOCallback() {
           setTimeout(() => {
             setAuthStatus("Redirecting to dashboard...");
             setTimeout(() => {
-              router.push("/dashboard");
+              router.push("/admin/plan");
             }, 1000);
           }, 1000);
         } else {
@@ -50,17 +54,62 @@ export default function SSOCallback() {
 
     verifyToken();
   }, [router, searchParams]);
-
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <Card className="max-w-lg p-8 text-center">
+    <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-background-50 to-blue-50">
+      <Card className="max-w-lg p-8 text-center shadow-xl rounded-xl bg-white">
         {error ? (
-          <Text className="text-red-500">{error}</Text>
+          <div className="space-y-4">
+            <svg
+              className="w-16 h-16 mx-auto text-neutral-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <Text className="text-xl font-bold text-red-600">{error}</Text>
+          </div>
         ) : (
-          <>
-            <Spinner />
-            <Text className="text-lg font-semibold">{authStatus}</Text>
-          </>
+          <div className="space-y-6 flex flex-col">
+            <div className="flex mx-auto">
+              <Logo height={80} width={80} />
+            </div>
+            <SpinnerBall size="large" className="mx-auto text-neutral-600" />
+            <Text className="text-2xl font-semibold text-text-900">
+              {authStatus}
+            </Text>
+            <div className="w-full h-2 bg-background-100 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-background-600 rounded-full animate-progress"
+                style={{
+                  animation: "progress 5s ease-out forwards",
+                  width: "0%",
+                }}
+              />
+            </div>
+            <style jsx>{`
+              @keyframes progress {
+                0% {
+                  width: 0%;
+                }
+                60% {
+                  width: 75%;
+                }
+                100% {
+                  width: 99%;
+                }
+              }
+              .animate-progress {
+                animation: progress 5s ease-out forwards;
+              }
+            `}</style>
+          </div>
         )}
       </Card>
     </div>

web/src/app/ee/admin/plan/page.tsx

@@ -1,13 +1,13 @@
 import { BillingSettings } from "./BillingSettings";
 import { AdminPageTitle } from "@/components/admin/Title";
-import { PackageIcon } from "@/components/icons/icons";
+import { CreditCardIcon } from "@/components/icons/icons";
 
 export default async function Whitelabeling() {
   return (
     <div className="mx-auto container">
       <AdminPageTitle
         title="Billing"
-        icon={<PackageIcon size={32} className="my-auto" />}
+        icon={<CreditCardIcon size={32} className="my-auto" />}
       />
 
       <BillingSettings />

web/src/components/admin/ClientLayout.tsx

@@ -21,6 +21,7 @@ import {
   AssistantsIconSkeleton,
   ClosedBookIcon,
   SearchIcon,
+  CreditCardIcon,
 } from "@/components/icons/icons";
 import { UserRole } from "@/lib/types";
 import { FiActivity, FiBarChart2 } from "react-icons/fi";
@@ -29,9 +30,6 @@ import { User } from "@/lib/types";
 import { usePathname } from "next/navigation";
 import { SettingsContext } from "../settings/SettingsProvider";
 import { useContext } from "react";
-import { CustomTooltip } from "../tooltip/CustomTooltip";
-import { CLOUD_ENABLED } from "@/lib/constants";
-import { BellSimpleRinging } from "@phosphor-icons/react";
 
 export function ClientLayout({
   user,
@@ -327,7 +325,7 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <BellSimpleRinging size={18} />
+                                    <CreditCardIcon size={18} />
                                     <div className="ml-1">Billing</div>
                                   </div>
                                 ),

web/src/components/icons/icons.tsx

@@ -2754,3 +2754,27 @@ export const CameraIcon = ({
     </svg>
   );
 };
+
+export const CreditCardIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 14 14"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12.5 2.25h-11a1 1 0 0 0-1 1v7.5a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-7.5a1 1 0 0 0-1-1m-12 3.5h13m-4 3.5H11"
+      />
+    </svg>
+  );
+};