typescript resolve

app/guest/login/page.tsx

 "use client";
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Button,
   Checkbox,

app/guest/signup/page.tsx

 "use client";
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Button,
   Form,

app/layout.tsx

+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './globals.css'
 import type { Metadata } from 'next'
-
 import { ConfigProvider } from 'antd'
-import type { ThemeConfig } from 'antd';
-
 import QueryProvider from '@/components/general/QueryProvider';
-
-export const theme: ThemeConfig = {
-  token: {
-    colorPrimary: '#602FD0',
-    colorPrimary2: '#9E7DEA',
-    colorPrimary3: '#AD3B91',
-    colorSecondary: '#B3B3B3',
-    colorSuccess: '#35B37E',
-    colorWarning: '#FFAB00',
-    colorError: '#DB4336',
-    colorInfo: '#0165FF',
-  } as any,
-};
+import { theme } from '@/theme-config';
 
 export const metadata: Metadata = {
   title: 'Mobile App',

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

 'use client';
 import { useState } from 'react';
 import type { Chat } from '@/types/chat';
-import { Flex, Layout, Row, Col, Input, Space, Upload, Button, Result } from 'antd';
+import { Flex, Layout, Row, Col, Input, Space, Upload, Button, Image } from 'antd';
 import PageTitle from '@/components/ui/PageTitle';
 import Navigation from '@/components/layout/Navigation'
 import { useParams } from 'next/navigation'
                         <PageTitle position='center' backButton={true}>{chat?.name}</PageTitle>
                         <div className="bg-white shadow p-4 flex flex-row border-b-2">
                             <div>
-                                <img
+                                <Image
                                     src="/default-avatar.png"
                                     alt="Profile"
                                     className="w-15 h-15 rounded-full object-cover border"

app/user/chat/page.tsx

     // Fetch chat data using React Query
     const {
         data: chatList = [],
-        error,
         isLoading,
     } = useQuery<Chat[] | undefined | null>({
         queryKey: ['getAllChat'],

app/user/knowledge/create/page.tsx

 
 import { useState, useEffect } from 'react'
 import PageTitle from '@/components/ui/PageTitle';
-import { Upload, Select, Switch, Form, Button, Tag, Layout, Typography, Input, Row, Col, Flex } from 'antd'
+import { Upload, Select, Switch, Form, Button, Tag, Typography, Input, Row, Col, Flex } from 'antd'
 import { UploadOutlined } from '@ant-design/icons';
 import InputList from '@/components/ui/InputList';
 import type { SelectProps } from 'antd';
 const CreatePersona: React.FC = () => {
 
     const [name, setName] = useState<string | undefined>("")
-    const [isPremium, setIsPremium] = useState<boolean>(true)
+    const [isPremium] = useState<boolean>(true)
     const [options, setOptions] = useState<SelectProps[] | undefined>()
     const [enabled, setEnabled] = useState({
         isWebSearch: false,

app/user/knowledge/page.tsx

 import type { ColumnsType } from 'antd/es/table';
 import { getAllKnowledge } from '@/app/api/user/knowledgeService';
 import LoadingScreen from '@/components/layout/LoadingScreen';
+import { Persona } from '@/types/persona';
 
 const { Text, Title } = Typography;
 
         ),
         dataIndex: 'personas',
         key: 'personas',
-        render: (_: any, record: Knowledge) => {
-            if (!record.personas?.length) return '-';
+        render: (record: Persona[]) => {
+
+            if (record.length === 0) return '-';
 
             return (
                 <Flex wrap>
-                    {record.personas.map((persona) => (
+                    {record.map((persona) => (
                         <Tag key={persona.id} color="blue">
                             {persona.name}
                         </Tag>
         title: 'Action',
         key: 'action',
         align: 'center' as const,
-        render: (_: any, record: Knowledge) => (
+        render: () => (
             <Flex justify="center">
                 <Button type="text" icon={<EditOutlined />} />
                 <Button type="text" icon={<EyeOutlined />} />
 
 const Knowledge: React.FC = () => {
 
-    const { data: knowledges, error, isLoading } = useQuery<Knowledge[]>({
+    const { data: knowledges, isLoading } = useQuery<Knowledge[]>({
         queryKey: ["getAllKnowledge"],
         queryFn: () => getAllKnowledge()
     })

app/user/page.tsx

 "use client";
 
 import React from 'react';
-import { Flex, Typography, Divider, Layout, Button, Row, Col, Image } from 'antd';
+import { Typography, Layout, Row, Col, Image } from 'antd';
 import { RightOutlined, PhoneOutlined } from '@ant-design/icons';
 import SectionTitle from '@/components/ui/SectionTitle';
 import PageTitle from '@/components/ui/PageTitle';
 import PrimaryButton from '@/components/ui/PrimaryButton';
 import { useRouter } from 'next/navigation';
 
-const { Title, Text } = Typography;
+const { Text } = Typography;
 
-const page = () => {
+const GuestPage = () => {
 
     const router = useRouter()
 
     );
 };
 
-export default page;
+export default GuestPage;

app/user/payment/page.tsx

 
 import { useState } from 'react';
 import PageTitle from '@/components/ui/PageTitle';
-import { Typography, Button, Input, Form, Select, Switch, Flex, Row, Col } from 'antd';
+import { Typography, Input, Form, Select, Switch, Flex, Row, Col } from 'antd';
 import Link from 'next/link';
 
 import type { PaymentType } from '@/types/payment';
 import IconCard from '@/components/ui/IconCard';
 import LoadingScreen from '@/components/layout/LoadingScreen';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 const CreatePersona: React.FC = () => {
   // Form states
   const [cvc, setCvc] = useState('');
 
   // Fetch payment types using React Query
-  const { data: paymentType, error, isLoading } = useQuery<PaymentType[] | undefined>({
+  const { data: paymentType, isLoading } = useQuery<PaymentType[] | undefined>({
     queryKey: ['getPaymentType'],
     queryFn: getPaymentType
   });
 
           {/* Payment type selection */}
           <Flex wrap gap={8}>
-            {paymentType?.map(({ id, type, description, icon_id }) => <IconCard key={id} active={selectedPaymentID === id} iconName={icon_id} text={description} handleClick={() => { setSelectedPaymentID(id)}} />)}
+            {paymentType?.map(({ id, description, icon_id }) => <IconCard key={id} active={selectedPaymentID === id} iconName={icon_id} text={description} handleClick={() => { setSelectedPaymentID(id)}} />)}
           </Flex>
 
           {/* Payment form */}

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

 import AltLayout from '@/components/layout/AltLayout';
 import LoadingScreen from '@/components/layout/LoadingScreen';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 const now = new Date();
 const month = now.toLocaleString('default', { month: 'long' });
 const CreatePersona: React.FC = () => {
 
   // Fetch payment types using React Query
-  const { data: transactionList, error, isLoading } = useQuery<Transaction[] | undefined>({
+  const { data: transactionList, isLoading } = useQuery<Transaction[] | undefined>({
     queryKey: ['getAllTransaction'],
     queryFn: getAllTransaction
   });
         </Col>
         <Col span={24}>
           <Flex vertical>
-            {transactionList?.map(({ name, created_at, amount }) => <PaymentCard name={name} created_at={created_at} amount={amount} />)}
+            {transactionList?.map(({ id, name, created_at, amount }) => <PaymentCard key={id} name={name} created_at={created_at} amount={amount} />)}
           </Flex>
         </Col>
       </Row>

app/user/persona/create/page.tsx

 "use client";
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// i'm ignoring file list
 import { useState, useEffect } from 'react'
 import PageTitle from '@/components/ui/PageTitle';
-import { Input, Typography, Select, Switch, Upload, Form, Button, Tag, Col, Row, Flex } from 'antd'
+import { Input, Typography, Select, Switch, Upload, Form, Button, Tag, Col, Row, Flex, Image } from 'antd'
 import AltLayout from '@/components/layout/AltLayout';
 import { UploadOutlined } from '@ant-design/icons';
 import type { SelectProps } from 'antd';
 import 'react-phone-input-2/lib/style.css';
 import LoadingScreen from '@/components/layout/LoadingScreen';
 
-const { Text, Title } = Typography
+const { Text } = Typography
 
 const CreatePersona: React.FC = () => {
 
         isSOPAutoLearn: false
     });
 
-    const { data: personaStyleList, error, isLoading } = useQuery({
+    const { data: personaStyleList, isLoading } = useQuery({
         queryKey: ["personaStyle"],
         queryFn: () => getPersonaStyle()
     })
                                 </button>
                             </Upload>
                             {imageUrl && (
-                                <img
+                                <Image
                                     src={imageUrl}
                                     alt="Uploaded Preview"
-                                    className="mt-2 w-32 h-32 object-cover border rounded"
+                                    className="!mt-2 !w-32 !h-32 !object-cover !border !rounded"
                                 />
                             )}
                         </Form.Item>

app/user/persona/page.tsx

 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PageTitle from '@/components/ui/PageTitle';
 import {
     EyeOutlined,
         title: 'Action',
         key: 'action',
         align: 'center' as const,
-        render: (_: any, record: Persona) => (
+        render: () => (
             <Flex justify="center">
                 <Button type="text" icon={<EditOutlined />} />
                 <Button type="text" icon={<EyeOutlined />} />
 const PersonaPage: React.FC = () => {
 
 
-    const { data: personas, error, isLoading } = useQuery<Persona[]>({
+    const { data: personas, isLoading } = useQuery<Persona[]>({
         queryKey: ["getPersona"],
         queryFn: () => getPersona()
     })

app/user/settings/profile/page.tsx

     Col,
     Divider,
     Flex,
+    Image
 } from 'antd';
 
 import AltLayout from '@/components/layout/AltLayout';
                             <Col span={24}>
                                 <Title level={5} className="!mb-3">Profile Photo</Title>
                                 <Flex vertical align="center" gap={16}>
-                                    <img
+                                    <Image
                                         src="/default-avatar.png"
                                         alt="Profile"
                                         className="w-20 h-20 rounded-full object-cover border"

app/user/wallet/page.tsx

     Space,
 } from 'antd';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 const Wallet: React.FC = () => {
     const [amount, setAmount] = useState('');

components/layout/Header.tsx

 'use client'
 
 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, Image, Flex, Typography } from 'antd'
+import { faBars } from '@fortawesome/free-solid-svg-icons'
+import { Button, Image, Flex, Typography } from 'antd'
 import Sidebar from '@/components/layout/Sidebar'
 import BellNotification from '@/components/ui/BellNotification'
 
-const { Text, Title } = Typography
+const { Text } = Typography
 
 const Header = () => {
   const [showSideBar, setShowSideBar] = useState(false)

components/layout/Sidebar.tsx

 'use client'
 
-import { Drawer, Menu, Avatar, Typography, Image, Flex, Row, Col } from 'antd'
+import { Drawer, Menu, Typography, Image, Flex, Row, Col } from 'antd'
 import {
-  UserOutlined,
   LeftOutlined
 } from '@ant-design/icons'
 import { useRouter } from 'next/navigation'

components/ui/IconCard.tsx

 import React, { useCallback } from 'react'
 import { Typography } from 'antd';
 import { BankFilled, WalletFilled } from '@ant-design/icons';
+const { Text } = Typography
 
-const { Text, Title } = Typography
+type IconCardProps = {
+    active: boolean;
+    iconName: string;
+    text: string;
+    handleClick: () => void
+}
 
-const IconCard = ({ active, iconName, text, handleClick }) => {
+const IconCard: React.FC<IconCardProps> = ({ active, iconName, text, handleClick }: IconCardProps) => {
 
     const renderIcon = useCallback((nameId: string) => {
         if (nameId === "card") return <WalletFilled className='!text-white !text-xl' />

components/ui/LoadingMeter.tsx

 import React from 'react';
-import { Flex, Typography, Divider, Layout, Button, Row, Col, Image } from 'antd';
+import { Flex, Typography, Row, Col } from 'antd';
 
-const { Title, Text } = Typography;
+const { Text } = Typography;
 
 type LoadingMeterProps = {
     title: string,

components/ui/PaymentCard.tsx

-import React, { useState } from 'react';
+import React from 'react';
 import { Typography, Flex} from 'antd';
 import type { Transaction } from '@/types/payment';
 import formatDate from '@/helper/util/formatDateTime';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 type PaymentCardProps = Omit<Transaction, 'id'>
 

components/ui/PlanCard.tsx

-import { Typography, Button, Row, Col, Card, Flex } from 'antd';
+import { Typography, Card, Flex } from 'antd';
 import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import PrimaryButton from './PrimaryButton';
 

components/ui/PrimaryButton.tsx

 
 import React from 'react';
 import { Button } from 'antd';
-import { useThemeToken } from '@/hooks/useThemeToken';
 import classNames from 'classnames';
 
 type PrimaryButtonProps = {
     outline = false,
 }: PrimaryButtonProps) => {
 
-    const token = useThemeToken();
-
     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]';

theme-config.ts

+import type { ThemeConfig } from 'antd';
+export const theme: ThemeConfig = {
+  token: {
+    colorPrimary: '#602FD0',
+  },
+};