apps/backend/.env.example

@@ -1,7 +1,14 @@
+BASE_URL =
 APP_PORT = 3000
 
 DATABASE_URL = 
 
 ACCESS_TOKEN_SECRET = 
 REFRESH_TOKEN_SECRET = 
-COOKIE_SECRET = 
+RESET_PASSWORD_TOKEN_SECRET =
+COOKIE_SECRET = 
+
+SMTP_USERNAME =
+SMTP_PASSWORD =
+SMTP_HOST =
+SMTP_PORT =

apps/backend/package.json

@@ -19,6 +19,7 @@
 		"hono": "^4.4.6",
 		"jsonwebtoken": "^9.0.2",
 		"moment": "^2.30.1",
+		"nodemailer": "^6.9.14",
 		"postgres": "^3.4.4",
 		"sharp": "^0.33.4",
 		"zod": "^3.23.8"
@@ -27,6 +28,7 @@
 		"@types/bcrypt": "^5.0.2",
 		"@types/jsonwebtoken": "^9.0.6",
 		"@types/node": "^20.14.2",
+		"@types/nodemailer": "^6.4.15",
 		"drizzle-kit": "^0.22.7",
 		"pg": "^8.12.0",
 		"tsx": "^4.15.5",

apps/backend/src/appEnv.ts

@@ -4,11 +4,17 @@ import { z } from "zod";
 dotenv.config();
 
 const envSchema = z.object({
+	BASE_URL: z.string(),
 	APP_PORT: z.coerce.number().int(),
 	DATABASE_URL: z.string(),
 	ACCESS_TOKEN_SECRET: z.string(),
 	REFRESH_TOKEN_SECRET: z.string(),
+	RESET_PASSWORD_TOKEN_SECRET: z.string(),
 	COOKIE_SECRET: z.string(),
+	SMTP_USERNAME: z.string(),
+	SMTP_PASSWORD: z.string(),
+	SMTP_HOST: z.string(),
+	SMTP_PORT: z.coerce.number().int(),
 });
 
 const parsedEnv = envSchema.safeParse(process.env);

apps/backend/src/data/permissions.ts

@@ -62,6 +62,48 @@ const permissionsData = [
 	{
 		code: "managementAspect.restore",
 	},
+	{
+		code: "assessmentResult.readAll",
+	},
+	{
+		code: "assessmentResult.read",
+	},
+	{
+		code: "assessmentResult.readAllQuestions",
+	},
+	{
+		code: "assessmentResult.create",
+	},
+  {
+		code: "assessmentRequest.read",
+	},
+	{
+		code: "assessmentRequest.create",
+  },
+  {
+		code: "assessments.readAssessmentScore",
+	},
+	{
+		code: "assessments.readAllQuestions",
+	},
+	{
+		code: "assessments.readAnswers",
+	},
+	{
+		code: "assessments.toggleFlag",
+	},
+	{
+		code: "assessments.checkAnswer",
+	},
+	{
+		code: "assessments.uploadFile",
+	},
+	{
+		code: "assessments.submitAnswer",
+	},
+	{
+		code: "assessments.updateAnswer",
+	},
 ] as const;
 
 export type SpecificPermissionCode = (typeof permissionsData)[number]["code"];

apps/backend/src/drizzle/schema/assessments.ts

@@ -4,7 +4,7 @@ import { relations } from "drizzle-orm";
 import { respondents } from "./respondents";
 import { users } from "./users";
 
