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

Merge branch 'develop' into features-21-08-24

Browse Source
This commit is contained in:
Joao Ramos
2024-08-24 18:56:05 +01:00
parent 74a53f55fd 032d20b4b2
commit 8d37e60f5d
25 changed files with 1069 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/orange-stock-photo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
public/red-stock-photo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 MiB

3
src/components/Low/Input.tsx
View File

@@ -11,6 +11,7 @@ interface Props {
value?: string | number;
className?: string;
disabled?: boolean;
max?: number;
name: string;
onChange: (value: string) => void;
}
@@ -23,6 +24,7 @@ export default function Input({
required = false,
value,
defaultValue,
max,
className,
roundness = "full",
disabled = false,
@@ -72,6 +74,7 @@ export default function Input({
name={name}
disabled={disabled}
value={value}
max={max}
onChange={(e) => onChange(e.target.value)}
min={type === "number" ? 0 : undefined}
placeholder={placeholder}

87
src/components/UserCard.tsx
View File

@@ -41,6 +41,7 @@ interface Props {
onViewStudents?: () => void;
onViewTeachers?: () => void;
onViewCorporate?: () => void;
maxUserAmount?: number;
disabled?: boolean;
disabledFields?: {
countryManager?: boolean;
@@ -72,17 +73,31 @@ const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
label,
}));
const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: Props) => {
const UserCard = ({
user,
loggedInUser,
maxUserAmount,
onClose,
onViewStudents,
onViewTeachers,
onViewCorporate,
disabled = false,
disabledFields = {},
}: Props) => {
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
const [type, setType] = useState(user.type);
const [status, setStatus] = useState(user.status);
const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
const [position, setPosition] = useState<string | undefined>(
user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : undefined,
);
const [studentID, setStudentID] = useState<string | undefined>(user.type === "student" ? user.studentID : undefined);
const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
const [referralAgent, setReferralAgent] = useState(
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.referralAgent : undefined,
);
const [companyName, setCompanyName] = useState(
user.type === "corporate"
user.type === "corporate" || user.type === "mastercorporate"
? user.corporateInformation?.companyInformation.name
: user.type === "agent"
? user.agentInformation?.companyName
@@ -92,11 +107,21 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
const [commercialRegistration, setCommercialRegistration] = useState(
user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
);
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 : "EUR");
const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
const [userAmount, setUserAmount] = useState(
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.companyInformation.userAmount : undefined,
);
const [paymentValue, setPaymentValue] = useState(
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.value : undefined,
);
const [paymentCurrency, setPaymentCurrency] = useState(
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.currency : "EUR",
);
const [monthlyDuration, setMonthlyDuration] = useState(
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.monthlyDuration : undefined,
);
const [commissionValue, setCommission] = useState(
user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.commission : undefined,
);
const {stats} = useStats(user.id);
const {users} = useUsers();
const {codes} = useCodes(user.id);
@@ -115,7 +140,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
}, [users, referralAgent]);
const updateUser = () => {
if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
if (user.type === "corporate" || (user.type === "mastercorporate" && (!paymentValue || paymentValue < 0)))
return toast.error("Please set a price for the user's package before updating!");
if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
@@ -123,6 +148,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
...user,
subscriptionExpirationDate: expiryDate,
studentID,
type,
status,
agentInformation:
@@ -178,7 +204,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
];
const corporateProfileItems =
user.type === "corporate"
user.type === "corporate" || user.type === "mastercorporate"
? [
{
icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
@@ -199,7 +225,10 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
};
return (
<>
<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
<ProfileSummary
user={user}
items={user.type === "corporate" || user.type === "mastercorporate" ? corporateProfileItems : generalProfileItems}
/>
{user.type === "agent" && (
<>
@@ -238,7 +267,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<Divider className="w-full !m-0" />
</>
)}
{user.type === "corporate" && (
{(user.type === "corporate" || user.type === "mastercorporate") && (
<>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
<Input
@@ -248,16 +277,23 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
onChange={setCompanyName}
placeholder="Enter corporate name"
defaultValue={companyName}
disabled={disabled}
disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
/>
<Input
label="Number of Users"
type="number"
name="userAmount"
max={maxUserAmount}
onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
placeholder="Enter number of users"
defaultValue={userAmount}
disabled={disabled}
disabled={
disabled ||
checkAccess(
loggedInUser,
getTypesOfUser(["developer", "admin", ...((user.type === "corporate" ? ["mastercorporate"] : []) as Type[])]),
)
}
/>
<Input
label="Monthly Duration"
@@ -266,7 +302,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
placeholder="Enter monthly duration"
defaultValue={monthlyDuration}
disabled={disabled}
disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
/>
<div className="flex flex-col gap-3 w-full lg:col-span-3">
<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
@@ -277,7 +313,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
type="number"
defaultValue={paymentValue || 0}
className="col-span-3"
disabled={disabled}
disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
/>
<Select
className={clsx(
@@ -305,7 +341,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
color: state.isFocused ? "black" : styles.color,
}),
}}
isDisabled={disabled}
isDisabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
/>
</div>
</div>
@@ -417,6 +453,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
</div>
{user.type === "student" && (
<div className="flex flex-col md:flex-row gap-8 w-full">
<Input
type="text"
name="passport_id"
@@ -427,6 +464,16 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
disabled
required
/>
<Input
type="text"
name="studentID"
label="Student ID"
onChange={setStudentID}
placeholder="Enter Student ID"
disabled={!checkAccess(loggedInUser, getTypesOfUser(["teacher", "agent", "student"]), permissions, "editStudent")}
value={studentID}
/>
</div>
)}
<div className="flex flex-col md:flex-row gap-8 w-full">
@@ -456,7 +503,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
</RadioGroup>
</div>
)}
{user.type === "corporate" && (
{(user.type === "corporate" || user.type === "mastercorporate") && (
<Input
name="position"
onChange={setPosition}

6
src/constants/userPermissions.ts
View File

@@ -45,16 +45,16 @@ export const PERMISSIONS = {
updateUser: {
student: {
perm: "editStudent",
list: ["developer", "admin"],
list: ["developer", "admin", "corporate", "mastercorporate", "teacher"],
},
teacher: {
perm: "editTeacher",
list: ["developer", "admin"],
list: ["developer", "admin", "corporate", "mastercorporate"],
},
corporate: {
perm: "editCorporate",
list: ["admin", "developer"],
list: ["developer", "admin", "mastercorporate"],
},
mastercorporate: {
perm: undefined,

31
src/dashboards/Corporate.tsx
View File

@@ -57,8 +57,9 @@ import {
futureAssignmentFilter,
pastAssignmentFilter,
archivedAssignmentFilter,
activeAssignmentFilter
} from '@/utils/assignments';
activeAssignmentFilter,
} from "@/utils/assignments";
import useUserBalance from "@/hooks/useUserBalance";
interface Props {
user: CorporateUser;
@@ -230,7 +231,6 @@ export default function CorporateDashboard({ user }: Props) {
useState<CorporateUser>();
const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
const [userBalance, setUserBalance] = useState(0);
const { stats } = useStats();
const { users, reload, isLoading } = useUsers();
@@ -241,6 +241,7 @@ export default function CorporateDashboard({ user }: Props) {
isLoading: isAssignmentsLoading,
reload: reloadAssignments,
} = useAssignments({ corporate: user.id });
const { balance } = useUserBalance();
const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
const router = useRouter();
@@ -249,19 +250,6 @@ export default function CorporateDashboard({ user }: Props) {
setShowModal(!!selectedUser && page === "");
}, [selectedUser, page]);
useEffect(() => {
const relatedGroups = groups.filter(
(x) =>
x.name === "Students" || x.name === "Teachers" || x.name === "Corporate"
);
const usersInGroups = relatedGroups.map((x) => x.participants).flat();
const filteredCodes = codes.filter(
(x) => !x.userId || !usersInGroups.includes(x.userId)
);
setUserBalance(usersInGroups.length + filteredCodes.length);
}, [codes, groups]);
useEffect(() => {
// in this case it fetches the master corporate account
getUserCorporate(user.id).then(setCorporateUserToShow);
@@ -436,7 +424,8 @@ export default function CorporateDashboard({ user }: Props) {
</div>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Active Assignments ({assignments.filter(activeAssignmentFilter).length})
Active Assignments (
{assignments.filter(activeAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(activeAssignmentFilter).map((a) => (
@@ -451,7 +440,8 @@ export default function CorporateDashboard({ user }: Props) {
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Planned Assignments ({assignments.filter(futureAssignmentFilter).length})
Planned Assignments (
{assignments.filter(futureAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
<div
@@ -495,7 +485,8 @@ export default function CorporateDashboard({ user }: Props) {
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
Archived Assignments (
{assignments.filter(archivedAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(archivedAssignmentFilter).map((a) => (
@@ -640,7 +631,7 @@ export default function CorporateDashboard({ user }: Props) {
<IconCard
Icon={BsPersonCheck}
label="User Balance"
value={`${userBalance}/${
value={`${balance}/${
user.corporateInformation?.companyInformation?.userAmount || 0
}`}
color="purple"

5
src/dashboards/IconCard.tsx
View File

@@ -9,6 +9,7 @@ interface Props {
tooltip?: string;
onClick?: () => void;
isSelected?: boolean;
className?: string;
}
export default function IconCard({
@@ -18,6 +19,7 @@ export default function IconCard({
color,
tooltip,
onClick,
className,
isSelected,
}: Props) {
const colorClasses: { [key in typeof color]: string } = {
@@ -33,7 +35,8 @@ export default function IconCard({
className={clsx(
"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
tooltip && "tooltip tooltip-bottom",
isSelected && `border border-solid border-${colorClasses[color]}`
isSelected && `border border-solid border-${colorClasses[color]}`,
className,
)}
data-tip={tooltip}
>

28
src/dashboards/MasterCorporate.tsx
View File

@@ -70,14 +70,14 @@ import {
futureAssignmentFilter,
pastAssignmentFilter,
archivedAssignmentFilter,
activeAssignmentFilter
} from '@/utils/assignments';
activeAssignmentFilter,
} from "@/utils/assignments";
import useUserBalance from "@/hooks/useUserBalance";
interface Props {
user: MasterCorporateUser;
}
type StudentPerformanceItem = User & {
corporate?: CorporateUser;
group?: Group;
@@ -439,12 +439,13 @@ export default function MasterCorporateDashboard({ user }: Props) {
const { users, reload } = useUsers();
const { codes } = useCodes(user.id);
const { groups } = useGroups({ admin: user.id, userType: user.type });
const { balance } = useUserBalance();
const masterCorporateUserGroups = [
const masterCorporateUserGroups = useMemo(() => [
...new Set(
groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants)
),
];
], [groups, user.id]);
const corporateUserGroups = [
...new Set(groups.flatMap((g) => g.participants)),
@@ -744,7 +745,8 @@ export default function MasterCorporateDashboard({ user }: Props) {
</div>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Active Assignments ({assignments.filter(activeAssignmentFilter).length})
Active Assignments (
{assignments.filter(activeAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(activeAssignmentFilter).map((a) => (
@@ -759,7 +761,8 @@ export default function MasterCorporateDashboard({ user }: Props) {
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Planned Assignments ({assignments.filter(futureAssignmentFilter).length})
Planned Assignments (
{assignments.filter(futureAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
<div
@@ -803,7 +806,8 @@ export default function MasterCorporateDashboard({ user }: Props) {
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
Archived Assignments (
{assignments.filter(archivedAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(archivedAssignmentFilter).map((a) => (
@@ -903,7 +907,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
<IconCard
Icon={BsPersonCheck}
label="User Balance"
value={`${codes.length}/${
value={`${balance}/${
user.corporateInformation?.companyInformation?.userAmount || 0
}`}
color="purple"
@@ -1020,6 +1024,12 @@ export default function MasterCorporateDashboard({ user }: Props) {
{selectedUser && (
<div className="w-full flex flex-col gap-8">
<UserCard
maxUserAmount={
user.type === "mastercorporate"
? (user.corporateInformation?.companyInformation
?.userAmount || 0) - balance
: undefined
}
loggedInUser={user}
onClose={(shouldReload) => {
setSelectedUser(undefined);

21
src/hooks/useUserBalance.tsx Normal file
View File

@@ -0,0 +1,21 @@
import {Code, Group, User} from "@/interfaces/user";
import axios from "axios";
import {useEffect, useState} from "react";
export default function useUserBalance() {
const [balance, setBalance] = useState<number>(0);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const getData = () => {
setIsLoading(true);
axios
.get<{balance: number}>(`/api/users/balance`)
.then((response) => setBalance(response.data.balance))
.finally(() => setIsLoading(false));
};
useEffect(getData, []);
return {balance, isLoading, isError, reload: getData};
}

40
src/interfaces/user.ts
View File

@@ -2,14 +2,7 @@ import { Module } from ".";
import {InstructorGender, ShuffleMap} from "./exam";
import {PermissionType} from "./permissions";
export type User =
| StudentUser
| TeacherUser
| CorporateUser
| AgentUser
| AdminUser
| DeveloperUser
| MasterCorporateUser;
export type User = StudentUser | TeacherUser | CorporateUser | AgentUser | AdminUser | DeveloperUser | MasterCorporateUser;
export type UserStatus = "active" | "disabled" | "paymentDue";
export interface BasicUser {
@@ -33,6 +26,7 @@ export interface BasicUser {
export interface StudentUser extends BasicUser {
type: "student";
studentID?: string;
preferredGender?: InstructorGender;
demographicInformation?: DemographicInformation;
preferredTopics?: string[];
@@ -113,15 +107,8 @@ export interface DemographicCorporateInformation {
}
export type Gender = "male" | "female" | "other";
export type EmploymentStatus =
| "employed"
| "student"
| "self-employed"
| "unemployed"
| "retired"
| "other";
export const EMPLOYMENT_STATUS: { status: EmploymentStatus; label: string }[] =
[
export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [
{status: "student", label: "Student"},
{status: "employed", label: "Employed"},
{status: "unemployed", label: "Unemployed"},
@@ -176,20 +163,5 @@ export interface Code {
passport_id?: string;
}
export type Type =
| "student"
| "teacher"
| "corporate"
| "admin"
| "developer"
| "agent"
| "mastercorporate";
export const userTypes: Type[] = [
"student",
"teacher",
"corporate",
"admin",
"developer",
"agent",
"mastercorporate",
];
export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate";
export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];

5
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -19,6 +19,7 @@ import {BsFileEarmarkEaselFill, BsQuestionCircleFill} from "react-icons/bs";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {PermissionType} from "@/interfaces/permissions";
import usePermissions from "@/hooks/usePermissions";
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
const USER_TYPE_PERMISSIONS: {
@@ -34,7 +35,7 @@ const USER_TYPE_PERMISSIONS: {
},
agent: {
perm: "createCodeCountryManager",
list: [],
list: ["student", "teacher", "corporate", "mastercorporate"],
},
corporate: {
perm: "createCodeCorporate",
@@ -85,7 +86,7 @@ export default function BatchCodeGenerator({user}: {user: User}) {
const information = uniqBy(
rows
.map((row) => {
const [firstName, lastName, country, passport_id, email, ...phone] = row as string[];
const [firstName, lastName, country, passport_id, email, phone] = row as string[];
return EMAIL_REGEX.test(email.toString().trim())
? {
email: email.toString().trim().toLowerCase(),

44
src/pages/(admin)/BatchCreateUser.tsx
View File

@@ -11,10 +11,13 @@ import Modal from "@/components/Modal";
import {BsQuestionCircleFill} from "react-icons/bs";
import {PermissionType} from "@/interfaces/permissions";
import moment from "moment";
import {checkAccess} from "@/utils/permissions";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import Checkbox from "@/components/Low/Checkbox";
import ReactDatePicker from "react-datepicker";
import clsx from "clsx";
import usePermissions from "@/hooks/usePermissions";
import countryCodes from "country-codes-list";
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
@@ -26,7 +29,7 @@ const USER_TYPE_LABELS: {[key in Type]: string} = {
};
const USER_TYPE_PERMISSIONS: {
[key in Type]: {perm: PermissionType | undefined; list: Type[]};
[key in UserType]: {perm: PermissionType | undefined; list: UserType[]};
} = {
student: {
perm: "createCodeStudent",
@@ -36,10 +39,26 @@ const USER_TYPE_PERMISSIONS: {
perm: "createCodeTeacher",
list: [],
},
agent: {
perm: "createCodeCountryManager",
list: ["student", "teacher", "corporate", "mastercorporate"],
},
corporate: {
perm: "createCodeCorporate",
list: ["student", "teacher"],
},
mastercorporate: {
perm: undefined,
list: ["student", "teacher", "corporate"],
},
admin: {
perm: "createCodeAdmin",
list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
},
developer: {
perm: undefined,
list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
},
};
export default function BatchCreateUser({user}: {user: User}) {
@@ -65,6 +84,7 @@ export default function BatchCreateUser({user}: {user: User}) {
const [showHelp, setShowHelp] = useState(false);
const {users} = useUsers();
const {permissions} = usePermissions(user?.id || "");
const {openFilePicker, filesContent, clear} = useFilePicker({
accept: ".xlsx",
@@ -84,7 +104,11 @@ export default function BatchCreateUser({user}: {user: User}) {
const information = uniqBy(
rows
.map((row) => {
const [firstName, lastName, country, passport_id, email, phone, group] = row as string[];
const [firstName, lastName, country, passport_id, email, phone, group, studentID, corporate] = row as string[];
const countryItem =
countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
return EMAIL_REGEX.test(email.toString().trim())
? {
email: email.toString().trim().toLowerCase(),
@@ -92,8 +116,10 @@ export default function BatchCreateUser({user}: {user: User}) {
type: type,
passport_id: passport_id?.toString().trim() || undefined,
groupName: group,
corporate,
studentID,
demographicInformation: {
country: country,
country: countryItem?.countryCode,
passport_id: passport_id?.toString().trim() || undefined,
phone,
},
@@ -158,6 +184,8 @@ export default function BatchCreateUser({user}: {user: User}) {
<th className="border border-neutral-200 px-2 py-1">E-mail</th>
<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
<th className="border border-neutral-200 px-2 py-1">Group Name</th>
<th className="border border-neutral-200 px-2 py-1">Student ID</th>
{user?.type !== "corporate" && <th className="border border-neutral-200 px-2 py-1">Corporate (e-mail)</th>}
</tr>
</thead>
</table>
@@ -214,7 +242,13 @@ export default function BatchCreateUser({user}: {user: User}) {
defaultValue="student"
onChange={(e) => setType(e.target.value as Type)}
className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
{Object.keys(USER_TYPE_LABELS).map((type) => (
{Object.keys(USER_TYPE_LABELS)
.filter((x) => {
const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
// if (x === "corporate") console.log(list, perm, checkAccess(user, list, permissions, perm));
return checkAccess(user, getTypesOfUser(list), permissions, perm);
})
.map((type) => (
<option key={type} value={type}>
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
</option>

6
src/pages/(admin)/CodeGenerator.tsx
View File

@@ -11,7 +11,7 @@ import {useEffect, useState} from "react";
import ReactDatePicker from "react-datepicker";
import {toast} from "react-toastify";
import ShortUniqueId from "short-unique-id";
import {checkAccess} from "@/utils/permissions";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {PermissionType} from "@/interfaces/permissions";
import usePermissions from "@/hooks/usePermissions";
@@ -28,7 +28,7 @@ const USER_TYPE_PERMISSIONS: {
},
agent: {
perm: "createCodeCountryManager",
list: [],
list: ["student", "teacher", "corporate", "mastercorporate"],
},
corporate: {
perm: "createCodeCorporate",
@@ -103,7 +103,7 @@ export default function CodeGenerator({user}: {user: User}) {
{Object.keys(USER_TYPE_LABELS)
.filter((x) => {
const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
return checkAccess(user, list, permissions, perm);
return checkAccess(user, getTypesOfUser(list), permissions, perm);
})
.map((type) => (
<option key={type} value={type}>

65
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -27,6 +27,7 @@ import {exportListToExcel, UserListRow} from "@/utils/users";
import {checkAccess} from "@/utils/permissions";
import {PermissionType} from "@/interfaces/permissions";
import usePermissions from "@/hooks/usePermissions";
import useUserBalance from "@/hooks/useUserBalance";
const columnHelper = createColumnHelper<User>();
const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
@@ -58,6 +59,7 @@ export default function UserList({
const {users, reload} = useUsers();
const {permissions} = usePermissions(user?.id || "");
const {balance} = useUserBalance();
const {groups} = useGroups({
admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined,
userType: user?.type,
@@ -181,52 +183,6 @@ export default function UserList({
};
return (
<div className="flex gap-4">
{checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
<Popover className="relative">
<Popover.Button>
<div data-tip="Change Type" className="cursor-pointer tooltip">
<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1">
<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
<Button
onClick={() => updateAccountType(row.original, "student")}
className="text-sm !py-2 !px-4"
disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
Student
</Button>
<Button
onClick={() => updateAccountType(row.original, "teacher")}
className="text-sm !py-2 !px-4"
disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
Teacher
</Button>
<Button
onClick={() => updateAccountType(row.original, "corporate")}
className="text-sm !py-2 !px-4"
disabled={row.original.type === "corporate" || !PERMISSIONS.generateCode["corporate"].includes(user.type)}>
Corporate
</Button>
<Button
onClick={() => updateAccountType(row.original, "admin")}
className="text-sm !py-2 !px-4"
disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
Admin
</Button>
</div>
</Popover.Panel>
</Transition>
</Popover>
)}
{!row.original.isVerified && checkAccess(user, updateUserPermission.list, permissions, updateUserPermission.perm) && (
<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
@@ -391,6 +347,15 @@ export default function UserList({
) as any,
cell: (info) => USER_TYPE_LABELS[info.getValue()],
}),
columnHelper.accessor("studentID", {
header: (
<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "studentID"))}>
<span>Student ID</span>
<SorterArrow name="studentID" />
</button>
) as any,
cell: (info) => info.getValue() || "N/A",
}),
columnHelper.accessor("corporateInformation.companyInformation.name", {
header: (
<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
@@ -465,6 +430,11 @@ export default function UserList({
? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
: userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);
if (sorter === "studentID" || sorter === reverseString("studentID"))
return sorter === "studentID"
? (a.type === "student" ? a.studentID || "N/A" : "N/A").localeCompare(b.type === "student" ? b.studentID || "N/A" : "N/A")
: (b.type === "student" ? b.studentID || "N/A" : "N/A").localeCompare(a.type === "student" ? a.studentID || "N/A" : "N/A");
if (sorter === "verification" || sorter === reverseString("verification"))
return sorter === "verification"
? a.isVerified.toString().localeCompare(b.isVerified.toString())
@@ -583,6 +553,9 @@ export default function UserList({
return (
<div className="w-full flex flex-col gap-8">
<UserCard
maxUserAmount={
user.type === "mastercorporate" ? (user.corporateInformation?.companyInformation?.userAmount || 0) - balance : undefined
}
loggedInUser={user}
onViewStudents={
(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0

266
src/pages/(admin)/UserCreator.tsx Normal file
View File

@@ -0,0 +1,266 @@
import Button from "@/components/Low/Button";
import Checkbox from "@/components/Low/Checkbox";
import {PERMISSIONS} from "@/constants/userPermissions";
import {CorporateUser, TeacherUser, Type, User} from "@/interfaces/user";
import {USER_TYPE_LABELS} from "@/resources/user";
import axios from "axios";
import clsx from "clsx";
import {capitalize, uniqBy} from "lodash";
import moment from "moment";
import {useEffect, useState} from "react";
import ReactDatePicker from "react-datepicker";
import {toast} from "react-toastify";
import ShortUniqueId from "short-unique-id";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {PermissionType} from "@/interfaces/permissions";
import usePermissions from "@/hooks/usePermissions";
import Input from "@/components/Low/Input";
import CountrySelect from "@/components/Low/CountrySelect";
import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers";
import {getUserName} from "@/utils/users";
import Select from "@/components/Low/Select";
const USER_TYPE_PERMISSIONS: {
[key in Type]: {perm: PermissionType | undefined; list: Type[]};
} = {
student: {
perm: "createCodeStudent",
list: [],
},
teacher: {
perm: "createCodeTeacher",
list: [],
},
agent: {
perm: "createCodeCountryManager",
list: ["student", "teacher", "corporate", "mastercorporate"],
},
corporate: {
perm: "createCodeCorporate",
list: ["student", "teacher"],
},
mastercorporate: {
perm: undefined,
list: ["student", "teacher", "corporate"],
},
admin: {
perm: "createCodeAdmin",
list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
},
developer: {
perm: undefined,
list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
},
};
export default function UserCreator({user}: {user: User}) {
const [name, setName] = useState<string>();
const [email, setEmail] = useState<string>();
const [phone, setPhone] = useState<string>();
const [passportID, setPassportID] = useState<string>();
const [studentID, setStudentID] = useState<string>();
const [country, setCountry] = useState(user?.demographicInformation?.country);
const [group, setGroup] = useState<string | null>();
const [availableCorporates, setAvailableCorporates] = useState<User[]>([]);
const [selectedCorporate, setSelectedCorporate] = useState<string | null>();
const [password, setPassword] = useState<string>();
const [confirmPassword, setConfirmPassword] = useState<string>();
const [expiryDate, setExpiryDate] = useState<Date | null>(
user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
);
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const [type, setType] = useState<Type>("student");
const {permissions} = usePermissions(user?.id || "");
const {groups} = useGroups({admin: ["developer", "admin"].includes(user?.type) ? undefined : user?.id, userType: user?.type});
const {users} = useUsers();
useEffect(() => {
if (!isExpiryDateEnabled) setExpiryDate(null);
}, [isExpiryDateEnabled]);
useEffect(() => {
setAvailableCorporates(
uniqBy(
users.filter((u) => u.type === "corporate" && groups.flatMap((g) => g.participants).includes(u.id)),
"id",
),
);
}, [users, groups]);
const createUser = () => {
if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
if (!password || password.trim().length === 0) return toast.error("Please enter a valid password!");
if (password !== confirmPassword) return toast.error("The passwords do not match!");
setIsLoading(true);
const body = {
name,
email,
password,
groupID: group,
type,
studentID: type === "student" ? studentID : undefined,
expiryDate,
demographicInformation: {
passport_id: type === "student" ? passportID : undefined,
phone,
country,
},
};
axios
.post("/api/make_user", body)
.then(() => {
toast.success("That user has been created!");
setName("");
setEmail("");
setPhone("");
setPassportID("");
setStudentID("");
setCountry(user?.demographicInformation?.country);
setGroup(null);
setSelectedCorporate(null);
setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
setIsExpiryDateEnabled(true);
setType("student");
})
.catch(() => toast.error("Something went wrong! Please try again later!"))
.finally(() => setIsLoading(false));
};
return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<div className="grid grid-cols-2 gap-4">
<Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
<Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
<Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
<Input
type="password"
name="confirmPassword"
label="Confirm Password"
value={confirmPassword}
onChange={setConfirmPassword}
placeholder="ConfirmPassword"
required
/>
<div className="flex flex-col gap-4">
<label className="font-normal text-base text-mti-gray-dim">Country *</label>
<CountrySelect value={country} onChange={setCountry} />
</div>
<Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
{type === "student" && (
<>
<Input
type="text"
name="passport_id"
label="Passport/National ID"
onChange={setPassportID}
value={passportID}
placeholder="National ID or Passport number"
required
/>
<Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
</>
)}
{["student", "teacher"].includes(type) && !["corporate", "teacher"].includes(user?.type) && (
<div className={clsx("flex flex-col gap-4")}>
<label className="font-normal text-base text-mti-gray-dim">Corporate</label>
<Select
options={availableCorporates.map((u) => ({value: u.id, label: getUserName(u)}))}
isClearable
onChange={(e) => setSelectedCorporate(e?.value || undefined)}
/>
</div>
)}
<div
className={clsx(
"flex flex-col gap-4",
(!["student", "teacher"].includes(type) || ["corporate", "teacher"].includes(user?.type)) && "col-span-2",
)}>
<label className="font-normal text-base text-mti-gray-dim">Group</label>
<Select
options={groups
.filter((x) => (!selectedCorporate ? true : x.admin === selectedCorporate))
.map((g) => ({value: g.id, label: g.name}))}
onChange={(e) => setGroup(e?.value || undefined)}
/>
</div>
<div
className={clsx(
"flex flex-col gap-4",
!checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
)}>
<label className="font-normal text-base text-mti-gray-dim">Type</label>
{user && (
<select
defaultValue="student"
value={type}
onChange={(e) => setType(e.target.value as Type)}
className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
{Object.keys(USER_TYPE_LABELS)
.filter((x) => {
const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
return checkAccess(user, getTypesOfUser(list), permissions, perm);
})
.map((type) => (
<option key={type} value={type}>
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
</option>
))}
</select>
)}
</div>
<div className="flex flex-col gap-4">
{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
<>
<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
<Checkbox
isChecked={isExpiryDateEnabled}
onChange={setIsExpiryDateEnabled}
disabled={!!user?.subscriptionExpirationDate}>
Enabled
</Checkbox>
</div>
{isExpiryDateEnabled && (
<ReactDatePicker
className={clsx(
"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
"hover:border-mti-purple tooltip",
"transition duration-300 ease-in-out",
)}
filterDate={(date) =>
moment(date).isAfter(new Date()) &&
(user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
}
dateFormat="dd/MM/yyyy"
selected={expiryDate}
onChange={(date) => setExpiryDate(date)}
/>
)}
</>
)}
</div>
</div>
<Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
Create User
</Button>
</div>
);
}

48
src/pages/api/make_user.ts
View File

@@ -4,7 +4,7 @@ import {getFirestore, setDoc, doc, query, collection, where, getDocs, getDoc, de
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {v4} from "uuid";
import {Group} from "@/interfaces/user";
import {CorporateUser, Group} from "@/interfaces/user";
import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
const DEFAULT_DESIRED_LEVELS = {
@@ -37,19 +37,25 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
if (!maker) {
return res.status(401).json({ok: false, reason: "You must be logged in to make user!"});
}
const {email, passport_id, type, groupName, expiryDate} = req.body as {
const {email, passport_id, password, type, groupName, groupID, expiryDate, corporate} = req.body as {
email: string;
password?: string;
passport_id: string;
type: string;
groupName: string;
groupName?: string;
groupID?: string;
corporate?: string;
expiryDate: null | Date;
};
// cleaning data
delete req.body.passport_id;
delete req.body.groupName;
delete req.body.groupID;
delete req.body.expiryDate;
delete req.body.password;
delete req.body.corporate;
await createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
await createUserWithEmailAndPassword(auth, email.toLowerCase(), !!password ? password : passport_id)
.then(async (userCredentials) => {
const userId = userCredentials.user.uid;
@@ -66,6 +72,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
registrationDate: new Date(),
subscriptionExpirationDate: expiryDate || null,
};
await setDoc(doc(db, "users", userId), user);
if (type === "corporate") {
const defaultTeachersGroup: Group = {
@@ -97,6 +104,34 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
}
if (!!corporate) {
const corporateQ = query(collection(db, "users"), where("email", "==", corporate));
const corporateSnapshot = await getDocs(corporateQ);
if (!corporateSnapshot.empty) {
const corporateUser = corporateSnapshot.docs[0].data() as CorporateUser;
const q = query(
collection(db, "groups"),
where("admin", "==", corporateUser.id),
where("name", "==", type === "student" ? "Students" : "Teachers"),
limit(1),
);
const snapshot = await getDocs(q);
if (!snapshot.empty) {
const doc = snapshot.docs[0];
const participants: string[] = doc.get("participants");
if (!participants.includes(userId)) {
updateDoc(doc.ref, {
participants: [...participants, userId],
});
}
}
}
}
if (typeof groupName === "string" && groupName.trim().length > 0) {
const q = query(collection(db, "groups"), where("admin", "==", maker.id), where("name", "==", groupName.trim()), limit(1));
const snapshot = await getDocs(q);
@@ -123,6 +158,11 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
}
}
if (!!groupID) {
const groupSnapshot = await getDoc(doc(db, "groups", groupID));
await setDoc(groupSnapshot.ref, {participants: [...groupSnapshot.data()!.participants, userId]}, {merge: true});
}
console.log(`Returning - ${email}`);
return res.status(200).json({ok: true});
})

17
src/pages/api/users/balance.ts Normal file
View File

@@ -0,0 +1,17 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type {NextApiRequest, NextApiResponse} from "next";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {getUserBalance} from "@/utils/users.be";
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
res.status(401).json({ok: false});
return;
}
const balance = await getUserBalance(req.session.user);
res.status(200).json({balance});
}

82
src/pages/login.tsx
View File

@@ -16,9 +16,7 @@ import EmailVerification from "./(auth)/EmailVerification";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
const EMAIL_REGEX = new RegExp(
/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g,
);
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -35,7 +33,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
redirect: {
destination: "/",
permanent: false,
}
},
};
}
@@ -73,10 +71,7 @@ export default function Login() {
.post<{ok: boolean}>("/api/reset", {email})
.then((response) => {
if (response.data.ok) {
toast.success(
"You should receive an e-mail to reset your password!",
{ toastId: "forgot-success" },
);
toast.success("You should receive an e-mail to reset your password!", {toastId: "forgot-success"});
return;
}
@@ -127,82 +122,45 @@ export default function Login() {
<main className="flex h-[100vh] w-full bg-white text-black">
<ToastContainer />
<section className="relative hidden h-full w-fit min-w-fit lg:flex">
<div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" />
<img
src="/people-talking-tablet.png"
alt="People smiling looking at a tablet"
className="aspect-auto h-full"
/>
{/* <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" /> */}
<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
</section>
<section className="flex h-full w-full flex-col items-center justify-center gap-2">
<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
<img
src="/logo_title.png"
alt="EnCoach's Logo"
className="w-36 lg:w-56"
/>
<h1 className="text-2xl font-bold lg:text-4xl">
Login to your account
</h1>
<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">
with your registered Email Address
</p>
<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
<h1 className="text-2xl font-bold lg:text-4xl">Login to your account</h1>
<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">with your registered Email Address</p>
</div>
<Divider className="max-w-xs lg:max-w-md" />
{!user && (
<>
<form
className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2"
onSubmit={login}
>
<Input
type="email"
name="email"
onChange={(e) => setEmail(e.toLowerCase())}
placeholder="Enter email address"
/>
<Input
type="password"
name="password"
onChange={(e) => setPassword(e)}
placeholder="Password"
/>
<form className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2" onSubmit={login}>
<Input type="email" name="email" onChange={(e) => setEmail(e.toLowerCase())} placeholder="Enter email address" />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
<div className="flex w-full justify-between px-4">
<div
className="text-mti-gray-dim flex cursor-pointer gap-3 text-xs"
onClick={() => setRememberPassword((prev) => !prev)}
>
onClick={() => setRememberPassword((prev) => !prev)}>
<input type="checkbox" className="hidden" />
<div
className={clsx(
"border-mti-purple-light flex h-4 w-4 items-center justify-center rounded-sm border bg-white",
"transition duration-300 ease-in-out",
rememberPassword && "!bg-mti-purple-light ",
)}
>
)}>
<BsCheck color="white" className="h-full w-full" />
</div>
<span>Remember my password</span>
</div>
<span
className="text-mti-purple-light cursor-pointer text-xs hover:underline"
onClick={forgotPassword}
>
<span className="text-mti-purple-light cursor-pointer text-xs hover:underline" onClick={forgotPassword}>
Forgot Password?
</span>
</div>
<Button
className="mt-8 w-full"
color="purple"
disabled={isLoading}
>
<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
{!isLoading && "Login"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat
className="animate-spin text-white"
size={25}
/>
<BsArrowRepeat className="animate-spin text-white" size={25} />
</div>
)}
</Button>
@@ -215,13 +173,7 @@ export default function Login() {
</span>
</>
)}
{user && !user.isVerified && (
<EmailVerification
user={user}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
)}
{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
</section>
</main>
</>

25
src/pages/record.tsx
View File

@@ -22,6 +22,7 @@ import {usePDFDownload} from "@/hooks/usePDFDownload";
import useRecordStore from "@/stores/recordStore";
import useTrainingContentStore from "@/stores/trainingContentStore";
import StatsGridItem from "@/components/StatGridItem";
import {checkAccess} from "@/utils/permissions";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -68,10 +69,9 @@ export default function History({user}: {user: User}) {
const {assignments} = useAssignments({});
const {users} = useUsers();
const {stats, isLoading: isStatsLoading} = useStats(user?.type === "student" ? user?.id : statsUserId);
const {stats, isLoading: isStatsLoading} = useStats(statsUserId || user?.id);
const {groups: allGroups} = useGroups({});
const groups = allGroups.filter((x) => x.admin === user.id);
const {groups} = useGroups({admin: user?.id, userType: user?.type});
const setExams = useExamStore((state) => state.setExams);
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
@@ -82,6 +82,8 @@ export default function History({user}: {user: User}) {
const renderPdfIcon = usePDFDownload("stats");
const router = useRouter();
useEffect(() => setStatsUserId(user.id), [setStatsUserId, user]);
useEffect(() => {
if (stats && !isStatsLoading) {
setGroupedStats(
@@ -197,6 +199,7 @@ export default function History({user}: {user: User}) {
const selectableCorporates = [
defaultSelectableCorporate,
...users
.filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id))
.filter((x) => x.type === "corporate")
.map((x) => ({
value: x.id,
@@ -208,26 +211,14 @@ export default function History({user}: {user: User}) {
const getUsersList = (): User[] => {
if (selectedCorporate) {
// get groups for that corporate
const selectedCorporateGroups = allGroups.filter((x) => x.admin === selectedCorporate);
// get the teacher ids for that group
const selectedCorporateGroupsParticipants = selectedCorporateGroups.flatMap((x) => x.participants);
// // search for groups for these teachers
// const teacherGroups = allGroups.filter((x) => {
// return selectedCorporateGroupsParticipants.includes(x.admin);
// });
// const usersList = [
// ...selectedCorporateGroupsParticipants,
// ...teacherGroups.flatMap((x) => x.participants),
// ];
const userListWithUsers = selectedCorporateGroupsParticipants.map((x) => users.find((y) => y.id === x)) as User[];
return userListWithUsers.filter((x) => x);
}
return users || [];
return user.type !== "mastercorporate" ? users : users.filter((x) => groups.flatMap((g) => [g.admin, ...g.participants]).includes(x.id));
};
const corporateFilteredUserList = getUsersList();
@@ -267,7 +258,7 @@ export default function History({user}: {user: User}) {
<Layout user={user}>
<div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
<div className="xl:w-3/4">
{(user.type === "developer" || user.type === "admin") && !training && (
{checkAccess(user, ["developer", "admin", "mastercorporate"]) && !training && (
<>
<label className="font-normal text-base text-mti-gray-dim">Corporate</label>

3
src/pages/register.tsx
View File

@@ -55,8 +55,7 @@ export default function Register({code: queryCode}: {code: string}) {
<main className="w-full h-[100vh] flex bg-white text-black">
<ToastContainer />
<section className="h-full w-fit min-w-fit relative hidden lg:flex">
<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
</section>
<section className="h-full w-full flex flex-col items-center justify-center gap-4">
<div className={clsx("flex flex-col items-center", !user && "mb-4")}>

55
src/pages/settings.tsx
View File

@@ -16,6 +16,11 @@ import ExamGenerator from "./(admin)/ExamGenerator";
import BatchCreateUser from "./(admin)/BatchCreateUser";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import usePermissions from "@/hooks/usePermissions";
import {useState} from "react";
import Modal from "@/components/Modal";
import IconCard from "@/dashboards/IconCard";
import {BsCode, BsCodeSquare, BsPeopleFill, BsPersonFill} from "react-icons/bs";
import UserCreator from "./(admin)/UserCreator";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -46,6 +51,8 @@ export default function Admin() {
const {user} = useUser({redirectTo: "/login"});
const {permissions} = usePermissions(user?.id || "");
const [modalOpen, setModalOpen] = useState<string>();
return (
<>
<Head>
@@ -60,14 +67,52 @@ export default function Admin() {
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)}>
<BatchCreateUser user={user} />
</Modal>
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
<CodeGenerator user={user} />
</Modal>
<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
<BatchCodeGenerator user={user} />
</Modal>
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
<UserCreator user={user} />
</Modal>
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
<ExamLoader />
<BatchCreateUser user={user} />
{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
<>
<CodeGenerator user={user} />
<BatchCodeGenerator user={user} />
</>
<div className="w-full grid grid-cols-2 gap-4">
<IconCard
Icon={BsCode}
label="Generate Single Code"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("createCode")}
/>
<IconCard
Icon={BsCodeSquare}
label="Generate Codes in Batch"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("batchCreateCode")}
/>
<IconCard
Icon={BsPersonFill}
label="Create Single User"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("createUser")}
/>
<IconCard
Icon={BsPeopleFill}
label="Create Users in Batch"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("batchCreateUser")}
/>
</div>
)}
</section>
<section className="w-full">

10
src/utils/codes.be.ts Normal file
View File

@@ -0,0 +1,10 @@
import {app} from "@/firebase";
import {Code} from "@/interfaces/user";
import {collection, getDocs, getFirestore, query, where} from "firebase/firestore";
const db = getFirestore(app);
export const getUserCodes = async (id: string): Promise<Code[]> => {
const codeDocs = await getDocs(query(collection(db, "codes"), where("creator", "==", id)));
return codeDocs.docs.map((x) => ({...(x.data() as Code), id})) as Code[];
};

107
src/utils/groups.be.ts
View File

@@ -1,29 +1,12 @@
import {app} from "@/firebase";
import {
CorporateUser,
Group,
StudentUser,
TeacherUser,
} from "@/interfaces/user";
import {
collection,
doc,
getDoc,
getDocs,
getFirestore,
query,
setDoc,
where,
} from "firebase/firestore";
import {CorporateUser, Group, StudentUser, TeacherUser} from "@/interfaces/user";
import {collection, doc, getDoc, getDocs, getFirestore, query, setDoc, where} from "firebase/firestore";
import moment from "moment";
import {getUser} from "./users.be";
import {getSpecificUsers} from "./users.be";
const db = getFirestore(app);
export const updateExpiryDateOnGroup = async (
participantID: string,
corporateID: string
) => {
export const updateExpiryDateOnGroup = async (participantID: string, corporateID: string) => {
const corporateRef = await getDoc(doc(db, "users", corporateID));
const participantRef = await getDoc(doc(db, "users", participantID));
@@ -33,36 +16,19 @@ export const updateExpiryDateOnGroup = async (
...corporateRef.data(),
id: corporateRef.id,
} as CorporateUser;
const participant = { ...participantRef.data(), id: participantRef.id } as
| StudentUser
| TeacherUser;
const participant = {...participantRef.data(), id: participantRef.id} as StudentUser | TeacherUser;
if (
corporate.type !== "corporate" ||
(participant.type !== "student" && participant.type !== "teacher")
)
return;
if (corporate.type !== "corporate" || (participant.type !== "student" && participant.type !== "teacher")) return;
if (
!corporate.subscriptionExpirationDate ||
!participant.subscriptionExpirationDate
) {
return await setDoc(
doc(db, "users", participant.id),
{ subscriptionExpirationDate: null },
{ merge: true }
);
if (!corporate.subscriptionExpirationDate || !participant.subscriptionExpirationDate) {
return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: null}, {merge: true});
}
const corporateDate = moment(corporate.subscriptionExpirationDate);
const participantDate = moment(participant.subscriptionExpirationDate);
if (corporateDate.isAfter(participantDate))
return await setDoc(
doc(db, "users", participant.id),
{ subscriptionExpirationDate: corporateDate.toISOString() },
{ merge: true }
);
return await setDoc(doc(db, "users", participant.id), {subscriptionExpirationDate: corporateDate.toISOString()}, {merge: true});
return;
};
@@ -73,47 +39,29 @@ export const getGroups = async () => {
};
export const getUserGroups = async (id: string): Promise<Group[]> => {
const groupDocs = await getDocs(
query(collection(db, "groups"), where("admin", "==", id))
);
const groupDocs = await getDocs(query(collection(db, "groups"), where("admin", "==", id)));
return groupDocs.docs.map((x) => ({...x.data(), id})) as Group[];
};
export const getAllAssignersByCorporate = async (
corporateID: string
): Promise<string[]> => {
export const getAllAssignersByCorporate = async (corporateID: string): Promise<string[]> => {
const groups = await getUserGroups(corporateID);
const groupUsers = (
await Promise.all(
groups.map(async (g) => await Promise.all(g.participants.map(getUser)))
)
).flat();
const groupUsers = (await Promise.all(groups.map(async (g) => await Promise.all(g.participants.map(getUser))))).flat();
const teacherPromises = await Promise.all(
groupUsers.map(async (u) =>
u.type === "teacher"
? u.id
: u.type === "corporate"
? [...(await getAllAssignersByCorporate(u.id)), u.id]
: undefined
)
u.type === "teacher" ? u.id : u.type === "corporate" ? [...(await getAllAssignersByCorporate(u.id)), u.id] : undefined,
),
);
return teacherPromises.filter((x) => !!x).flat() as string[];
};
export const getGroupsForUser = async (admin: string, participant: string) => {
export const getGroupsForUser = async (admin: string, participant?: string) => {
try {
const queryConstraints = [
...(admin ? [where("admin", "==", admin)] : []),
...(participant
? [where("participants", "array-contains", participant)]
: []),
...(participant ? [where("participants", "array-contains", participant)] : []),
];
const snapshot = await getDocs(
queryConstraints.length > 0
? query(collection(db, "groups"), ...queryConstraints)
: collection(db, "groups")
);
const snapshot = await getDocs(queryConstraints.length > 0 ? query(collection(db, "groups"), ...queryConstraints) : collection(db, "groups"));
const groups = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
@@ -126,23 +74,14 @@ export const getGroupsForUser = async (admin: string, participant: string) => {
}
};
export const getStudentGroupsForUsersWithoutAdmin = async (
admin: string,
participants: string[]
) => {
export const getStudentGroupsForUsersWithoutAdmin = async (admin: string, participants: string[]) => {
try {
const queryConstraints = [
...(admin ? [where("admin", "!=", admin)] : []),
...(participants
? [where("participants", "array-contains-any", participants)]
: []),
...(participants ? [where("participants", "array-contains-any", participants)] : []),
where("name", "==", "Students"),
];
const snapshot = await getDocs(
queryConstraints.length > 0
? query(collection(db, "groups"), ...queryConstraints)
: collection(db, "groups")
);
const snapshot = await getDocs(queryConstraints.length > 0 ? query(collection(db, "groups"), ...queryConstraints) : collection(db, "groups"));
const groups = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
@@ -157,17 +96,17 @@ export const getStudentGroupsForUsersWithoutAdmin = async (
export const getCorporateNameForStudent = async (studentID: string) => {
const groups = await getStudentGroupsForUsersWithoutAdmin("", [studentID]);
if (groups.length === 0) return '';
if (groups.length === 0) return "";
const adminUserIds = [...new Set(groups.map((g) => g.admin))];
const adminUsersData = await getSpecificUsers(adminUserIds);
if(adminUsersData.length === 0) return '';
const admins = adminUsersData.filter((x) => x.type === 'corporate');
if (adminUsersData.length === 0) return "";
const admins = adminUsersData.filter((x) => x.type === "corporate");
if (admins.length > 0) {
return (admins[0] as CorporateUser).corporateInformation.companyInformation.name;
}
return '';
return "";
};

2
src/utils/permissions.ts
View File

@@ -9,12 +9,10 @@ export function checkAccess(user: User, types: Type[], permissions?: PermissionT
// if(user.type === '') {
if (!user.type) {
console.warn("User type is empty");
return false;
}
if (types.length === 0) {
console.warn("No types provided");
return false;
}

38
src/utils/users.be.ts
View File

@@ -1,15 +1,10 @@
import {app} from "@/firebase";
import {
collection,
doc,
getDoc,
getDocs,
getFirestore,
query,
where,
} from "firebase/firestore";
import { User } from "@/interfaces/user";
import {collection, doc, getDoc, getDocs, getFirestore, query, where} from "firebase/firestore";
import {CorporateUser, Group, User} from "@/interfaces/user";
import {getGroupsForUser} from "./groups.be";
import {uniq, uniqBy} from "lodash";
import {getUserCodes} from "./codes.be";
const db = getFirestore(app);
export async function getUsers() {
@@ -30,9 +25,7 @@ export async function getUser(id: string) {
export async function getSpecificUsers(ids: string[]) {
if (ids.length === 0) return [];
const snapshot = await getDocs(
query(collection(db, "users"), where("id", "in", ids))
);
const snapshot = await getDocs(query(collection(db, "users"), where("id", "in", ids)));
const groups = snapshot.docs.map((doc) => ({
id: doc.id,
@@ -41,3 +34,22 @@ export async function getSpecificUsers(ids: string[]) {
return groups;
}
export async function getUserBalance(user: User) {
const codes = await getUserCodes(user.id);
if (user.type !== "corporate" && user.type !== "mastercorporate") return codes.length;
const groups = await getGroupsForUser(user.id);
const participants = uniq(groups.flatMap((x) => x.participants));
if (user.type === "corporate") return participants.length + codes.length;
const participantUsers = await Promise.all(participants.map(getUser));
const corporateUsers = participantUsers.filter((x) => x.type === "corporate") as CorporateUser[];
return (
corporateUsers.reduce((acc, curr) => acc + curr.corporateInformation?.companyInformation?.userAmount || 0, 0) +
corporateUsers.length +
codes.length
);
}