Finished up a wizard to create Assignments

src/components/Low/ProgressBar.tsx

@@ -33,7 +33,7 @@ export default function ProgressBar({label, percentage, color, useColor = false,
 				style={{width: `${percentage}%`}}
 				className={clsx("absolute transition-all duration-300 ease-in-out top-0 left-0 h-full overflow-hidden", progressColorClass[color])}
 			/>
-			<span className={clsx("z-10 justify-self-center text-white text-sm font-bold", textClassName)}>{label}</span>
+			<span className={clsx("z-[1] justify-self-center text-white text-sm font-bold", textClassName)}>{label}</span>
 		</div>
 	);
 }

src/components/UserCard.tsx

@@ -5,6 +5,7 @@ import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import moment from "moment";
+import {Divider} from "primereact/divider";
 import {useState} from "react";
 import ReactDatePicker from "react-datepicker";
 import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
@@ -24,12 +25,14 @@ const expirationDateColor = (date: Date) => {
 	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
-const UserCard = ({
-	onClose,
-	onViewStudents,
-	onViewTeachers,
-	...user
-}: User & {onClose: (reload?: boolean) => void; onViewStudents?: () => void; onViewTeachers?: () => void}) => {
+interface Props {
+	user: User;
+	onClose: (reload?: boolean) => void;
+	onViewStudents?: () => void;
+	onViewTeachers?: () => void;
+}
+
+const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const {stats} = useStats(user.id);
 
@@ -218,6 +221,31 @@ const UserCard = ({
 						</div>
 					</div>
 				</div>
+				{user.corporateInformation && (
+					<>
+						<Divider className="w-full" />
+						<div className="flex flex-col md:flex-row gap-8 w-full">
+							<Input
+								label="Company Name"
+								type="text"
+								name="companyName"
+								onChange={() => null}
+								placeholder="Enter company name"
+								defaultValue={user.corporateInformation.companyInformation.name}
+								disabled
+							/>
+							<Input
+								label="Amount of Users"
+								type="number"
+								name="userAmount"
+								onChange={() => null}
+								placeholder="Enter amount of users"
+								defaultValue={user.corporateInformation.companyInformation.userAmount}
+								disabled
+							/>
+						</div>
+					</>
+				)}
 			</section>
 
 			<div className="flex gap-4 justify-between mt-4 w-full">