-const statusEnum = pgEnum("status", ["tertunda", "disetujui", "ditolak", "selesai"]);
+const statusEnum = pgEnum("status", ["menunggu konfirmasi", "disetujui", "ditolak", "selesai"]);
 
 export const assessments = pgTable("assessments", {
     id: varchar("id", { length: 50 })
@@ -14,10 +14,9 @@ export const assessments = pgTable("assessments", {
     status: statusEnum("status"),
     reviewedBy: varchar("reviewedBy"),
     reviewedAt: timestamp("reviewedAt", { mode: "date" }),
-    validatedBy: varchar("validatedBy").notNull(),
+    validatedBy: varchar("validatedBy"),
     validatedAt: timestamp("validatedAt", { mode: "date" }),
     createdAt: timestamp("createdAt", { mode: "date" }).defaultNow(), 
-     
 });
 // Query Tools in PosgreSQL
-// CREATE TYPE status AS ENUM ('tertunda', 'disetujui', 'ditolak', 'selesai');
+// CREATE TYPE status AS ENUM ('menunggu konfirmasi', 'disetujui', 'ditolak', 'selesai');

apps/backend/src/drizzle/schema/users.ts

@@ -20,6 +20,7 @@ export const users = pgTable("users", {
 	email: varchar("email"),
 	password: text("password").notNull(),
 	isEnabled: boolean("isEnabled").default(true),
+	resetPasswordToken: varchar("resetPasswordToken"),
 	createdAt: timestamp("createdAt", { mode: "date" }).defaultNow(),
 	updatedAt: timestamp("updatedAt", { mode: "date" }).defaultNow(),
 	deletedAt: timestamp("deletedAt", { mode: "date" }),

apps/backend/src/index.ts

@@ -18,6 +18,10 @@ import HonoEnv from "./types/HonoEnv";
 import devRoutes from "./routes/dev/route";
 import appEnv from "./appEnv";
 import questionsRoute from "./routes/questions/route";
+import assessmentResultRoute from "./routes/assessmentResult/route";
+import assessmentRequestRoute from "./routes/assessmentRequest/route";
+import forgotPasswordRoutes from "./routes/forgotPassword/route";
+import assessmentsRoute from "./routes/assessments/route";
 import assessmentsRequestManagementRoutes from "./routes/assessmentRequestManagement/route";
 
 configDotenv();
@@ -85,6 +89,10 @@ const routes = app
 	.route("/questions", questionsRoute)
 	.route("/management-aspect", managementAspectsRoute)
 	.route("/register", respondentsRoute)
+	.route("/assessmentResult", assessmentResultRoute)
+	.route("/assessmentRequest", assessmentRequestRoute)
+	.route("/forgot-password", forgotPasswordRoutes)
+	.route("/assessments", assessmentsRoute)
 	.onError((err, c) => {
 		if (err instanceof DashboardError) {
 			return c.json(

apps/backend/src/routes/assessmentRequest/route.ts

@@ -0,0 +1,105 @@
+import { eq } from "drizzle-orm";
+import { Hono } from "hono";
+import { z } from "zod";
+import db from "../../drizzle";
+import { respondents } from "../../drizzle/schema/respondents";
+import { assessments } from "../../drizzle/schema/assessments";
+import { users } from "../../drizzle/schema/users";
+import { rolesToUsers } from "../../drizzle/schema/rolesToUsers";
+import { rolesSchema } from "../../drizzle/schema/roles";
+import HonoEnv from "../../types/HonoEnv";
+import authInfo from "../../middlewares/authInfo";
+import { notFound } from "../../errors/DashboardError";
+import checkPermission from "../../middlewares/checkPermission";
+import requestValidator from "../../utils/requestValidator";
+import { HTTPException } from "hono/http-exception";
+import { createId } from "@paralleldrive/cuid2";
+
+const assessmentRequestRoute = new Hono<HonoEnv>()
+    .use(authInfo)
+
+    // Get assessment request by user ID
+    .get(
+        "/:id",
+        checkPermission("assessmentRequest.read"),
+        requestValidator(
+            "query",
+            z.object({
+                includeTrashed: z.string().default("false"),
+            })
+        ),
+        async (c) => {
+            const userId = c.req.param("id");
+
+            const queryResult = await db
+                .select({
+                    userId: users.id,
+                    createdAt: assessments.createdAt,
+                    name: users.name,
+                    code: rolesSchema.code,
+                    status: assessments.status,
+                })
+                .from(users)
+                .leftJoin(rolesToUsers, eq(users.id, rolesToUsers.userId))
+                .leftJoin(rolesSchema, eq(rolesToUsers.roleId, rolesSchema.id))
+                .leftJoin(respondents, eq(users.id, respondents.userId))
+                .leftJoin(assessments, eq(respondents.id, assessments.respondentId))
+                .where(eq(users.id, userId));
+
+            if (!queryResult[0]) throw notFound();
+
+            const assessmentRequestData = {
+                ...queryResult,
+            };
+
+            return c.json(assessmentRequestData);
+        }
+    )
+
+    // Post assessment request by user ID
+    .post(
+        "/:id",
+        checkPermission("assessmentRequest.create"),
+        requestValidator(
+            "json",
+            z.object({
+                respondentId: z.string().min(1),
+            })
+        ),
+        async (c) => {
+            const { respondentId } = c.req.valid("json");
+            const userId = c.req.param("id");
+
+            // Make sure the userId exists
+            if (!userId) {
+                throw new HTTPException(400, { message: "User ID is required." });
+            }
+
+            // Validate if respondent exists
+            const respondent = await db
+                .select()
+                .from(respondents)
+                .where(eq(respondents.id, respondentId));
+
+            if (!respondent.length) {
+                throw new HTTPException(404, { message: "Respondent not found." });
+            }
+
+            // Create the assessment request
+            const newAssessment = await db
+                .insert(assessments)
+                .values({
+                    id: createId(),
+                    respondentId,
+                    status: "menunggu konfirmasi",
+                    validatedBy: null,
+                    validatedAt: null,
+                    createdAt: new Date(),
+                })
+                .returning();
+
+            return c.json({ message: "Successfully submitted the assessment request" }, 201);
+        }
+    );
+
+export default assessmentRequestRoute;

apps/backend/src/routes/assessmentResult/route.ts

@@ -0,0 +1,238 @@
+import { and, eq, isNull, sql } from "drizzle-orm";
+import { Hono } from "hono";
+import { z } from "zod";
+import db from "../../drizzle";
+import { assessments } from "../../drizzle/schema/assessments";
+import { respondents } from "../../drizzle/schema/respondents";
+import { users } from "../../drizzle/schema/users";
+import { aspects } from "../../drizzle/schema/aspects";
+import { subAspects } from "../../drizzle/schema/subAspects";
+import { questions } from "../../drizzle/schema/questions";
+import { options } from "../../drizzle/schema/options";
+import { answers } from "../../drizzle/schema/answers";
+import { answerRevisions } from "../../drizzle/schema/answerRevisions";
+import HonoEnv from "../../types/HonoEnv";
+import authInfo from "../../middlewares/authInfo";
+import checkPermission from "../../middlewares/checkPermission";
+import requestValidator from "../../utils/requestValidator";
+import { notFound } from "../../errors/DashboardError";
+
+const assessmentRoute = new Hono<HonoEnv>()
+  .use(authInfo)
+
+  // Get All List of Assessment Results
+  .get(
+    "/",
+    checkPermission("assessmentResult.readAll"),
+    requestValidator(
+      "query",
+      z.object({
+        page: z.coerce.number().int().min(0).default(0),
+        limit: z.coerce.number().int().min(1).max(1000).default(40),
+      })
+    ),
+    async (c) => {
+      const { page, limit } = c.req.valid("query");
+
+      const result = await db
+        .select({
+          id: assessments.id,
+          respondentName: users.name,
+          companyName: respondents.companyName,
+          statusAssessments: assessments.status,
+          statusVerification: sql<string>`
+            CASE
+              WHEN ${assessments.validatedAt} IS NOT NULL THEN 'sudah diverifikasi'
+              ELSE 'belum diverifikasi'
+            END`
+          .as("statusVerification"),
+          assessmentsResult: sql<number>`
+            (SELECT ROUND(AVG(${options.score}), 2)
+              FROM ${answers}
+              JOIN ${options} ON ${options.id} = ${answers.optionId}
+              JOIN ${questions} ON ${questions.id} = ${options.questionId}
+              JOIN ${subAspects} ON ${subAspects.id} = ${questions.subAspectId}
+              JOIN ${aspects} ON ${aspects.id} = ${subAspects.aspectId}
+              WHERE ${answers.assessmentId} = ${assessments.id})`
+          .as("assessmentsResult"),
+        })
+        .from(assessments)
+        .leftJoin(respondents, eq(assessments.respondentId, respondents.id))
+        .leftJoin(users, eq(respondents.userId, users.id)) 
+        .offset(page * limit)
+        .limit(limit);
+
+      const totalItems = await db
+        .select({
+          count: sql<number>`COUNT(*)`,
+        })
+        .from(assessments);
+
+      return c.json({
+        data: result,
+        _metadata: {
+          currentPage: page,
+          totalPages: Math.ceil(totalItems[0].count / limit),
+          totalItems: totalItems[0].count,
+          perPage: limit,
+        },
+      });
+    }
+  )
+
+  // Get Assessment Result by ID
+  .get(
+    "/:id",
+    checkPermission("assessmentResult.read"),
+    async (c) => {
+      const assessmentId = c.req.param("id");
+
+      const result = await db
+        .select({
+          respondentName: users.name,           
+          position: respondents.position,       
+          workExperience: respondents.workExperience, 
+          email: users.email,                   
+          companyName: respondents.companyName, 
+          address: respondents.address,         
+          phoneNumber: respondents.phoneNumber, 
+          username: users.username,             
+          assessmentDate: assessments.createdAt, 
+          statusAssessment: assessments.status, 
+          assessmentsResult: sql<number>`
+            (SELECT ROUND(AVG(${options.score}), 2)
+              FROM ${answers}
+              JOIN ${options} ON ${options.id} = ${answers.optionId}
+              JOIN ${questions} ON ${questions.id} = ${options.questionId}
+              JOIN ${subAspects} ON ${subAspects.id} = ${questions.subAspectId}
+              JOIN ${aspects} ON ${aspects.id} = ${subAspects.aspectId}
+              WHERE ${answers.assessmentId} = ${assessments.id})`
+          .as("assessmentsResult"),
+        })
+        .from(assessments)
+        .leftJoin(respondents, eq(assessments.respondentId, respondents.id))
+        .leftJoin(users, eq(respondents.userId, users.id))
+        .where(eq(assessments.id, assessmentId));
+
+      if (!result.length) {
+        throw notFound({
+          message: "Assessment not found",
+        });
+      }
+
+      return c.json(result[0]);
+    }
+  )
+
+  // Get all Questions and Options that relate to Sub Aspects and Aspects based on Assessment ID
+  .get(
+    "getAllQuestion/:id",
+    checkPermission("assessmentResult.readAllQuestions"),
+    async (c) => {
+      const assessmentId = c.req.param("id");
+
+      if (!assessmentId) {
+        throw notFound({
+          message: "Assessment ID is missing",
+        });
+      }
+  
+      // Total count of options related to the assessment
+      const totalCountQuery = sql<number>`
+        SELECT count(*)
+        FROM ${options}
+        LEFT JOIN ${questions} ON ${options.questionId} = ${questions.id}
+        LEFT JOIN ${subAspects} ON ${questions.subAspectId} = ${subAspects.id}
+        LEFT JOIN ${aspects} ON ${subAspects.aspectId} = ${aspects.id}
+        LEFT JOIN ${answers} ON ${options.id} = ${answers.optionId}
+        WHERE ${questions.deletedAt} IS NULL
+        AND ${answers.assessmentId} = ${assessmentId}
+      `;
+  
+      // Query to get detailed information about options
+      const result = await db
+        .select({
+          optionId: options.id,
+          aspectsId: aspects.id,
+          aspectsName: aspects.name,
+          subAspectId: subAspects.id,
+          subAspectName: subAspects.name,
+          questionId: questions.id,
+          questionText: questions.question,
+          answerId: answers.id,
+          answerText: options.text,
+          answerScore: options.score,
+        })
+        .from(options)
+        .leftJoin(questions, eq(options.questionId, questions.id))
+        .leftJoin(subAspects, eq(questions.subAspectId, subAspects.id))
+        .leftJoin(aspects, eq(subAspects.aspectId, aspects.id))
+        .leftJoin(answers, eq(options.id, answers.optionId))
+        .where(sql`${questions.deletedAt} IS NULL AND ${answers.assessmentId} = ${assessmentId}`);
+  
+      // Execute the total count query
+      const totalCountResult = await db.execute(totalCountQuery);
+
+      if (result.length === 0) {
+        throw notFound({
+          message: "Data does not exist",
+        });
+      }
+  
+      return c.json({
+        data: result,
+        totalCount: totalCountResult[0]?.count || 0
+      });
+    }
+  )
+  
+  // POST Endpoint for creating a new answer revision
+  .post(
+    "/answer-revisions",
+    checkPermission("assessmentResult.create"),
+    requestValidator(
+      "json",
+      z.object({
+        answerId: z.string(),
+        newOptionId: z.string(),
+        revisedBy: z.string(),
+        newValidationInformation: z.string(),
+      })
+    ),
+    async (c) => {
+      const { answerId, newOptionId, revisedBy, newValidationInformation } = c.req.valid("json");
+
+      // Check if the answer exists
+      const existingAnswer = await db
+        .select()
+        .from(answers)
+        .where(eq(answers.id, answerId));
+      
+      if (!existingAnswer.length) {
+        throw notFound({
+          message: "Answer not found",
+        });
+      }
+
+      // Insert new revision
+      const [newRevision] = await db
+        .insert(answerRevisions)
+        .values({
+          answerId,
+          newOptionId,
+          revisedBy,
+          newValidationInformation
+        })
+        .returning();
+
+      return c.json(
+        {
+          message: "Answer revision created successfully",
+          data: newRevision
+        },
+        201
+      );
+    }
+  );
+
+export default assessmentRoute;

apps/backend/src/routes/assessments/route.ts

@@ -0,0 +1,536 @@
+import { and, eq, ilike, or, sql } from "drizzle-orm";
+import { Hono } from "hono";
+import { z } from "zod";
+import db from "../../drizzle";
+import { answers } from "../../drizzle/schema/answers";
+import { options } from "../../drizzle/schema/options";
+import { questions } from "../../drizzle/schema/questions";
+import { subAspects } from "../../drizzle/schema/subAspects";
+import { aspects } from "../../drizzle/schema/aspects";
+import { assessments } from "../../drizzle/schema/assessments";
+import HonoEnv from "../../types/HonoEnv";
+import requestValidator from "../../utils/requestValidator";
+import authInfo from "../../middlewares/authInfo";
+import checkPermission from "../../middlewares/checkPermission";
+import path from "path";
+import fs from 'fs';
+import { notFound } from "../../errors/DashboardError";
+
+export const answerFormSchema = z.object({
+    optionId: z.string().min(1),
+    assessmentId: z.string().min(1),
+    isFlagged: z.boolean().optional().default(false),
+    filename: z.string().optional(),
+    validationInformation: z.string().min(1),
+});
+
+export const answerUpdateSchema = answerFormSchema.partial();
+
+// Helper function to save the file
+async function saveFile(filePath: string, fileBuffer: Buffer): Promise<void> {
+    await fs.promises.writeFile(filePath, fileBuffer);
+}
+
+// Function to update the filename in the database
+async function updateFilenameInDatabase(answerId: string, filename: string): Promise<void> {
+
+    await db.update(answers)
+        .set({ filename })
+        .where(eq(answers.id, answerId));
+}
+
+const assessmentsRoute = new Hono<HonoEnv>()
+    .use(authInfo)
+
+    // Get data for current Assessment Score from submitted options By Assessment Id
+    .get(
+        "/getCurrentAssessmentScore",
+        checkPermission("assessments.readAssessmentScore"),
+        requestValidator(
+            "query",
+            z.object({
+                assessmentId: z.string(),
+            })
+        ),
+        async (c) => {
+            const { assessmentId } = c.req.valid("query");
+    
+            // Query to sum the scores of selected options for the current assessment
+            const result = await db
+                .select({
+                    totalScore: sql<number>`SUM(${options.score})`,
+                })
+                .from(answers)
+                .leftJoin(options, eq(answers.optionId, options.id))
+                .where(eq(answers.assessmentId, assessmentId))
+                .execute();
+    
+            return c.json({
+                assessmentId,
+                totalScore: result[0]?.totalScore ?? 0, // Return 0 if no answers are found
+            });
+        }
+    )
+    
+    // Get all Questions and Options that relate to Sub Aspects and Aspects
+    .get(
+        "/getAllQuestions",
+        checkPermission("assessments.readAllQuestions"),
+        async (c) => {
+            const totalCountQuery = 
+                sql<number>`(SELECT count(*) 
+                    FROM ${options}
+                    LEFT JOIN ${questions} ON ${options.questionId} = ${questions.id}
+                    LEFT JOIN ${subAspects} ON ${questions.subAspectId} = ${subAspects.id}
+                    LEFT JOIN ${aspects} ON ${subAspects.aspectId} = ${aspects.id}
+                    WHERE ${questions.deletedAt} IS NULL
+                )`;
+
+            const result = await db
+                .select({
+                    optionId: options.id,
+                    aspectsId: aspects.id,
+                    aspectsName: aspects.name,
+                    subAspectId: subAspects.id,
+                    subAspectName: subAspects.name,
+                    questionId: questions.id,
+                    questionText: questions.question,
+                    optionText: options.text,
+                    optionScore: options.score,
+                    fullCount: totalCountQuery,
+                })
+                .from(options)
+                .leftJoin(questions, eq(options.questionId, questions.id))
+                .leftJoin(subAspects, eq(questions.subAspectId, subAspects.id))
+                .leftJoin(aspects, eq(subAspects.aspectId, aspects.id))
+                .where(sql`${questions.deletedAt} IS NULL`)
+
+            return c.json({
+                data: result.map((d) => (
+                    { 
+                        ...d, 
+                        fullCount: undefined 
+                    }
+                )),
+            });
+        }
+    )
+
+    // Get all Answers Data by Assessment Id
+    .get(
+        "/getAnswers",
+        checkPermission("assessments.readAnswers"),
+        requestValidator(
+            "query",
+            z.object({
+                assessmentId: z.string(), // Require assessmentId as a query parameter
+                withMetadata: z
+                    .string()
+                    .optional()
+                    .transform((v) => v?.toLowerCase() === "true"),
+                page: z.coerce.number().int().min(0).default(0),
+                limit: z.coerce.number().int().min(1).max(1000).default(1000),
+                q: z.string().default(""),
+            })
+        ),
+        async (c) => {
+            const { assessmentId, page, limit, q } = c.req.valid("query");
+    
+            // Query to count total answers for the specific assessmentId
+            const totalCountQuery = 
+                sql<number>`(SELECT count(*) 
+                    FROM ${answers} 
+                    WHERE ${answers.assessmentId} = ${assessmentId})`;
+    
+            // Query to retrieve answers for the specific assessmentId
+            const result = await db
+                .select({
+                    id: answers.id,
+                    assessmentId: answers.assessmentId,
+                    optionId: answers.optionId,
+                    isFlagged: answers.isFlagged,
+                    filename: answers.filename,
+                    validationInformation: answers.validationInformation,
+                    fullCount: totalCountQuery,
+                })
+                .from(answers)
+                .where(
+                    and(
+                        eq(answers.assessmentId, assessmentId), // Filter by assessmentId
+                        q
+                            ? or(
+                                    ilike(answers.filename, q),
+                                    ilike(answers.validationInformation, q),
+                                    eq(answers.id, q)
+                                )
+                            : undefined
+                    )
+                )
+                .offset(page * limit)
+                .limit(limit);
+    
+            return c.json({
+                data: result.map((d) => ({ ...d, fullCount: undefined })),
+                _metadata: {
+                    currentPage: page,
+                    totalPages: Math.ceil(
+                        (Number(result[0]?.fullCount) ?? 0) / limit
+                    ),
+                    totalItems: Number(result[0]?.fullCount) ?? 0,
+                    perPage: limit,
+                },
+            });
+        }
+    )
+
+    // Toggles the isFlagged field between true and false 
+    .patch(
+        "/:id/toggleFlag",
+        checkPermission("assessments.toggleFlag"),
+        async (c) => {
+            const answerId = c.req.param("id");
+    
+            // Retrieve the current state of isFlagged
+            const currentAnswer = await db
+                .select({
+                    isFlagged: answers.isFlagged,
+                })
+                .from(answers)
+                .where(eq(answers.id, answerId))
+                .limit(1);
+    
+            if (!currentAnswer.length) {
+                throw notFound(
+                    {
+                        message: "Answer not found",
+                    }
+                )
+            }
+    
+            // Toggle the isFlagged value
+            const newIsFlaggedValue = !currentAnswer[0].isFlagged;
+    
+            // Update the answer with the toggled value
+            const updatedAnswer = await db
+                .update(answers)
+                .set({
+                    isFlagged: newIsFlaggedValue,
+                })
+                .where(eq(answers.id, answerId))
+                .returning();
+    
+            if (!updatedAnswer.length) {
+                throw notFound(
+                    {
+                        message: "Failed to update answer",
+                    }
+                )
+            }
+    
+            return c.json(
+                {
+                    message: "Answer flag toggled successfully",
+                    answer: updatedAnswer[0],
+                },
+                200
+            );
+        }
+    )    
+
+    // Get data answers from table answers by optionId and assessmentId
+    .post(
+        "/checkDataAnswer",
+        checkPermission("assessments.checkAnswer"),
+        async (c) => {
+            const { optionId, assessmentId } = await c.req.json();
+    
+            const result = await db
+                .select()
+                .from(answers)
+                .where(
+                    and(eq(answers.optionId, optionId), eq(answers.assessmentId, assessmentId))
+                )
+                .execute();
+    
+            const existingAnswer = result[0];
+            let response;
+    
+            if (existingAnswer) {
+                response = { 
+                    exists: true, 
+                    answerId: existingAnswer.id 
+                };
+            } else {
+                response = { 
+                    exists: false 
+                };
+            }
+    
+            return c.json(response);
+        }
+    )    
+
+    // Upload filename to the table answers and save the file on the local storage
+    .post(
+        "/uploadFile",
+        checkPermission("assessments.uploadFile"),
+        async (c) => {
+            // Get the Content-Type header
+            const contentType = c.req.header('content-type');
+            if (!contentType || !contentType.includes('multipart/form-data')) {
+                throw notFound({
+                    message: "Invalid Content-Type",
+                });
+            }
+    
+            // Extract boundary
+            const boundary = contentType.split('boundary=')[1];
+            if (!boundary) {
+                throw notFound({
+                    message: "Boundary not found",
+                });
+            }
+    
+            // Get the raw body
+            const body = await c.req.arrayBuffer();
+            const bodyString = Buffer.from(body).toString();
+    
+            // Split the body by the boundary
+            const parts = bodyString.split(`--${boundary}`);
+    
+            let fileUrl = null;
+    
+            for (const part of parts) {
+                if (part.includes('Content-Disposition: form-data;')) {
+                    // Extract file name
+                    const match = /filename="(.+?)"/.exec(part);
+                    if (match) {
+                        const fileName = match[1];
+                        const fileContentStart = part.indexOf('\r\n\r\n') + 4;
+                        const fileContentEnd = part.lastIndexOf('\r\n');
+    
+                        // Extract file content as Buffer
+                        const fileBuffer = Buffer.from(part.slice(fileContentStart, fileContentEnd), 'binary');
+    
+                        // Define file path and save the file
+                        const filePath = path.join('images', Date.now() + '-' + fileName);
+                        await saveFile(filePath, fileBuffer);
+    
+                        // Assuming answerId is passed as a query parameter or in the form-data
+                        const answerId = c.req.query('answerId');
+                        if (!answerId) {
+                            throw notFound({
+                                message: "answerId is required",
+                            });
+                        }
+    
+                        await updateFilenameInDatabase(answerId, path.basename(filePath));
+    
+                        // Set the file URL for the final response
+                        fileUrl = `/images/${path.basename(filePath)}`;
+                    }
+                }
+            }
+    
+            if (!fileUrl) {
+                throw notFound({
+                    message: 'No file uploaded',
+                });
+            }
+    
+            return c.json(
+                { 
+                    success: true, 
+                    imageUrl: fileUrl 
+                }
+            );
+        }
+    )    
+
+    // Submit option to table answers from use-form in frontend
+    .post(
+        "/submitAnswer",
+        checkPermission("assessments.submitAnswer"),
+        requestValidator("json", answerFormSchema),
+        async (c) => {
+            const answerData = c.req.valid("json");
+
+            const answer = await db
+                .insert(answers)
+                .values({
+                    optionId: answerData.optionId,
+                    assessmentId: answerData.assessmentId,
+                    isFlagged: answerData.isFlagged,
+                    filename: answerData.filename,
+                    validationInformation: answerData.validationInformation,
+                })
+                .returning();
+
+            return c.json(
+                {
+                    message: "Answer created successfully",
+                    answer: answer[0],
+                },
+                201
+            );
+        }
+    )
+
+    // Update answer in table answers if answer changes
+    .patch(
+        "/:id/updateAnswer",
+        checkPermission("assessments.updateAnswer"),
+        requestValidator("json", answerUpdateSchema),
+        async (c) => {
+            const answerId = c.req.param("id");
+            const answerData = c.req.valid("json");
+            
+            const updatedAnswer = await db
+                .update(answers)
+                .set({
+                    optionId: answerData.optionId,
+                })
+                .where(eq(answers.id, answerId))
+                .returning();
+    
+            if (!updatedAnswer.length) {
+                throw notFound({
+                    message: "Answer not found or update failed"
+                })
+            }
+
+            return c.json({  
+                message: "Answer updated successfully",  
+                answer: updatedAnswer[0],  
+            });
+        }
+    )
+
+    // Get data for One Sub Aspect average score By Sub Aspect Id and Assessment Id
+    .get(
+        '/average-score/sub-aspects/:subAspectId/assessments/:assessmentId', 
+        // checkPermission("assessments.readAssessmentScore"),
+        async (c) => {
+            const { subAspectId, assessmentId } = c.req.param();
+        
+            const averageScore = await db
+                .select({
+                    subAspectName: subAspects.name,
+                    average: sql`AVG(options.score)`
+                })
+                .from(answers)
+                .innerJoin(options, eq(answers.optionId, options.id))
+                .innerJoin(questions, eq(options.questionId, questions.id))
+                .innerJoin(subAspects, eq(questions.subAspectId, subAspects.id))
+                .innerJoin(assessments, eq(answers.assessmentId, assessments.id))
+                .where(
+                    sql`sub_aspects.id = ${subAspectId} AND assessments.id = ${assessmentId}`
+                )
+                .groupBy(subAspects.id);
+        
+            return c.json({
+                subAspectId,
+                subAspectName: averageScore[0].subAspectName,
+                assessmentId,
+                averageScore: averageScore.length > 0 ? averageScore[0].average : 0
+            });
+        }
+    )
+
+     // Get data for All Sub Aspects average score By Assessment Id
+    .get(
+        '/average-score/sub-aspects/assessments/:assessmentId', 
+        // checkPermission("assessments.readAssessmentScore"),
+        async (c) => {
+            const { assessmentId } = c.req.param();
+        
+            const averageScores = await db
+                .select({
+                    subAspectId: subAspects.id,
+                    subAspectName: subAspects.name,
+                    average: sql`AVG(options.score)`
+                })
+                .from(answers)
+                .innerJoin(options, eq(answers.optionId, options.id))
+                .innerJoin(questions, eq(options.questionId, questions.id))
+                .innerJoin(subAspects, eq(questions.subAspectId, subAspects.id))
+                .innerJoin(assessments, eq(answers.assessmentId, assessments.id))
+                .where(eq(assessments.id, assessmentId))
+                .groupBy(subAspects.id);
+        
+            return c.json({
+                assessmentId,
+                subAspects: averageScores.map(score => ({
+                    subAspectId: score.subAspectId,
+                    subAspectName: score.subAspectName,
+                    averageScore: score.average
+                }))
+            });
+        }
+    )
+
+    // Get data for One Aspect average score By Aspect Id and Assessment Id
+    .get(
+        "/average-score/aspects/:aspectId/assessments/:assessmentId", 
+        async (c) => {
+            const { aspectId, assessmentId } = c.req.param();
+        
+            const averageScore = await db
+                .select({
+                    aspectName: aspects.name,
+                    average: sql`AVG(options.score)`
+                })
+                .from(answers)
+                .innerJoin(options, eq(answers.optionId, options.id))
+                .innerJoin(questions, eq(options.questionId, questions.id))
+                .innerJoin(subAspects, eq(questions.subAspectId, subAspects.id))
+                .innerJoin(aspects, eq(subAspects.aspectId, aspects.id))
+                .innerJoin(assessments, eq(answers.assessmentId, assessments.id))
+                .where(
+                    sql`aspects.id = ${aspectId} AND assessments.id = ${assessmentId}`
+                )
+                .groupBy(aspects.id);
+        
+            return c.json({
+                aspectId,
+                aspectName: averageScore[0].aspectName,
+                assessmentId,
+                averageScore: averageScore.length > 0 ? averageScore[0].average : 0
+            });
+        }
+    )
+
+    // Get data for All Aspects average score By Assessment Id
+    .get(
+        '/average-score/aspects/assessments/:assessmentId', 
+        // checkPermission("assessments.readAssessmentScore"),
+        async (c) => {
+            const { assessmentId } = c.req.param();
+        
+            const averageScores = await db
+                .select({
+                    AspectId: aspects.id,
+                    AspectName: aspects.name,
+                    average: sql`AVG(options.score)`
+                })
+                .from(answers)
+                .innerJoin(options, eq(answers.optionId, options.id))
+                .innerJoin(questions, eq(options.questionId, questions.id))
+                .innerJoin(subAspects, eq(questions.subAspectId, subAspects.id))
+                .innerJoin(aspects, eq(subAspects.aspectId, aspects.id))
+                .innerJoin(assessments, eq(answers.assessmentId, assessments.id))
+                .where(eq(assessments.id, assessmentId))
+                .groupBy(aspects.id);
+        
+            return c.json({
+                assessmentId,
+                aspects: averageScores.map(score => ({
+                    AspectId: score.AspectId,
+                    AspectName: score.AspectName,
+                    averageScore: score.average
+                }))
+            });
+        }
+    )
+
+export default assessmentsRoute;

apps/backend/src/routes/forgotPassword/route.ts

@@ -0,0 +1,111 @@
+import { zValidator } from "@hono/zod-validator";
+import HonoEnv from "../../types/HonoEnv";
+import { z } from "zod";
+import { and, eq, isNull } from "drizzle-orm";
+import { Hono } from "hono";
+import db from "../../drizzle";
+import { users } from "../../drizzle/schema/users";
+import { notFound, unauthorized } from "../../errors/DashboardError";
+import { generateResetPasswordToken, verifyResetPasswordToken } from "../../utils/authUtils";
+import { sendResetPasswordEmail } from "../../utils/mailerUtils";
+import { hashPassword } from "../../utils/passwordUtils";
+
+const forgotPasswordRoutes = new Hono<HonoEnv>()
+	/**
+	 * Forgot Password
+	 * 
+	 * Checking emails in the database, generating tokens, and sending emails occurs.
+	 */
+	.post(
+		'/',
+		zValidator(
+			'json',
+			z.object({
+			email: z.string().email(),
+			})
+		),
+		async (c) => {
+			const { email } = c.req.valid('json');
+		
+			const user = await db
+				.select()
+				.from(users)
+				.where(
+				and(
+					isNull(users.deletedAt),
+					eq(users.email, email)
+				)
+			);
+	  
+			if (!user.length) throw notFound();
+	  
+			// Generate reset password token
+			const resetPasswordToken = await generateResetPasswordToken({
+				uid: user[0].id, 
+			});
+
+			await db
+				.update(users)
+				.set({
+					resetPasswordToken: resetPasswordToken
+				})
+				.where(eq(users.email, email));
+	  
+			// Send email with reset password token
+			await sendResetPasswordEmail(email, resetPasswordToken);
+		
+			return c.json({
+				message: 'Email has been sent successfully',
+			});
+		}
+	  )
+	/**
+	 * Reset Password
+	 */
+	.patch(
+		'/verify',
+		zValidator(
+			'json',
+			z.object({
+			password: z.string(),
+			confirm_password: z.string()
+			})
+		),
+		async (c) => {
+			const formData = c.req.valid('json');
+			const token = c.req.query('token')
+
+			// Token validation
+			if (!token) {
+				return c.json({ message: 'Token is required' }, 400);
+			}
+
+			// Password validation
+			if (formData.password !== formData.confirm_password) {
+				return c.json({ message: 'Passwords do not match' }, 400);
+			}
+		 
+			const decoded = await verifyResetPasswordToken(token);
+			if (!decoded) {
+				return c.json({ message: 'Invalid or expired token' }, 401);
+			}
+		
+			if (!decoded) throw unauthorized();
+
+			// Hash the password
+			const hashedPassword = await hashPassword(formData.password);
+
+			await db
+				.update(users)
+				.set({
+					password: hashedPassword,
+					updatedAt: new Date(),
+				})
+				.where(eq(users.id, decoded.uid));
+		
+			return c.json({
+				message: 'Password has been reset successfully'
+			});
+	});
+
+export default forgotPasswordRoutes;

apps/backend/src/utils/authUtils.ts

@@ -4,6 +4,7 @@ import appEnv from "../appEnv";
 // Environment variables for secrets, defaulting to a random secret if not set.
 const accessTokenSecret = appEnv.ACCESS_TOKEN_SECRET;
 const refreshTokenSecret = appEnv.REFRESH_TOKEN_SECRET;
+const resetPasswordTokenSecret = appEnv.RESET_PASSWORD_TOKEN_SECRET;
 
 // Algorithm to be used for JWT encoding.
 const algorithm: jwt.Algorithm = "HS256";
@@ -11,6 +12,7 @@ const algorithm: jwt.Algorithm = "HS256";
 // Expiry settings for tokens. 'null' signifies no expiry.
 export const accessTokenExpiry: number | string | null = null;
 export const refreshTokenExpiry: number | string | null = "30d";
+export const resetPasswordTokenExpiry: number | string | null = null;
 
 // Interfaces to describe the payload structure for access and refresh tokens.
 interface AccessTokenPayload {
@@ -21,6 +23,10 @@ interface RefreshTokenPayload {
 	uid: string;
 }
 
+interface ResetPasswordTokenPayload {
+	uid: string;
+}
+
 /**
  * Generates a JSON Web Token (JWT) for access control using a specified payload.
  *
@@ -84,3 +90,35 @@ export const verifyRefreshToken = async (token: string) => {
 		return null;
 	}
 };
+
+/**
+ * Generates a JSON Web Token (JWT) for reset password using a specified payload.
+ *
+ * @param payload - The payload containing user-specific data for the token.
+ * @returns A promise that resolves to the generated JWT string.
+ */
+export const generateResetPasswordToken = async (payload: ResetPasswordTokenPayload) => {
+	const token = jwt.sign(payload, resetPasswordTokenSecret, {
+		algorithm,
+		...(resetPasswordTokenExpiry ? { expiresIn: resetPasswordTokenExpiry } : {}),
+	});
+	return token;
+};
+
+/**
+ * Verifies a given reset password token and decodes the payload if the token is valid.
+ *
+ * @param token - The JWT string to verify.
+ * @returns A promise that resolves to the decoded payload or null if verification fails.
+ */
+export const verifyResetPasswordToken = async (token: string) => {
+	try {
+		const payload = jwt.verify(
+			token,
+			resetPasswordTokenSecret
+		) as ResetPasswordTokenPayload;
+		return payload;
+	} catch {
+		return null;
+	}
+};

apps/backend/src/utils/mailerUtils.ts

@@ -0,0 +1,33 @@
+import nodemailer from 'nodemailer';
+import appEnv from '../appEnv';
+
+/**
+ * Nodemailer configuration
+ */
+const transporter = nodemailer.createTransport({
+  host: appEnv.SMTP_HOST,
+  port: appEnv.SMTP_PORT,
+  secure: false,
+  auth: {
+    user: appEnv.SMTP_USERNAME,
+    pass: appEnv.SMTP_PASSWORD,
+  },
+  tls: {
+    rejectUnauthorized: false,
+  },
+});
+
+export async function sendResetPasswordEmail(to: string, token: string) {
+  const resetUrl = appEnv.BASE_URL + '/forgot-password/verify?token=' + token;
+
+  const info = await transporter.sendMail({
+    from: `"Your App" <${appEnv.SMTP_USERNAME}>`,
+    to,
+    subject: 'Password Reset Request',
+    text: `You requested a password reset. Click this link to reset your password: ${resetUrl}`,
+    html: `<p>You requested a password reset. Click this link to reset your password:<br><a href="${resetUrl}">${resetUrl}</a></p>`,
+  });
+
+  console.log('Email sent: %s', info.messageId);
+  return info;
+}

apps/frontend/package.json

@@ -10,11 +10,15 @@
 	},
 	"dependencies": {
 		"@emotion/react": "^11.11.4",
+		"@hookform/resolvers": "^3.9.0",
 		"@mantine/core": "^7.10.2",
 		"@mantine/dates": "^7.10.2",
 		"@mantine/form": "^7.10.2",
 		"@mantine/hooks": "^7.10.2",
 		"@mantine/notifications": "^7.10.2",
+		"@radix-ui/react-checkbox": "^1.1.1",
+		"@radix-ui/react-dropdown-menu": "^2.1.1",
+		"@radix-ui/react-label": "^2.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@tanstack/react-query": "^5.45.0",
 		"@tanstack/react-router": "^1.38.1",
@@ -28,6 +32,7 @@
 		"mantine-form-zod-resolver": "^1.1.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-hook-form": "^7.53.0",
 		"react-icons": "^5.2.1",
 		"tailwind-merge": "^2.4.0",
 		"tailwindcss-animate": "^1.0.7",

apps/frontend/src/routes/forgot-password/index.lazy.tsx

@@ -0,0 +1,242 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { TbArrowNarrowRight } from "react-icons/tb";
+import { IoIosArrowUp } from "react-icons/io";
+import { HiOutlineGlobeAlt  } from "react-icons/hi";
+import { useForm, Control, FieldError } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shadcn/components/ui/button.tsx";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shadcn/components/ui/form.tsx";
+import { Input } from "@/shadcn/components/ui/input.tsx";
+import client from "@/honoClient";
+import { useState } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
+
+// Define validation schema using zod
+const formSchema = z.object({
+  email: z.string().email(),
+});
+
+type FormSchema = z.infer<typeof formSchema>;
+
+// Interface for props of CustomFormField
+interface CustomFormFieldProps {
+  name: keyof FormSchema;
+  label: string;
+  control: Control<FormSchema>;
+  type?: string;
+  placeholder?: string;
+  error?: FieldError; // Add error prop
+}
+
+// Component for form fields with bold labels
+const CustomFormField: React.FC<CustomFormFieldProps> = ({
+  name,
+  label,
+  control,
+  type = "text",
+  placeholder,
+  error,
+}) => (
+  <FormField
+    control={control}
+    name={name}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="font-bold">{label}</FormLabel>
+        <FormControl>
+          <Input
+            placeholder={placeholder}
+            type={type}
+            {...field}
+            className={`border ${error ? "border-red-500" : "border-gray-300"}`}
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+);
+
+interface DropdownProps {
+  onSelect: (selectedOption: string) => void;
+  defaultOption?: string;
+  listOption?: string[];
+}
+
+const CustomDropdownMenu: React.FC<DropdownProps> = ({
+  onSelect,
+  defaultOption = "",
+  listOption = [],
+}) => {
+  const [selectedOption, setSelectedOption] = useState(defaultOption);
+
+  const handleSelect = (option: string) => {
+    setSelectedOption(option);
+    onSelect(option);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="bg-transparent text-gray-800 w-full justify-between text-xs hover:bg-blue-100">
+        <div className="flex items-center gap-1">
+          <HiOutlineGlobeAlt className="h-3 w-3" />
+          {selectedOption || "Select an option"}
+        </div>
+        <IoIosArrowUp className="h-3 w-3 ml-auto" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuRadioGroup
+          value={selectedOption}
+          onValueChange={handleSelect}
+        >
+          {listOption.map((option, index) => (
+            <DropdownMenuRadioItem key={index} value={option}>
+              {option}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+// Define a route for the registration form
+export const Route = createLazyFileRoute("/forgot-password/")({
+  component: () => (
+    <div>
+      <ForgotPasswordForm />
+    </div>
+  ),
+});
+
+// Main components of the registration form
+export function ForgotPasswordForm() {
+  // Set up form with react-hook-form and zod
+  const form = useForm<FormSchema>({
+    // Integrate schema with form
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  // Function to handle form submission
+  const onSubmit = async (values: FormSchema) => {
+    try {
+      const response = await client["forgot-password"].$post({
+        json: values,
+      });
+
+      if (response.ok) {
+        // Handle successful registration here
+        alert("Reset instructions sent successfully");
+        const data = await response.json();
+        return data;
+      } else {
+        throw response;
+      }
+    } catch (error) {
+      // Handle registration error here
+      console.error("Submission error:", error);
+      alert("Failed to send reset instructions");
+    }
+  };
+
+  const handleSelect = (selectedOption: string) => {
+    console.log('Selected option:', selectedOption);
+    // Do something with selected option
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
+      <div
+        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden"
+      >
+        <div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
+          <div className="flex absolute border border-slate-400  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
+            <div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
+              <div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col min-h-screen p-7 bg-transparent justify-between z-20">
+        {/* Top */}
+        <div className="flex items-center font-bold">Amati</div>
+
+        {/* Center */}
+        <div className="flex flex-col h-full w-full bg-transparent justify-center lg:px-28">
+          <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
+            <h1
+              className="text-4xl font-bold"
+              style={{ color: "#000000" }}
+            >
+              Forgot Password
+            </h1>
+            <p className="text-sm">
+              No worries, we'll send you reset instructions
+            </p>
+          </div>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-12 lg:w-96"
+            >
+              <div className="grid grid-cols-1">
+                <CustomFormField
+                  control={form.control}
+                  name="email"
+                  label="Email"
+                  type="email"
+                  placeholder="eg; user@gmail.com"
+                  error={form.formState.errors.email}
+                />
+              </div>
+              <div className="flex flex-col justify-between gap-9">
+                <Button
+                  type="submit"
+                  style={{
+                    backgroundColor: "#2555FF",
+                    color: "white",
+                    width: "100%",
+                  }}
+                  className="flex items-center justify-between shadow-xl"
+                >
+                  <span className="flex">Request Reset</span>
+                  <TbArrowNarrowRight className="h-5 w-5" />
+                </Button>
+                <a
+                  href="/login"
+                  className="text-xs text-blue-500 hover:underline font-bold"
+                >
+                  Back to login
+                </a>
+              </div>
+            </form>
+          </Form>
+        </div>
+
+        {/* Bottom */}
+        <div className="flex items-center justify-center lg:justify-start w-56 h-8 mx-auto lg:mx-0 bg-muted rounded-md">
+          <CustomDropdownMenu
+            onSelect={handleSelect} 
+            defaultOption="English (United States)" 
+            listOption={["English (United States)", "Indonesia"]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/routes/forgot-password/verify.lazy.tsx

@@ -0,0 +1,283 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { TbArrowNarrowRight } from "react-icons/tb";
+import { useForm, Control, FieldError } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shadcn/components/ui/button.tsx";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/shadcn/components/ui/form.tsx";
+import { Input } from "@/shadcn/components/ui/input.tsx";
+import { useEffect, useState } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
+import { HiOutlineGlobeAlt } from "react-icons/hi";
+import { IoIosArrowUp } from "react-icons/io";
+
+/// Define validation schema using zod
+const formSchema = z
+  .object({
+    password: z.string().min(1, "Password is required"),
+    confirm_password: z.string().min(1, "Password confirmation is required"),
+  })
+  .refine((data) => data.password === data.confirm_password, {
+    message: "Passwords do not match",
+    path: ["confirm_password"], // Set error on confirm_password field
+  });
+
+type FormSchema = z.infer<typeof formSchema>;
+
+// Interface for props of CustomFormField
+interface CustomFormFieldProps {
+  name: keyof FormSchema;
+  label: string;
+  control: Control<FormSchema>;
+  type?: string;
+  placeholder?: string;
+  error?: FieldError;
+}
+
+// Component for form fields with bold labels
+const CustomFormField: React.FC<CustomFormFieldProps> = ({
+  name,
+  label,
+  control,
+  type = "text",
+  placeholder,
+  error,
+}) => (
+  <FormField
+    control={control}
+    name={name}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="font-bold">{label}</FormLabel>
+        <FormControl>
+          <Input
+            placeholder={placeholder}
+            type={type}
+            {...field}
+            className={`border ${error ? "border-red-500" : "border-gray-300"}`}
+          />
+        </FormControl>
+        {error && <p className="text-red-500">{error.message}</p>}
+      </FormItem>
+    )}
+  />
+);
+
+interface DropdownProps {
+  onSelect: (selectedOption: string) => void;
+  defaultOption?: string;
+  listOption?: string[];
+}
+
+const CustomDropdownMenu: React.FC<DropdownProps> = ({
+  onSelect,
+  defaultOption = "",
+  listOption = [],
+}) => {
+  const [selectedOption, setSelectedOption] = useState(defaultOption);
+
+  const handleSelect = (option: string) => {
+    setSelectedOption(option);
+    onSelect(option);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="bg-transparent text-gray-800 w-full justify-between text-xs hover:bg-blue-100">
+        <div className="flex items-center gap-1">
+          <HiOutlineGlobeAlt className="h-3 w-3" />
+          {selectedOption || "Select an option"}
+        </div>
+        <IoIosArrowUp className="h-3 w-3 ml-auto" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuRadioGroup
+          value={selectedOption}
+          onValueChange={handleSelect}
+        >
+          {listOption.map((option, index) => (
+            <DropdownMenuRadioItem key={index} value={option}>
+              {option}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+// Define a route for the registration form
+export const Route = createLazyFileRoute("/forgot-password/verify")({
+  component: () => (
+    <div>
+      <ResetPasswordForm />
+    </div>
+  ),
+});
+
+// Main component of the reset password form
+export function ResetPasswordForm() {
+  const [token, setToken] = useState<string | null>(null);
+
+  // Set up form with react-hook-form and zod
+  const form = useForm<FormSchema>({
+    // Integrate schema with form
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      password: "",
+      confirm_password: "",
+    },
+  });
+
+  // Use effect to get token from URL when component mounts
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tokenFromURL = urlParams.get("token");
+    setToken(tokenFromURL);
+  }, []);  
+
+  // Function to handle form submission
+  const onSubmit = async (values: FormSchema) => {
+    try {
+      if (!token) {
+        alert("Token not found in URL");
+        return;
+      }
+
+      // Create URL with token as query parameter
+      const urlWithToken = import.meta.env.VITE_BACKEND_BASE_URL + `/forgot-password/verify?token=${token}`;
+
+      const response = await fetch(urlWithToken, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(values),
+      });
+
+      // Check status response
+      if (response.ok) {
+        // Periksa apakah respons memiliki konten
+        const responseText = await response.text();
+        let data = {};
+        try {
+          data = responseText ? JSON.parse(responseText) : {}; // Parsing respons hanya jika ada teks
+        } catch (jsonError) {
+          console.error("Error parsing JSON response:", jsonError);
+          alert("Failed to parse server response");
+        }
+        alert("Password reset successfully");
+        return data;
+      } else {
+        // Tangani kasus jika respons tidak OK
+        const errorText = await response.text();
+        console.error("Server error:", errorText);
+        alert("Failed to reset password");
+      }
+    } catch (error) {
+      console.error("Submission error:", error);
+      alert("Failed to reset password");
+    }
+  };
+
+  const handleSelect = (selectedOption: string) => {
+    console.log('Selected option:', selectedOption);
+    // Do something with selected option
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
+      <div
+        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden"
+      >
+        <div className="flex absolute border border-slate-200 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
+          <div className="flex absolute border border-slate-300  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
+            <div className="flex absolute border border-slate-400 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
+              <div className="hidden lg:flex absolute border border-slate-500 rounded-2xl w-2/3 h-2/3">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col min-h-screen p-7 bg-transparent justify-between z-20">
+        {/* Top */}
+        <div className="flex items-center font-bold">Amati</div>
+
+        {/* Center */}
+        <div className="flex flex-col h-full w-full bg-transparent justify-center lg:px-28">
+          <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
+            <h1
+              className="text-4xl font-bold"
+              style={{ color: "#000000" }}
+            >
+              Change Password
+            </h1>
+            <p className="text-sm">Enter your new password</p>
+          </div>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-12 lg:w-96"
+            >
+              <div className="grid grid-cols-1 gap-4">
+                <CustomFormField
+                  control={form.control}
+                  name="password"
+                  label="Password"
+                  type="password"
+                  placeholder="password"
+                  error={form.formState.errors.password}
+                />
+                <CustomFormField
+                  control={form.control}
+                  name="confirm_password"
+                  label="Password Confirmation"
+                  type="password"
+                  placeholder="password confirmation"
+                  error={form.formState.errors.confirm_password}
+                />
+              </div>
+              <div className="flex flex-col justify-between gap-9">
+                <Button
+                  type="submit"
+                  style={{
+                    backgroundColor: "#2555FF",
+                    color: "white",
+                    width: "100%",
+                  }}
+                  className="flex items-center justify-between shadow-xl"
+                >
+                  <span className="flex">Submit</span>
+                  <TbArrowNarrowRight className="h-5 w-5" />
+                </Button>
+                <a
+                  href="/login"
+                  className="text-xs text-blue-500 hover:underline font-bold"
+                >
+                  Back to login
+                </a>
+              </div>
+            </form>
+          </Form>
+        </div>
+
+        <div className="flex items-center justify-center lg:justify-start w-56 h-8 mx-auto lg:mx-0 bg-muted rounded-md">
+          <CustomDropdownMenu
+            onSelect={handleSelect} 
+            defaultOption="English (United States)" 
+            listOption={["English (United States)", "Indonesia"]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/routes/login/index.lazy.tsx

@@ -1,21 +1,24 @@
 import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMutation } from "@tanstack/react-query";
-import {
+import { Input } from '@/shadcn/components/ui/input.tsx';
-	Paper,
+import { Button } from '@/shadcn/components/ui/button.tsx';
-	PasswordInput,
+import { Alert } from '@/shadcn/components/ui/alert.tsx';
-	Stack,
+import { Card } from '@/shadcn/components/ui/card.tsx';
-	Text,
+import { 
-	TextInput,
+	Form, 
-	Group,
+	FormControl, 
-	Button,
+	FormField, 
-	Alert,
+	FormItem, 
-} from "@mantine/core";
+	FormLabel, 
+	FormMessage 
+} from '@/shadcn/components/ui/form.tsx';
 import client from "../../honoClient";
-import { useForm } from "@mantine/form";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import useAuth from "@/hooks/useAuth";
+import { TbArrowNarrowRight } from "react-icons/tb";
 
 export const Route = createLazyFileRoute("/login/")({
 	component: LoginPage,
@@ -38,11 +41,11 @@ export default function LoginPage() {
 	const { isAuthenticated, saveAuthData } = useAuth();
 
 	const form = useForm<FormSchema>({
-		initialValues: {
+		resolver: zodResolver(formSchema),
+		defaultValues: {
 			username: "",
 			password: "",
 		},
-		validate: zodResolver(formSchema),
 	});
 
 	useEffect(() => {
@@ -94,63 +97,94 @@ export default function LoginPage() {
 	};
 
 	return (
-		<div className="w-screen h-screen flex items-center justify-center">
+		<div
-			<Paper radius="md" p="xl" withBorder w={400}>
+            className="flex items-center justify-center bg-contain bg-top lg:bg-right 
-				<Text size="lg" fw={500} mb={30}>
+				bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')] 
-					Welcome
+                lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]"
-				</Text>
+        >
-				<form onSubmit={form.onSubmit(handleSubmit)}>
+			<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
-					<Stack>
+				Amati
-						{errorMessage ? (
+			</div>
-							<Alert
+			<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center"> 
-								variant="filled"
+				<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none">
-								color="pink"
+					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1>
-								title=""
+					<p className="text-sm mb-10 leading-[1.059rem]">
-								// icon={icon}
+						New to this app?{' '}
-							>
+						<a
-								{errorMessage}
-							</Alert>
-						) : null}
-						<TextInput
-							label="Username or Email"
-							placeholder="Enter your username or email"
-							name="username"
-							autoComplete="username"
-							disabled={loginMutation.isPending}
-							{...form.getInputProps("username")}
-						/>
-						<PasswordInput
-							label="Password"
-							placeholder="Your password"
-							name="password"
-							autoComplete="password"
-							disabled={loginMutation.isPending}
-							{...form.getInputProps("password")}
-						/>
-					</Stack>
-
-					<Group justify="space-between" mt="xl">
-						{/* <Anchor
-							component="a"
-							type="button"
-							c="dimmed"
-							size="xs"
 							href="/register"
+							className="text-blue-500 font-bold hover:text-blue-800"
 						>
-							Don&apos;t have an account? Register
+							Register now
-						</Anchor> */}
+						</a>
-						<div />
+					</p>
-
+					<Form {...form}>
-						<Button
+						<form onSubmit={form.handleSubmit(handleSubmit)}>
-							type="submit"
+							<div className="space-y-5">
-							radius="xl"
+								{errorMessage && (
-							disabled={loginMutation.isPending}
+									<Alert variant="destructive">
-						>
+										<p>{errorMessage}</p>
-							Login
+									</Alert>
-						</Button>
+								)}
-					</Group>
+								<FormField
-				</form>
+									name="username"
-			</Paper>
+									render={({ field }) => (
+										<FormItem className="text-sm">
+											<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="eg; user@mail.com"
+													disabled={loginMutation.isPending}
+													className={form.formState.errors.username ? "border-red-500" : ""}
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									name="password"
+									render={({ field }) => (
+										<FormItem className="text-sm">
+											<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel>
+											<FormControl>
+												<Input
+													type="password"
+													placeholder="*****"
+													disabled={loginMutation.isPending}
+													className={form.formState.errors.password ? "border-red-500" : ""}
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<p className="text-sm">
+									<a
+										href="/forgot-password"
+										className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]"
+									>
+										Forgot Password?
+									</a>
+								</p>
+							</div>
+							<div className="flex justify-between mt-10">
+								<Button
+									type="submit"
+									disabled={loginMutation.isPending}
+									variant="default"
+									className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem] 
+										lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
+								>
+									<span className="leading-[1.25rem]">Sign In</span>
+									<TbArrowNarrowRight className="h-5 w-5" />
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</Card>
+			</div>
 		</div>
 	);
 }

apps/frontend/src/shadcn/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

apps/frontend/src/shadcn/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

apps/frontend/src/shadcn/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

apps/frontend/src/shadcn/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

apps/frontend/src/shadcn/components/ui/form.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/shadcn/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

apps/frontend/src/shadcn/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

apps/frontend/src/shadcn/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

apps/frontend/tailwind.config.js

@@ -72,6 +72,16 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
+    letterSpacing: {
+      tightest: '-.075em',
+      tighter: '-.05em',
+      tight: '-.025em',
+      normal: '0',
+      wide: '.025em',
+      wider: '.05em',
+      widest: '.1em',
+      widest: '.25em',
+    },
   },
   plugins: [require("tailwindcss-animate")],
 }

pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       moment:
         specifier: ^2.30.1
         version: 2.30.1
+      nodemailer:
+        specifier: ^6.9.14
+        version: 6.9.14
       postgres:
         specifier: ^3.4.4
         version: 3.4.4
@@ -69,6 +72,9 @@ importers:
       '@types/node':
         specifier: ^20.14.2
         version: 20.14.2
+      '@types/nodemailer':
+        specifier: ^6.4.15
+        version: 6.4.15
       drizzle-kit:
         specifier: ^0.22.7
         version: 0.22.7
@@ -87,6 +93,9 @@ importers:
       '@emotion/react':
         specifier: ^11.11.4
         version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
+      '@hookform/resolvers':
+        specifier: ^3.9.0
+        version: 3.9.0(react-hook-form@7.53.0(react@18.3.1))
       '@mantine/core':
         specifier: ^7.10.2
         version: 7.10.2(@mantine/hooks@7.10.2(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -102,6 +111,15 @@ importers:
       '@mantine/notifications':
         specifier: ^7.10.2
         version: 7.10.2(@mantine/core@7.10.2(@mantine/hooks@7.10.2(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.10.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.1
+        version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: ^2.1.0
+        version: 2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
@@ -141,6 +159,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.53.0
+        version: 7.53.0(react@18.3.1)
       react-icons:
         specifier: ^5.2.1
         version: 5.2.1(react@18.3.1)
@@ -1121,9 +1142,15 @@ packages:
       hono: '>=3.9.0'
       zod: ^3.19.1
 
+  '@hookform/resolvers@3.9.0':
+    resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@@ -1131,6 +1158,7 @@ packages:
 
   '@humanwhocodes/object-schema@2.0.2':
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
+    deprecated: Use @eslint/object-schema instead
 
   '@humanwhocodes/retry@0.3.0':
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
@@ -1431,6 +1459,48 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@radix-ui/primitive@1.1.0':
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+
+  '@radix-ui/react-arrow@1.1.0':
+    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.1.1':
+    resolution: {integrity: sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.0':
+    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.0':
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
@@ -1440,6 +1510,172 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.0':
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.0':
+    resolution: {integrity: sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.1':
+    resolution: {integrity: sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.0':
+    resolution: {integrity: sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.0':
+    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.0':
+    resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.1':
+    resolution: {integrity: sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.0':
+    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.1':
+    resolution: {integrity: sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.0':
+    resolution: {integrity: sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.0.0':
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.0':
+    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.1.0':
     resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
@@ -1449,6 +1685,72 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
   '@rollup/rollup-android-arm-eabi@4.18.0':
     resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==}
     cpu: [arm]
@@ -1759,6 +2061,9 @@ packages:
   '@types/node@20.14.2':
     resolution: {integrity: sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==}
 
+  '@types/nodemailer@6.4.15':
+    resolution: {integrity: sha512-0EBJxawVNjPkng1zm2vopRctuWVCxk34JcIlRuXSf54habUWdz1FB7wHDqOqvDa8Mtpt0Q3LTXQkAs2LNyK5jQ==}
+
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
@@ -2156,6 +2461,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -3226,6 +3535,7 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -3377,6 +3687,7 @@ packages:
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -4047,6 +4358,10 @@ packages:
   node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
 
+  nodemailer@6.9.14:
+    resolution: {integrity: sha512-Dobp/ebDKBvz91sbtRKhcznLThrKxKt97GI2FAlAyy+fk19j73Uz3sBXolVtmcXjaorivqsbbbjDY+Jkt4/bQA==}
+    engines: {node: '>=6.0.0'}
+
   nopt@5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
     engines: {node: '>=6'}
@@ -4398,6 +4713,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-hook-form@7.53.0:
+    resolution: {integrity: sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-icons@5.2.1:
     resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==}
     peerDependencies:
@@ -4439,6 +4760,16 @@ packages:
       '@types/react':
         optional: true
 
+  react-remove-scroll@2.5.7:
+    resolution: {integrity: sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -4561,6 +4892,7 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rollup@4.18.0:
@@ -6064,6 +6396,10 @@ snapshots:
       hono: 4.4.6
       zod: 3.23.8
 
+  '@hookform/resolvers@3.9.0(react-hook-form@7.53.0(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.53.0(react@18.3.1)
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.2
@@ -6471,12 +6807,214 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@radix-ui/primitive@1.1.0': {}
+
+  '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-checkbox@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-context@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-direction@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-dismissable-layer@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-dropdown-menu@2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-focus-guards@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-id@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-label@2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-menu@2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.7(@types/react@18.3.3)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-popper@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/rect': 1.1.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-portal@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-presence@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
+  '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
@@ -6484,6 +7022,54 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@radix-ui/rect@1.1.0': {}
+
   '@rollup/rollup-android-arm-eabi@4.18.0':
     optional: true
 
@@ -6760,7 +7346,7 @@ snapshots:
   '@types/glob@7.2.0':
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.11.24
+      '@types/node': 20.14.2
 
   '@types/graceful-fs@4.1.9':
     dependencies:
@@ -6805,6 +7391,10 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/nodemailer@6.4.15':
+    dependencies:
+      '@types/node': 20.14.2
+
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/parse-json@4.0.2': {}
@@ -6841,7 +7431,7 @@ snapshots:
 
   '@types/through@0.0.30':
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.14.2
 
   '@types/tinycolor2@1.4.6': {}
 
@@ -7317,6 +7907,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.6.3
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -7399,7 +7993,7 @@ snapshots:
 
   ast-types@0.13.4:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   autoprefixer@10.4.19(postcss@8.4.38):
     dependencies:
@@ -9717,6 +10311,8 @@ snapshots:
 
   node-releases@2.0.14: {}
 
+  nodemailer@6.9.14: {}
+
   nopt@5.0.0:
     dependencies:
       abbrev: 1.1.1
@@ -10096,6 +10692,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-hook-form@7.53.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-icons@5.2.1(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -10132,6 +10732,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  react-remove-scroll@2.5.7(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1)
+      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
+      tslib: 2.6.3
+      use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1