new layout style for payment

app/user/layout.tsx

@@ -16,6 +16,7 @@ const AppLayout = ({ children }: { children: React.ReactNode }) => {
     '/user/persona/create',
     '/user/knowledge/create',
     '/user/settings/profile',
+    '/user/payment',
     '/user/payment'
   ];
 

app/user/payment/page.tsx

@@ -2,13 +2,14 @@
 
 import { useCallback, useState } from 'react';
 import PageTitle from '@/components/ui/PageTitle';
-import { Typography, Button, Input, Form, Select, Switch, Flex } from 'antd';
+import { Typography, Button, Input, Form, Select, Switch, Flex, Row, Col } from 'antd';
 import Link from 'next/link';
 import { BankFilled, WalletFilled } from '@ant-design/icons';
 import type { PaymentType } from '@/types/payment';
 import { useQuery } from '@tanstack/react-query';
 import { getPaymentType } from '@/app/api/general/paymentService';
 import AltLayout from '@/components/layout/AltLayout';
+import PrimaryButton from '@/components/ui/PrimaryButton';
 
 const { Text, Title } = Typography;
 
@@ -35,19 +36,19 @@ const CreatePersona: React.FC = () => {
 
   return (
     <AltLayout header={<PageTitle backButton={true}>PAYMENT</PageTitle>}>
-      <Flex vertical className='!bg-white'>
-        <div className='p-4'>
+      <Row className='!bg-white'>
+        <Col span={24} className='!p-4'>
           {/* Section intro */}
-          <div className='flex flex-col gap-5 mb-8 text-xs text-gray-400'>
-            <p className='font-semibold'>Enter your payment details <br />
-              <span className='font-semibold italic'>
+          <Flex vertical gap={10} className='!mb-8'>
+            <Text className='!font-semibold !text-xs !text-gray-400'>Enter your payment details <br />
+              <Text italic className='!text-xs'>
                 By continuing you agree to our <Link href="/">Terms</Link>
-              </span>
-            </p>
-          </div>
+              </Text>
+            </Text>
+          </Flex>
 
           {/* Payment type selection */}
-          <div className='flex flex-row flex-wrap gap-2'>
+          <Flex wrap gap={8}>
             {paymentType?.map(({ id, type, description, icon_id }) => (
               <div
                 key={id}
@@ -59,97 +60,101 @@ const CreatePersona: React.FC = () => {
                 onClick={() => setSelectedPaymentID(id)}
               >
                 {renderIcon(icon_id)}
-                <p className='text-white'>Transfer via card number</p>
+                <Text className='!text-xs !text-white !block'>Transfer via card number</Text>
               </div>
             ))}
-          </div>
+          </Flex>
 
           {/* Payment form */}
-          <div className="px-2 mt-4">
-            <Form layout="vertical">
-              <div className="grid grid-cols-1 sm:grid-cols-2">
-
-                {/* Company Name */}
-                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Company Name</Text>}>
-                  <Input
-                    placeholder="Company Name"
-                    value={companyName}
-                    onChange={(e) => setCompanyName(e.target.value)}
-                  />
-                </Form.Item>
-
-                {/* Card Number with formatting */}
-                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Card Number</Text>}>
-                  <Input
-                    value={cardNumber}
-                    onChange={(e) => {
-                      const rawValue = e.target.value.replace(/\D/g, '').slice(0, 16);
-                      const formattedValue = rawValue.replace(/(.{4})/g, '$1 ').trim();
-                      setCardNumber(formattedValue);
-                    }}
-                  />
-                </Form.Item>
-
-                {/* Expiration Month & Year */}
-                <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
-                      placeholder="Please select"
-                      options={Array.from({ length: 12 }, (_, i) => {
-                        const month = String(i + 1).padStart(2, '0');
-                        return { label: month, value: month };
-                      })}
-                    />
-                  </Form.Item>
-
-                  <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Year</Text>} className="w-full">
-                    <Select
-                      allowClear
-                      placeholder="Please select"
-                      options={Array.from({ length: 10 }, (_, i) => {
-                        const year = new Date().getFullYear() + i;
-                        return { label: String(year), value: String(year) };
-                      })}
-                    />
-                  </Form.Item>
-                </div>
-
-                {/* CVC with note */}
-                <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 strip
-                    </p>
-                  </div>
-                </Form.Item>
-
-                {/* Default payment switch */}
-                <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>
-
-              {/* Submit Button */}
-              <Button type="primary" className='!w-full !py-3'>
-                CONFIRM
-              </Button>
-            </Form>
-          </div>
-        </div>
-      </Flex>
+          <Row>
+            <Col span={24} className="px-2 mt-4">
+              <Form layout="vertical">
+                <Row>
+                  <Col span={24}>
+
+                    {/* Company Name */}
+                    <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Company Name</Text>}>
+                      <Input
+                        placeholder="Company Name"
+                        value={companyName}
+                        onChange={(e) => setCompanyName(e.target.value)}
+                      />
+                    </Form.Item>
+
+                    {/* Card Number with formatting */}
+                    <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Card Number</Text>}>
+                      <Input
+                        value={cardNumber}
+                        onChange={(e) => {
+                          const rawValue = e.target.value.replace(/\D/g, '').slice(0, 16);
+                          const formattedValue = rawValue.replace(/(.{4})/g, '$1 ').trim();
+                          setCardNumber(formattedValue);
+                        }}
+                      />
+                    </Form.Item>
+
+                    {/* Expiration Month & Year */}
+                    <Flex gap={10}>
+                      <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Month</Text>} className="w-full">
+                        <Select
+                          allowClear
+                          placeholder="Please select"
+                          options={Array.from({ length: 12 }, (_, i) => {
+                            const month = String(i + 1).padStart(2, '0');
+                            return { label: month, value: month };
+                          })}
+                        />
+                      </Form.Item>
+
+                      <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Year</Text>} className="w-full">
+                        <Select
+                          allowClear
+                          placeholder="Please select"
+                          options={Array.from({ length: 10 }, (_, i) => {
+                            const year = new Date().getFullYear() + i;
+                            return { label: String(year), value: String(year) };
+                          })}
+                        />
+                      </Form.Item>
+                    </Flex>
+
+                    {/* CVC with note */}
+                    <Form.Item label={<Text className='!italic !text-xs !font-semibold'>CVC</Text>}>
+                      <Flex gap={12}>
+                        <Input
+                          placeholder="123"
+                          className='!max-w-[50px]'
+                          value={cvc}
+                          onChange={(e) => {
+                            const rawValue = e.target.value.replace(/\D/g, '').slice(0, 4);
+                            setCvc(rawValue);
+                          }}
+                        />
+                        <Text className='!text-gray-300 !max-w-[160px]' style={{ fontSize: 10 }}>
+                          3 or 4 digits usually found on the signature strip
+                        </Text>
+                      </Flex>
+                    </Form.Item>
+
+                    {/* Default payment switch */}
+                    <Form.Item>
+                      <Flex gap={4}>
+                        <Switch checked={true} onChange={() => { }} />
+                        <Text className='!text-xs font-semibold'>SET AS DEFAULT</Text>
+                      </Flex>
+                    </Form.Item>
+                  </Col>
+                </Row>
+
+                {/* Submit Button */}
+                <PrimaryButton customStyle='!w-full !py-3'>
+                  CONFIRM
+                </PrimaryButton>
+              </Form>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
     </AltLayout>
   );
 };

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

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

app/user/wallet/page.tsx

@@ -29,16 +29,16 @@ const Wallet: React.FC = () => {
             {/* Page Header */}
             <PageTitle>Wallet</PageTitle>
 
-            <Row justify="center" className="mt-6 px-4">
+            <Row justify="center" className="mt-6">
                 <Col xs={24} sm={20} md={16} lg={12}>
-                    <Form layout="vertical" className="space-y-6">
+                    <Form layout="vertical">
 
                         {/* 1. Balance + History Link */}
                         <Form.Item>
                             <Space className="w-full justify-between" align="center">
                                 <Text strong>Current Balance</Text>
                                 <Link
-                                    href="/transaction-history"
+                                    href="/user/payment/transaction-history"
                                     className="text-blue-500 underline text-sm"
                                 >
                                     Transaction History