From b7ddee1db254ec266942143b6dda0408bd007c34 Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Wed, 27 Dec 2023 21:06:06 +0000 Subject: [PATCH 1/5] Company Name is now displayed on the Settings table, if available --- src/pages/(admin)/Lists/UserList.tsx | 32 +++++++++++++++++++++++++++- src/resources/user.ts | 6 +++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx index 5d83a17c..78efe892 100644 --- a/src/pages/(admin)/Lists/UserList.tsx +++ b/src/pages/(admin)/Lists/UserList.tsx @@ -2,7 +2,7 @@ import Button from "@/components/Low/Button"; import {PERMISSIONS} from "@/constants/userPermissions"; import useGroups from "@/hooks/useGroups"; import useUsers from "@/hooks/useUsers"; -import {Type, User, userTypes} from "@/interfaces/user"; +import {Type, User, userTypes, CorporateUser} from "@/interfaces/user"; import {Popover, Transition} from "@headlessui/react"; import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table"; import axios from "axios"; @@ -19,6 +19,7 @@ import UserCard from "@/components/UserCard"; import {USER_TYPE_LABELS} from "@/resources/user"; import useFilterStore from "@/stores/listFilterStore"; import {useRouter} from "next/router"; +import {isCorporateUser} from '@/resources/user'; const columnHelper = createColumnHelper(); @@ -325,6 +326,15 @@ export default function UserList({user, filters = []}: {user: User; filters?: (( ) as any, cell: (info) => USER_TYPE_LABELS[info.getValue()], }), + columnHelper.accessor('corporateInformation.companyInformation.name', { + header: ( + + ) as any, + cell: (info) => info.getValue(), + }), columnHelper.accessor("subscriptionExpirationDate", { header: ( ) as any, - cell: (info) => info.getValue(), + cell: (info) => getCorporateName(info.row.original), }), columnHelper.accessor("subscriptionExpirationDate", { header: ( @@ -478,8 +483,13 @@ export default function UserList({user, filters = []}: {user: User; filters?: (( return a.id.localeCompare(b.id); }; + const { rows: filteredRows, renderSearch } = useListSearch( + searchFields, + displayUsers, + ) + const table = useReactTable({ - data: displayUsers, + data: filteredRows, columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any, getCoreRowModel: getCoreRowModel(), }); @@ -562,30 +572,33 @@ export default function UserList({user, filters = []}: {user: User; filters?: (( )} - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
+
+ {renderSearch()} + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + +
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+
); } From 8831729470a11aa34638253f461278f8377447e6 Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Wed, 27 Dec 2023 22:14:11 +0000 Subject: [PATCH 3/5] Changed behaviour for new payment values --- src/pages/payment-record.tsx | 49 +++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx index 1c924bfc..d42a7e18 100644 --- a/src/pages/payment-record.tsx +++ b/src/pages/payment-record.tsx @@ -62,28 +62,27 @@ const columnHelper = createColumnHelper(); const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => { const [corporate, setCorporate] = useState(); - const [price, setPrice] = useState(0); - const [currency, setCurrency] = useState("EUR"); - const [commission, setCommission] = useState(0); - const [referralAgent, setReferralAgent] = useState(); const [date, setDate] = useState(new Date()); const {users} = useUsers(); - useEffect(() => { - if (!corporate) return setReferralAgent(undefined); - if (!corporate.corporateInformation?.referralAgent) return setReferralAgent(undefined); + const price = corporate?.corporateInformation?.payment?.value || 0; + const commission = corporate?.corporateInformation?.payment?.commission || 0; + const currency = corporate?.corporateInformation?.payment?.currency || 'EUR'; - const referralAgent = users.find((u) => u.id === corporate.corporateInformation.referralAgent); - setReferralAgent(referralAgent as AgentUser | undefined); - }, [corporate, users]); + const referralAgent = useMemo(() => { + if(corporate?.corporateInformation?.referralAgent) { + return users.find((u) => u.id === corporate.corporateInformation.referralAgent); + } - useEffect(() => { - const payment = corporate?.corporateInformation?.payment; + return undefined; + }, [corporate?.corporateInformation?.referralAgent, users]); + // useEffect(() => { + // const payment = corporate?.corporateInformation?.payment; - setPrice(payment?.value || 0); - setCurrency(payment?.currency || "EUR"); - }, [corporate]); + // // setPrice(payment?.value || 0); + // setCurrency(payment?.currency || "EUR"); + // }, [corporate]); const submit = () => { axios @@ -91,7 +90,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () = corporate: corporate?.id, agent: referralAgent?.id, agentCommission: commission, - agentValue: toFixedNumber((commission / 100) * price, 2), + agentValue: toFixedNumber((commission! / 100) * price!, 2), currency, value: price, isPaid: false, @@ -146,16 +145,18 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
setPrice(e ? parseInt(e) : 0)} + onChange={() => {}} type="number" value={price} + defaultValue={0} className="col-span-3" + disabled /> setCommission(e ? parseInt(e) : 0)} type="number" defaultValue={0} /> + {}} + type="number" + defaultValue={0} + value={commission} + disabled + />
c.currency === currency)?.label}`} + value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`} onChange={() => null} type="text" defaultValue={0} From c88757c869d1cb242343112783096c31a48ddb2c Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Wed, 27 Dec 2023 22:33:11 +0000 Subject: [PATCH 4/5] Profile is now auto filled with the user data --- src/pages/profile.tsx | 556 +++++++++++++++++++++--------------------- 1 file changed, 276 insertions(+), 280 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 3d142ed4..0c0ed4cc 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -50,27 +50,32 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => { }; }, sessionOptions); -export default function Home() { - const [bio, setBio] = useState(""); - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); +interface Props { + user: User; + mutateUser: Function, +} + +function UserProfile({ + user, + mutateUser, +}: Props) { + const [bio, setBio] = useState(user.bio || ''); + const [name, setName] = useState(user.name || ''); + const [email, setEmail] = useState(user.email || ''); const [password, setPassword] = useState(""); const [newPassword, setNewPassword] = useState(""); const [isLoading, setIsLoading] = useState(false); - const [profilePicture, setProfilePicture] = useState(""); + const [profilePicture, setProfilePicture] = useState(user.profilePicture); - const [country, setCountry] = useState(); - const [phone, setPhone] = useState(); - const [gender, setGender] = useState(); - const [employment, setEmployment] = useState(); - const [position, setPosition] = useState(); - const [companyName, setCompanyName] = useState(""); - const [commercialRegistration, setCommercialRegistration] = useState(""); + const [country, setCountry] = useState(user.demographicInformation?.country || ''); + const [phone, setPhone] = useState(user.demographicInformation?.phone || ''); + const [gender, setGender] = useState(user.demographicInformation?.gender || undefined); + const [employment, setEmployment] = useState(user.type === "corporate" ? undefined : user.demographicInformation?.employment); + const [position, setPosition] = useState(user.type === "corporate" ? user.demographicInformation?.position : undefined); + const [companyName, setCompanyName] = useState(user.type === 'agent' ? user.agentInformation?.companyName : undefined); + const [commercialRegistration, setCommercialRegistration] = useState(user.type === 'agent' ? user.agentInformation?.commercialRegistration : undefined); const profilePictureInput = useRef(null); - - const {user, mutateUser} = useUser({redirectTo: "/login"}); - const expirationDateColor = (date: Date) => { const momentDate = moment(date); const today = moment(new Date()); @@ -80,24 +85,6 @@ export default function Home() { if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light"; }; - useEffect(() => { - if (user) { - setName(user.name); - setEmail(user.email); - setBio(user.bio); - setProfilePicture(user.profilePicture); - setCountry(user.demographicInformation?.country); - setPhone(user.demographicInformation?.phone); - setGender(user.demographicInformation?.gender); - setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment); - setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined); - if(user.type === 'agent') { - setCompanyName(user.agentInformation?.companyName) - setCommercialRegistration(user.agentInformation?.commercialRegistration) - } - } - }, [user]); - const convertBase64 = (file: File) => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); @@ -159,6 +146,258 @@ export default function Home() { setIsLoading(false); }; + return ( + +
+

Edit Profile

+
+
+

Edit Profile

+
+
+ setName(e)} + placeholder="Enter your name" + defaultValue={name} + required + /> + setEmail(e)} + placeholder="Enter email address" + defaultValue={email} + required + /> +
+
+ setPassword(e)} + placeholder="Enter your password" + required + /> + setNewPassword(e)} + placeholder="Enter your new password (optional)" + /> +
+ + {user.type === "agent" && ( +
+ null} + placeholder="Enter corporate name" + defaultValue={companyName} + disabled + /> + null} + placeholder="Enter commercial registration" + defaultValue={commercialRegistration} + disabled + /> +
+ )} + +
+
+ + +
+ setPhone(e)} + placeholder="Enter phone number" + defaultValue={phone} + required + /> +
+
+ {user.type === "corporate" && ( + + )} + {user.type !== "corporate" && ( +
+ + + {EMPLOYMENT_STATUS.map(({status, label}) => ( + + {({checked}) => ( + + {label} + + )} + + ))} + +
+ )} +
+
+ + + + {({checked}) => ( + + Male + + )} + + + {({checked}) => ( + + Female + + )} + + + {({checked}) => ( + + Other + + )} + + +
+
+ + + {!user.subscriptionExpirationDate && "Unlimited"} + {user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")} + +
+
+
+
+
+
+
(profilePictureInput.current as any)?.click()}> +
+
+ +
+ {user.name} +
+ + (profilePictureInput.current as any)?.click()} + className="cursor-pointer text-mti-purple-light text-sm"> + Change picture + +
{USER_TYPE_LABELS[user.type]}
+
+ {user.type === 'agent' && ( +
+ {user.demographicInformation?.country.toLowerCase() +
+ )} +
+
+
+ Bio +