Updated the payment records screen for the corporate to make sure they can't see agent related stuff

src/pages/payment-record.tsx

@@ -139,7 +139,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 					<div className="w-full grid grid-cols-5 gap-2">
 						<Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
 						<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"
+							className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
 							options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
 							defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
 							onChange={() => {}}
@@ -346,6 +346,11 @@ export default function PaymentRecord() {
 		]);
 	}, [corporateTransfer]);
 
+	useEffect(() => {
+		if (user && user.type === "corporate") return setCorporate(user);
+		if (user && user.type === "agent") return setAgent(user);
+	}, [user]);
+
 	const updatePayment = (payment: Payment, key: string, value: any) => {
 		axios
 			.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
@@ -390,7 +395,6 @@ export default function PaymentRecord() {
 										reload={reload}
 										permissions={info.row.original.isPaid ? "read" : "write"}
 										asset={info.row.original.corporateTransfer}
-										canEdit={!info.row.original.isPaid}
 										paymentId={info.row.original.id}
 										type="corporate"
 									/>
@@ -410,7 +414,6 @@ export default function PaymentRecord() {
 										permissions="read"
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
-										canEdit={!info.row.original.isPaid}
 										type="commission"
 									/>
 								</div>
@@ -429,7 +432,6 @@ export default function PaymentRecord() {
 										permissions="read"
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
-										canEdit={!info.row.original.isPaid}
 										type="corporate"
 									/>
 								</div>
@@ -445,7 +447,6 @@ export default function PaymentRecord() {
 										permissions={info.row.original.isPaid ? "read" : "write"}
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
-										canEdit={!info.row.original.isPaid}
 										type="commission"
 									/>
 								</div>
@@ -464,7 +465,6 @@ export default function PaymentRecord() {
 										permissions="write"
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
-										canEdit={!info.row.original.isPaid}
 										type="corporate"
 									/>
 								</div>
@@ -480,7 +480,6 @@ export default function PaymentRecord() {
 										permissions="write"
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
-										canEdit={!info.row.original.isPaid}
 										type="commission"
 									/>
 								</div>
@@ -635,7 +634,7 @@ export default function PaymentRecord() {
 					<Checkbox
 						isChecked={value}
 						onChange={(e) => {
-							if (user?.type === agent || value) return null;
+							if (user?.type === agent || user?.type === "corporate" || value) return null;
 							if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer)
 								return alert("All files need to be uploaded to consider it paid!");
 							if (!confirm(`Are you sure you want to consider this payment paid?`)) return null;
@@ -798,17 +797,30 @@ export default function PaymentRecord() {
 							</div>
 						)}
 					</div>
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
+					<div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
 						<div className="flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
 							<Select
-								isClearable
-								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"
+								isClearable={user.type !== "corporate"}
+								className={clsx(
+									"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
+									user.type === "corporate" && "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
+								)}
 								options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
 									value: user.id,
 									meta: user,
 									label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
 								}))}
+								defaultValue={
+									user.type === "corporate"
+										? {
+												value: user.id,
+												meta: user,
+												label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
+										  }
+										: undefined
+								}
+								isDisabled={user.type === "corporate"}
 								onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
 								styles={{
 									control: (styles) => ({
@@ -828,40 +840,42 @@ export default function PaymentRecord() {
 								}}
 							/>
 						</div>
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
-							<Select
-								isClearable
-								isDisabled={user.type === "agent"}
-								className={clsx(
-									"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 rounded-full border border-mti-gray-platinum focus:outline-none",
-									user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
-								)}
-								options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
-									value: user.id,
-									meta: user,
-									label: `${user.name} - ${user.email}`,
-								}))}
-								value={agent ? {value: agent?.id, label: `${agent.name} - ${agent.email}`} : undefined}
-								onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
-								styles={{
-									control: (styles) => ({
-										...styles,
-										paddingLeft: "4px",
-										border: "none",
-										outline: "none",
-										":focus": {
+						{user.type !== "corporate" && (
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
+								<Select
+									isClearable
+									isDisabled={user.type === "agent"}
+									className={clsx(
+										"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 rounded-full border border-mti-gray-platinum focus:outline-none",
+										user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
+									)}
+									options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
+										value: user.id,
+										meta: user,
+										label: `${user.name} - ${user.email}`,
+									}))}
+									value={agent ? {value: agent?.id, label: `${agent.name} - ${agent.email}`} : undefined}
+									onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
 											outline: "none",
-										},
-									}),
-									option: (styles, state) => ({
-										...styles,
-										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-										color: state.isFocused ? "black" : styles.color,
-									}),
-								}}
-							/>
-						</div>
+											":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">Paid</label>
 							<Select
@@ -917,37 +931,39 @@ export default function PaymentRecord() {
 								}}
 							/>
 						</div>
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Commission transfer</label>
-							<Select
-								isClearable
-								className={clsx(
-									"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 rounded-full border border-mti-gray-platinum focus:outline-none",
-								)}
-								options={IS_FILE_SUBMITTED_OPTIONS}
-								value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)}
-								onChange={(value) => {
-									if (value) return setCommissionTransfer(value.value);
-									setCommissionTransfer(null);
-								}}
-								styles={{
-									control: (styles) => ({
-										...styles,
-										paddingLeft: "4px",
-										border: "none",
-										outline: "none",
-										":focus": {
+						{user.type !== "corporate" && (
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Commission transfer</label>
+								<Select
+									isClearable
+									className={clsx(
+										"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 rounded-full border border-mti-gray-platinum focus:outline-none",
+									)}
+									options={IS_FILE_SUBMITTED_OPTIONS}
+									value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)}
+									onChange={(value) => {
+										if (value) return setCommissionTransfer(value.value);
+										setCommissionTransfer(null);
+									}}
+									styles={{
+										control: (styles) => ({
+											...styles,
+											paddingLeft: "4px",
+											border: "none",
 											outline: "none",
-										},
-									}),
-									option: (styles, state) => ({
-										...styles,
-										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-										color: state.isFocused ? "black" : styles.color,
-									}),
-								}}
-							/>
-						</div>
+											":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">Corporate transfer</label>
 							<Select