base version

app/api/general/paymentService.ts

@@ -0,0 +1,22 @@
+import { PaymentType } from "@/types/payment";
+
+const dummyPaymentTypeData:PaymentType[] = [
+    {
+        id: 1,
+        type: "Card",
+        description: "Transfer via card number",
+        icon_id: "card"
+    },
+    {
+        id: 2,
+        type: "FPX",
+        description: "Transfer via card number",
+        icon_id: "bank"
+    }
+]
+
+export const getPaymentType = async ():Promise<PaymentType[] | undefined> => {
+
+    return dummyPaymentTypeData
+    
+}

app/api/user/chatService.ts

@@ -0,0 +1,269 @@
+import type { Chat } from '@/types/chat';
+
+const dummyChatData: Chat[] = [
+    {
+        id: 1,
+        name: 'Sarah Badlishah',
+        persona: {
+            id: 1,
+            name: "Bella",
+            styles: [
+                {
+                    id: 1,
+                    name: "funny"
+                },
+                {
+                    id: 2,
+                    name: "energetic"
+                }
+            ],
+            role: "Sales Assistant",
+            active: true
+        },
+        chatList: [
+            {
+                self: true,
+                text: "saya nak buat payment",
+                time: "12:30",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Selamat Datang !",
+                time: "12:30",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Terima Kasih atas makluman! anda boleh buat bayaran melalui kaedah berikut:\n1. Online Transfer / FPX\n2. E-Wallet / QR Pay",
+                time: "12:30",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: true,
+                text: "Hello, boleh ke saya beli guna kad kredit ?",
+                time: "12:33",
+                date: "07/07/2025",
+                read: false
+            },
+            {
+                self: true,
+                text: "saya nak buat payment",
+                time: "12:30",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Selamat Datang !",
+                time: "12:30",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Terima Kasih atas makluman! anda boleh buat bayaran melalui kaedah berikut:\n1. Online Transfer / FPX\n2. E-Wallet / QR Pay",
+                time: "12:30",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: true,
+                text: "Hello, boleh ke saya beli guna kad kredit ?",
+                time: "12:33",
+                date: "07/07/2025",
+                read: false
+            }
+        ]
+    },
+    {
+        id: 2,
+        name: 'Haziq Imran',
+        persona: {
+            id: 2,
+            name: "Rafiq",
+            styles: [
+                {
+                    id: 2,
+                    name: "energetic"
+                },
+                {
+                    id: 3,
+                    name: "serious"
+                }
+            ],
+            role: "Sales Assistant",
+            active: false
+        },
+        chatList: [
+            {
+                self: true,
+                text: "saya dah buat bayaran, tolong semak ya",
+                time: "16:39",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Baik, saya semak dahulu ya",
+                time: "16:40",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Okay, bayaran anda telah diterima.",
+                time: "16:41",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: true,
+                text: "okay terima kasih",
+                time: "16:41",
+                date: "07/07/2025",
+                read: true
+            }
+        ]
+    },
+    {
+        id: 3,
+        name: 'Jimmy Tan',
+        persona: {
+            id: 3,
+            name: "Lina",
+            styles: [
+                {
+                    id: 3,
+                    name: "serious"
+                },
+                {
+                    id: 4,
+                    name: "professional"
+                }
+            ],
+            role: "HR Assistant",
+            active: true
+        },
+        chatList: [
+            {
+                self: true,
+                text: "how to refund this order?",
+                time: "08:35",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Hi Jimmy! You can request a refund via our portal or contact our support. May I know your order ID?",
+                time: "08:36",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: true,
+                text: "Order ID is #54321",
+                time: "08:38",
+                date: "07/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Noted, refund will be processed within 3 working days.",
+                time: "08:39",
+                date: "07/07/2025",
+                read: false
+            }
+        ]
+    },
+    {
+        id: 4,
+        name: 'Devaraj Elamko',
+        persona: {
+            id: 1,
+            name: "Bella",
+            styles: [
+                {
+                    id: 1,
+                    name: "funny"
+                },
+                {
+                    id: 2,
+                    name: "energetic"
+                }
+            ],
+            role: "Sales Assistant",
+            active: true
+        },
+        chatList: [
+            {
+                self: true,
+                text: "boleh ke jadikan order ni as a gift?",
+                time: "18:55",
+                date: "06/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Ya boleh, cik boleh pilih 'Gift Option' semasa checkout.",
+                time: "18:56",
+                date: "06/07/2025",
+                read: true
+            }
+        ]
+    },
+    {
+        id: 5,
+        name: 'Nur Nadia',
+        persona: {
+            id: 3,
+            name: "Lina",
+            styles: [
+                {
+                    id: 3,
+                    name: "serious"
+                },
+                {
+                    id: 4,
+                    name: "professional"
+                }
+            ],
+            role: "HR Assistant",
+            active: true
+        },
+        chatList: [
+            {
+                self: true,
+                text: "saya nak order ni sampai hari jumaat ni",
+                time: "09:15",
+                date: "04/07/2025",
+                read: true
+            },
+            {
+                self: false,
+                text: "Noted! Kami akan usahakan penghantaran sebelum hari Jumaat.",
+                time: "09:16",
+                date: "04/07/2025",
+                read: true
+            },
+            {
+                self: true,
+                text: "Thank you!",
+                time: "09:17",
+                date: "04/07/2025",
+                read: true
+            }
+        ]
+    }
+];
+
+export const getAllChat = async (): Promise<Chat[]> => {
+    return dummyChatData
+}
+
+export const getChat = async (id: number): Promise<Chat | undefined> => {
+    return dummyChatData.find( chat => chat.id === id)
+}

app/api/user/personaService.ts

@@ -0,0 +1,65 @@
+import type { Persona, PersonaStyle } from "@/types/persona"
+
+export const dummyPersonaStyle: PersonaStyle[] = [
+    {
+        id: 1,
+        name: "funny"
+    },
+    {
+        id: 2,
+        name: "energetic"
+    },
+    {
+        id: 3,
+        name: "serious"
+    },
+    {
+        id: 4,
+        name: "professional"
+    }
+]
+
+export const dummyPersonaData: Persona[] = [
+    {
+        id: 1,
+        name: "Bella",
+        styles: [
+            dummyPersonaStyle[0],
+            dummyPersonaStyle[1]
+        ],
+        role: "Sales Assistant",
+        active: true
+    },
+    {
+        id: 2,
+        name: "Rafiq",
+        styles: [
+            dummyPersonaStyle[1],
+            dummyPersonaStyle[3]
+        ],
+        role: "Sales Assistant",
+        active: false
+    },
+    {
+        id: 3,
+        name: "Lina",
+        styles: [
+            dummyPersonaStyle[2],
+            dummyPersonaStyle[3]
+        ],
+        role: "HR Assistant",
+        active: true
+    }
+]
+
+export const getPersona = async (): Promise<Persona[]> => {
+
+    return dummyPersonaData
+
+}
+
+export const getPersonaStyle = async (): Promise<PersonaStyle[]> => {
+
+    return dummyPersonaStyle
+
+}

app/guest/layout.tsx

@@ -0,0 +1,21 @@
+// app/layout.tsx
+import 'antd/dist/reset.css' // or 'antd/dist/antd.css' for older versions
+import './globals.css'
+
+import type { Metadata } from 'next'
+
+import { Home, MessageCircle, User } from 'lucide-react'
+import Header from '@/components/layout/Header'
+
+export const metadata: Metadata = {
+  title: 'Mobile App',
+  description: 'Responsive app layout with sidebar',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+
+  return (
+    <div className="w-full max-w-[430px] min-h-screen flex flex-col justify-between relative bg-white shadow-xl">
+    </div>
+  )
+}

