Continued creating the payment page

src/components/Low/Input.tsx

@@ -8,6 +8,7 @@ interface Props {
 	label?: string;
 	placeholder?: string;
 	defaultValue?: string | number;
+	value?: string | number;
 	className?: string;
 	disabled?: boolean;
 	name: string;
@@ -20,6 +21,7 @@ export default function Input({
 	placeholder,
 	name,
 	required = false,
+	value,
 	defaultValue,
 	className,
 	roundness = "full",
@@ -69,6 +71,7 @@ export default function Input({
 				type={type}
 				name={name}
 				disabled={disabled}
+				value={value}
 				onChange={(e) => onChange(e.target.value)}
 				min={type === "number" ? 0 : undefined}
 				placeholder={placeholder}

src/pages/payment-record.tsx

@@ -12,13 +12,16 @@ import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@t
 import {CURRENCIES} from "@/resources/paypal";
 import {BsTrash} from "react-icons/bs";
 import axios from "axios";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {AgentUser, CorporateUser, User} from "@/interfaces/user";
 import UserCard from "@/components/UserCard";
 import Modal from "@/components/Modal";
 import clsx from "clsx";
 import useUsers from "@/hooks/useUsers";
 import Checkbox from "@/components/Low/Checkbox";
+import Button from "@/components/Low/Button";
+import Select from "react-select";
+import Input from "@/components/Low/Input";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -52,8 +55,126 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 const columnHelper = createColumnHelper<Payment>();
 
+const PaymentCreator = () => {
+	const [corporate, setCorporate] = useState<CorporateUser>();
+	const [price, setPrice] = useState<number>(0);
+	const [currency, setCurrency] = useState<string>("EUR");
+	const [commission, setCommission] = useState<number>(0);
+	const [referralAgent, setReferralAgent] = useState<AgentUser>();
+
+	const {users} = useUsers();
+
+	useEffect(() => {
+		if (!corporate) return setReferralAgent(undefined);
+		if (!corporate.corporateInformation?.referralAgent) return setReferralAgent(undefined);
+
+		const referralAgent = users.find((u) => u.id === corporate.corporateInformation.referralAgent);
+		setReferralAgent(referralAgent as AgentUser | undefined);
+	}, [corporate, users]);
+
+	return (
+		<div className="flex flex-col gap-8">
+			<h1 className="text-2xl font-semibold">New Payment</h1>
+			<form className="flex flex-col gap-4">
+				<div className="flex flex-col gap-2">
+					<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
+					<Select
+						className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+						options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
+							value: user.id,
+							meta: user,
+							label: `${user.corporateInformation.companyInformation.name} - ${user.email}`,
+						}))}
+						defaultValue={{value: "undefined", label: "Select an account"}}
+						onChange={(value) => console.log((value as any)?.meta ?? undefined)}
+						styles={{
+							control: (styles) => ({
+								...styles,
+								paddingLeft: "4px",
+								border: "none",
+								outline: "none",
+								":focus": {
+									outline: "none",
+								},
+							}),
+							option: (styles, state) => ({
+								...styles,
+								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+								color: state.isFocused ? "black" : styles.color,
+							}),
+						}}
+					/>
+				</div>
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Price *</label>
+					<div className="w-full grid grid-cols-5 gap-2">
+						<Input
+							name="paymentValue"
+							onChange={(e) => setPrice(e ? parseInt(e) : 0)}
+							type="number"
+							defaultValue={0}
+							className="col-span-3"
+						/>
+						<Select
+							className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+							options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
+							defaultValue={{value: "EUR", label: "Euro"}}
+							onChange={(value) => setCurrency(value?.value || "EUR")}
+							styles={{
+								control: (styles) => ({
+									...styles,
+									paddingLeft: "4px",
+									border: "none",
+									outline: "none",
+									":focus": {
+										outline: "none",
+									},
+								}),
+								option: (styles, state) => ({
+									...styles,
+									backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+									color: state.isFocused ? "black" : styles.color,
+								}),
+							}}
+						/>
+					</div>
+				</div>
+				<div className="flex gap-4 w-full">
+					<div className="flex flex-col w-full gap-3">
+						<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
+						<Input name="commission" onChange={(e) => setCommission(e ? parseInt(e) : 0)} type="number" defaultValue={0} />
+					</div>
+					<div className="flex flex-col w-full gap-3">
+						<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
+						<Input
+							name="commissionValue"
+							value={`${(commission / 100) * price} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
+							onChange={() => null}
+							type="text"
+							defaultValue={0}
+							disabled
+						/>
+					</div>
+				</div>
+				<div className="flex flex-col w-full gap-3">
+					<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
+					<Input
+						name="referralAgent"
+						value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
+						onChange={() => null}
+						type="text"
+						defaultValue={"No country manager"}
+						disabled
+					/>
+				</div>
+			</form>
+		</div>
+	);
+};
+
 export default function PaymentRecord() {
 	const [selectedUser, setSelectedUser] = useState<User>();
+	const [isCreatingPayment, setIsCreatingPayment] = useState(false);
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
@@ -193,6 +314,16 @@ export default function PaymentRecord() {
 						</>
 					</Modal>
 
+					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
+						<PaymentCreator />
+					</Modal>
+
+					<div className="w-full flex flex-end justify-between p-2">
+						<h1 className="text-2xl font-semibold">Payment Record</h1>
+						<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
+							New Payment
+						</Button>
+					</div>
 					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 						<thead>
 							{table.getHeaderGroups().map((headerGroup) => (