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

Merged develop into feature-multiplerandomexams

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-12-09 14:37:34 +00:00
parent dfbbf0456d 390658f2b0
commit ccd2560451
5 changed files with 123 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DemographicInformationInput.tsx
View File

@@ -62,7 +62,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -md:px-4 lg:w-1/2 mb-32" onSubmit={save}>
{user.type === "agent" && (
<div className="w-full flex gap-8">
<Input type="text" onChange={setCompanyName} name="companyName" label="Company Name" required />
<Input type="text" onChange={setCompanyName} name="companyName" label="Corporate Name" required />
<Input
type="text"
onChange={setCommercialRegistration}

12
src/components/UserCard.tsx
View File

@@ -58,7 +58,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
);
const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : undefined);
const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
const {stats} = useStats(user.id);
@@ -146,11 +146,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
<Input
label="Company Name"
label="Corporate Name"
type="text"
name="companyName"
onChange={setCompanyName}
placeholder="Enter company name"
placeholder="Enter corporate name"
defaultValue={companyName}
required
/>
@@ -159,7 +159,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
type="text"
name="commercialRegistration"
onChange={setCommercialRegistration}
placeholder="Enter company name"
placeholder="Enter commercial registration"
defaultValue={commercialRegistration}
required
/>
@@ -171,11 +171,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
<Input
label="Company Name"
label="Corporate Name"
type="text"
name="companyName"
onChange={setCompanyName}
placeholder="Enter company name"
placeholder="Enter corporate name"
defaultValue={companyName}
/>
<Input

2
src/pages/api/register.ts
View File

@@ -65,7 +65,7 @@ async function registerIndividual(req: NextApiRequest, res: NextApiResponse) {
bio: "",
isFirstLogin: codeData ? codeData.type === "student" : true,
focus: "academic",
type: codeData ? codeData.type : "student",
type: email.endsWith("@ecrop.dev") ? "developer" : codeData ? codeData.type : "student",
subscriptionExpirationDate: codeData ? codeData.expiryDate : moment().subtract(1, "days").toISOString(),
registrationDate: new Date(),
status: code ? "active" : "paymentDue",

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

@@ -75,6 +75,13 @@ const PaymentCreator = ({onClose, reload}: {onClose: () => void; reload: () => v
setReferralAgent(referralAgent as AgentUser | undefined);
}, [corporate, users]);
useEffect(() => {
const payment = corporate?.corporateInformation?.payment;
setPrice(payment?.value || 0);
setCurrency(payment?.currency || "EUR");
}, [corporate]);
const submit = () => {
axios
.post(`/api/payments`, {
@@ -138,14 +145,15 @@ const PaymentCreator = ({onClose, reload}: {onClose: () => void; reload: () => v
name="paymentValue"
onChange={(e) => setPrice(e ? parseInt(e) : 0)}
type="number"
defaultValue={0}
value={price}
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"}}
defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
onChange={(value) => setCurrency(value?.value || "EUR")}
value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
styles={{
control: (styles) => ({
...styles,
@@ -227,11 +235,47 @@ const PaymentCreator = ({onClose, reload}: {onClose: () => void; reload: () => v
export default function PaymentRecord() {
const [selectedUser, setSelectedUser] = useState<User>();
const [isCreatingPayment, setIsCreatingPayment] = useState(false);
const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
const [corporate, setCorporate] = useState<User>();
const [agent, setAgent] = useState<User>();
const {user} = useUser({redirectTo: "/login"});
const {users} = useUsers();
const {payments, reload} = usePayments();
useEffect(() => {
setDisplayPayments(
filters
.map((f) => f.filter)
.reduce((d, f) => d.filter(f), payments)
.sort((a, b) => moment(b.date).diff(moment(a.date))),
);
}, [payments, filters]);
useEffect(() => {
if (user && user.type === "agent") {
setAgent(user);
}
}, [user]);
useEffect(() => {
setFilters((prev) => [
...prev.filter((x) => x.id !== "agent-filter"),
...(!agent ? [] : [{id: "agent-filter", filter: (p: Payment) => p.agent === agent.id}]),
]);
}, [agent]);
useEffect(() => console.log(filters), [filters]);
useEffect(() => {
setFilters((prev) => [
...prev.filter((x) => x.id !== "corporate-filter"),
...(!corporate ? [] : [{id: "corporate-filter", filter: (p: Payment) => p.corporate === corporate.id}]),
]);
}, [corporate]);
const updatePayment = (payment: Payment, key: string, value: any) => {
axios
.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
@@ -339,7 +383,7 @@ export default function PaymentRecord() {
];
const table = useReactTable({
data: (user?.type === "agent" ? payments.filter((p) => p.agent === user.id) : payments).sort((a, b) => moment(b.date).diff(moment(a.date))),
data: displayPayments,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
});
@@ -387,6 +431,71 @@ export default function PaymentRecord() {
</Button>
)}
</div>
<div className="flex gap-8 w-full">
<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"
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}`,
}))}
onChange={(value) => setCorporate((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">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": {
outline: "none",
},
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
</div>
</div>
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (

6
src/pages/profile.tsx
View File

@@ -214,11 +214,11 @@ export default function Home() {
{user.type === "agent" && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
<Input
label="Company Name"
label="Corporate Name"
type="text"
name="companyName"
onChange={() => null}
placeholder="Enter company name"
placeholder="Enter corporate name"
defaultValue={user.agentInformation.companyName}
disabled
/>
@@ -227,7 +227,7 @@ export default function Home() {
type="text"
name="commercialRegistration"
onChange={() => null}
placeholder="Enter company name"
placeholder="Enter commercial registration"
defaultValue={user.agentInformation.commercialRegistration}
disabled
/>