Added more fields to the corporate and showcased them in the UserCard

src/components/UserCard.tsx

@@ -15,6 +15,8 @@ import Checkbox from "./Low/Checkbox";
 import CountrySelect from "./Low/CountrySelect";
 import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
+import Select from "react-select";
+import useUsers from "@/hooks/useUsers";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
@@ -34,7 +36,9 @@ interface Props {
 
 const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
+	const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
 	const {stats} = useStats(user.id);
+	const {users} = useUsers();
 
 	const updateUser = () => {
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
@@ -241,6 +245,38 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 								placeholder="Enter amount of users"
 								defaultValue={user.corporateInformation?.companyInformation.userAmount}
 							/>
+
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Country Agent</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={[
+										{value: "", label: "No referral"},
+										...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+									]}
+									defaultValue={{
+										value: referralAgent,
+										label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent",
+									}}
+									onChange={(value) => setReferralAgent(value?.value)}
+									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>
 					</>
 				)}