new loading layout standard

app/api/general/paymentService.ts

@@ -1,6 +1,6 @@
-import { PaymentType } from "@/types/payment";
+import { PaymentType, Transaction } from "@/types/payment";
 
-const dummyPaymentTypeData:PaymentType[] = [
+const dummyPaymentTypeData: PaymentType[] = [
     {
         id: 1,
         type: "Card",
@@ -15,8 +15,39 @@ const dummyPaymentTypeData:PaymentType[] = [
     }
 ]
 
-export const getPaymentType = async ():Promise<PaymentType[] | undefined> => {
+const transactionList: Transaction[] = [
+    {
+        id: 1,
+        name: "Plan Payment",
+        created_at: "2025-07-17T10:45:23.000Z",
+        amount: -49.99,
+    },
+    {
+        id: 2,
+        name: "Top-up Credit",
+        created_at: "2025-07-16T08:15:10.000Z",
+        amount: 100.00,
+    },
+    {
+        id: 3,
+        name: "Refund Processed",
+        created_at: "2025-07-15T14:32:45.000Z",
+        amount: -25.00,
+    },
+    {
+        id: 4,
+        name: "Monthly Subscription",
+        created_at: "2025-07-01T00:00:00.000Z",
+        amount: 19.99,
+    }
+];
+
+export const getPaymentType = async (): Promise<PaymentType[] | undefined> => {
 
     return dummyPaymentTypeData
-    
+
+}
+
+export const getAllTransaction = async (): Promise<Transaction[] | undefined> => {
+    return transactionList
 }

app/guest/layout.tsx

@@ -1,21 +1,52 @@
-// app/layout.tsx
-import 'antd/dist/reset.css' // or 'antd/dist/antd.css' for older versions
-import './globals.css'
+'use client'
 
-import type { Metadata } from 'next'
-
-import { Home, MessageCircle, User } from 'lucide-react'
+import React from 'react'
+import { Layout, Flex, Row, Col } from 'antd'
 import Header from '@/components/layout/Header'
+import Navigation from '@/components/layout/Navigation'
+import { usePathname } from 'next/navigation'
 
-export const metadata: Metadata = {
-  title: 'Mobile App',
-  description: 'Responsive app layout with sidebar',
-}
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+const AppLayout = ({ children }: { children: React.ReactNode }) => {
+
+  const pathname = usePathname()
+
+  const skipLayoutPrefixes = [
+    '/user/chat/',
+    '/user/persona/create',
+    '/user/knowledge/create',
+    '/user/settings/profile',
+    '/user/payment',
+    '/user/payment'
+  ];
+
+  const shouldSkipLayout = skipLayoutPrefixes.some(prefix =>
+    pathname.startsWith(prefix)
+  );
+
+  if (shouldSkipLayout) {
+    return <>{children}</>;
+  }
 
   return (
-    <div className="w-full max-w-[430px] min-h-screen flex flex-col justify-between relative bg-white shadow-xl">
-    </div>
-  )
+    <Layout className="!w-full !max-w-[430px] !mx-auto !relative !bg-white">
+      <Flex vertical className='!h-screen'>
+        <Row>
+          <Col span={24}>
+            <Header />
+          </Col>
+        </Row>
+
+        <Row className='flex-1 overflow-y-scroll overflow-x-hidden'>
+          <Col span={24}>{children}</Col>
+        </Row>
+
+        <div>
+          <Navigation />
+        </div>
+      </Flex>
+    </Layout>
+  );
 }
+
+export default AppLayout;

app/guest/page.tsx

@@ -0,0 +1,10 @@
+'use client'
+import { useEffect } from "react"
+
+export default function HomePage() {
+
+  return (
+    <div className="space-y-6">
+    </div>
+  )
+}

app/not-found.tsx

@@ -0,0 +1,22 @@
+// app/not-found.tsx
+"use client";
+
+import Link from "next/link";
+import { Button, Result } from "antd";
+
+export default function NotFound() {
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-white !w-full">
+      <Result
+        status="404"
+        title="404"
+        subTitle="Sorry, the page you visited does not exist."
+        extra={
+          <Link href="/user">
+            <Button type="primary">Back Home</Button>
+          </Link>
+        }
+      />
+    </div>
+  );
+}

app/user/chat/[chatID]/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 import { useState } from 'react';
 import type { Chat } from '@/types/chat';
-import { Flex, Layout, Row, Col, Input, Space, Upload, Button } from 'antd';
+import { Flex, Layout, Row, Col, Input, Space, Upload, Button, Result } from 'antd';
 import PageTitle from '@/components/ui/PageTitle';
 import Navigation from '@/components/layout/Navigation'
 import { useParams } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query';
 import { getChat } from '@/app/api/user/chatService';
 import { PaperClipOutlined, SendOutlined } from '@ant-design/icons'
-
+import LoadingScreen from '@/components/layout/LoadingScreen';
+import ErrorPage from '@/components/layout/ErrorPage';
 
 const ChatPage: React.FC = () => {
 
@@ -22,13 +23,9 @@ const ChatPage: React.FC = () => {
 
     const [enabled, setEnabled] = useState(false);
 
-    if (isLoading) {
-        return <p>Loading...</p>
-    }
+    if (isLoading) return <LoadingScreen />
 
-    if (error) {
-        return <p>Loading...</p>
-    }
+    if (error) return <ErrorPage/>
 
     return (
         <Layout className="!w-full !max-w-[430px] !mx-auto !relative !bg-white">

app/user/chat/page.tsx

@@ -8,6 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 import PageTitle from '@/components/ui/PageTitle';
 import type { Chat } from '@/types/chat';
 import { getAllChat } from '@/app/api/user/chatService';
+import LoadingScreen from '@/components/layout/LoadingScreen';
 
 const { Text } = Typography;
 
@@ -25,14 +26,7 @@ const ChatPage: React.FC = () => {
     });
 
     // Show loading state while fetching data
-    if (isLoading) {
-        return (
-            <Layout>
-                <PageTitle>RUCCAN CHAT</PageTitle>
-                {/* You can drop in a Skeleton or Spinner here later */}
-            </Layout>
-        );
-    }
+    if (isLoading) return <LoadingScreen/>
 
     // Optional: handle unexpected empty/null data
     if (!chatList || chatList.length === 0) {

app/user/knowledge/create/page.tsx

@@ -52,7 +52,7 @@ const CreatePersona: React.FC = () => {
     return (
         <AltLayout header={<PageTitle backButton={true}>ADD KNOWLEDGE SOURCE</PageTitle>}>
             <Row>
-                <Col span={24} className='!px-4'>
+                <Col span={24} className='!p-4'>
                     <Form layout="vertical">
 
                         <Row>

app/user/knowledge/page.tsx

@@ -15,6 +15,7 @@ import PrimaryButton from '@/components/ui/PrimaryButton';
 import { Flex, Row, Col, Tag, Button, Table, Layout, Image, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { getAllKnowledge } from '@/app/api/user/knowledgeService';
+import LoadingScreen from '@/components/layout/LoadingScreen';
 
 const { Text, Title } = Typography;
 
@@ -70,9 +71,8 @@ const Knowledge: React.FC = () => {
         queryFn: () => getAllKnowledge()
     })
 
-    if (isLoading) {
-        return <p>Loading...</p>
-    }
+    // Show loading state while fetching data
+    if (isLoading) return <LoadingScreen/>
 
     if (!knowledges) {
         return <p></p>

app/user/layout.tsx

@@ -17,7 +17,8 @@ const AppLayout = ({ children }: { children: React.ReactNode }) => {
     '/user/knowledge/create',
     '/user/settings/profile',
     '/user/payment',
-    '/user/payment'
+    '/user/payment',
+    '/user/pricing'
   ];
 
   const shouldSkipLayout = skipLayoutPrefixes.some(prefix =>

app/user/page.tsx

@@ -7,10 +7,14 @@ import SectionTitle from '@/components/ui/SectionTitle';
 import PageTitle from '@/components/ui/PageTitle';
 import LoadingMeter from '@/components/ui/LoadingMeter';
 import PrimaryButton from '@/components/ui/PrimaryButton';
+import { useRouter } from 'next/navigation';
 
 const { Title, Text } = Typography;
 
 const page = () => {
+
+    const router = useRouter()
+
     return (
         <Layout className="!space-y-4 !bg-white">
             <PageTitle>DASHBOARD</PageTitle>
@@ -38,8 +42,8 @@ const page = () => {
                         </Col>
 
                         <Col span={24} className='mb-2'>
-                            <PrimaryButton onClick={()=>{}}>
-                                Upgrade Button <RightOutlined />
+                            <PrimaryButton onClick={()=>{ router.push("user/pricing") }}>
+                                Upgrade Plan <RightOutlined />
                             </PrimaryButton>
                         </Col>
 

app/user/payment/page.tsx

@@ -1,15 +1,17 @@
 "use client";
 
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import PageTitle from '@/components/ui/PageTitle';
 import { Typography, Button, Input, Form, Select, Switch, Flex, Row, Col } from 'antd';
 import Link from 'next/link';
-import { BankFilled, WalletFilled } from '@ant-design/icons';
+
 import type { PaymentType } from '@/types/payment';
 import { useQuery } from '@tanstack/react-query';
 import { getPaymentType } from '@/app/api/general/paymentService';
 import AltLayout from '@/components/layout/AltLayout';
 import PrimaryButton from '@/components/ui/PrimaryButton';
+import IconCard from '@/components/ui/IconCard';
+import LoadingScreen from '@/components/layout/LoadingScreen';
 
 const { Text, Title } = Typography;
 
@@ -18,6 +20,7 @@ const CreatePersona: React.FC = () => {
   const [selectedPaymentID, setSelectedPaymentID] = useState<number | undefined>();
   const [companyName, setCompanyName] = useState('');
   const [cardNumber, setCardNumber] = useState('');
+  const [isDefault, setIsDefault] = useState(false);
   const [cvc, setCvc] = useState('');
 
   // Fetch payment types using React Query
@@ -26,13 +29,8 @@ const CreatePersona: React.FC = () => {
     queryFn: getPaymentType
   });
 
-  const renderIcon = useCallback((nameId: string) => {
-    if (nameId === "card") return <WalletFilled className='!text-white !text-xl' />
-    else if (nameId === "bank") return <BankFilled className='!text-white !text-xl' />
-    else return <></>
-  }, [])
-
-  if (isLoading) return <p>Loading...</p>;
+  // Show loading state while fetching data
+  if (isLoading) return <LoadingScreen/>
 
   return (
     <AltLayout header={<PageTitle backButton={true}>PAYMENT</PageTitle>}>
@@ -49,20 +47,7 @@ const CreatePersona: React.FC = () => {
 
           {/* Payment type selection */}
           <Flex wrap gap={8}>
-            {paymentType?.map(({ id, type, description, icon_id }) => (
-              <div
-                key={id}
-                className={`
-                  ${selectedPaymentID === id ? 'bg-blue-950' : 'bg-gray-400'} 
-                  hover:bg-blue-950 transition-all ease-in-out 
-                  rounded-lg p-4 max-w-[160px] cursor-pointer
-                `}
-                onClick={() => setSelectedPaymentID(id)}
-              >
-                {renderIcon(icon_id)}
-                <Text className='!text-xs !text-white !block'>Transfer via card number</Text>
-              </div>
-            ))}
+            {paymentType?.map(({ id, type, description, icon_id }) => <IconCard key={id} active={selectedPaymentID === id} iconName={icon_id} text={description} handleClick={() => { setSelectedPaymentID(id)}} />)}
           </Flex>
 
           {/* Payment form */}
@@ -139,7 +124,7 @@ const CreatePersona: React.FC = () => {
                     {/* Default payment switch */}
                     <Form.Item>
                       <Flex gap={4}>
-                        <Switch checked={true} onChange={() => { }} />
+                        <Switch checked={isDefault} onChange={setIsDefault} />
                         <Text className='!text-xs font-semibold'>SET AS DEFAULT</Text>
                       </Flex>
                     </Form.Item>

app/user/payment/transaction-history/page.tsx

@@ -1,162 +1,58 @@
 "use client";
 
-import { useCallback, useState } from 'react';
+import React from 'react';
 import PageTitle from '@/components/ui/PageTitle';
-import { Typography, Button, Input, Form, Select, Switch, Flex, Row, Col } from 'antd';
-import Link from 'next/link';
-import { BankFilled, WalletFilled } from '@ant-design/icons';
-import type { PaymentType } from '@/types/payment';
+import { Typography, Flex, Row, Col } from 'antd';
+import type { Transaction } from '@/types/payment';
+import { getAllTransaction } from '@/app/api/general/paymentService';
 import { useQuery } from '@tanstack/react-query';
-import { getPaymentType } from '@/app/api/general/paymentService';
+import PaymentCard from '@/components/ui/PaymentCard';
 import AltLayout from '@/components/layout/AltLayout';
-import PrimaryButton from '@/components/ui/PrimaryButton';
+import LoadingScreen from '@/components/layout/LoadingScreen';
 
 const { Text, Title } = Typography;
 
+const now = new Date();
+const month = now.toLocaleString('default', { month: 'long' });
+const year = now.getFullYear().toString();
+
 const CreatePersona: React.FC = () => {
-  // Form states
-  const [selectedPaymentID, setSelectedPaymentID] = useState<number | undefined>();
-  const [companyName, setCompanyName] = useState('');
-  const [cardNumber, setCardNumber] = useState('');
-  const [cvc, setCvc] = useState('');
 
   // Fetch payment types using React Query
-  const { data: paymentType, error, isLoading } = useQuery<PaymentType[] | undefined>({
-    queryKey: ['getPaymentType'],
-    queryFn: getPaymentType
+  const { data: transactionList, error, isLoading } = useQuery<Transaction[] | undefined>({
+    queryKey: ['getAllTransaction'],
+    queryFn: getAllTransaction
   });
 
-  const renderIcon = useCallback((nameId: string) => {
-    if (nameId === "card") return <WalletFilled className='!text-white !text-xl' />
-    else if (nameId === "bank") return <BankFilled className='!text-white !text-xl' />
-    else return <></>
-  }, [])
-
-  if (isLoading) return <p>Loading...</p>;
+  // Show loading state while fetching data
+  if (isLoading) return <LoadingScreen/>
 
   return (
-    <AltLayout header={<PageTitle backButton={true}>PAYMENT</PageTitle>}>
+    <AltLayout header={<PageTitle backButton={true}>TRANSACTION HISTORY</PageTitle>}>
       <Row className='!bg-white'>
-        <Col span={24} className='!p-4'>
-          {/* Section intro */}
-          <Flex vertical gap={10} className='!mb-8'>
-            <Text className='!font-semibold !text-xs !text-gray-400'>Enter your payment details <br />
-              <Text italic className='!text-xs'>
-                By continuing you agree to our <Link href="/">Terms</Link>
-              </Text>
-            </Text>
-          </Flex>
-
-          {/* Payment type selection */}
-          <Flex wrap gap={8}>
-            {paymentType?.map(({ id, type, description, icon_id }) => (
-              <div
-                key={id}
-                className={`
-                  ${selectedPaymentID === id ? 'bg-blue-950' : 'bg-gray-400'} 
-                  hover:bg-blue-950 transition-all ease-in-out 
-                  rounded-lg p-4 max-w-[160px] cursor-pointer
+        <Col span={24} className='z-10'>
+          <Row className='!shadow-lg'>
+            <Col span={24} className='!px-5 !py-3'>
+              <Text className='!font-bold !text-lg'>
+                {`Wallet Balance: RM 
+                  ${transactionList?.reduce((accumVal, transaction) => accumVal + transaction.amount, 0)}
                 `}
-                onClick={() => setSelectedPaymentID(id)}
-              >
-                {renderIcon(icon_id)}
-                <Text className='!text-xs !text-white !block'>Transfer via card number</Text>
-              </div>
-            ))}
-          </Flex>
-
-          {/* Payment form */}
-          <Row>
-            <Col span={24} className="px-2 mt-4">
-              <Form layout="vertical">
-                <Row>
-                  <Col span={24}>
-
-                    {/* Company Name */}
-                    <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Company Name</Text>}>
-                      <Input
-                        placeholder="Company Name"
-                        value={companyName}
-                        onChange={(e) => setCompanyName(e.target.value)}
-                      />
-                    </Form.Item>
-
-                    {/* Card Number with formatting */}
-                    <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Card Number</Text>}>
-                      <Input
-                        value={cardNumber}
-                        onChange={(e) => {
-                          const rawValue = e.target.value.replace(/\D/g, '').slice(0, 16);
-                          const formattedValue = rawValue.replace(/(.{4})/g, '$1 ').trim();
-                          setCardNumber(formattedValue);
-                        }}
-                      />
-                    </Form.Item>
-
-                    {/* Expiration Month & Year */}
-                    <Flex gap={10}>
-                      <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Month</Text>} className="w-full">
-                        <Select
-                          allowClear
-                          placeholder="Please select"
-                          options={Array.from({ length: 12 }, (_, i) => {
-                            const month = String(i + 1).padStart(2, '0');
-                            return { label: month, value: month };
-                          })}
-                        />
-                      </Form.Item>
-
-                      <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Year</Text>} className="w-full">
-                        <Select
-                          allowClear
-                          placeholder="Please select"
-                          options={Array.from({ length: 10 }, (_, i) => {
-                            const year = new Date().getFullYear() + i;
-                            return { label: String(year), value: String(year) };
-                          })}
-                        />
-                      </Form.Item>
-                    </Flex>
-
-                    {/* CVC with note */}
-                    <Form.Item label={<Text className='!italic !text-xs !font-semibold'>CVC</Text>}>
-                      <Flex gap={12}>
-                        <Input
-                          placeholder="123"
-                          className='!max-w-[50px]'
-                          value={cvc}
-                          onChange={(e) => {
-                            const rawValue = e.target.value.replace(/\D/g, '').slice(0, 4);
-                            setCvc(rawValue);
-                          }}
-                        />
-                        <Text className='!text-gray-300 !max-w-[160px]' style={{ fontSize: 10 }}>
-                          3 or 4 digits usually found on the signature strip
-                        </Text>
-                      </Flex>
-                    </Form.Item>
-
-                    {/* Default payment switch */}
-                    <Form.Item>
-                      <Flex gap={4}>
-                        <Switch checked={true} onChange={() => { }} />
-                        <Text className='!text-xs font-semibold'>SET AS DEFAULT</Text>
-                      </Flex>
-                    </Form.Item>
-                  </Col>
-                </Row>
-
-                {/* Submit Button */}
-                <PrimaryButton customStyle='!w-full !py-3'>
-                  CONFIRM
-                </PrimaryButton>
-              </Form>
+                </Text>
+            </Col>
+            <Col span={24} className='!px-5 !py-1 !bg-gray-200'>
+              <Text className='!font-bold !text-sm !text-gray-500'>{`${month} ${year}`}</Text>
             </Col>
           </Row>
         </Col>
+        <Col span={24}>
+          <Flex vertical>
+            {transactionList?.map(({ name, created_at, amount }) => <PaymentCard name={name} created_at={created_at} amount={amount} />)}
+          </Flex>
+        </Col>
       </Row>
     </AltLayout>
   );
 };
 
+
 export default CreatePersona;

app/user/persona/create/page.tsx

@@ -12,6 +12,7 @@ import { getPersonaStyle } from '@/app/api/user/personaService';
 import type { RcFile } from 'antd/es/upload';
 import PhoneInput from 'react-phone-input-2';
 import 'react-phone-input-2/lib/style.css';
+import LoadingScreen from '@/components/layout/LoadingScreen';
 
 const { Text, Title } = Typography
 
@@ -69,9 +70,12 @@ const CreatePersona: React.FC = () => {
         return false;
     };
 
+    // Show loading state while fetching data
+    if (isLoading) return <LoadingScreen/>
+
     return (
         <AltLayout header={<PageTitle backButton={true}>Create Persona</PageTitle>}>
-            <Row className='px-4'>
+            <Row className='!p-4'>
                 <Col span={24}>
                     <Form layout="vertical">
                         <Form.Item label={<p className='font-bold'>Persona Name</p>}>

app/user/persona/page.tsx

@@ -15,8 +15,9 @@ import PrimaryButton from '@/components/ui/PrimaryButton';
 import { Flex, Row, Col, Tag, Button, Table, Layout, Image, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useRouter } from 'next/navigation';
+import LoadingScreen from '@/components/layout/LoadingScreen';
 
-const {Text, Title} = Typography;
+const { Text, Title } = Typography;
 
 const columns: ColumnsType<Persona> = [
     {
@@ -74,9 +75,8 @@ const PersonaPage: React.FC = () => {
         queryFn: () => getPersona()
     })
 
-    if (isLoading) {
-        return <p>Loading...</p>
-    }
+    // Show loading state while fetching data
+    if (isLoading) return <LoadingScreen />
 
     if (!personas) {
         return <p></p>

app/user/pricing/dummyPlan.ts

@@ -0,0 +1,29 @@
+export const basicPlan = [
+    { available: true, text: "Manual Knowledge Entry" },
+    { available: true, text: "Upload 5 Text Docs/month" },
+    { available: false, text: "Web Link Import" },
+    { available: false, text: "Image-to-text OCR" },
+    { available: false, text: "SOP Auto-Learning" },
+    { available: true, text: "Max 10 Knowledge Sources" },
+    { available: true, text: "Email Support" },
+];
+
+export const standardPlan = [
+    { available: true, text: "Manual Knowledge Entry" },
+    { available: true, text: "Upload 5 Text Docs/month" },
+    { available: true, text: "Web Link Import" },
+    { available: true, text: "Image-to-text OCR" },
+    { available: false, text: "SOP Auto-Learning" },
+    { available: true, text: "Max 10 Knowledge Sources" },
+    { available: true, text: "Email Support" },
+];
+
+export const premiumPlan = [
+    { available: true, text: "Manual Knowledge Entry" },
+    { available: true, text: "Upload 5 Text Docs/month" },
+    { available: true, text: "Web Link Import" },
+    { available: true, text: "Image-to-text OCR" },
+    { available: true, text: "SOP Auto-Learning" },
+    { available: true, text: "Max 10 Knowledge Sources" },
+    { available: true, text: "Email Support" },
+];

app/user/pricing/page.tsx

@@ -1,209 +1,27 @@
 "use client";
 
-import { useState, useEffect } from 'react'
+import { Row, Col } from 'antd';
+import PlanCard from '@/components/ui/PlanCard';
 import PageTitle from '@/components/ui/PageTitle';
-import { Typography, Button } from 'antd'
-import { CheckCircleOutlined, XOutlined } from '@ant-design/icons';
-
-const { Text, Title } = Typography;
-
-const basicPlan = [
-    {
-        available: true,
-        text: "Manual Knowledge Entry"
-    },
-    {
-        available: true,
-        text: "Upload 5 Text Docs/months"
-    },
-    {
-        available: false,
-        text: "No Web Link Import"
-    },
-    {
-        available: false,
-        text: "No Image-to-text OCR"
-    },
-    {
-        available: false,
-        text: "No SOP Auto-Learning"
-    },
-    {
-        available: true,
-        text: "Max 10 Knowledge Sources"
-    },
-    {
-        available: true,
-        text: "Email Support"
-    }
-]
-
-const standardPlan = [
-    {
-        available: true,
-        text: "Manual Knowledge Entry"
-    },
-    {
-        available: true,
-        text: "Upload 5 Text Docs/months"
-    },
-    {
-        available: true,
-        text: "No Web Link Import"
-    },
-    {
-        available: true,
-        text: "No Image-to-text OCR"
-    },
-    {
-        available: false,
-        text: "No SOP Auto-Learning"
-    },
-    {
-        available: true,
-        text: "Max 10 Knowledge Sources"
-    },
-    {
-        available: true,
-        text: "Email Support"
-    }
-]
-
-const premiumPlan = [
-    {
-        available: true,
-        text: "Manual Knowledge Entry"
-    },
-    {
-        available: true,
-        text: "Upload 5 Text Docs/months"
-    },
-    {
-        available: true,
-        text: "No Web Link Import"
-    },
-    {
-        available: true,
-        text: "No Image-to-text OCR"
-    },
-    {
-        available: true,
-        text: "No SOP Auto-Learning"
-    },
-    {
-        available: true,
-        text: "Max 10 Knowledge Sources"
-    },
-    {
-        available: true,
-        text: "Email Support"
-    }
-]
-
-const CreatePersona: React.FC = () => {
-
+import AltLayout from '@/components/layout/AltLayout';
+import { basicPlan, standardPlan, premiumPlan } from './dummyPlan';
 
+const Pricing: React.FC = () => {
     return (
-        <div className="flex flex-col bg-white">
-            <PageTitle title='PREMIUM PLAN' />
-            <div className='p-4 px-8 flex flex-col gap-5'>
-                <div className='border rounded-lg border-black flex flex-col overflow-hidden'>
-                    <div className='flex flex-col py-2 px-3'>
-                        <Title level={5}>Basic</Title>
-                        <div className='flex flex-row justify-between'>
-                            <div className='flex flex-row items-center gap-3'>
-                                <Title level={3} className='!m-0'>$5</Title>
-                                <div>
-                                    <p className='p-0 text-xs font-semibold'>Per agent</p>
-                                    <p className='p-0 text-xs font-semibold'>Per month</p>
-                                </div>
-                            </div>
-                            <div>
-                                <Button type='primary' className='!px-10 !font-bold'>Select</Button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='text-center border-y border-gray-200'>
-                        <p>ideal for simple, entry-level AI personas</p>
-                    </div>
-
-                    <div className='flex flex-col py-2 px-3 ps-10'>
-                        {basicPlan.map(({available, text}) => (
-                            <div>
-                                {(available) ? <CheckCircleOutlined className='!text-xs !align-middle !text-blue-800' /> : <XOutlined className='!text-xs !align-middle !text-red-800' />}
-                                <span className="ml-1 align-middle text-xs font-semibold">{text}</span>
-                            </div>
-                        ))}
-
-                    </div>
-                </div>
-                <div className='border rounded-lg border-black flex flex-col overflow-hidden'>
-                    <div className='flex flex-col py-2 px-3'>
-                        <Title level={5}>Standard</Title>
-                        <div className='flex flex-row justify-between'>
-                            <div className='flex flex-row items-center gap-3'>
-                                <Title level={3} className='!m-0'>$15</Title>
-                                <div>
-                                    <p className='p-0 text-xs font-semibold'>Per agent</p>
-                                    <p className='p-0 text-xs font-semibold'>Per month</p>
-                                </div>
-                            </div>
-                            <div>
-                                <Button type='primary' className='!px-10 !font-bold'>Select</Button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='text-center border-y border-gray-200'>
-                        <p>Perfect for growing AI needs</p>
-                    </div>
-
-                    <div className='flex flex-col py-2 px-3 ps-10'>
-                        {standardPlan.map(({available, text}) => (
-                            <div>
-                                {(available) ? <CheckCircleOutlined className='!text-xs !align-middle !text-blue-800' /> : <XOutlined className='!text-xs !align-middle !text-red-800' />}
-                                <span className="ml-1 align-middle text-xs font-semibold">{text}</span>
-                            </div>
-                        ))}
-
-                    </div>
-                </div>
-                <div className='border rounded-lg border-black flex flex-col overflow-hidden'>
-                    <div className='flex flex-col py-2 px-3'>
-                        <Title level={5}>Premium</Title>
-                        <div className='flex flex-row justify-between'>
-                            <div className='flex flex-row items-center gap-3'>
-                                <Title level={3} className='!m-0'>$45</Title>
-                                <div>
-                                    <p className='p-0 text-xs font-semibold'>Per agent</p>
-                                    <p className='p-0 text-xs font-semibold'>Per month</p>
-                                </div>
-                            </div>
-                            <div>
-                                <Button type='primary' className='!px-10 !font-bold'>Select</Button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='text-center border-y border-gray-200'>
-                        <p>Perfect for large enterprise AI model</p>
-                    </div>
-
-                    <div className='flex flex-col py-2 px-3 ps-10'>
-                        {premiumPlan.map(({available, text}) => (
-                            <div>
-                                {(available) ? <CheckCircleOutlined className='!text-xs !align-middle !text-blue-800' /> : <XOutlined className='!text-xs !align-middle !text-red-800' />}
-                                <span className="ml-1 align-middle text-xs font-semibold">{text}</span>
-                            </div>
-                        ))}
-
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    )
-}
-
-export default CreatePersona
+        <AltLayout header={<PageTitle backButton={true}>PREMIUM PLAN</PageTitle>}>
+            <Row gutter={[0, 16]} className="!p-4 bg-white">
+                <Col xs={24} md={8}>
+                    <PlanCard title="Basic" price="$5" description="Ideal for simple, entry-level AI personas" features={basicPlan} />
+                </Col>
+                <Col xs={24} md={8}>
+                    <PlanCard title="Standard" price="$15" description="Perfect for growing AI needs" features={standardPlan} />
+                </Col>
+                <Col xs={24} md={8}>
+                    <PlanCard title="Premium" price="$45" description="Best for large enterprise AI models" features={premiumPlan} />
+                </Col>
+            </Row>
+        </AltLayout>
+    );
+};
+
+export default Pricing;

app/user/settings/profile/page.tsx

@@ -31,10 +31,9 @@ const ProfileSettings: React.FC = () => {
 
     return (
         <AltLayout header={<PageTitle backButton={true}>Profile Settings</PageTitle>}>
-            <Row justify="center">
+            <Row justify="center" className='!p-8'>
                 <Col xs={24} sm={20} md={16} lg={12}>
                     <Form layout="vertical" className="px-4 py-6 space-y-10">
-
                         <Row>
                             <Col span={24}>
                                 <Title level={5} className="!mb-3">Profile Photo</Title>

app/user/wallet/page.tsx

@@ -31,8 +31,7 @@ const Wallet: React.FC = () => {
 
             <Row justify="center" className="mt-6">
                 <Col xs={24} sm={20} md={16} lg={12}>
-                    <Form layout="vertical">
-
+                    <Form layout="vertical" className='!px-5'>
                         {/* 1. Balance + History Link */}
                         <Form.Item>
                             <Space className="w-full justify-between" align="center">
@@ -87,18 +86,17 @@ const Wallet: React.FC = () => {
                                 </Col>
                             </Row>
                         </Form.Item>
-
-                        {/* 4. Current Plan Display */}
+                    </Form>
+                    {/* 4. Current Plan Display */}
                         <Card
                             bordered
-                            className="border-blue-700 border-2"
+                            className="!border-blue-700 !rounded-none"
                             bodyStyle={{ padding: '12px' }}
                         >
                             <Text>
                                 <Text strong>Current Plan:</Text> Premium (RM25/Month)
                             </Text>
                         </Card>
-                    </Form>
                 </Col>
             </Row>
         </main>

components/layout/AltLayout.tsx

@@ -36,7 +36,7 @@ const AltLayout: React.FC<AltLayoutProps> = ({
                     <Col span={24}>
                         <Flex vertical className="!bg-white">
                             {/* Content wrapper - handles chat body or main content scroll */}
-                            <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
+                            <div className="flex-1 overflow-y-auto">
                                 {children}
                             </div>
                         </Flex>
@@ -44,7 +44,8 @@ const AltLayout: React.FC<AltLayoutProps> = ({
                 </Row>
 
                 {/* Footer section - typically bottom navigation */}
-                <div>
+                {/* Whatever you do, don't change this div, I don't know why it works, but it works, trust me I already to antd this shit */}
+                <div> 
                     {footer}
                 </div>
 

components/layout/ErrorPage.tsx

@@ -0,0 +1,23 @@
+// app/not-found.tsx
+"use client";
+
+import { useRouter } from 'next/navigation';
+import { Button, Result } from "antd";
+
+export default function NotFound() {
+    const router = useRouter();
+
+    return (
+        <div className="flex justify-center items-center min-h-screen bg-white !w-full">
+            <Result
+                status="warning"
+                title="There are some problems with your operation."
+                extra={
+                    <Button type="primary" key="console" onClick={() => router.back()}>
+                        Go Back
+                    </Button>
+                }
+            />
+        </div>
+    );
+}

components/layout/Header.tsx

@@ -4,15 +4,17 @@ import { useState } from 'react'
 import { MenuOutlined } from '@ant-design/icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars, faBell } from '@fortawesome/free-solid-svg-icons'
-import { Button, Space } from 'antd'
+import { Button, Space, Image, Flex, Typography } from 'antd'
 import Sidebar from '@/components/layout/Sidebar'
 import BellNotification from '@/components/ui/BellNotification'
 
+const { Text, Title } = Typography
+
 const Header = () => {
   const [showSideBar, setShowSideBar] = useState(false)
 
   return (
-    <header className="flex items-center px-4 py-2 relative z-40 bg-white shadow-sm">
+    <Flex align='center' className="!px-4 !py-2 !relative !z-40 !bg-white !shadow-sm">
       {/* Sidebar Trigger */}
       <Button
         type="text"
@@ -25,16 +27,21 @@ const Header = () => {
       <Sidebar open={showSideBar} setOpen={setShowSideBar} />
 
       {/* Logo + Brand */}
-      <div className="flex items-center ms-3">
-        <img src="/ruccan_logo.png" alt="Ruccan Logo" className="h-6 w-auto" />
-        <span className="text-black font-bold text-lg ms-3">Ruccan.com</span>
-      </div>
+      <Flex justify='center' className="!ms-3">
+        <Image
+          src="/ruccan_logo.png"
+          alt="Ruccan Logo"
+          preview={false}
+          height={24}
+        />
+        <Text className="!text-black !font-bold !ms-3">Ruccan.com</Text>
+      </Flex>
 
       {/* Notification Bell */}
       <div className="ms-auto">
         <BellNotification />
       </div>
-    </header>
+    </Flex>
   )
 }
 

components/layout/LoadingScreen.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+const LoadingScreen = () => {
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[999] bg-white flex flex-col items-center justify-center space-y-6"
+        >
+            <div className="relative w-32 h-32">
+                {/* Spinning Logo */}
+                <motion.div
+                    className="absolute top-1/2 left-1/2 w-16 h-16 -translate-x-1/2 -translate-y-1/2"
+                    animate={{ rotate: 360 }}
+                    transition={{
+                        repeat: Infinity,
+                        duration: 2,
+                        ease: "linear",
+                    }}
+                >
+                    <Image
+                        src="/ruccan_logo2.png"
+                        alt="Ruccan Logo"
+                        fill
+                        className="object-contain"
+                    />
+                </motion.div>
+            </div>
+
+            {/* Loading Text */}
+            <p className="text-gray-600 text-sm tracking-wide animate-pulse">
+                Loading, please wait...
+            </p>
+        </motion.div>
+    );
+};
+
+export default LoadingScreen;

components/layout/Navigation.tsx

@@ -9,7 +9,7 @@ import { useRouter, usePathname } from 'next/navigation'
 
 const navItems = [
     {
-        key: '/user/',
+        key: '/user',
         icon: <HomeOutlined />,
         label: 'Home',
     },

components/layout/Sidebar.tsx

@@ -128,17 +128,17 @@ const Sidebar = ({ open = false, setOpen = () => { } }: SidebarProps) => {
                 label: 'Settings',
                 children: [
                   {
-                    key: '/settings/general',
+                    key: 'user/settings/general',
                     icon: <FontAwesomeIcon icon={faCog} />,
                     label: 'General',
                   },
                   {
-                    key: '/settings/profile',
+                    key: 'user/settings/profile',
                     icon: <FontAwesomeIcon icon={faUserAlt} />,
                     label: 'Profile',
                   },
                   {
-                    key: '/settings/chat-preference',
+                    key: 'user/settings/chat-preference',
                     icon: <FontAwesomeIcon icon={faComment} />,
                     label: 'Chat Preference',
                   }
@@ -161,7 +161,7 @@ const Sidebar = ({ open = false, setOpen = () => { } }: SidebarProps) => {
             label: 'Help',
           },
           {
-            key: '/logout',
+            key: '/guest',
             icon: <FontAwesomeIcon icon={faSignOut} className='!text-red-600' />,
             label: <p className='text-red-400 font-bold'>Logout</p>,
           },

components/ui/IconCard.tsx

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react'
+import { Typography } from 'antd';
+import { BankFilled, WalletFilled } from '@ant-design/icons';
+
+const { Text, Title } = Typography
+
+const IconCard = ({ active, iconName, text, handleClick }) => {
+
+    const renderIcon = useCallback((nameId: string) => {
+        if (nameId === "card") return <WalletFilled className='!text-white !text-xl' />
+        else if (nameId === "bank") return <BankFilled className='!text-white !text-xl' />
+        else return <></>
+    }, [])
+
+
+    return (
+        <div
+            onClick={handleClick}
+            className={`
+                  ${active ? 'bg-blue-950' : 'bg-gray-400'} 
+                  hover:bg-blue-950 transition-all ease-in-out 
+                  rounded-lg p-4 max-w-[160px] cursor-pointer
+                `}
+        >
+            {renderIcon(iconName)}
+            <Text className='!text-xs !text-white !block'>{text}</Text>
+        </div>
+    )
+}
+
+export default IconCard

components/ui/PageTitle.tsx

@@ -38,7 +38,7 @@ const PageTitle: React.FC<PageTitleProps> = ({
                     icon={<FontAwesomeIcon icon={faArrowLeft} />}
                     onClick={() => router.back()}
                     style={{ fontSize: 20 }}
-                    className="!text-white"
+                className="!text-white"
                 />
             ) : (
                 <div style={{ width: 40 }} /> // Placeholder to keep spacing

components/ui/PaymentCard.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Typography, Flex} from 'antd';
+import type { Transaction } from '@/types/payment';
+import formatDate from '@/helper/util/formatDateTime';
+
+const { Text, Title } = Typography;
+
+type PaymentCardProps = Omit<Transaction, 'id'>
+
+const PaymentCard: React.FC<PaymentCardProps> = ({ name, created_at, amount }: PaymentCardProps) => {
+
+  const sign = (amount > 0) ? "+" : "-";
+
+  return (
+    <Flex className='border-y !bg-white hover:!bg-gray-100 cursor-pointer !border-gray-100 !py-2 !px-6'>
+      <Flex vertical flex={1}>
+        <Text className='!font-bold'>{name}</Text>
+        <Text>{formatDate(created_at)}</Text>
+      </Flex>
+      <Flex align='center'>
+        <Text className={`!font-bold ${(amount > 0) ? '!text-green-700' : '!text-red-700'} `}>
+          {`${sign} RM ${Math.abs(amount).toFixed(2)}`}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default PaymentCard;

components/ui/PlanCard.tsx

@@ -0,0 +1,61 @@
+import { Typography, Button, Row, Col, Card, Flex } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import PrimaryButton from './PrimaryButton';
+
+const { Title, Text } = Typography;
+
+type Feature = {
+    available: boolean;
+    text: string;
+};
+
+type PlanCardProps = {
+    title: string;
+    price: string;
+    description: string;
+    features: Feature[];
+};
+
+const PlanCard: React.FC<PlanCardProps> = ({ title, price, description, features }) => {
+    return (
+        <Card
+            bordered
+            className="!w-full !h-full"
+            bodyStyle={{ padding: 0 }}
+            headStyle={{border:"none"}}
+            title={<Title level={4} className="!mb-0 !text-blue-600">{title}</Title>}
+        >
+            <Flex justify="space-between" align="center" className="!p-4">
+                <Flex gap={8}>
+                    <Title level={3} className="!m-0">{price}</Title>
+                    <div>
+                        <Text className="!text-xs !font-semibold block">Per agent</Text>
+                        <Text className="!text-xs !font-semibold block">Per month</Text>
+                    </div>
+                </Flex>
+                <Flex align='center'>
+                    <PrimaryButton customStyle="!font-bold !px-10 !rounded-md">Select</PrimaryButton>
+                </Flex>
+            </Flex>
+
+            <div className="text-center border-y py-1 mb-2 !border-gray-300">
+                <Text className="!text-xs">{description}</Text>
+            </div>
+
+            <Flex vertical gap={8} className="!px-8 !py-4">
+                {features.map((feature, idx) => (
+                    <Flex key={idx} align="center" gap={6}>
+                        {feature.available ? (
+                            <CheckCircleOutlined className="!text-blue-600 text-xs" />
+                        ) : (
+                            <CloseCircleOutlined className="!text-red-500 text-xs" />
+                        )}
+                        <Text className="!text-xs !font-semibold">{feature.text}</Text>
+                    </Flex>
+                ))}
+            </Flex>
+        </Card>
+    );
+};
+
+export default PlanCard;

components/ui/PrimaryButton.tsx

@@ -21,8 +21,6 @@ const PrimaryButton: React.FC<PrimaryButtonProps> = ({
 
     const token = useThemeToken();
 
-    console.log(token.colorPrimary2); 
-
     const baseClasses = 'mt-2 !rounded-full !px-6 !py-4';
     const filledClasses = '!border-0 !bg-[#602FD0] !text-[#fff] hover:!bg-[#271550]';
     const outlineClasses = '!border !bg-[#fff] !text-[#602FD0] hover:!bg-[#602FD0] hover:!text-[#fff]';

helper/util/formatDateTime.ts

@@ -0,0 +1,18 @@
+const formatDate = (isoDate: string) => {
+  const date = new Date(isoDate);
+
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = date.toLocaleString('default', { month: 'short' }); // e.g., "May"
+  const year = date.getFullYear();
+
+  let hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+
+  return `${day} ${month} ${year}, ${hours}:${minutes} ${ampm}`;
+};
+
+export default formatDate;

package-lock.json

@@ -17,6 +17,7 @@
         "@tanstack/react-query": "^5.81.5",
         "antd": "^5.26.3",
         "classnames": "^2.5.1",
+        "framer-motion": "^12.23.6",
         "lucide-react": "^0.525.0",
         "next": "15.3.4",
         "next-auth": "^4.24.11",
@@ -3985,6 +3986,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.6.tgz",
+      "integrity": "sha512-dsJ389QImVE3lQvM8Mnk99/j8tiZDM/7706PCqvkQ8sSCnpmWxsgX+g0lj7r5OBVL0U36pIecCTBoIWcM2RuKw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.6",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5324,6 +5352,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.6.tgz",
+      "integrity": "sha512-G2w6Nw7ZOVSzcQmsdLc0doMe64O/Sbuc2bVAbgMz6oP/6/pRStKRiVRV4bQfHp5AHYAKEGhEdVHTM+R3FDgi5w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "@tanstack/react-query": "^5.81.5",
     "antd": "^5.26.3",
     "classnames": "^2.5.1",
+    "framer-motion": "^12.23.6",
     "lucide-react": "^0.525.0",
     "next": "15.3.4",
     "next-auth": "^4.24.11",

types/payment.ts

@@ -3,4 +3,11 @@ export interface PaymentType {
     type: string,
     description: string,
     icon_id: string
+}
+
+export type Transaction = {
+    id: number;
+    name: string;
+    created_at: string;
+    amount: number;
 }