devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solved some problems, bypassed some stuff

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-09-08 11:35:09 +01:00
parent e3847baadb
commit 620e4dd787
23 changed files with 1259 additions and 1538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/DemographicInformationInput.tsx
View File

@@ -42,7 +42,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
setIsLoading(true); setIsLoading(true);
axios axios
.patch("/api/users/update", { .patch<{user: User}>("/api/users/update", {
demographicInformation: { demographicInformation: {
country, country,
phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`, phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`,
@@ -54,7 +54,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
}, },
agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined, agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
}) })
.then((response) => mutateUser((response.data as {user: User}).user)) .then((response) => mutateUser(response.data.user))
.catch(() => { .catch(() => {
toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"}); toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
}) })
@@ -89,7 +89,15 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
<label className="font-normal text-base text-mti-gray-dim">Country *</label> <label className="font-normal text-base text-mti-gray-dim">Country *</label>
<CountrySelect value={country} onChange={setCountry} /> <CountrySelect value={country} onChange={setCountry} />
</div> </div>
<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} value={phone} placeholder="Enter phone number" required /> <Input
type="tel"
name="phone"
label="Phone number"
onChange={(e) => setPhone(e)}
value={phone}
placeholder="Enter phone number"
required
/>
</div> </div>
{user.type === "student" && ( {user.type === "student" && (
<Input <Input

10
src/components/Navbar.tsx
View File

@@ -65,28 +65,28 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
{ {
module: "reading", module: "reading",
icon: () => <BsBook className="h-4 w-4 text-white" />, icon: () => <BsBook className="h-4 w-4 text-white" />,
achieved: user.levels.reading >= user.desiredLevels.reading, achieved: user.levels?.reading || 0 >= user.desiredLevels?.reading || 9,
}, },
{ {
module: "listening", module: "listening",
icon: () => <BsHeadphones className="h-4 w-4 text-white" />, icon: () => <BsHeadphones className="h-4 w-4 text-white" />,
achieved: user.levels.listening >= user.desiredLevels.listening, achieved: user.levels?.listening || 0 >= user.desiredLevels?.listening || 9,
}, },
{ {
module: "writing", module: "writing",
icon: () => <BsPen className="h-4 w-4 text-white" />, icon: () => <BsPen className="h-4 w-4 text-white" />,
achieved: user.levels.writing >= user.desiredLevels.writing, achieved: user.levels?.writing || 0 >= user.desiredLevels?.writing || 9,
}, },
{ {
module: "speaking", module: "speaking",
icon: () => <BsMegaphone className="h-4 w-4 text-white" />, icon: () => <BsMegaphone className="h-4 w-4 text-white" />,
achieved: user.levels.speaking >= user.desiredLevels.speaking, achieved: user.levels?.speaking || 0 >= user.desiredLevels?.speaking || 9,
}, },
{ {
module: "level", module: "level",
icon: () => <BsClipboard className="h-4 w-4 text-white" />, icon: () => <BsClipboard className="h-4 w-4 text-white" />,
achieved: user.levels.level >= user.desiredLevels.level, achieved: user.levels?.level || 0 >= user.desiredLevels?.level || 9,
}, },
]; ];

4
src/hooks/useUser.tsx
View File

@@ -16,9 +16,9 @@ export default function useUser({redirectTo = "", redirectIfFound = false} = {})
if ( if (
// If redirectIfFound is also set, redirect if the user was found // If redirectIfFound is also set, redirect if the user was found
(redirectIfFound && user && user.isVerified) || (redirectIfFound && user) ||
// If redirectTo is set, redirect if the user was not found. // If redirectTo is set, redirect if the user was not found.
(redirectTo && !redirectIfFound && (!user || (user && !user.isVerified))) (redirectTo && !redirectIfFound && !user)
) { ) {
Router.push(redirectTo); Router.push(redirectTo);
} }

37
src/pages/api/users/update.ts
View File

@@ -81,10 +81,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const updatedUser = req.body as User & {password?: string; newPassword?: string}; const updatedUser = req.body as User & {password?: string; newPassword?: string};
if (!!queryId) { if (!!queryId) {
await db.collection("users").updateOne( await db.collection("users").updateOne({id: queryId}, {$set: updatedUser});
{ id: queryId },
{ $set: updatedUser }
);
await managePaymentRecords(updatedUser, updatedUser.id); await managePaymentRecords(updatedUser, updatedUser.id);
if (updatedUser.status || updatedUser.type === "corporate") { if (updatedUser.status || updatedUser.type === "corporate") {
@@ -133,16 +130,18 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.session.user.type === "student") { if (req.session.user.type === "student") {
const corporateAdmins = (await db.collection("users").find<User>({type: "corporate"}).toArray()).map((x) => x.id); const corporateAdmins = (await db.collection("users").find<User>({type: "corporate"}).toArray()).map((x) => x.id);
const groups = await db.collection("groups").find<Group>({ const groups = await db
.collection("groups")
.find<Group>({
participants: req.session.user!.id, participants: req.session.user!.id,
admin: { $in: corporateAdmins } admin: {$in: corporateAdmins},
}).toArray(); })
.toArray();
groups.forEach(async (group) => { groups.forEach(async (group) => {
await db.collection("groups").updateOne( await db
{ id: group.id }, .collection("groups")
{ $set: { participants: group.participants.filter((x) => x !== req.session.user!.id) } } .updateOne({id: group.id}, {$set: {participants: group.participants.filter((x) => x !== req.session.user!.id)}});
);
}); });
} }
} catch { } catch {
@@ -159,22 +158,18 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
delete updatedUser.password; delete updatedUser.password;
delete updatedUser.newPassword; delete updatedUser.newPassword;
await db.collection("users").updateOne( await db.collection("users").updateOne({id: queryId}, {$set: updatedUser});
{ id: queryId },
{ $set: updatedUser }
);
user = await db.collection("users").findOne<User>({ id: req.session.user.id });
if (!queryId) { if (!queryId) {
req.session.user = user ? user : null; req.session.user = updatedUser ? {...updatedUser, id: req.session.user.id} : null;
await req.session.save(); await req.session.save();
} }
if (user) { if ({...updatedUser, id: req.session.user!.id}) {
await managePaymentRecords(user, queryId); await managePaymentRecords({...updatedUser, id: req.session.user!.id}, queryId);
} }
res.status(200).json({ user });
res.status(200).json({user: {...updatedUser, id: req.session.user!.id}});
} }
export const config = { export const config = {

2
src/pages/exam.tsx
View File

@@ -10,7 +10,7 @@ import {User} from "@/interfaces/user";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/exercises.tsx
View File

@@ -10,7 +10,7 @@ import {User} from "@/interfaces/user";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/generation.tsx
View File

@@ -27,7 +27,7 @@ import {User} from "@/interfaces/user";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/groups.tsx
View File

@@ -43,7 +43,7 @@ import {getUsers} from "@/utils/users.be";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => { export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

10
src/pages/index.tsx
View File

@@ -46,7 +46,7 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
envVariables[x] = process.env[x]!; envVariables[x] = process.env[x]!;
}); });
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",
@@ -78,12 +78,8 @@ export default function Home({linkedCorporate}: Props) {
useEffect(() => { useEffect(() => {
if (user) { if (user) {
setShowDemographicInput( console.log(user.demographicInformation);
!user.demographicInformation || setShowDemographicInput(!user.demographicInformation || !user.demographicInformation.country || !user.demographicInformation.phone);
!user.demographicInformation.country ||
!user.demographicInformation.gender ||
!user.demographicInformation.phone,
);
setShowDiagnostics(user.isFirstLogin && user.type === "student"); setShowDiagnostics(user.isFirstLogin && user.type === "student");
} }
}, [user]); }, [user]);

2
src/pages/list/users.tsx
View File

@@ -21,7 +21,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
envVariables[x] = process.env[x]!; envVariables[x] = process.env[x]!;
}); });
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