app/layout.tsx

@@ -1,33 +1,29 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import './globals.css'
+import type { Metadata } from 'next'
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+import { ConfigProvider } from 'antd'
+import type { ThemeConfig } from 'antd';
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import QueryProvider from '@/components/general/QueryProvider';
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+const theme: ThemeConfig = {
+  // your theme config
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export const metadata: Metadata = {
+  title: 'Mobile App',
+  description: 'Responsive app layout with sidebar',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className="bg-white flex justify-center relative">
+        <QueryProvider> {/* ✅ now inside client wrapper */}
+          <ConfigProvider theme={theme}>
+            {children}
+          </ConfigProvider>
+        </QueryProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -1,103 +1,11 @@
-import Image from "next/image";
+'use client'
+import { useEffect } from "react"
+
+export default function HomePage() {
 
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+  return (
+    <div className="space-y-6">
     </div>
-  );
+  )
 }

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

@@ -0,0 +1,92 @@
+'use client';
+import { useState } from 'react';
+import type { Chat } from '@/types/chat';
+import { useParams } from 'next/navigation'
+import { useQuery } from '@tanstack/react-query';
+import { getChat } from '@/app/api/user/chatService';
+
+const ChatPage: React.FC = () => {
+
+    const params = useParams()
+    const chatID = Number(params.chatID);
+
+    const {data:chat, error, isLoading} = useQuery<Chat | undefined>({
+        queryKey: ["getChat"],
+        queryFn: () => getChat(chatID)
+    })
+
+    const [enabled, setEnabled] = useState(false);
+
+    if(isLoading){
+        return <p>Loading...</p>
+    }
+
+    if(error){
+        return <p>Loading...</p>
+    }
+
+    return (
+        <div className="flex flex-col bg-gray-100 h-screen">
+            {/* Header */}
+            <div className="bg-white shadow p-4 flex flex-row">
+                <div>
+                    <img
+                        src="/default-avatar.png"
+                        alt="Profile"
+                        className="w-15 h-15 rounded-full object-cover border"
+                    />
+                </div>
+                <div className='ps-2'>
+                    <p className="text-xl text-gray-500">{}</p>
+                    <p className="text-md text-gray-500">{chat?.persona?.role}</p>
+                </div>
+                <div className='ps-2 flex flex-row gap-2 items-center ms-auto'>
+                    <span>Live</span>
+                    <button
+                        onClick={() => setEnabled(!enabled)}
+                        className={`w-12 h-6 flex items-center rounded-full p-1 transition-colors duration-300 ${enabled ? 'bg-blue-500' : 'bg-gray-300'
+                            }`}
+                    >
+                        <div
+                            className={`bg-white w-4 h-4 rounded-full shadow-md transform transition-transform duration-300 ${enabled ? 'translate-x-6' : 'translate-x-0'
+                                }`}
+                        />
+                    </button>
+                    <span>Offline</span>
+
+                </div>
+            </div>
+
+            {/* Chat messages */}
+            <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4" style={{ maxHeight: "65vh" }}>
+                {chat?.chatList.map((msg, index) => (
+                    <div key={index}>
+                        <p className={`mb-1 text-gray-500 ${msg.self ? 'text-left' : 'text-right'}`}>
+                            {msg.self ? 'Visitor' : 'Ruccan Chat'}
+                        </p>
+                        <div className={`flex ${msg.self ? 'justify-start' : 'justify-end'}`}>
+                            <div className={`max-w-xs whitespace-pre-wrap px-4 py-2 rounded-lg text-sm ${msg.self ? 'bg-white text-gray-800 shadow' : 'bg-blue-500 text-white'}`}>
+                                {msg.text}
+                                <div className="text-[10px] mt-1 text-right opacity-70">
+                                    {msg.time}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Input area */}
+            <div className="p-4 pb-0 bg-white border-t">
+                <input
+                    type="text"
+                    placeholder="Taip mesej..."
+                    className="w-full border rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+            </div>
+        </div>
+
+    );
+};
+
+export default ChatPage;

app/user/chat/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from 'react';
+import { Layout } from 'antd';
+import type { Chat } from '@/types/chat';
+import PageTitle from '@/components/ui/PageTitle';
+import { useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { getAllChat } from '@/app/api/user/chatService';
+
+const Chat: React.FC = () => {
+
+    const router = useRouter();
+    
+    const {data:chatList, error, isLoading} = useQuery<Chat[] | undefined | null>({
+        queryKey:["getAllChat"],
+        queryFn: () => getAllChat()
+    })
+
+    return (
+        <Layout>
+            <PageTitle title='RUCCAN CHAT' />
+            <div className="flex flex-col h-screen w-full bg-white">
+                {/* Chat List */}
+                {chatList?.map((chat) => {
+
+                    const lastChat = chat.chatList[chat.chatList.length - 1] 
+
+                    const unreadCount = chat.chatList.reduce((accum, chatItem) => {
+                        return chatItem.read ? accum : accum + 1;
+                    }, 0);
+
+                    return (
+                        <div
+                            key={chat.id}
+                            className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer flex flex-col gap-1"
+                            onClick={()=>{
+                                router.push(`/user/chat/${chat.id}`)
+                            }}
+                        >
+                            <div className="flex justify-between items-center">
+                                <span className="font-medium text-gray-900">{chat.name}</span>
+                                <span className="text-xs text-gray-500">{lastChat.time}</span>
+                            </div>
+                            <div className="flex justify-between items-center">
+                                <p className="text-sm text-gray-600 truncate max-w-[250px]">
+                                    {lastChat.text}
+                                </p>
+                                {(unreadCount > 0) && (
+                                    <span className="bg-[#72c4ff] text-white text-xs font-bold px-2 py-0.5 rounded-full">
+                                        {unreadCount}
+                                    </span>
+                                )}
+
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </Layout>
+    );
+};
+
+export default Chat;

app/user/knowledge/create/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState, useEffect } from 'react'
+import PageTitle from '@/components/ui/PageTitle';
+import { Upload, Select, Switch, Form, Button } from 'antd'
+import { UploadOutlined } from '@ant-design/icons';
+import InputList from '@/components/ui/InputList';
+import type { SelectProps } from 'antd';
+import TextArea from 'antd/es/input/TextArea';
+import { useQuery } from '@tanstack/react-query';
+import { getPersona } from '@/app/api/user/personaService';
+
+const CreatePersona: React.FC = () => {
+
+    const [name, setName] = useState<string | undefined>("")
+    const [isPremium, setIsPremium] = useState<boolean>(true)
+    const [options, setOptions] = useState<SelectProps[] | undefined>()
+    const [enabled, setEnabled] = useState({
+        isWebSearch: false,
+        isEcommerceShop: false,
+        isCanvas: false,
+        isDalleImageGeneration: false,
+        isCodeInterpreter: false
+    });
+
+    const { data: personas } = useQuery({
+        queryKey: ["getPersona"],
+        queryFn: () => getPersona()
+    })
+
+    const uploadProps = {
+        beforeUpload: (file: File) => {
+            console.log('File uploaded:', file);
+            return false; // Prevent automatic upload
+        },
+    };
+
+
+    useEffect(() => {
+        const latestData: SelectProps[] | undefined = personas?.map(persona => {
+            return {
+                label: persona.name,
+                value: persona.id
+            }
+        })
+        setOptions(latestData)
+    }, [personas])
+
+    return (
+        <div className="flex flex-col bg-white">
+            <PageTitle title='ADD KNOWLEDGE SOURCE' />
+            <div className='px-4 py-6'>
+                <Form layout="vertical">
+                    <Form.Item label={<p className='font-bold'>Select Persona</p>}>
+                        <Select
+                            allowClear
+                            style={{ width: '100%' }}
+                            placeholder="Select from list ..."
+                            options={options}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label={<p className='font-bold'>Description</p>}>
+                        <TextArea
+                            placeholder='Add a short description about what Persona does'
+                            style={{ padding: 10 }}
+                            rows={2}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label={<p className='font-bold'>Instruction</p>}>
+                        <TextArea
+                            placeholder='What does this Persona do?, How does it behave?, What should it avoid doing? '
+                            style={{ padding: 10 }}
+                            rows={4}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </Form.Item>
+
+                    <div className={`${isPremium ? 'visible' : 'hidden'}`}>
+                        <Form.Item
+                            label={
+                                <p className='font-bold'>
+                                    Capabilities
+                                    <span className='text-xs font-semibold px-2 py-1 bg-teal-200 rounded-full mx-2'>Premium</span>
+                                </p>
+                            }
+                        >
+                            <div className='flex flex-col gap-4'>
+
+                                {/* Web Search */}
+                                <div style={{maxHeight:"65px"}}>
+                                    <div className='flex items-center gap-2'>
+                                        <Switch
+                                            checked={enabled.isWebSearch}
+                                            onChange={(checked) =>
+                                                setEnabled({ ...enabled, isWebSearch: checked })
+                                            }
+                                        />
+                                        <span className='font-bold'>Web Search</span>
+                                    </div>
+                                    {enabled.isWebSearch && <InputList />}
+                                </div>
+
+                                {/* Commerce & Shop */}
+                                <div>
+                                    <div className='flex items-center gap-2'>
+                                        <Switch
+                                            checked={enabled.isEcommerceShop}
+                                            onChange={(checked) =>
+                                                setEnabled({ ...enabled, isEcommerceShop: checked })
+                                            }
+                                        />
+                                        <span className='font-bold'>Commerce & Shop</span>
+                                    </div>
+                                    {enabled.isEcommerceShop && (
+                                        <Upload {...uploadProps} className='!mt-2 block'>
+                                            <Button icon={<UploadOutlined />}>Upload Shop Catalog</Button>
+                                        </Upload>
+                                    )}
+                                </div>
+
+                                {/* Canvas */}
+                                <div>
+                                    <div className='flex items-center gap-2'>
+                                        <Switch
+                                            checked={enabled.isCanvas}
+                                            onChange={(checked) =>
+                                                setEnabled({ ...enabled, isCanvas: checked })
+                                            }
+                                        />
+                                        <span className='font-bold'>Canvas</span>
+                                    </div>
+                                    {enabled.isCanvas && (
+                                        <Upload {...uploadProps} className='!mt-2 block'>
+                                            <Button icon={<UploadOutlined />}>Upload Canvas File</Button>
+                                        </Upload>
+                                    )}
+                                </div>
+
+                                {/* DALL·E Image Generation */}
+                                <div>
+                                    <div className='flex items-center gap-2'>
+                                        <Switch
+                                            checked={enabled.isDalleImageGeneration}
+                                            onChange={(checked) =>
+                                                setEnabled({ ...enabled, isDalleImageGeneration: checked })
+                                            }
+                                        />
+                                        <span className='font-bold'>DALL-E Image Generation</span>
+                                    </div>
+                                    {enabled.isDalleImageGeneration && (
+                                        <Upload {...uploadProps} className='!mt-2 block'>
+                                            <Button icon={<UploadOutlined />}>Upload Prompt CSV</Button>
+                                        </Upload>
+                                    )}
+                                </div>
+
+                                {/* Code Interpreter */}
+                                <div>
+                                    <div className='flex items-center gap-2'>
+                                        <Switch
+                                            checked={enabled.isCodeInterpreter}
+                                            onChange={(checked) =>
+                                                setEnabled({ ...enabled, isCodeInterpreter: checked })
+                                            }
+                                        />
+                                        <span className='font-bold'>Code Interpreter & Data Analysis</span>
+                                    </div>
+                                    {enabled.isCodeInterpreter && (
+                                        <Upload {...uploadProps} className='!mt-2 block'>
+                                            <Button icon={<UploadOutlined />}>Upload Data File</Button>
+                                        </Upload>
+                                    )}
+                                </div>
+                            </div>
+                        </Form.Item>
+                    </div>
+
+                    <div className='text-center'>
+                        <Button type="primary" className='!w-fit !py-3 !text-xs !font-bold !px-10'>SUBMIT</Button>
+                    </div>
+                </Form>
+            </div>
+        </div>
+    )
+}
+
+export default CreatePersona;

app/user/knowledge/page.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+import PageTitle from '@/components/ui/PageTitle';
+import {
+    EyeOutlined,
+    EditOutlined,
+    SortAscendingOutlined,
+    PlusCircleFilled
+} from '@ant-design/icons';
+
+type SourcePersonaItem = {
+    id: number;
+    persona_name: string;
+    knowledge_source: string[];
+}
+
+const sourcePersonas: SourcePersonaItem[] = [
+    {
+        id: 1,
+        persona_name: "Bella",
+        knowledge_source: ["Refund Policy", "Pricing SOP"],
+    },
+    {
+        id: 2,
+        persona_name: "Rafiq",
+        knowledge_source: ["Refund Policy", "Pricing SOP"],
+    },
+    {
+        id: 3,
+        persona_name: "Lina",
+        knowledge_source: ["Response Templates", "Customer FAQ"],
+    }
+];
+
+const Knowledge: React.FC = () => {
+    return (
+        <main className="flex flex-col bg-white h-full">
+            <PageTitle title="KNOWLEDGE SOURCES" />
+            {sourcePersonas.length > 0 ? <KnowledgeList /> : <EmptyKnowledgeIntro />}
+        </main>
+    );
+};
+
+const EmptyKnowledgeIntro: React.FC = () => {
+    return (
+        <div className="flex flex-col px-6 flex-1 justify-center items-center">
+            <div
+                className="w-full max-w-md text-center border-2 border-cyan-500 rounded-lg px-6 py-10 shadow-lg"
+                style={{ boxShadow: '0 10px 100px 30px rgba(59, 130, 246, 0.3)' }}
+            >
+                <p className="text-lg font-semibold mb-2 text-gray-800">NO SOURCE ADDED YET</p>
+                <p className="text-sm text-gray-600 mb-4">Get started by adding your first knowledge source</p>
+
+                <img
+                    src="/ruccan_logo.png"
+                    alt="Ruccan Logo"
+                    className="mx-auto mb-6"
+                    width={150}
+                    height={150}
+                />
+
+                <button className="w-fit rounded text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#82c7d7] cursor-pointer text-white font-bold shadow transition-all duration-200">
+                    ADD FIRST SOURCE
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const KnowledgeList: React.FC = () => {
+    return (
+        <div className="overflow-x-auto">
+            <div className="flex px-2 py-4">
+                <button className="w-fit rounded text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#82c7d7] cursor-pointer text-white font-bold shadow transition-all duration-200 ms-auto">
+                    <PlusCircleFilled /> Add Source
+                </button>
+            </div>
+            <table className="w-full text-sm text-left text-gray-700 border-collapse">
+                <thead>
+                    <tr className="text-black">
+                        <th className="px-4 py-3 font-medium border border-gray-200">
+                            <div className="flex items-center gap-1 text-xs min-w-[80px]">
+                                AI persona <SortAscendingOutlined className="text-xs text-gray-400" />
+                            </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium border border-gray-200">
+                            <div className="flex items-center gap-1 text-xs">
+                                Knowledge Sources <SortAscendingOutlined className="text-xs text-gray-400" />
+                            </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium text-center border border-gray-200">Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {sourcePersonas.map((item) => (
+                        <tr key={item.id} className="border-t border-gray-200 hover:bg-gray-50">
+                            <td className="px-4 py-3">{item.persona_name}</td>
+                            <td className="px-4 py-3">
+                                {item.knowledge_source.join(', ')}
+                            </td>
+                            <td className="px-4 py-3 text-center">
+                                <div className="flex justify-center items-center gap-3 text-gray-600">
+                                    <button className="hover:text-blue-500" aria-label="Edit" title="Edit">
+                                        <EditOutlined />
+                                    </button>
+                                    <button className="hover:text-green-600" aria-label="View" title="View">
+                                        <EyeOutlined />
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default Knowledge;

app/user/layout.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { Layout, Menu } from 'antd'
+import {
+  HomeOutlined,
+  MessageOutlined,
+  UserOutlined,
+} from '@ant-design/icons'
+import Header from '@/components/layout/Header'
+import { useRouter, usePathname } from 'next/navigation'
+
+const { Content } = Layout
+
+const AppLayout = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const navItems = [
+    {
+      key: '/user/dashboard',
+      icon: <HomeOutlined />,
+      label: 'Home',
+    },
+    {
+      key: '/user/chatboard',
+      icon: <MessageOutlined />,
+      label: 'Chat',
+    },
+    {
+      key: '/user/profile',
+      icon: <UserOutlined />,
+      label: 'Profile',
+    },
+  ]
+
+  return (
+    <Layout className="w-full max-w-[430px] min-h-screen mx-auto shadow-xl relative">
+      <Header />
+
+      <Content className="flex-1 overflow-auto bg-white pb-20" style={{minHeight:"93vh"}}>
+        {children}
+      </Content>
+
+      {/* Bottom Nav */}
+      <div className="fixed bottom-0 w-full max-w-[430px] mx-auto left-0 right-0 border-t border-gray-200 shadow-inner z-50 bg-white">
+        <Menu
+          mode="horizontal"
+          selectedKeys={[pathname]}
+          onClick={({ key }) => router.push(key)}
+          items={navItems}
+          className="flex justify-around"
+        />
+      </div>
+    </Layout>
+  )
+}
+
+export default AppLayout

app/user/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from 'react'
+import { Flex, Typography, Divider, Layout, Button } from 'antd';
+import { RightOutlined, PhoneOutlined } from '@ant-design/icons';
+import SectionTitle from '@/components/ui/SectionTitle';
+import PageTitle from '@/components/ui/PageTitle';
+
+import LoadingMeter from '@/components/ui/LoadingMeter';
+
+const { Title, Text } = Typography;
+
+/* Main Dashboard */
+const page = () => {
+
+    return (
+        <section className="space-y-4">
+
+            <PageTitle title='DASHBOARD' />
+
+            <div className='px-4'>
+                <SectionTitle title='Plan Details' />
+
+                <Layout className='border-2 rounded border-cyan-500 px-4 py-2'>
+                    <div>
+                        <Text strong>Plan: </Text>
+                        <Text className='!text-blue-500'>Free Plan</Text>
+                    </div>
+
+                    <Text className='!text-xs mb-2'>
+                        This product is still in beta testing. There might be some issue, use at your own risk.
+                    </Text>
+
+                    <div className='mb-2'>
+                        <PhoneOutlined className='me-1' style={{ color: "red" }} />
+                        <Text strong className='!text-xs'>Contact: </Text>
+                        <Text className='!text-blue-500 !text-xs'>Aliff Akmal Bahri</Text>
+                    </div>
+
+                    <div className='!mb-2'>
+                        <Button className='!w-fit !rounded-full !text-xs !bg-[#b64fb1] !text-white'>Upgrade Plan <RightOutlined /> </Button>
+                    </div>
+
+                    <div className='border-2 rounded border-cyan-500 !bg-cyan-500 px-4 py-2 flex flex-row flex-wrap'>
+                        <div className='text-white'>
+                            <p className='text-xs font-bold mb-2'>Ruccan AI Labs </p>
+                            <p className='text-xs'>Explore our latest AI experiments </p>
+                            <p className='text-xs text-[#ebda5a]'>New tools added regularly!</p>
+                        </div>
+                        <div className='mx-auto text-center'>
+                            <img src={"/flask.png"} width="75" className='mb-2 mx-auto'/>
+                            <button className='w-fit rounded-lg text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#436d86] text-white shadow border-0'>
+                                <span className='me-1'>Upgrade Plan</span> <RightOutlined />
+                            </button>
+                        </div>
+                    </div>
+
+                </Layout>
+
+                <SectionTitle title='Usage Limits' />
+
+                <Layout className='border-2 rounded border-cyan-500 px-4 py-2 bg-white'>
+                    <LoadingMeter title='AI Persona' progress={3} total={3} />
+                    <LoadingMeter title='Monthly Messages' progress={12} total={100} />
+                    <LoadingMeter title='Knowledge Base Scans' progress={1} total={10} />
+                </Layout>
+            </div>
+
+        </section>
+    )
+}
+
+export default page

app/user/payment/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useState } from 'react'
+import PageTitle from '@/components/ui/PageTitle';
+import { Typography, Button, Input, Form, Select, Switch } 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';
+
+const { Text, Title } = Typography;
+
+const iconMapper = {
+  "card": <WalletFilled className='!text-white !text-xl' />,
+  "bank": <BankFilled className='!text-white !text-xl' />
+};
+
+const CreatePersona: React.FC = () => {
+  const [selectedPaymentID, setSelectedPaymentID] = useState<number | undefined>()
+  const [companyName, setCompanyName] = useState("")
+  const [cardNumber, setCardNumber] = useState("")
+  const [cvc, setCvc] = useState("")
+
+  const { data: paymentType, error, isLoading } = useQuery<PaymentType[] | undefined>({
+    queryKey: ["getPaymentType"],
+    queryFn: () => getPaymentType()
+  });
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div className="flex flex-col bg-white">
+      <PageTitle title='PAYMENT' />
+      <div className='p-4 px-8 '>
+        <div className='flex flex-col gap-5 mb-8'>
+          <div className='text-xs'>
+            <p className='font-semibold'>Enter your payment details</p>
+            <p className='font-semibold italic'>
+              By continuing you agree to our <Link href="/">Terms</Link>
+            </p>
+          </div>
+        </div>
+
+        <div className='flex flex-row flex-wrap gap-2'>
+          {paymentType?.map(({ id, type, description, icon_id }) => (
+            <div
+              key={id}
+              className={`${selectedPaymentID === id ? 'bg-blue-950' : 'bg-gray-200'} hover:bg-blue-950 transition-all ease-in-out rounded-lg p-4 max-w-[160px] cursor-pointer`}
+              onClick={() => setSelectedPaymentID(id)}
+            >
+              {iconMapper[icon_id]}
+              <p className='text-white'>{`Transfer via card number`}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="px-2 mt-4">
+          <Form layout="vertical">
+            <div className="grid grid-cols-1 sm:grid-cols-2">
+              <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>
+
+              <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>
+
+              <div className='flex flex-row gap-5'>
+                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Month</Text>} className="w-full">
+                  <Select
+                    allowClear
+                    style={{ width: '100%' }}
+                    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
+                    style={{ width: '100%' }}
+                    placeholder="Please select"
+                    options={
+                      Array.from({ length: 10 }, (_, i) => {
+                        const year = new Date().getFullYear() + i;
+                        return { label: String(year), value: String(year) };
+                      })
+                    }
+                  />
+                </Form.Item>
+              </div>
+
+              <Form.Item label={<Text className='!italic !text-xs !font-semibold'>CVC</Text>}>
+                <div className='flex gap-6 items-center'>
+                  <Input
+                    placeholder="123"
+                    className='!max-w-[50px]'
+                    value={cvc}
+                    onChange={(e) => {
+                      const rawValue = e.target.value.replace(/\D/g, '').slice(0, 4);
+                      setCvc(rawValue);
+                    }}
+                  />
+                  <p className='text-gray-300 max-w-[160px]' style={{ fontSize: 10 }}>
+                    3 or 4 digits usually found on the signature strips
+                  </p>
+                </div>
+              </Form.Item>
+
+              <Form.Item>
+                <div className='flex flex-row items-center gap-2'>
+                  <Switch checked={true} onChange={() => { }} />
+                  <Text className='!text-xs font-semibold'>SET AS DEFAULT</Text>
+                </div>
+              </Form.Item>
+            </div>
+            <Button type="primary" className='!w-full !py-3'>CONFIRM</Button>
+          </Form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CreatePersona;

app/user/persona/create/page.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useState, useEffect } from 'react'
+import PageTitle from '@/components/ui/PageTitle';
+import { Input, Typography, Select, Switch, Upload, Form, Button } from 'antd'
+import { UploadOutlined } from '@ant-design/icons';
+import type { SelectProps } from 'antd';
+import TextArea from 'antd/es/input/TextArea';
+import { useQuery } from '@tanstack/react-query';
+import { getPersonaStyle } from '@/app/api/user/personaService';
+import type { RcFile } from 'antd/es/upload';
+
+
+const CreatePersona: React.FC = () => {
+
+
+    const [name, setName] = useState<string | undefined>("")
+    const [options, setOptions] = useState<SelectProps[] | undefined>()
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [fileList, setFileList] = useState<any[]>([]);
+    const [enabled, setEnabled] = useState({
+        isManualKnowledgeEntry: false,
+        isUploadTextDocument: false,
+        isImportWebLink: false,
+        isCodeInterpreter: false
+    });
+
+    const { data: personaStyleList, error, isLoading } = useQuery({
+        queryKey: ["personaStyle"],
+        queryFn: () => getPersonaStyle()
+    })
+
+    useEffect(() => {
+
+        const latestData: SelectProps[] | undefined = personaStyleList?.map(persona => {
+            return {
+                label: persona.name,
+                value: persona.id
+            }
+        })
+
+        setOptions(latestData)
+
+    }, [personaStyleList])
+
+    const handleBeforeUpload = (file: RcFile) => {
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            // message.error('Only image files are allowed!');
+        }
+
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+            //message.error('Image must be smaller than 2MB!');
+        }
+
+        if (isImage && isLt2M) {
+            const reader = new FileReader();
+            reader.onload = () => setImageUrl(reader.result as string);
+            reader.readAsDataURL(file);
+        }
+
+        // prevent automatic upload
+        return false;
+    };
+
+
+    return (
+        <div className="flex flex-col bg-white">
+            <PageTitle title='CREATE PERSONA' />
+            <div className='px-4 py-6'>
+                <Form layout="vertical">
+                    <Form.Item label="Profile Name">
+                        <Input
+                            style={{ padding: 10 }}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label="Persona Image">
+                        <Upload
+                            beforeUpload={handleBeforeUpload}
+                            fileList={fileList}
+                            onRemove={() => {
+                                setFileList([]);
+                                setImageUrl(null);
+                            }}
+                            onChange={({ fileList }) => setFileList(fileList)}
+                            maxCount={1}
+                            accept="image/*"
+                            listType="picture"
+                        >
+                            <button className='border border-gray-300 px-4 py-2 rounded hover:bg-gray-50'>
+                                <UploadOutlined /> Click to Upload
+                            </button>
+                        </Upload>
+                        {imageUrl && (
+                            <img
+                                src={imageUrl}
+                                alt="Uploaded Preview"
+                                className="mt-2 w-32 h-32 object-cover border rounded"
+                            />
+                        )}
+                    </Form.Item>
+
+                    <Form.Item label="Role / Department">
+                        <Input
+                            style={{ padding: 10 }}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label="Description">
+                        <TextArea
+                            style={{ padding: 10 }}
+                            rows={6}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label="Persona Style">
+                        <Select
+                            mode="multiple"
+                            allowClear
+                            style={{ width: '100%' }}
+                            placeholder="Please select"
+                            options={options}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label="Greeting Message">
+                        <TextArea
+                            style={{ padding: 10 }}
+                            rows={3}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </Form.Item>
+
+                    <Form.Item label="Persona Training Center">
+                        <div className='flex flex-col gap-2'>
+                            <div className='flex items-center gap-2'>
+                                <Switch
+                                    checked={enabled.isManualKnowledgeEntry}
+                                    onChange={(checked) =>
+                                        setEnabled({ ...enabled, isManualKnowledgeEntry: checked })
+                                    }
+                                />
+                                <span className='font-bold'>Manual Knowledge Entry</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                                <Switch
+                                    checked={enabled.isUploadTextDocument}
+                                    onChange={(checked) =>
+                                        setEnabled({ ...enabled, isUploadTextDocument: checked })
+                                    }
+                                />
+                                <span className='font-bold'>Upload Text Document</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                                <Switch
+                                    checked={enabled.isImportWebLink}
+                                    onChange={(checked) =>
+                                        setEnabled({ ...enabled, isImportWebLink: checked })
+                                    }
+                                />
+                                <span className='font-bold'>Import from Web Link</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                                <Switch
+                                    checked={enabled.isCodeInterpreter}
+                                    onChange={(checked) =>
+                                        setEnabled({ ...enabled, isCodeInterpreter: checked })
+                                    }
+                                />
+                                <span className='font-bold'>Code Interpreter & Data Analysis</span>
+                            </div>
+                        </div>
+                    </Form.Item>
+                    <div className='text-center'>
+                        <Button type="primary" className='!w-fit !py-3 !text-xs !font-bold !px-10'>SUBMIT</Button>
+                    </div>
+                </Form>
+            </div>
+        </div>
+
+    )
+}
+
+export default CreatePersona

app/user/persona/page.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import React, {useEffect, useState} from 'react';
+import PageTitle from '@/components/ui/PageTitle';
+import {
+    EyeOutlined,
+    EditOutlined,
+    SortAscendingOutlined,
+    PlusCircleFilled
+} from '@ant-design/icons';
+import type { Persona } from '@/types/persona';
+import { getPersona } from '@/app/api/user/personaService';
+import { useQuery } from '@tanstack/react-query';
+
+interface PersonaListProps {
+  personaData: Persona[] | undefined;
+}
+
+const PersonaPage: React.FC = () => {
+    
+
+    let {data:personas, error, isLoading} = useQuery<Persona[]>({
+        queryKey:["getPersona"],
+        queryFn: () => getPersona()
+    })
+
+    if(isLoading) {
+        return <p>Loading...</p>
+    }
+    
+    if(!personas) {
+        return <p></p>
+    }
+
+    return (
+        <main className="flex flex-col bg-white h-full">
+            <PageTitle title="PERSONA" />
+            {(personas.length > 0) ? <PersonaList personaData={personas} /> : <PersonaIntro />}
+        </main>
+    );
+};
+
+const PersonaIntro: React.FC = () => {
+    return (
+        <div className="flex flex-col px-6 flex-1 justify-center items-center">
+            <div
+                className="w-full max-w-md text-center border-2 border-cyan-500 rounded-lg px-6 py-10 shadow-lg"
+                style={{ boxShadow: '0 10px 100px 30px rgba(59, 130, 246, 0.3)' }} // red-500 with opacity
+            >
+                <p className="text-lg font-semibold mb-2 text-gray-800">NO PERSONA CREATED YET</p>
+                <p className="text-sm text-gray-600 mb-4">Get started by creating your first AI Persona</p>
+
+                <img
+                    src="/ruccan_logo.png"
+                    alt="Ruccan Logo"
+                    className="mx-auto mb-6"
+                    width={150}
+                    height={150}
+                />
+
+                <button className="w-fit rounded text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#82c7d7] cursor-pointer text-white font-bold shadow transition-all duration-200">
+                    CREATE YOUR FIRST PERSONA
+                </button>
+            </div>
+        </div>
+    )
+}
+
+const PersonaList: React.FC<PersonaListProps> = ({personaData}) => {
+    return (
+        <div className="overflow-x-auto">
+            <div className='flex px-2 py-4'>
+                <button className="w-fit rounded text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#82c7d7] cursor-pointer text-white font-bold shadow transition-all duration-200 ms-auto">
+                <PlusCircleFilled /> Create New Persona
+            </button>
+            </div>
+            <table className="w-full text-sm text-left text-gray-700 border-collapse">
+                <thead>
+                    <tr className="bg-gray-100 text-gray-700">
+                        <th className="px-4 py-3 font-medium">
+                            <div className="flex items-center gap-1">
+                                Name <SortAscendingOutlined className="text-xs text-gray-400" />
+                            </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium">
+                            <div className="flex items-center gap-1">
+                                Role <SortAscendingOutlined className="text-xs text-gray-400" />
+                            </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium">
+                            <div className="flex items-center gap-1">
+                                Status <SortAscendingOutlined className="text-xs text-gray-400" />
+                            </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium text-center">Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {personaData?.map((persona) => (
+                        <tr key={persona.id} className="border-t border-gray-200 hover:bg-gray-50">
+                            <td className="px-4 py-3">{persona.name}</td>
+                            <td className="px-4 py-3">{persona.role}</td>
+                            <td className="px-4 py-3">
+                                <span
+                                    className={`px-2 py-1 rounded-full text-xs font-semibold ${persona.active
+                                        ? 'bg-green-100 text-green-600'
+                                        : 'bg-amber-600 text-white'
+                                        }`}
+                                >
+                                    {persona.active ? 'Active' : 'Inactive'}
+                                </span>
+                            </td>
+                            <td className="px-4 py-3 text-center">
+                                <div className="flex justify-center items-center gap-3 text-gray-600">
+                                    <button
+                                        className="hover:text-blue-500"
+                                        aria-label="Edit"
+                                        title="Edit"
+                                    >
+                                        <EditOutlined />
+                                    </button>
+                                    <button
+                                        className="hover:text-green-600"
+                                        aria-label="View"
+                                        title="View"
+                                    >
+                                        <EyeOutlined />
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default PersonaPage;

app/user/pricing/page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useState, useEffect } from 'react'
+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 = () => {
+
+
+    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

app/user/profile/page.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import {
+    UploadOutlined,
+    DeleteOutlined
+} from '@ant-design/icons'
+import { Button, Input, Typography, Upload, Form } from 'antd'
+import { useState } from 'react'
+
+const { Title, Text } = Typography
+
+const ProfileSettings = () => {
+    const [companyName, setCompanyName] = useState('')
+    const [role, setRole] = useState('')
+    const [profileName, setProfileName] = useState('')
+    const [newPassword, setNewPassword] = useState('')
+    const [confirmPassword, setConfirmPassword] = useState('')
+
+    return (
+        <Form layout="vertical" className="!flex !flex-col !gap-y-8 !max-w-2xl !mx-auto !p-5">
+            {/* 1. Profile Photo */}
+            <div>
+                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
+                    Profile Photo
+                </p>
+                <div className="flex flex-col items-center gap-4 mt-4">
+                    <img
+                        src="/default-avatar.png"
+                        alt="Profile"
+                        className="w-20 h-20 rounded-full object-cover border"
+                    />
+                    <Upload showUploadList={false}>
+                        <Button type='primary'>
+                            <span className='font-bold'>Upload Photo</span>
+                        </Button>
+                    </Upload>
+                </div>
+            </div>
+
+            {/* 2. Company Info */}
+            <div>
+                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
+                    Company Info
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+                    <Form.Item label={<Title level={5}>Company Name</Title>}>
+                        <Input
+                            placeholder="Company Name"
+                            value={companyName}
+                            onChange={(e) => setCompanyName(e.target.value)}
+                        />
+                    </Form.Item>
+                    <Form.Item label={<Title level={5}>My Role</Title>}>
+                        <Input
+                            placeholder="My Role"
+                            value={role}
+                            onChange={(e) => setRole(e.target.value)}
+                        />
+                    </Form.Item>
+                </div>
+            </div>
+
+            {/* 3. Profile Name */}
+            <div>
+                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
+                    Profile Name
+                </p>
+                <div className="mt-4">
+                    <Form.Item label={<Title level={5}>Profile Name</Title>}>
+                        <Input
+                            placeholder="Profile Name"
+                            value={profileName}
+                            onChange={(e) => setProfileName(e.target.value)}
+                        />
+                    </Form.Item>
+                </div>
+            </div>
+
+            {/* 4. Change Password */}
+            <div>
+                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
+                    Change Password
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+                    <Form.Item label={<Title level={5}>New Password</Title>}>
+                        <Input.Password
+                            placeholder="New Password"
+                            value={newPassword}
+                            onChange={(e) => setNewPassword(e.target.value)}
+                        />
+                    </Form.Item>
+                    <Form.Item label={<Title level={5}>Confirm Password</Title>}>
+                        <Input.Password
+                            placeholder="Confirm Password"
+                            value={confirmPassword}
+                            onChange={(e) => setConfirmPassword(e.target.value)}
+                        />
+                    </Form.Item>
+                </div>
+                <Button
+                    type="primary"
+                    className="mt-4 w-fit mx-auto"
+                    onClick={() => console.log('Change password confirmed')}
+                >
+                    <span className='px-10 font-bold'>Save</span>
+                </Button>
+            </div>
+
+            {/* 5. Delete Account */}
+            <div>
+                <div className="flex items-center gap-2 mb-2">
+                    <DeleteOutlined className="text-xl" style={{ color: "red" }} />
+                    <p className="font-bold text-red-600 py-1 w-fit">
+                        Delete Account
+                    </p>
+                </div>
+                <Text type="danger">
+                    Your account and data will be permanently deleted.
+                </Text>
+                <div className="mt-4 flex flex-col">
+                    <Button
+                        danger
+                        className='w-fit mx-auto'
+                        type="primary"
+                        onClick={() => console.log('Account deletion confirmed')}
+                    >
+                        <span className='px-10 font-bold'>Delete</span>
+                    </Button>
+                </div>
+            </div>
+        </Form>
+    )
+}
+
+export default ProfileSettings

app/user/wallet/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React, { useState } from 'react';
+import PageTitle from '@/components/ui/PageTitle';
+import { Input, Radio, Typography } from 'antd';
+import Link from 'next/link';
+
+const { Text } = Typography;
+
+const Wallet: React.FC = () => {
+    const [amount, setAmount] = useState('');
+    const [autoRenew, setAutoRenew] = useState(false);
+
+    return (
+        <main className="flex flex-col bg-white min-h-screen">
+            <PageTitle title="WALLET" />
+
+            <div className="flex flex-col gap-y-6 mt-6 max-w-md">
+                <div className='px-3'>
+                    {/* 1. Top Section: Title + History */}
+                    <div className="flex justify-between items-center mb-2">
+                        <p className="font-bold">Current Balance</p>
+                        <Link href="/transaction-history" className="text-blue-500 underline text-sm">
+                            Transaction History
+                        </Link>
+                    </div>
+
+                    {/* 2. RM Input */}
+                    <div className='flex flex-col'>
+                        <Input
+                            className="border border-blue-500 bg-blue-50 mb-3"
+                            placeholder="Enter amount in RM"
+                            type='number'
+                            value={amount}
+                            onChange={(e) => setAmount(e.target.value)}
+                            prefix="RM"
+                            size="large"
+                        />
+                        <button className='w-fit rounded-lg text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#436d86] text-white shadow border-0 mb-3 ms-auto'>
+                            <span className='font-bold'>Top Up Wallet</span>
+                        </button>
+                    </div>
+
+                    <div className="flex items-start gap-3 px-3">
+                        <Radio
+                            checked={autoRenew}
+                            onChange={(e) => setAutoRenew(e.target.checked)}
+                        />
+                        <div>
+                            <Text strong>Auto-Renew Subscription</Text>
+                            <p className="text-xs text-gray-500">
+                                Enable monthly or yearly auto payment using wallet.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* 4. Current Plan */}
+                <div className='border-y-2 p-3 border-blue-700'>
+                    <p><span className='font-bold'>Current Plan:</span> <span >Premium (RM25/Month)</span> </p>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default Wallet;

components/general/QueryProvider.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+
+const QueryProvider = ({ children }: { children: ReactNode }) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+};
+
+export default QueryProvider;

components/layout/Header.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useState } from 'react'
+import { MenuOutlined } from '@ant-design/icons'
+import { Button, Space } from 'antd'
+import Sidebar from '@/components/layout/Sidebar'
+import BellNotification from '@/components/ui/BellNotification'
+
+const Header = () => {
+  const [showSideBar, setShowSideBar] = useState(false)
+
+  return (
+    <header className="flex items-center px-4 py-2 relative z-40 bg-white shadow-sm">
+      {/* Sidebar Trigger */}
+      <Button
+        type="text"
+        icon={<MenuOutlined />}
+        onClick={() => setShowSideBar(true)}
+        className="text-lg text-gray-700"
+      />
+
+      {/* Sidebar Component */}
+      <Sidebar open={showSideBar} setOpen={setShowSideBar} />
+
+      {/* Logo + Brand */}
+      <div className="flex items-center ms-3">
+        <img src="/ruccan_logo.png" alt="Ruccan Logo" className="h-8 w-auto" />
+        <span className="text-black font-bold text-lg ms-3">Ruccan.com</span>
+      </div>
+
+      {/* Notification Bell */}
+      <div className="ms-auto">
+        <BellNotification />
+      </div>
+    </header>
+  )
+}
+
+export default Header

components/layout/Sidebar.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { Drawer, Menu, Divider, Avatar, Typography } from 'antd'
+import {
+  HomeOutlined,
+  MessageOutlined,
+  UserOutlined,
+  BookOutlined,
+  ApiOutlined,
+  WalletOutlined,
+  SettingOutlined,
+  QuestionCircleOutlined,
+  LogoutOutlined,
+  LeftOutlined
+} from '@ant-design/icons'
+import { useRouter } from 'next/navigation'
+import type { SidebarProps } from '@/types/sidebar'
+
+const { Text } = Typography
+
+const Sidebar = ({ open = false, setOpen = () => { } }: SidebarProps) => {
+  const router = useRouter()
+
+  const handleClick = (e: { key: string }) => {
+    router.push(e.key)
+    setOpen(false)
+  }
+
+  return (
+    <Drawer
+      placement="left"
+      closable={false}
+      onClose={() => setOpen(false)}
+      open={open}
+      width={250}
+      mask={false}
+      styles={{
+        body: {
+          padding: "0 10px",
+        },
+      }}
+    >
+      {/* Custom Close Button */}
+      <button
+        className="p-2 bg-white hover:bg-gray-100 rounded shadow text-xs cursor-pointer"
+        onClick={() => {
+          setOpen(false)
+        }}
+        style={{
+          position: 'absolute',
+          top: 30,
+          right: -20,
+        }}
+      >
+        <LeftOutlined />
+      </button>
+
+      {/* Top: Avatar/Profile */}
+      <div className="flex items-center gap-3 px-4 py-4 border-b border-gray-200">
+        <Avatar size="large" icon={<UserOutlined />} />
+        <div>
+          <div className="text-xs text-gray-500">PRODUCT MANAGER</div>
+          <Text strong>Amirul Baharuddin</Text>
+        </div>
+      </div>
+
+      {/* Main Menu */}
+      <div className='border-b border-gray-200'>
+        <p className='px-7 pt-3 text-gray-500 text-xs text-bold'>MAIN</p>
+        <Menu
+          mode="inline"
+          onClick={handleClick}
+          items={[
+            {
+              key: '/dashboard',
+              icon: <HomeOutlined />,
+              label: 'Dashboard',
+            },
+            {
+              key: '/chat',
+              icon: <MessageOutlined />,
+              label: 'Ruccan Chat',
+            },
+            {
+              key: '/persona',
+              icon: <UserOutlined />,
+              label: 'Persona',
+            },
+            {
+              key: '/knowledge',
+              icon: <BookOutlined />,
+              label: 'Knowledge',
+            },
+            {
+              key: '/integration',
+              icon: <ApiOutlined />,
+              label: 'Integration',
+            },
+            {
+              key: '/wallet',
+              icon: <WalletOutlined />,
+              label: 'Wallet',
+            },
+          ]}
+        />
+      </div>
+
+      {/* Settings & Others */}
+      <div>
+        <p className='px-7 pt-3 text-gray-500 text-xs text-bold'>SETTINGS</p>
+        <Menu
+          mode="inline"
+          onClick={handleClick}
+          items={[
+            {
+              key: 'settings-parent',
+              icon: <SettingOutlined />,
+              label: 'Settings',
+              children: [
+                {
+                  key: '/settings/general',
+                  icon: <SettingOutlined />, // General settings still makes sense
+                  label: 'General',
+                },
+                {
+                  key: '/settings/profile',
+                  icon: <UserOutlined />, // Profile = user-related
+                  label: 'Profile',
+                },
+                {
+                  key: '/settings/chat-preference',
+                  icon: <MessageOutlined />, // Chat preference = chat/message
+                  label: 'Chat Preference',
+                }
+              ]
+            }
+          ]}
+        />
+      </div>
+      <div>
+        <Menu
+          mode="inline"
+          onClick={handleClick}
+          style={{ position: "absolute", bottom: 0, left: 0 }}
+          items={[
+
+            {
+              key: '/help',
+              icon: <QuestionCircleOutlined />,
+              label: 'Help',
+            },
+            {
+              key: '/logout',
+              icon: <LogoutOutlined style={{ color: "red" }} />,
+              label: <p className='text-red-400 font-bold'>Logout</p>,
+            },
+          ]}
+        />
+      </div>
+    </Drawer>
+  )
+}
+
+export default Sidebar

components/ui/BellNotification.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import {
+  BellOutlined,
+} from '@ant-design/icons'
+import { Badge, Dropdown, Space, List, Typography } from 'antd'
+import type { MenuProps } from 'antd'
+
+const { Text } = Typography
+
+// Example Notification Data
+const notifications = [
+  {
+    id: '1',
+    title: 'New Message',
+    description: 'You have received a new message from John.',
+    time: '2 min ago',
+  },
+  {
+    id: '2',
+    title: 'Server Update',
+    description: 'Server will restart at 12:00 AM.',
+    time: '10 min ago',
+  },
+  {
+    id: '3',
+    title: 'Payment Received',
+    description: 'You have received a payment of $120.',
+    time: '1 hour ago',
+  },
+]
+
+const NotificationList = () => (
+  <div className="w-80 max-h-96 overflow-auto bg-white rounded p-2 border border-gray-200 absolute" style={{right:-16}}>
+    <List
+      itemLayout="horizontal"
+      dataSource={notifications}
+      renderItem={(item) => (
+        <List.Item className="hover:bg-gray-50 px-3 py-2 cursor-pointer transition-all">
+          <List.Item.Meta
+            title={<Text strong>{item.title}</Text>}
+            description={
+              <div className="flex justify-between text-xs text-gray-500">
+                <span>{item.description}</span>
+                <span className="whitespace-nowrap">{item.time}</span>
+              </div>
+            }
+          />
+        </List.Item>
+      )}
+    />
+  </div>
+)
+
+const BellNotification = () => {
+  return (
+    <Dropdown
+      popupRender={() => <NotificationList />}
+      placement="bottomRight"
+      trigger={['click']}
+      arrow
+    >
+      <Space className="cursor-pointer relative">
+        <Badge count={notifications.length} size="small" offset={[-2, 2]}>
+          <BellOutlined style={{ fontSize: 20, color: 'black' }} />
+        </Badge>
+      </Space>
+    </Dropdown>
+  )
+}
+
+export default BellNotification

components/ui/InputList.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Input, Form, Button, Space } from 'antd';
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const InputList: React.FC = () => {
+  return (
+    <div className='mt-2'>
+      <Form.List name="weblinks">
+        {(fields, { add, remove }) => (
+          <Space direction="vertical" style={{ width: '100%' }}>
+            {fields.map(({ key, name, ...restField }) => (
+              <Space key={key} align="baseline" style={{ width: '100%' }}>
+                <Form.Item
+                  {...restField}
+                  name={[name, 'first']}
+                  rules={[{ required: true, message: 'Missing link' }]}
+                  style={{ flex: 1 }}
+                >
+                  <Input placeholder="https://example.com/faq" />
+                </Form.Item>
+                <DeleteOutlined
+                  className='!text-red-500'
+                  onClick={() => remove(name)}
+                />
+              </Space>
+            ))}
+
+            {fields.length < 5 && (
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => add()}
+                  block
+                  icon={<PlusOutlined />}
+                >
+                  Add field
+                </Button>
+              </Form.Item>
+            )}
+          </Space>
+        )}
+      </Form.List>
+    </div>
+  );
+};
+
+export default InputList;

components/ui/LoadingMeter.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+type LoadingMeterProps = {
+    title: string,
+    progress: number,
+    total: number
+}
+
+const LoadingMeter: React.FC<LoadingMeterProps> = ({ title = "Title", progress = 0, total = 0 }) => {
+
+
+    const barProgress = (progress * 100) / total;
+
+    if(progress > total) return <p className='text-red-500'>Progress is more than total</p>
+
+    return (
+        <div className="flex flex-col gap-2 w-full max-w-md mb-2">
+            {/* Header Row */}
+            <div className="flex flex-row justify-between text-sm font-medium text-gray-700">
+                <span>{`${title}: `}</span>
+                <span>{`${progress}/${total}`}</span>
+            </div>
+
+            {/* Progress Bar */}
+            <div className="w-full h-3 bg-gray-200 rounded-full border overflow-hidden">
+                <div
+                    className="h-full bg-[#b64fb1] rounded-full transition-all duration-500"
+                    style={{ width: `${barProgress}%` }}
+                ></div>
+            </div>
+        </div>
+    );
+};
+
+export default LoadingMeter;

components/ui/PageTitle.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Typography } from 'antd';
+const { Title } = Typography;
+
+type PageTitleProps = {
+    title: string
+}
+
+const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
+    return (
+        <div className='bg-[#480066] flex justify-center py-3'>
+            <Title level={4} style={{margin:0, color:"white"}}>
+                {title}
+            </Title>
+
+        </div>
+    )
+}
+
+export default PageTitle

components/ui/SectionTitle.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Typography, Divider } from 'antd';
+const { Title } = Typography;
+
+type SectionTitleProps = {
+    title: string
+}
+
+const SectionTitle: React.FC<SectionTitleProps> = ({ title }) => {
+    return (
+        <div className='relative bg-black'>
+            <Divider />
+            <Title
+                level={5}
+                className="absolute left-1/2 -translate-x-1/2 -top-3 bg-white px-2 text-white"
+                style={{ margin: 0 }}
+            >
+                {title}
+            </Title>
+        </div>
+    )
+}
+
+export default SectionTitle

package.json

@@ -9,19 +9,26 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@tanstack/react-query": "^5.81.5",
+    "antd": "^5.26.3",
+    "lucide-react": "^0.525.0",
+    "next": "15.3.4",
+    "next-auth": "^4.24.11",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.4"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5"
   }
 }

types/bellnotification.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react'
+
+export interface BellNotificationProps {
+    open: boolean,
+    setOpen: Dispatch<SetStateAction<boolean>>
+}

types/chat.ts

@@ -0,0 +1,17 @@
+import { Persona } from "./persona";
+
+export interface ChatItem {
+    self:boolean,
+    text:string,
+    time:string,
+    date:string,
+    read:boolean,
+}
+
+export interface Chat {
+    id: number;
+    name: string;
+    persona: Persona
+    chatList: ChatItem[]
+};
+

types/payment.ts

@@ -0,0 +1,6 @@
+export interface PaymentType {
+    id: number,
+    type: string,
+    description: string,
+    icon_id: string
+}

types/persona.ts

@@ -0,0 +1,12 @@
+export interface PersonaStyle {
+    id: number, 
+    name: string
+}
+
+export interface Persona {
+    id: number;
+    name: string;
+    styles: PersonaStyle[];
+    role: string;
+    active: boolean;
+}

types/sidebar.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react'
+
+export interface SidebarProps {
+    open: boolean,
+    setOpen: Dispatch<SetStateAction<boolean>>
+}