6
src/pages/login.tsx
View File

@@ -28,7 +28,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
envVariables[x] = process.env[x]!; envVariables[x] = process.env[x]!;
}); });
if (user && user.isVerified) { if (user) {
return { return {
redirect: { redirect: {
destination: "/", destination: "/",
@@ -56,7 +56,7 @@ export default function Login() {
}); });
useEffect(() => { useEffect(() => {
if (user && user.isVerified) router.push("/"); if (user) router.push("/");
}, [router, user]); }, [router, user]);
const forgotPassword = () => { const forgotPassword = () => {
@@ -173,7 +173,7 @@ export default function Login() {
</span> </span>
</> </>
)} )}
{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />} {/* {user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />} */}
</section> </section>
</main> </main>
</> </>

493
src/pages/payment-record.tsx
View File

@@ -9,15 +9,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
import usePayments from "@/hooks/usePayments"; import usePayments from "@/hooks/usePayments";
import usePaypalPayments from "@/hooks/usePaypalPayments"; import usePaypalPayments from "@/hooks/usePaypalPayments";
import {Payment, PaypalPayment} from "@/interfaces/paypal"; import {Payment, PaypalPayment} from "@/interfaces/paypal";
import { import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable} from "@tanstack/react-table";
CellContext,
createColumnHelper,
flexRender,
getCoreRowModel,
HeaderGroup,
Table,
useReactTable,
} from "@tanstack/react-table";
import {CURRENCIES} from "@/resources/paypal"; import {CURRENCIES} from "@/resources/paypal";
import {BsTrash} from "react-icons/bs"; import {BsTrash} from "react-icons/bs";
import axios from "axios"; import axios from "axios";
@@ -43,7 +35,7 @@ import { checkAccess, getTypesOfUser } from "@/utils/permissions";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",
@@ -52,19 +44,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
}; };
} }
if ( if (shouldRedirectHome(user) || checkAccess(user, getTypesOfUser(["admin", "developer", "agent", "corporate", "mastercorporate"]))) {
shouldRedirectHome(user) ||
checkAccess(
user,
getTypesOfUser([
"admin",
"developer",
"agent",
"corporate",
"mastercorporate",
])
)
) {
return { return {
redirect: { redirect: {
destination: "/", destination: "/",
@@ -81,15 +61,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
const columnHelper = createColumnHelper<Payment>(); const columnHelper = createColumnHelper<Payment>();
const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>(); const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
const PaymentCreator = ({ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
onClose,
reload,
showComission = false,
}: {
onClose: () => void;
reload: () => void;
showComission: boolean;
}) => {
const [corporate, setCorporate] = useState<CorporateUser>(); const [corporate, setCorporate] = useState<CorporateUser>();
const [date, setDate] = useState<Date>(new Date()); const [date, setDate] = useState<Date>(new Date());
@@ -101,9 +73,7 @@ const PaymentCreator = ({
const referralAgent = useMemo(() => { const referralAgent = useMemo(() => {
if (corporate?.corporateInformation?.referralAgent) { if (corporate?.corporateInformation?.referralAgent) {
return users.find( return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
(u) => u.id === corporate.corporateInformation.referralAgent
);
} }
return undefined; return undefined;
@@ -136,24 +106,16 @@ const PaymentCreator = ({
<h1 className="text-2xl font-semibold">New Payment</h1> <h1 className="text-2xl font-semibold">New Payment</h1>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
Corporate account *
</label>
<Select <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" 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={( options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
users.filter((u) => u.type === "corporate") as CorporateUser[]
).map((user) => ({
value: user.id, value: user.id,
meta: user, meta: user,
label: `${ label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
user.corporateInformation?.companyInformation?.name || user.name
} - ${user.email}`,
}))} }))}
defaultValue={{value: "undefined", label: "Select an account"}} defaultValue={{value: "undefined", label: "Select an account"}}
onChange={(value) => onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
setCorporate((value as any)?.meta ?? undefined)
}
menuPortalTarget={document?.body} menuPortalTarget={document?.body}
styles={{ styles={{
menuPortal: (base) => ({...base, zIndex: 9999}), menuPortal: (base) => ({...base, zIndex: 9999}),
@@ -168,11 +130,7 @@ const PaymentCreator = ({
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
@@ -180,19 +138,9 @@ const PaymentCreator = ({
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Price *</label>
Price *
</label>
<div className="w-full grid grid-cols-5 gap-2"> <div className="w-full grid grid-cols-5 gap-2">
<Input <Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
name="paymentValue"
onChange={() => {}}
type="number"
value={price}
defaultValue={0}
className="col-span-3"
disabled
/>
<Select <Select
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" 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}) => ({ options={CURRENCIES.map(({label, currency}) => ({
@@ -201,16 +149,12 @@ const PaymentCreator = ({
}))} }))}
defaultValue={{ defaultValue={{
value: currency || "EUR", value: currency || "EUR",
label: label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
CURRENCIES.find((c) => c.currency === currency)?.label ||
"Euro",
}} }}
onChange={() => {}} onChange={() => {}}
value={{ value={{
value: currency || "EUR", value: currency || "EUR",
label: label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
CURRENCIES.find((c) => c.currency === currency)?.label ||
"Euro",
}} }}
menuPortalTarget={document?.body} menuPortalTarget={document?.body}
styles={{ styles={{
@@ -226,11 +170,7 @@ const PaymentCreator = ({
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
@@ -241,27 +181,14 @@ const PaymentCreator = ({
{showComission && ( {showComission && (
<div className="flex gap-4 w-full"> <div className="flex gap-4 w-full">
<div className="flex flex-col w-full gap-3"> <div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Commission *</label>
Commission * <Input name="commission" onChange={() => {}} type="number" defaultValue={0} value={commission} disabled />
</label>
<Input
name="commission"
onChange={() => {}}
type="number"
defaultValue={0}
value={commission}
disabled
/>
</div> </div>
<div className="flex flex-col w-full gap-3"> <div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
Commission Value*
</label>
<Input <Input
name="commissionValue" name="commissionValue"
value={`${(commission! / 100) * price!} ${ value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
CURRENCIES.find((c) => c.currency === currency)?.label
}`}
onChange={() => null} onChange={() => null}
type="text" type="text"
defaultValue={0} defaultValue={0}
@@ -273,14 +200,12 @@ const PaymentCreator = ({
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex flex-col w-full gap-3"> <div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Date *</label>
Date *
</label>
<ReactDatePicker <ReactDatePicker
className={clsx( className={clsx(
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"hover:border-mti-purple tooltip", "hover:border-mti-purple tooltip",
"transition duration-300 ease-in-out" "transition duration-300 ease-in-out",
)} )}
dateFormat="dd/MM/yyyy" dateFormat="dd/MM/yyyy"
selected={moment(date).toDate()} selected={moment(date).toDate()}
@@ -289,16 +214,10 @@ const PaymentCreator = ({
</div> </div>
<div className="flex flex-col w-full gap-3"> <div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
Country Manager *
</label>
<Input <Input
name="referralAgent" name="referralAgent"
value={ value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
referralAgent
? `${referralAgent.name} - ${referralAgent.email}`
: "No country manager"
}
onChange={() => null} onChange={() => null}
type="text" type="text"
defaultValue={"No country manager"} defaultValue={"No country manager"}
@@ -307,19 +226,10 @@ const PaymentCreator = ({
</div> </div>
</div> </div>
<div className="flex w-full justify-end items-center gap-8 mt-4"> <div className="flex w-full justify-end items-center gap-8 mt-4">
<Button <Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
variant="outline"
color="red"
className="w-full max-w-[200px]"
onClick={onClose}
>
Cancel Cancel
</Button> </Button>
<Button <Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
className="w-full max-w-[200px]"
onClick={submit}
disabled={!corporate || !price}
>
Submit Submit
</Button> </Button>
</div> </div>
@@ -358,26 +268,9 @@ const IS_FILE_SUBMITTED_OPTIONS = [
}, },
]; ];
const CSV_PAYMENTS_WHITELISTED_KEYS = [ const CSV_PAYMENTS_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
"corporateId",
"corporate",
"date",
"amount",
"agent",
"agentCommission",
"agentValue",
"isPaid",
];
const CSV_PAYPAL_WHITELISTED_KEYS = [ const CSV_PAYPAL_WHITELISTED_KEYS = ["orderId", "status", "name", "email", "value", "createdAt", "subscriptionExpirationDate"];
"orderId",
"status",
"name",
"email",
"value",
"createdAt",
"subscriptionExpirationDate",
];
interface SimpleCSVColumn { interface SimpleCSVColumn {
key: string; key: string;
@@ -395,9 +288,7 @@ export default function PaymentRecord() {
const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>(); const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
const [selectedAgentUser, setSelectedAgentUser] = useState<User>(); const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
const [isCreatingPayment, setIsCreatingPayment] = useState(false); const [isCreatingPayment, setIsCreatingPayment] = useState(false);
const [filters, setFilters] = useState< const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
{ filter: (p: Payment) => boolean; id: string }[]
>([]);
const [displayPayments, setDisplayPayments] = useState<Payment[]>([]); const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
const [corporate, setCorporate] = useState<User>(); const [corporate, setCorporate] = useState<User>();
@@ -406,29 +297,16 @@ export default function PaymentRecord() {
const {user} = useUser({redirectTo: "/login"}); const {user} = useUser({redirectTo: "/login"});
const {users, reload: reloadUsers} = useUsers(); const {users, reload: reloadUsers} = useUsers();
const {payments: originalPayments, reload: reloadPayment} = usePayments(); const {payments: originalPayments, reload: reloadPayment} = usePayments();
const { payments: paypalPayments, reload: reloadPaypalPayment } = const {payments: paypalPayments, reload: reloadPaypalPayment} = usePaypalPayments();
usePaypalPayments(); const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
const [startDate, setStartDate] = useState<Date | null>( const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
moment("01/01/2023").toDate()
);
const [endDate, setEndDate] = useState<Date | null>(
moment().endOf("day").toDate()
);
const [startDatePaymob, setStartDatePaymob] = useState<Date | null>( const [startDatePaymob, setStartDatePaymob] = useState<Date | null>(moment("01/01/2023").toDate());
moment("01/01/2023").toDate() const [endDatePaymob, setEndDatePaymob] = useState<Date | null>(moment().endOf("day").toDate());
);
const [endDatePaymob, setEndDatePaymob] = useState<Date | null>(
moment().endOf("day").toDate()
);
const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value); const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>( const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
IS_FILE_SUBMITTED_OPTIONS[0].value const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
);
const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(
IS_FILE_SUBMITTED_OPTIONS[0].value
);
const reload = () => { const reload = () => {
reloadUsers(); reloadUsers();
reloadPayment(); reloadPayment();
@@ -448,7 +326,7 @@ export default function PaymentRecord() {
filters filters
.map((f) => f.filter) .map((f) => f.filter)
.reduce((d, f) => d.filter(f), payments) .reduce((d, f) => d.filter(f), payments)
.sort((a, b) => moment(b.date).diff(moment(a.date))) .sort((a, b) => moment(b.date).diff(moment(a.date))),
); );
}, [payments, filters]); }, [payments, filters]);
@@ -489,9 +367,7 @@ export default function PaymentRecord() {
useEffect(() => { useEffect(() => {
setFilters((prev) => [ setFilters((prev) => [
...prev.filter((x) => x.id !== "paid"), ...prev.filter((x) => x.id !== "paid"),
...(typeof paid !== "boolean" ...(typeof paid !== "boolean" ? [] : [{id: "paid", filter: (p: Payment) => p.isPaid === paid}]),
? []
: [{ id: "paid", filter: (p: Payment) => p.isPaid === paid }]),
]); ]);
}, [paid]); }, [paid]);
@@ -503,8 +379,7 @@ export default function PaymentRecord() {
: [ : [
{ {
id: "commissionTransfer", id: "commissionTransfer",
filter: (p: Payment) => filter: (p: Payment) => !p.commissionTransfer === commissionTransfer,
!p.commissionTransfer === commissionTransfer,
}, },
]), ]),
]); ]);
@@ -518,8 +393,7 @@ export default function PaymentRecord() {
: [ : [
{ {
id: "corporateTransfer", id: "corporateTransfer",
filter: (p: Payment) => filter: (p: Payment) => !p.corporateTransfer === corporateTransfer,
!p.corporateTransfer === corporateTransfer,
}, },
]), ]),
]); ]);
@@ -550,9 +424,7 @@ export default function PaymentRecord() {
} }
if (reason.response.status === 403) { if (reason.response.status === 403) {
toast.error( toast.error("You do not have permission to delete an approved payment record!");
"You do not have permission to delete an approved payment record!"
);
return; return;
} }
@@ -563,8 +435,7 @@ export default function PaymentRecord() {
const getFileAssetsColumns = () => { const getFileAssetsColumns = () => {
if (user) { if (user) {
const containerClassName = const containerClassName = "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
"flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
switch (user.type) { switch (user.type) {
case "corporate": case "corporate":
return [ return [
@@ -683,9 +554,7 @@ export default function PaymentRecord() {
return {value: `${value}%`}; return {value: `${value}%`};
} }
case "agent": { case "agent": {
const user = users.find( const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
(x) => x.id === info.row.original.agent
) as AgentUser;
return { return {
value: user?.name, value: user?.name,
user, user,
@@ -706,8 +575,7 @@ export default function PaymentRecord() {
const user = users.find((x) => x.id === specificValue) as CorporateUser; const user = users.find((x) => x.id === specificValue) as CorporateUser;
return { return {
user, user,
value: value: user?.corporateInformation.companyInformation.name || user?.name,
user?.corporateInformation.companyInformation.name || user?.name,
}; };
} }
case "currency": { case "currency": {
@@ -735,10 +603,9 @@ export default function PaymentRecord() {
return ( return (
<div <div
className={clsx( className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer" "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)} )}
onClick={() => setSelectedAgentUser(user)} onClick={() => setSelectedAgentUser(user)}>
>
{value} {value}
</div> </div>
); );
@@ -782,10 +649,9 @@ export default function PaymentRecord() {
return ( return (
<div <div
className={clsx( className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer" "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)} )}
onClick={() => setSelectedCorporateUser(user)} onClick={() => setSelectedCorporateUser(user)}>
>
{value} {value}
</div> </div>
); );
@@ -804,9 +670,7 @@ export default function PaymentRecord() {
id: "amount", id: "amount",
cell: (info) => { cell: (info) => {
const {value} = columHelperValue(info.column.id, info); const {value} = columHelperValue(info.column.id, info);
const currency = CURRENCIES.find( const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
(x) => x.currency === info.row.original.currency
)?.label;
const finalValue = `${value} ${currency}`; const finalValue = `${value} ${currency}`;
return <span>{finalValue}</span>; return <span>{finalValue}</span>;
}, },
@@ -822,23 +686,13 @@ export default function PaymentRecord() {
<Checkbox <Checkbox
isChecked={value} isChecked={value}
onChange={(e) => { onChange={(e) => {
if (user?.type === agent || user?.type === "corporate" || value) if (user?.type === agent || user?.type === "corporate" || value) return null;
return null; if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer)
if ( return alert("All files need to be uploaded to consider it paid!");
!info.row.original.commissionTransfer || if (!confirm(`Are you sure you want to consider this payment paid?`)) return null;
!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;
return updatePayment(info.row.original, "isPaid", e); return updatePayment(info.row.original, "isPaid", e);
}} }}>
>
<span></span> <span></span>
</Checkbox> </Checkbox>
); );
@@ -852,11 +706,7 @@ export default function PaymentRecord() {
return ( return (
<div className="flex gap-4"> <div className="flex gap-4">
{user?.type !== "agent" && ( {user?.type !== "agent" && (
<div <div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
data-tip="Delete"
className="cursor-pointer tooltip"
onClick={() => deletePayment(row.original.id)}
>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" /> <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div> </div>
)} )}
@@ -883,7 +733,7 @@ export default function PaymentRecord() {
const user = users.find((x) => x.id === p.userId) as User; const user = users.find((x) => x.id === p.userId) as User;
return {...p, name: user?.name, email: user?.email}; return {...p, name: user?.name, email: user?.email};
}), }),
[paypalPayments, users, startDatePaymob, endDatePaymob] [paypalPayments, users, startDatePaymob, endDatePaymob],
); );
const paypalColumns = [ const paypalColumns = [
@@ -946,15 +796,10 @@ export default function PaymentRecord() {
}), }),
]; ];
const { rows: filteredRows, renderSearch } = useListSearch( const {rows: filteredRows, renderSearch} = useListSearch(paypalFilterRows, updatedPaypalPayments);
paypalFilterRows,
updatedPaypalPayments
);
const paypalTable = useReactTable({ const paypalTable = useReactTable({
data: filteredRows.sort((a, b) => data: filteredRows.sort((a, b) => moment(b.createdAt).diff(moment(a.createdAt), "second")),
moment(b.createdAt).diff(moment(a.createdAt), "second")
),
columns: paypalColumns, columns: paypalColumns,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}); });
@@ -963,10 +808,7 @@ export default function PaymentRecord() {
if (user) { if (user) {
if (selectedCorporateUser) { if (selectedCorporateUser) {
return ( return (
<Modal <Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
isOpen={!!selectedCorporateUser}
onClose={() => setSelectedCorporateUser(undefined)}
>
<> <>
{selectedCorporateUser && ( {selectedCorporateUser && (
<div className="w-full flex flex-col gap-8"> <div className="w-full flex flex-col gap-8">
@@ -989,10 +831,7 @@ export default function PaymentRecord() {
if (selectedAgentUser) { if (selectedAgentUser) {
return ( return (
<Modal <Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
isOpen={!!selectedAgentUser}
onClose={() => setSelectedAgentUser(undefined)}
>
<> <>
{selectedAgentUser && ( {selectedAgentUser && (
<div className="w-full flex flex-col gap-8"> <div className="w-full flex flex-col gap-8">
@@ -1017,17 +856,11 @@ export default function PaymentRecord() {
const getCSVData = () => { const getCSVData = () => {
const tables = [table, paypalTable]; const tables = [table, paypalTable];
const whitelists = [ const whitelists = [CSV_PAYMENTS_WHITELISTED_KEYS, CSV_PAYPAL_WHITELISTED_KEYS];
CSV_PAYMENTS_WHITELISTED_KEYS,
CSV_PAYPAL_WHITELISTED_KEYS,
];
const currentTable = tables[selectedIndex]; const currentTable = tables[selectedIndex];
const whitelist = whitelists[selectedIndex]; const whitelist = whitelists[selectedIndex];
const columns = (currentTable.getHeaderGroups() as any[]).reduce( const columns = (currentTable.getHeaderGroups() as any[]).reduce((accm: any[], group: any) => {
(accm: any[], group: any) => { const whitelistedColumns = group.headers.filter((header: any) => whitelist.includes(header.id));
const whitelistedColumns = group.headers.filter((header: any) =>
whitelist.includes(header.id)
);
const data = whitelistedColumns.map((data: any) => ({ const data = whitelistedColumns.map((data: any) => ({
key: data.column.columnDef.id, key: data.column.columnDef.id,
@@ -1035,9 +868,7 @@ export default function PaymentRecord() {
})) as SimpleCSVColumn[]; })) as SimpleCSVColumn[];
return [...accm, ...data]; return [...accm, ...data];
}, }, []);
[]
);
const {rows} = currentTable.getRowModel(); const {rows} = currentTable.getRowModel();
@@ -1075,12 +906,7 @@ export default function PaymentRecord() {
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => (
<th className="p-4 text-left" key={header.id}> <th className="p-4 text-left" key={header.id}>
{header.isPlaceholder {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th> </th>
))} ))}
</tr> </tr>
@@ -1088,10 +914,7 @@ export default function PaymentRecord() {
</thead> </thead>
<tbody className="px-2"> <tbody className="px-2">
{table.getRowModel().rows.map((row) => ( {table.getRowModel().rows.map((row) => (
<tr <tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
key={row.id}
>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<td className="px-4 py-2" key={cell.id}> <td className="px-4 py-2" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -1118,10 +941,7 @@ export default function PaymentRecord() {
{user && ( {user && (
<Layout user={user} className="gap-6"> <Layout user={user} className="gap-6">
{getUserModal()} {getUserModal()}
<Modal <Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
isOpen={isCreatingPayment}
onClose={() => setIsCreatingPayment(false)}
>
<PaymentCreator <PaymentCreator
onClose={() => setIsCreatingPayment(false)} onClose={() => setIsCreatingPayment(false)}
reload={reload} reload={reload}
@@ -1132,29 +952,15 @@ export default function PaymentRecord() {
<div className="w-full flex flex-end justify-between p-2"> <div className="w-full flex flex-end justify-between p-2">
<h1 className="text-2xl font-semibold">Payment Record</h1> <h1 className="text-2xl font-semibold">Payment Record</h1>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
{checkAccess(user, [ {checkAccess(user, ["developer", "admin", "agent", "corporate", "mastercorporate"]) && (
"developer",
"admin",
"agent",
"corporate",
"mastercorporate",
]) && (
<Button className="max-w-[200px]" variant="outline"> <Button className="max-w-[200px]" variant="outline">
<CSVLink <CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
data={csvRows}
headers={csvColumns}
filename="payment-records.csv"
>
Download CSV Download CSV
</CSVLink> </CSVLink>
</Button> </Button>
)} )}
{checkAccess(user, ["developer", "admin"]) && ( {checkAccess(user, ["developer", "admin"]) && (
<Button <Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
className="max-w-[200px]"
variant="outline"
onClick={() => setIsCreatingPayment(true)}
>
New Payment New Payment
</Button> </Button>
)} )}
@@ -1168,12 +974,9 @@ export default function PaymentRecord() {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light", "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2", "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
selected selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
) )
} }>
>
Payments Payments
</Tab> </Tab>
{checkAccess(user, ["developer", "admin"]) && ( {checkAccess(user, ["developer", "admin"]) && (
@@ -1183,63 +986,42 @@ export default function PaymentRecord() {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light", "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2", "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
selected selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
) )
} }>
>
Paymob Paymob
</Tab> </Tab>
)} )}
</Tab.List> </Tab.List>
<Tab.Panels> <Tab.Panels>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide gap-8 flex flex-col"> <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide gap-8 flex flex-col">
<div <div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
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"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
Corporate account *
</label>
<Select <Select
isClearable={user.type !== "corporate"} isClearable={user.type !== "corporate"}
className={clsx( 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", "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" && user.type === "corporate" && "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
"!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed"
)} )}
options={( options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
users.filter(
(u) => u.type === "corporate"
) as CorporateUser[]
).map((user) => ({
value: user.id, value: user.id,
meta: user, meta: user,
label: `${ label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
user.corporateInformation?.companyInformation?.name ||
user.name
} - ${user.email}`,
}))} }))}
defaultValue={ defaultValue={
user.type === "corporate" user.type === "corporate"
? { ? {
value: user.id, value: user.id,
meta: user, meta: user,
label: `${ label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${
user.corporateInformation?.companyInformation user.email
?.name || user.name }`,
} - ${user.email}`,
} }
: undefined : undefined
} }
isDisabled={user.type === "corporate"} isDisabled={user.type === "corporate"}
onChange={(value) => onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
setCorporate((value as any)?.meta ?? undefined)
}
menuPortalTarget={document?.body} menuPortalTarget={document?.body}
styles={{ styles={{
menuPortal: (base) => ({...base, zIndex: 9999}), menuPortal: (base) => ({...base, zIndex: 9999}),
@@ -1254,11 +1036,7 @@ export default function PaymentRecord() {
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
@@ -1266,21 +1044,15 @@ export default function PaymentRecord() {
</div> </div>
{user.type !== "corporate" && ( {user.type !== "corporate" && (
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
Country manager *
</label>
<Select <Select
isClearable isClearable
isDisabled={user.type === "agent"} isDisabled={user.type === "agent"}
className={clsx( 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", "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" user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
? "bg-mti-gray-platinum/40"
: "bg-white"
)} )}
options={( options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
users.filter((u) => u.type === "agent") as AgentUser[]
).map((user) => ({
value: user.id, value: user.id,
meta: user, meta: user,
label: `${user.name} - ${user.email}`, label: `${user.name} - ${user.email}`,
@@ -1293,11 +1065,7 @@ export default function PaymentRecord() {
} }
: undefined : undefined
} }
onChange={(value) => onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
setAgent(
value !== null ? (value as any).meta : undefined
)
}
menuPortalTarget={document?.body} menuPortalTarget={document?.body}
styles={{ styles={{
menuPortal: (base) => ({...base, zIndex: 9999}), menuPortal: (base) => ({...base, zIndex: 9999}),
@@ -1312,11 +1080,7 @@ export default function PaymentRecord() {
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
@@ -1324,16 +1088,12 @@ export default function PaymentRecord() {
</div> </div>
)} )}
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Paid</label>
Paid
</label>
<Select <Select
isClearable isClearable
className={clsx( 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", "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" user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
? "bg-mti-gray-platinum/40"
: "bg-white"
)} )}
options={IS_PAID_OPTIONS} options={IS_PAID_OPTIONS}
value={IS_PAID_OPTIONS.find((e) => e.value === paid)} value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
@@ -1355,20 +1115,14 @@ export default function PaymentRecord() {
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Date</label>
Date
</label>
<ReactDatePicker <ReactDatePicker
dateFormat="dd/MM/yyyy" dateFormat="dd/MM/yyyy"
className="px-4 py-6 w-full text-sm text-center 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" className="px-4 py-6 w-full text-sm text-center 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"
@@ -1377,13 +1131,9 @@ export default function PaymentRecord() {
endDate={endDate} endDate={endDate}
selectsRange selectsRange
showMonthDropdown showMonthDropdown
filterDate={(date: Date) => filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
moment(date).isSameOrBefore(moment(new Date()))
}
onChange={([initialDate, finalDate]: [Date, Date]) => { onChange={([initialDate, finalDate]: [Date, Date]) => {
setStartDate( setStartDate(initialDate ?? moment("01/01/2023").toDate());
initialDate ?? moment("01/01/2023").toDate()
);
if (finalDate) { if (finalDate) {
// basicly selecting a final day works as if I'm selecting the first // basicly selecting a final day works as if I'm selecting the first
// minute of that day. this way it covers the whole day // minute of that day. this way it covers the whole day
@@ -1396,18 +1146,14 @@ export default function PaymentRecord() {
</div> </div>
{user.type !== "corporate" && ( {user.type !== "corporate" && (
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Commission transfer</label>
Commission transfer
</label>
<Select <Select
isClearable isClearable
className={clsx( 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" "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} options={IS_FILE_SUBMITTED_OPTIONS}
value={IS_FILE_SUBMITTED_OPTIONS.find( value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)}
(e) => e.value === commissionTransfer
)}
onChange={(value) => { onChange={(value) => {
if (value) return setCommissionTransfer(value.value); if (value) return setCommissionTransfer(value.value);
setCommissionTransfer(null); setCommissionTransfer(null);
@@ -1426,11 +1172,7 @@ export default function PaymentRecord() {
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
@@ -1438,18 +1180,14 @@ export default function PaymentRecord() {
</div> </div>
)} )}
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Corporate transfer</label>
Corporate transfer
</label>
<Select <Select
isClearable isClearable
className={clsx( 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" "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} options={IS_FILE_SUBMITTED_OPTIONS}
value={IS_FILE_SUBMITTED_OPTIONS.find( value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === corporateTransfer)}
(e) => e.value === corporateTransfer
)}
onChange={(value) => { onChange={(value) => {
if (value) return setCorporateTransfer(value.value); if (value) return setCorporateTransfer(value.value);
setCorporateTransfer(null); setCorporateTransfer(null);
@@ -1468,11 +1206,7 @@ export default function PaymentRecord() {
}), }),
option: (styles, state) => ({ option: (styles, state) => ({
...styles, ...styles,
backgroundColor: state.isFocused backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
color: state.isFocused ? "black" : styles.color, color: state.isFocused ? "black" : styles.color,
}), }),
}} }}
@@ -1482,16 +1216,9 @@ export default function PaymentRecord() {
{renderTable(table as Table<Payment>)} {renderTable(table as Table<Payment>)}
</Tab.Panel> </Tab.Panel>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide flex flex-col gap-8"> <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide flex flex-col gap-8">
<div <div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
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"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Date</label>
Date
</label>
<ReactDatePicker <ReactDatePicker
dateFormat="dd/MM/yyyy" dateFormat="dd/MM/yyyy"
className="px-4 py-6 w-full text-sm text-center 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" className="px-4 py-6 w-full text-sm text-center 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"
@@ -1500,19 +1227,13 @@ export default function PaymentRecord() {
endDate={endDatePaymob} endDate={endDatePaymob}
selectsRange selectsRange
showMonthDropdown showMonthDropdown
filterDate={(date: Date) => filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
moment(date).isSameOrBefore(moment(new Date()))
}
onChange={([initialDate, finalDate]: [Date, Date]) => { onChange={([initialDate, finalDate]: [Date, Date]) => {
setStartDatePaymob( setStartDatePaymob(initialDate ?? moment("01/01/2023").toDate());
initialDate ?? moment("01/01/2023").toDate()
);
if (finalDate) { if (finalDate) {
// basicly selecting a final day works as if I'm selecting the first // basicly selecting a final day works as if I'm selecting the first
// minute of that day. this way it covers the whole day // minute of that day. this way it covers the whole day
setEndDatePaymob( setEndDatePaymob(moment(finalDate).endOf("day").toDate());
moment(finalDate).endOf("day").toDate()
);
return; return;
} }
setEndDatePaymob(null); setEndDatePaymob(null);

2
src/pages/payment.tsx
View File

@@ -16,7 +16,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
envVariables[x] = process.env[x]!; envVariables[x] = process.env[x]!;
}); });
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/permissions/[id].tsx
View File

@@ -32,7 +32,7 @@ export const getServerSideProps = withIronSessionSsr(async (context) => {
const {req, params} = context; const {req, params} = context;
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/permissions/index.tsx
View File

@@ -12,7 +12,7 @@ import PermissionList from "@/components/PermissionList";
export const getServerSideProps = withIronSessionSsr(async ({req}) => { export const getServerSideProps = withIronSessionSsr(async ({req}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/profile.tsx
View File

@@ -50,7 +50,7 @@ import {getUsers} from "@/utils/users.be";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => { export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/record.tsx
View File

@@ -29,7 +29,7 @@ import useGradingSystem from "@/hooks/useGrading";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => { export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/register.tsx
View File

@@ -121,7 +121,7 @@ export default function Register({code: queryCode}: {code: string}) {
</Link> </Link>
</> </>
)} )}
{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />} {/* {user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />} */}
</section> </section>
</main> </main>
</> </>

2
src/pages/settings.tsx
View File

@@ -31,7 +31,7 @@ import useUsers from "@/hooks/useUsers";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => { export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/stats.tsx
View File

@@ -34,7 +34,7 @@ const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8", "#414288"];
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/tickets.tsx
View File

@@ -22,7 +22,7 @@ const columnHelper = createColumnHelper<TicketWithCorporate>();
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

2
src/pages/training/[id]/index.tsx
View File

@@ -35,7 +35,7 @@ import {sortByModule} from "@/utils/moduleUtils";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",

13
src/pages/training/index.tsx
View File

@@ -24,7 +24,7 @@ import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
if (!user || !user.isVerified) { if (!user) {
return { return {
redirect: { redirect: {
destination: "/login", destination: "/login",
@@ -48,17 +48,18 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
}, sessionOptions); }, sessionOptions);
const Training: React.FC<{user: User}> = ({user}) => { const Training: React.FC<{user: User}> = ({user}) => {
const [recordUserId, setRecordTraining] = useRecordStore((state) => [ const [recordUserId, setRecordTraining] = useRecordStore((state) => [state.selectedUser, state.setTraining]);
state.selectedUser,
state.setTraining,
]);
const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">(); const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">();
const [stats, setTrainingStats] = useTrainingContentStore((state) => [state.stats, state.setStats]); const [stats, setTrainingStats] = useTrainingContentStore((state) => [state.stats, state.setStats]);
const [isNewContentLoading, setIsNewContentLoading] = useState(stats.length != 0); const [isNewContentLoading, setIsNewContentLoading] = useState(stats.length != 0);
const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{[key: string]: ITrainingContent}>(); const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{[key: string]: ITrainingContent}>();
const { data: trainingContent, isLoading: areRecordsLoading } = useFilterRecordsByUser<ITrainingContent[]>(recordUserId || user?.id, undefined, "training"); const {data: trainingContent, isLoading: areRecordsLoading} = useFilterRecordsByUser<ITrainingContent[]>(
recordUserId || user?.id,
undefined,
"training",
);
useEffect(() => { useEffect(() => {
const handleRouteChange = (url: string) => { const handleRouteChange = (url: string) => {