From 67a784511c04ad2b14191779ef4bb3a6be1e1fea Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 4 Sep 2024 09:42:14 +0700
Subject: [PATCH 01/22] update: font type manrope to inter

---
 apps/frontend/src/main.tsx               | 2 +-
 apps/frontend/src/routes/__root.tsx      | 2 +-
 apps/frontend/src/styles/fonts/inter.css | 6 ++++++
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/styles/fonts/inter.css

diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index 6e738f1..6ba9c8f 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import "./styles/tailwind.css";
-import "./styles/fonts/manrope.css";
+import "./styles/fonts/inter.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
diff --git a/apps/frontend/src/routes/__root.tsx b/apps/frontend/src/routes/__root.tsx
index 91b0ffe..4dd18f8 100644
--- a/apps/frontend/src/routes/__root.tsx
+++ b/apps/frontend/src/routes/__root.tsx
@@ -8,7 +8,7 @@ interface RouteContext {
 
 export const Route = createRootRouteWithContext<RouteContext>()({
 	component: () => (
-		<div className="font-manrope">
+		<div className="font-inter">
 			<Outlet />
 			<TanStackRouterDevtools />
 		</div>
diff --git a/apps/frontend/src/styles/fonts/inter.css b/apps/frontend/src/styles/fonts/inter.css
new file mode 100644
index 0000000..3fa8fb1
--- /dev/null
+++ b/apps/frontend/src/styles/fonts/inter.css
@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+.font-inter {
+	font-family: "Inter", sans-serif;
+	font-optical-sizing: auto;
+}

From 20c37d0b2a3d019f4ac3f06eb3e2f911ff13c2b0 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 4 Sep 2024 09:43:34 +0700
Subject: [PATCH 02/22] create: component for shadcn

---
 .../src/shadcn/components/ui/alert.tsx        |  59 ++++++
 .../src/shadcn/components/ui/card.tsx         |  79 ++++++++
 .../src/shadcn/components/ui/checkbox.tsx     |  30 +++
 .../src/shadcn/components/ui/form.tsx         | 178 ++++++++++++++++++
 .../src/shadcn/components/ui/input.tsx        |  25 +++
 .../src/shadcn/components/ui/label.tsx        |  26 +++
 6 files changed, 397 insertions(+)
 create mode 100644 apps/frontend/src/shadcn/components/ui/alert.tsx
 create mode 100644 apps/frontend/src/shadcn/components/ui/card.tsx
 create mode 100644 apps/frontend/src/shadcn/components/ui/checkbox.tsx
 create mode 100644 apps/frontend/src/shadcn/components/ui/form.tsx
 create mode 100644 apps/frontend/src/shadcn/components/ui/input.tsx
 create mode 100644 apps/frontend/src/shadcn/components/ui/label.tsx

diff --git a/apps/frontend/src/shadcn/components/ui/alert.tsx b/apps/frontend/src/shadcn/components/ui/alert.tsx
new file mode 100644
index 0000000..41fa7e0
--- /dev/null
+++ b/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 }
diff --git a/apps/frontend/src/shadcn/components/ui/card.tsx b/apps/frontend/src/shadcn/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/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 }
diff --git a/apps/frontend/src/shadcn/components/ui/checkbox.tsx b/apps/frontend/src/shadcn/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/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 }
diff --git a/apps/frontend/src/shadcn/components/ui/form.tsx b/apps/frontend/src/shadcn/components/ui/form.tsx
new file mode 100644
index 0000000..44dc758
--- /dev/null
+++ b/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,
+}
diff --git a/apps/frontend/src/shadcn/components/ui/input.tsx b/apps/frontend/src/shadcn/components/ui/input.tsx
new file mode 100644
index 0000000..677d05f
--- /dev/null
+++ b/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 }
diff --git a/apps/frontend/src/shadcn/components/ui/label.tsx b/apps/frontend/src/shadcn/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/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 }

From 107efbd294527b284d41e88f2a56acb14121d584 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 4 Sep 2024 09:44:36 +0700
Subject: [PATCH 03/22] add: package for project

---
 apps/frontend/package.json |   4 +
 pnpm-lock.yaml             | 229 +++++++++++++++++++++++++++++++++++++
 2 files changed, 233 insertions(+)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index b89c51a..4ef493a 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -10,11 +10,14 @@
 	},
 	"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-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 +31,7 @@
 		"mantine-form-zod-resolver": "^1.1.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-hook-form": "^7.52.2",
 		"react-icons": "^5.2.1",
 		"tailwind-merge": "^2.4.0",
 		"tailwindcss-animate": "^1.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16570cb..4cb8007 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,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.52.2(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 +105,12 @@ 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-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 +150,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.52.2
+        version: 7.52.2(react@18.3.1)
       react-icons:
         specifier: ^5.2.1
         version: 5.2.1(react@18.3.1)
@@ -1121,9 +1133,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 +1149,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 +1450,22 @@ 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-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-compose-refs@1.1.0':
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
@@ -1440,6 +1475,54 @@ 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-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-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-slot@1.1.0':
     resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
@@ -1449,6 +1532,51 @@ 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-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-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
+
   '@rollup/rollup-android-arm-eabi@4.18.0':
     resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==}
     cpu: [arm]
@@ -3226,6 +3354,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 +3506,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==}
@@ -4398,6 +4528,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-hook-form@7.52.2:
+    resolution: {integrity: sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-icons@5.2.1:
     resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==}
     peerDependencies:
@@ -4561,6 +4697,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 +6201,10 @@ snapshots:
       hono: 4.4.6
       zod: 3.23.8
 
+  '@hookform/resolvers@3.9.0(react-hook-form@7.52.2(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.52.2(react@18.3.1)
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.2
@@ -6471,12 +6612,64 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@radix-ui/primitive@1.1.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-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-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-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-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 +6677,38 @@ 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-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-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
+
   '@rollup/rollup-android-arm-eabi@4.18.0':
     optional: true
 
@@ -10096,6 +10321,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-hook-form@7.52.2(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-icons@5.2.1(react@18.3.1):
     dependencies:
       react: 18.3.1

From feffc8f826fe4fbe759f034b71475dc93f8f294a Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 4 Sep 2024 09:45:43 +0700
Subject: [PATCH 04/22] create: index.lazy.tsx for register

---
 .../src/routes/register/index.lazy.tsx        | 324 ++++++++++++++++++
 1 file changed, 324 insertions(+)
 create mode 100644 apps/frontend/src/routes/register/index.lazy.tsx

diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
new file mode 100644
index 0000000..d10cb3d
--- /dev/null
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -0,0 +1,324 @@
+import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Input } from '@/shadcn/components/ui/input.tsx';
+import { Button } from '@/shadcn/components/ui/button.tsx';
+import { Alert } from '@/shadcn/components/ui/alert.tsx';
+import { Checkbox } from "@/shadcn/components/ui/checkbox";
+import { Form, FormField, FormControl, FormLabel, FormMessage, FormItem } from '@/shadcn/components/ui/form.tsx';
+import { TbArrowNarrowRight } from 'react-icons/tb';
+import client from "../../honoClient";
+
+// Define the schema for validation
+const formSchema = z.object({
+  name: z.string().min(1, "This field is required"),
+  username: z.string().min(1, "This field is required"),
+  email: z.string().email("Invalid email address").min(1, "This field is required"),
+  password: z.string().min(6, "Password must be at least 6 characters long"),
+  companyName: z.string().min(1, "This field is required"),
+  position: z.string().min(1, "This field is required"),
+  workExperience: z.string().min(1, "This field is required"),
+  address: z.string().min(1, "This field is required"),
+  phoneNumber: z.string().min(1, "This field is required"),
+  terms: z.boolean().refine((val) => val, "You must agree to the terms and services"),
+});
+
+// Define the form type
+type FormSchema = z.infer<typeof formSchema>;
+
+export const Route = createLazyFileRoute("/register/")({
+  component: RegisterPage,
+});
+
+export default function RegisterPage() {
+  const [errorFields, setErrorFields] = useState<Partial<Record<keyof FormSchema, string>> | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const navigate = useNavigate();
+
+  const form = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      username: "",
+      email: "",
+      password: "",
+      companyName: "",
+      position: "",
+      workExperience: "",
+      address: "",
+      phoneNumber: "",
+      terms: false,
+    },
+  });
+
+  const handleSubmit = async (values: FormSchema) => {
+    try {
+      const res = await client.register.$post({
+        json: values,
+      });
+
+      if (res.ok) {
+        // Redirect to login page on success
+        navigate({ to: "/login", replace: true });
+      } else {
+        // Handle non-200 responses from backend
+        const errorData = await res.json();
+        throw new Error(errorData.message || "An unknown error occurred");
+      }
+    } catch (error: any) {
+      const message = error.message;
+
+      if (message.includes("Email or username has been registered")) {
+        setErrorFields({
+          email: "Email is already registered",
+          username: "Username is already registered",
+        });
+      } else if (message.includes("Phone number has been registered")) {
+        setErrorFields({
+          phoneNumber: "Phone number is already registered",
+        });
+      } else {
+        setErrorMessage(message);
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
+      {/* Bagian Gambar */}
+      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:left-[-400px]">
+        <div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
+          <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-3/5 h-3/5">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+      {/* Title */}
+      <div className="absolute top-6 left-6 text-base font-bold z-20">
+        Amati
+      </div>
+  
+      {/* Main content */}
+      <div className="flex-1 flex flex-col md:flex-row items-center justify-center lg:pr-20 pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-end space-x-12 px-4 md:px-0 z-20">
+  
+        {/* Form column */}
+        <div className="w-[306px] max-w-lg md:w-1/2">
+  
+          {/* Title and Already have an account */}
+          <div className="mb-12 h-[75px]">
+            <h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
+            <p className="w-[229.5px] text-sm md:text-sm leading-[15.944px] tracking-[-0.8px] text-[#00000099]">
+              Already have an account?{' '}
+              <a href="/login" className="text-blue-500 font-semibold hover:text-blue-800">
+                Sign In now
+              </a>
+            </p>
+          </div>
+  
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+              {errorMessage && (
+                <Alert variant="destructive">
+                  <p>{errorMessage}</p>
+                </Alert>
+              )}
+  
+              {Object.keys(errorFields || {}).length > 0 && (
+                <Alert variant="destructive">
+                  {Object.values(errorFields || {}).map((msg, idx) => (
+                    <p key={idx}>{msg}</p>
+                  ))}
+                </Alert>
+              )}
+  
+              {/* Form fields */}
+              <div className="space-y-4">
+                <FormField name="name" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Full Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Insert your full name according to Citizenship Card"
+                        {...field}
+                        className={`${form.formState.errors.name ? "border-red-500" : ""
+                          } text-sm md:text-base`}
+                        style={{ width: "100%" }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="username" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Username</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Username"
+                        {...field}
+                        className={form.formState.errors.username ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="email" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="eg; user@mail.com"
+                        {...field}
+                        className={form.formState.errors.email ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="password" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="******"
+                        {...field}
+                        className={form.formState.errors.password ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="companyName" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Company Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Company Name"
+                        {...field}
+                        className={form.formState.errors.companyName ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="position" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Position</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Position"
+                        {...field}
+                        className={form.formState.errors.position ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="workExperience" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Work Experience</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Work Experience"
+                        {...field}
+                        className={form.formState.errors.workExperience ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="address" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Address</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Address"
+                        {...field}
+                        className={form.formState.errors.address ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField name="phoneNumber" render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-bold text-sm">Phone Number</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Phone Number"
+                        {...field}
+                        className={form.formState.errors.phoneNumber ? "border-red-500" : ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )} />
+  
+                <FormField
+                  control={form.control}
+                  name="terms"
+                  render={() => (
+                    <FormItem>
+                      <FormControl>
+                        <div className="flex items-center space-x-0.5 pb-10">
+                          <Checkbox
+                            checked={!!form.watch("terms")}
+                            onCheckedChange={(checked) => form.setValue("terms", !!checked)}
+                            className={`border ${form.formState.errors.terms ? "border-red-500" : "border-[#00000099]"}`}
+                            onChange={form.register("terms").onChange}
+                            onBlur={form.register("terms").onBlur}
+                            name="terms"
+                            ref={form.register("terms").ref}
+                            id="terms"
+                          />
+                          <label
+                            htmlFor="terms"
+                            className="text-sm font-normal leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[#00000099] p-2 rounded"
+                          >
+                            I am agreeing to Terms and Services
+                          </label>
+                        </div>
+                      </FormControl>
+                      {form.formState.errors.terms && (
+                        <FormMessage>{form.formState.errors.terms.message}</FormMessage>
+                      )}
+                    </FormItem>
+                  )}
+                />
+              </div>
+  
+              <div className="space-y-4 pb-6">
+                <div className="flex justify-end">
+                  <Button
+                    type="submit"
+                    style={{ backgroundColor: "#2555FF", color: "white" }}
+                    className="w-full flex items-center justify-between text-base font-medium md:w-auto"
+                  >
+                    <span className="flex-grow text-left">Create Account</span>
+                    <TbArrowNarrowRight className="ml-12 h-5 w-5" />
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From e2b9adcf2d5abe431865905a36d647ba616aae0f Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 4 Sep 2024 19:21:37 +0700
Subject: [PATCH 05/22] update: background for register

---
 .../src/routes/register/index.lazy.tsx        | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
index d10cb3d..efc2120 100644
--- a/apps/frontend/src/routes/register/index.lazy.tsx
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -89,7 +89,7 @@ export default function RegisterPage() {
   return (
     <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
       {/* Bagian Gambar */}
-      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:left-[-400px]">
+      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:-translate-x-[400px] overflow-hidden lg:overflow-visible">
         <div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
           <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">
@@ -99,18 +99,18 @@ export default function RegisterPage() {
           </div>
         </div>
       </div>
-  
+
       {/* Title */}
       <div className="absolute top-6 left-6 text-base font-bold z-20">
         Amati
       </div>
-  
+
       {/* Main content */}
       <div className="flex-1 flex flex-col md:flex-row items-center justify-center lg:pr-20 pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-end space-x-12 px-4 md:px-0 z-20">
-  
+
         {/* Form column */}
         <div className="w-[306px] max-w-lg md:w-1/2">
-  
+
           {/* Title and Already have an account */}
           <div className="mb-12 h-[75px]">
             <h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
@@ -121,7 +121,7 @@ export default function RegisterPage() {
               </a>
             </p>
           </div>
-  
+
           <Form {...form}>
             <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
               {errorMessage && (
@@ -129,7 +129,7 @@ export default function RegisterPage() {
                   <p>{errorMessage}</p>
                 </Alert>
               )}
-  
+
               {Object.keys(errorFields || {}).length > 0 && (
                 <Alert variant="destructive">
                   {Object.values(errorFields || {}).map((msg, idx) => (
@@ -137,7 +137,7 @@ export default function RegisterPage() {
                   ))}
                 </Alert>
               )}
-  
+
               {/* Form fields */}
               <div className="space-y-4">
                 <FormField name="name" render={({ field }) => (
@@ -155,7 +155,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="username" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Username</FormLabel>
@@ -169,7 +169,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="email" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Email</FormLabel>
@@ -184,7 +184,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="password" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Password</FormLabel>
@@ -199,7 +199,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="companyName" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Company Name</FormLabel>
@@ -213,7 +213,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="position" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Position</FormLabel>
@@ -227,7 +227,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="workExperience" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Work Experience</FormLabel>
@@ -241,7 +241,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="address" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Address</FormLabel>
@@ -255,7 +255,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="phoneNumber" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Phone Number</FormLabel>
@@ -269,7 +269,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField
                   control={form.control}
                   name="terms"
@@ -302,7 +302,7 @@ export default function RegisterPage() {
                   )}
                 />
               </div>
-  
+
               <div className="space-y-4 pb-6">
                 <div className="flex justify-end">
                   <Button

From dfda61bf11583ef302de41ddb11cb21eb061422d Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Thu, 5 Sep 2024 15:07:55 +0700
Subject: [PATCH 06/22] update: form register for responsive

---
 apps/frontend/src/routes/register/index.lazy.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
index efc2120..42eb42c 100644
--- a/apps/frontend/src/routes/register/index.lazy.tsx
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -106,10 +106,10 @@ export default function RegisterPage() {
       </div>
 
       {/* Main content */}
-      <div className="flex-1 flex flex-col md:flex-row items-center justify-center lg:pr-20 pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-end space-x-12 px-4 md:px-0 z-20">
+      <div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-center lg:justify-end space-x-12 px-6 md:px-0 z-20">
 
         {/* Form column */}
-        <div className="w-[306px] max-w-lg md:w-1/2">
+        <div className="w-[306px] max-w-lg md:w-1/2 mx-auto md:mx-20">
 
           {/* Title and Already have an account */}
           <div className="mb-12 h-[75px]">
@@ -291,7 +291,7 @@ export default function RegisterPage() {
                             htmlFor="terms"
                             className="text-sm font-normal leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[#00000099] p-2 rounded"
                           >
-                            I am agreeing to Terms and Services
+                            I am agree to Terms and Services
                           </label>
                         </div>
                       </FormControl>

From 31777d7124be356b198a46b41c3713f5b7674457 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 18 Sep 2024 13:50:31 +0700
Subject: [PATCH 07/22] update: revision for register

---
 apps/frontend/src/index.css                   |  4 +++
 .../src/routes/register/index.lazy.tsx        | 31 +++++++++----------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 99a7b0c..c6f68d5 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -66,4 +66,8 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+:root {
+  --primary-color: #2555FF;
 }
\ No newline at end of file
diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
index 42eb42c..ddcd454 100644
--- a/apps/frontend/src/routes/register/index.lazy.tsx
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -88,33 +88,31 @@ export default function RegisterPage() {
 
   return (
     <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
-      {/* Bagian Gambar */}
-      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:-translate-x-[400px] overflow-hidden lg:overflow-visible">
-        <div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
-          <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-3/5 h-3/5">
-              </div>
-            </div>
-          </div>
+      {/* Image */}
+      <div className="relative h-[40vw] lg:h-screen -z-20 lg:mt-24">
+        <div className="-translate-y-[calc(35vw+1rem)] lg:translate-y-0 w-full lg:translate-x-[calc(10vh-45vw)] ">
+          <span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
+          <span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
+          <span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
+          <span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 hidden lg:flex rounded-3xl"></span>
         </div>
       </div>
 
       {/* Title */}
-      <div className="absolute top-6 left-6 text-base font-bold z-20">
+      <div className="absolute top-6 left-6 text-base font-bold">
         Amati
       </div>
 
       {/* Main content */}
-      <div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-center lg:justify-end space-x-12 px-6 md:px-0 z-20">
+      <div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-10 lg:pt-20 lg:pl-56 md:justify-center lg:justify-end space-x-12 px-6 md:px-0">
 
         {/* Form column */}
-        <div className="w-[306px] max-w-lg md:w-1/2 mx-auto md:mx-20">
+        <div className="w-full md:w-1/2 mx-auto md:mx-20">
 
           {/* Title and Already have an account */}
-          <div className="mb-12 h-[75px]">
-            <h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
-            <p className="w-[229.5px] text-sm md:text-sm leading-[15.944px] tracking-[-0.8px] text-[#00000099]">
+          <div className="flex flex-col gap-1 mb-7">
+            <h1 className="text-3xl lg:text-4xl font-extrabold text-left">Register an Account</h1>
+            <p className="text-sm md:text-sm text-gray-400">
               Already have an account?{' '}
               <a href="/login" className="text-blue-500 font-semibold hover:text-blue-800">
                 Sign In now
@@ -307,8 +305,7 @@ export default function RegisterPage() {
                 <div className="flex justify-end">
                   <Button
                     type="submit"
-                    style={{ backgroundColor: "#2555FF", color: "white" }}
-                    className="w-full flex items-center justify-between text-base font-medium md:w-auto"
+                    className="w-full flex items-center justify-between text-base font-medium md:w-auto bg-[--primary-color] text-white"
                   >
                     <span className="flex-grow text-left">Create Account</span>
                     <TbArrowNarrowRight className="ml-12 h-5 w-5" />

From 723a9e8aa9d4a56fcd310ccc8c2797b39b5be2e5 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 18 Sep 2024 15:47:23 +0700
Subject: [PATCH 08/22] update: logo and language for register

---
 .../src/routes/register/index.lazy.tsx        | 91 ++++++++++---------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
index ddcd454..3fa103e 100644
--- a/apps/frontend/src/routes/register/index.lazy.tsx
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -13,16 +13,16 @@ import client from "../../honoClient";
 
 // Define the schema for validation
 const formSchema = z.object({
-  name: z.string().min(1, "This field is required"),
-  username: z.string().min(1, "This field is required"),
-  email: z.string().email("Invalid email address").min(1, "This field is required"),
-  password: z.string().min(6, "Password must be at least 6 characters long"),
-  companyName: z.string().min(1, "This field is required"),
-  position: z.string().min(1, "This field is required"),
-  workExperience: z.string().min(1, "This field is required"),
-  address: z.string().min(1, "This field is required"),
-  phoneNumber: z.string().min(1, "This field is required"),
-  terms: z.boolean().refine((val) => val, "You must agree to the terms and services"),
+  name: z.string().min(1, "Kolom ini wajib diisi"),
+  username: z.string().min(1, "Kolom ini wajib diisi"),
+  email: z.string().email("Alamat email tidak valid").min(1, "Kolom ini wajib diisi"),
+  password: z.string().min(6, "Kata sandi harus minimal 6 karakter"),
+  companyName: z.string().min(1, "Kolom ini wajib diisi"),
+  position: z.string().min(1, "Kolom ini wajib diisi"),
+  workExperience: z.string().min(1, "Kolom ini wajib diisi"),
+  address: z.string().min(1, "Kolom ini wajib diisi"),
+  phoneNumber: z.string().min(1, "Kolom ini wajib diisi"),
+  terms: z.boolean().refine((val) => val, "Anda harus menyetujui persyaratan dan layanan"),
 });
 
 // Define the form type
@@ -71,14 +71,14 @@ export default function RegisterPage() {
     } catch (error: any) {
       const message = error.message;
 
-      if (message.includes("Email or username has been registered")) {
+      if (message.includes("Email atau username sudah terdaftar")) {
         setErrorFields({
           email: "Email is already registered",
           username: "Username is already registered",
         });
-      } else if (message.includes("Phone number has been registered")) {
+      } else if (message.includes("Nomor telepon sudah terdaftar")) {
         setErrorFields({
-          phoneNumber: "Phone number is already registered",
+          phoneNumber: "Nomor telepon sudah terdaftar",
         });
       } else {
         setErrorMessage(message);
@@ -98,9 +98,9 @@ export default function RegisterPage() {
         </div>
       </div>
 
-      {/* Title */}
-      <div className="absolute top-6 left-6 text-base font-bold">
-        Amati
+      {/* Logo */}
+      <div className="absolute top-7 left-6">
+        <img src="../src/assets/logos/amati-logo.png" alt="Amati Logo" className="h-4 w-full object-contain" />
       </div>
 
       {/* Main content */}
@@ -111,9 +111,9 @@ export default function RegisterPage() {
 
           {/* Title and Already have an account */}
           <div className="flex flex-col gap-1 mb-7">
-            <h1 className="text-3xl lg:text-4xl font-extrabold text-left">Register an Account</h1>
+            <h1 className="text-3xl lg:text-4xl font-extrabold text-left">Daftar Akun</h1>
             <p className="text-sm md:text-sm text-gray-400">
-              Already have an account?{' '}
+              Sudah punya akun?{' '}
               <a href="/login" className="text-blue-500 font-semibold hover:text-blue-800">
                 Sign In now
               </a>
@@ -138,21 +138,22 @@ export default function RegisterPage() {
 
               {/* Form fields */}
               <div className="space-y-4">
-                <FormField name="name" render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="font-bold text-sm">Full Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Insert your full name according to Citizenship Card"
-                        {...field}
-                        className={`${form.formState.errors.name ? "border-red-500" : ""
-                          } text-sm md:text-base`}
-                        style={{ width: "100%" }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )} />
+                <div className="space-y-4">
+                  <FormField name="name" render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="font-bold text-sm">Nama Lengkap</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="Masukkan nama lengkap sesuai dengan Kartu Identitas"
+                          {...field}
+                          className={`${form.formState.errors.name ? "border-red-500" : ""} truncate text-sm md:text-base`}
+                          style={{ width: "100%" }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )} />
+                </div>
 
                 <FormField name="username" render={({ field }) => (
                   <FormItem>
@@ -200,10 +201,10 @@ export default function RegisterPage() {
 
                 <FormField name="companyName" render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="font-bold text-sm">Company Name</FormLabel>
+                    <FormLabel className="font-bold text-sm">Nama Perusahaan</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Company Name"
+                        placeholder="Nama Perusahaan"
                         {...field}
                         className={form.formState.errors.companyName ? "border-red-500" : ""}
                       />
@@ -214,10 +215,10 @@ export default function RegisterPage() {
 
                 <FormField name="position" render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="font-bold text-sm">Position</FormLabel>
+                    <FormLabel className="font-bold text-sm">Jabatan</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Position"
+                        placeholder="Jabatan"
                         {...field}
                         className={form.formState.errors.position ? "border-red-500" : ""}
                       />
@@ -228,10 +229,10 @@ export default function RegisterPage() {
 
                 <FormField name="workExperience" render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="font-bold text-sm">Work Experience</FormLabel>
+                    <FormLabel className="font-bold text-sm">Pengalaman Kerja</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Work Experience"
+                        placeholder="Pengalaman Kerja"
                         {...field}
                         className={form.formState.errors.workExperience ? "border-red-500" : ""}
                       />
@@ -242,10 +243,10 @@ export default function RegisterPage() {
 
                 <FormField name="address" render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="font-bold text-sm">Address</FormLabel>
+                    <FormLabel className="font-bold text-sm">Alamat</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Address"
+                        placeholder="Alamat"
                         {...field}
                         className={form.formState.errors.address ? "border-red-500" : ""}
                       />
@@ -256,10 +257,10 @@ export default function RegisterPage() {
 
                 <FormField name="phoneNumber" render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="font-bold text-sm">Phone Number</FormLabel>
+                    <FormLabel className="font-bold text-sm">Nomor Telepon</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Phone Number"
+                        placeholder="Nomor Telepon"
                         {...field}
                         className={form.formState.errors.phoneNumber ? "border-red-500" : ""}
                       />
@@ -289,7 +290,7 @@ export default function RegisterPage() {
                             htmlFor="terms"
                             className="text-sm font-normal leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[#00000099] p-2 rounded"
                           >
-                            I am agree to Terms and Services
+                            Saya setuju dengan syarat dan layanan
                           </label>
                         </div>
                       </FormControl>
@@ -307,7 +308,7 @@ export default function RegisterPage() {
                     type="submit"
                     className="w-full flex items-center justify-between text-base font-medium md:w-auto bg-[--primary-color] text-white"
                   >
-                    <span className="flex-grow text-left">Create Account</span>
+                    <span className="flex-grow text-left">Daftar Akun</span>
                     <TbArrowNarrowRight className="ml-12 h-5 w-5" />
                   </Button>
                 </div>

From a1e95b9c6cfd4d6209b78f2744ef997ef6fadbd2 Mon Sep 17 00:00:00 2001
From: Abiyasa Putra Prasetya <abiyasap24@gmail.com>
Date: Fri, 20 Sep 2024 11:22:13 +0700
Subject: [PATCH 09/22] Update: language for password

---
 apps/frontend/src/routes/register/index.lazy.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
index 3fa103e..3468815 100644
--- a/apps/frontend/src/routes/register/index.lazy.tsx
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -73,8 +73,8 @@ export default function RegisterPage() {
 
       if (message.includes("Email atau username sudah terdaftar")) {
         setErrorFields({
-          email: "Email is already registered",
-          username: "Username is already registered",
+          email: "Email sudah terdaftar",
+          username: "Username sudah terdaftar",
         });
       } else if (message.includes("Nomor telepon sudah terdaftar")) {
         setErrorFields({
@@ -186,7 +186,7 @@ export default function RegisterPage() {
 
                 <FormField name="password" render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="font-bold text-sm">Password</FormLabel>
+                    <FormLabel className="font-bold text-sm">Kata Sandi</FormLabel>
                     <FormControl>
                       <Input
                         type="password"
@@ -319,4 +319,4 @@ export default function RegisterPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From f7ea4ed6325b9bbb6eed47a53489edcc6b20a971 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Fri, 27 Sep 2024 13:49:06 +0700
Subject: [PATCH 10/22] Create : Integrasi FE & BE Fix GetAll By Id

---
 apps/backend/src/data/sidebarMenus.ts         |  7 ++
 apps/backend/src/middlewares/authInfo.ts      |  1 +
 .../src/routes/assessmentRequest/route.ts     | 78 +++++++++++++----
 apps/backend/src/types/HonoEnv.d.ts           |  1 +
 .../queries/assessmentRequestQueries.ts       | 68 +++++++++++++++
 .../assessmentRequest/index.lazy.tsx          | 87 +++++++++++++++++++
 .../assessmentRequest/index.tsx               | 18 ++++
 7 files changed, 243 insertions(+), 17 deletions(-)
 create mode 100644 apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
 create mode 100644 apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
 create mode 100644 apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.tsx

diff --git a/apps/backend/src/data/sidebarMenus.ts b/apps/backend/src/data/sidebarMenus.ts
index ec98d7e..9cb2421 100644
--- a/apps/backend/src/data/sidebarMenus.ts
+++ b/apps/backend/src/data/sidebarMenus.ts
@@ -21,6 +21,13 @@ const sidebarMenus: SidebarMenu[] = [
 		link: "/questions",
 		color: "green",
 	},
+	{
+		label: "Permohonan Asesmen",
+		icon: { tb: "TbChecklist" },
+		allowedPermissions: ["permissions.read"],
+		link: "/assessmentRequest",
+		color: "green",
+	},
 ];
 
 export default sidebarMenus;
diff --git a/apps/backend/src/middlewares/authInfo.ts b/apps/backend/src/middlewares/authInfo.ts
index 10514c2..957dc24 100644
--- a/apps/backend/src/middlewares/authInfo.ts
+++ b/apps/backend/src/middlewares/authInfo.ts
@@ -71,6 +71,7 @@ const authInfo = createMiddleware<HonoEnv>(async (c, next) => {
 
 		// Setting the currentUser with fetched data
 		c.set("currentUser", {
+			id: user[0].users.id, // Adding user ID here
 			name: user[0].users.name, // Assuming the first result is the user
 			permissions: Array.from(permissions),
 			roles: Array.from(roles),
diff --git a/apps/backend/src/routes/assessmentRequest/route.ts b/apps/backend/src/routes/assessmentRequest/route.ts
index 3f189a9..3332c71 100644
--- a/apps/backend/src/routes/assessmentRequest/route.ts
+++ b/apps/backend/src/routes/assessmentRequest/route.ts
@@ -1,4 +1,4 @@
-import { eq } from "drizzle-orm";
+import { eq, sql, ilike, isNull, and } from "drizzle-orm";
 import { Hono } from "hono";
 import { z } from "zod";
 import db from "../../drizzle";
@@ -20,23 +20,53 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
 
     // Get assessment request by user ID
     .get(
-        "/:id",
+        "/",
         checkPermission("assessmentRequest.read"),
         requestValidator(
             "query",
             z.object({
-                includeTrashed: z.string().default("false"),
+                page: z.coerce.number().int().min(0).default(0), // Menambahkan pagination page
+                limit: z.coerce.number().int().min(1).max(1000).default(10), // Menambahkan pagination limit
+                q: z.string().optional(), // Kata kunci pencarian (search)
             })
         ),
         async (c) => {
-            const userId = c.req.param("id");
-
+            const currentUser = c.get("currentUser");
+            const userId = currentUser?.id; // Mengambil userId dari currentUser yang disimpan di context
+            if (!userId) {
+                // Handle case where userId is undefined
+                return c.text("User not authenticated", 401);
+            }
+    
+            const { page, limit, q } = c.req.valid("query");
+    
+            // Query untuk menghitung total data
+            const totalCountQuery = db
+                .select({
+                    count: sql<number>`count(distinct ${assessments.id})`,
+                })
+                .from(assessments)
+                .leftJoin(respondents, eq(assessments.respondentId, respondents.id))
+                .leftJoin(users, eq(respondents.userId, users.id))
+                .where(
+                    and(
+                        eq(users.id, userId),
+                        q ? ilike(assessments.status, `%${q}%`) : undefined
+                    )
+                )
+    
+            const totalCountResult = await totalCountQuery;
+            const totalItems = totalCountResult[0]?.count || 0;
+    
+            // Query untuk mendapatkan data assessment dengan pagination
             const queryResult = await db
                 .select({
                     userId: users.id,
                     createdAt: assessments.createdAt,
                     name: users.name,
                     code: rolesSchema.code,
+                    id: assessments.id,
+                    tanggal: assessments.createdAt,
                     status: assessments.status,
                 })
                 .from(users)
@@ -44,21 +74,34 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                 .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));
-
+                .where(
+                    and(
+                        eq(users.id, userId),
+                        q ? ilike(assessments.status, `%${q}%`) : undefined
+                    )
+                )
+                .offset(page * limit)
+                .limit(limit);
+    
             if (!queryResult[0]) throw notFound();
-
-            const assessmentRequestData = {
-                ...queryResult,
-            };
-
-            return c.json(assessmentRequestData);
+    
+            // Mengembalikan data dengan metadata pagination
+            return c.json({
+                data: queryResult,
+                _metadata: {
+                    currentPage: page,
+                    totalPages: Math.ceil(totalItems / limit),
+                    totalItems,
+                    perPage: limit,
+                },
+            });
         }
     )
+    
 
     // Post assessment request by user ID
     .post(
-        "/:id",
+        "/",
         checkPermission("assessmentRequest.create"),
         requestValidator(
             "json",
@@ -68,11 +111,12 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
         ),
         async (c) => {
             const { respondentId } = c.req.valid("json");
-            const userId = c.req.param("id");
+            const currentUser = c.get("currentUser");
+            const userId = currentUser?.id; // Mengambil userId dari currentUser yang disimpan di context
 
             // Make sure the userId exists
             if (!userId) {
-                throw new HTTPException(400, { message: "User ID is required." });
+                throw new HTTPException(400, { message: "User not authenticated" });
             }
 
             // Validate if respondent exists
@@ -101,5 +145,5 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
             return c.json({ message: "Successfully submitted the assessment request" }, 201);
         }
     );
-
+    
 export default assessmentRequestRoute;
\ No newline at end of file
diff --git a/apps/backend/src/types/HonoEnv.d.ts b/apps/backend/src/types/HonoEnv.d.ts
index 4cf35db..e9ceb7d 100644
--- a/apps/backend/src/types/HonoEnv.d.ts
+++ b/apps/backend/src/types/HonoEnv.d.ts
@@ -5,6 +5,7 @@ type HonoEnv = {
 	Variables: {
 		uid?: string;
 		currentUser?: {
+			id: string;
 			name: string;
 			permissions: SpecificPermissionCode[];
 			roles: RoleCode[];
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
new file mode 100644
index 0000000..17344f6
--- /dev/null
+++ b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
@@ -0,0 +1,68 @@
+import client from "@/honoClient";
+import fetchRPC from "@/utils/fetchRPC";
+import { queryOptions } from "@tanstack/react-query";
+import { InferRequestType } from "hono";
+
+export const assessmentRequestQueryOptions = (page: number, limit: number, q?: string) =>
+	queryOptions({
+		queryKey: ["assesmentRequest", { page, limit, q }],
+		queryFn: () =>
+			fetchRPC(
+				client.assessmentRequest.$get({
+					query: {
+						limit: String(limit),
+						page: String(page),
+						q,
+					},
+				})
+			),
+	});
+
+export const getUserByIdQueryOptions = (userId: string | undefined) =>
+	queryOptions({
+		queryKey: ["user", userId],
+		queryFn: () =>
+			fetchRPC(
+				client.users[":id"].$get({
+					param: {
+						id: userId!,
+					},
+					query: {},
+				})
+			),
+		enabled: Boolean(userId),
+	});
+
+export const createUser = async (
+	form: InferRequestType<typeof client.users.$post>["form"]
+) => {
+	return await fetchRPC(
+		client.users.$post({
+			form,
+		})
+	);
+};
+
+export const updateUser = async (
+	form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
+		id: string;
+	}
+) => {
+	return await fetchRPC(
+		client.users[":id"].$patch({
+			param: {
+				id: form.id,
+			},
+			form,
+		})
+	);
+};
+
+export const deleteUser = async (id: string) => {
+	return await fetchRPC(
+		client.users[":id"].$delete({
+			param: { id },
+			form: {},
+		})
+	);
+};
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
new file mode 100644
index 0000000..08db5ed
--- /dev/null
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -0,0 +1,87 @@
+import { assessmentRequestQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestQueries";
+import PageTemplate from "@/components/PageTemplate";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import UserFormModal from "@/modules/assessmentRequestManagement/modals/UserFormModal";
+import ExtractQueryDataType from "@/types/ExtractQueryDataType";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Badge, Flex } from "@mantine/core";
+import UserDeleteModal from "@/modules/assessmentRequestManagement/modals/UserDeleteModal";
+import { Button } from "@/shadcn/components/ui/button";
+
+export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({
+	component: UsersPage,
+});
+
+type DataType = ExtractQueryDataType<typeof assessmentRequestQueryOptions>;
+
+const columnHelper = createColumnHelper<DataType>();
+
+export default function UsersPage() {
+	return (
+		<PageTemplate
+			title="Users"
+			queryOptions={assessmentRequestQueryOptions}
+			modals={[<UserFormModal />, <UserDeleteModal />]}
+			columnDefs={[
+				columnHelper.display({
+					header: "No",
+					cell: (props) => props.row.index + 1,
+				}),
+				columnHelper.display({
+					header: "Tanggal",
+					cell: (props) =>
+						props.row.original.createdAt
+							? new Intl.DateTimeFormat("ID", {
+									year: "numeric",
+									month: "long",
+									day: "2-digit",
+									hour: "2-digit",
+									minute: "2-digit",
+									hour12: true,
+							  }).format(new Date(props.row.original.createdAt))
+							: 'N/A',
+				}),
+
+				columnHelper.display({
+					header: "Status",
+					cell: (props) => {
+						const status = props.row.original.status;
+						switch (status) {
+							case "menunggu konfirmasi":
+								return <Badge color="yellow">Menunggu Konfirmasi</Badge>;
+							case "diterima":
+								return <Badge color="green">Diterima</Badge>;
+							case "ditolak":
+								return <Badge color="red">Ditolak</Badge>;
+							case "selesai":
+								return <Badge color="blue">Selesai</Badge>;
+							default:
+								return <Badge color="gray">Tidak diketahui</Badge>;
+						}
+					},
+				}),
+
+				columnHelper.display({
+					header: "Actions",
+					cell: (props) => {
+						const status = props.row.original.status;
+
+						return (
+							<Flex gap="xs">
+								{status === "selesai" ? (
+									<Button onClick={() => alert('Lihat Hasil')}>Lihat Hasil</Button>
+								) : status === "diterima" ? (
+									<Button onClick={() => alert('Mulai Asesmen')}>Mulai Asesmen</Button>
+								) : status === "menunggu konfirmasi" || status === "ditolak" ? (
+									<Button disabled>
+										Mulai Asesmen
+									</Button>
+								) : null}
+							</Flex>
+						);
+					},
+				}),
+			]}
+		/>
+	);
+}
\ No newline at end of file
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.tsx
new file mode 100644
index 0000000..3eb169d
--- /dev/null
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.tsx
@@ -0,0 +1,18 @@
+import { assessmentRequestQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestQueries"
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+
+const searchParamSchema = z.object({
+	create: z.boolean().default(false).optional(),
+	edit: z.string().default("").optional(),
+	delete: z.string().default("").optional(),
+	detail: z.string().default("").optional(),
+});
+
+export const Route = createFileRoute("/_dashboardLayout/assessmentRequest/")({
+	validateSearch: searchParamSchema,
+
+	loader: ({ context: { queryClient } }) => {
+		queryClient.ensureQueryData(assessmentRequestQueryOptions(0, 10));
+	},
+});

From 4453cc49d734a98f8b891fa91394e09c19414b79 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Fri, 27 Sep 2024 16:27:20 +0700
Subject: [PATCH 11/22] Update : Post on AssessmentRequest and typo on
 respondents schema

---
 .../backend/src/drizzle/schema/respondents.ts |  2 +-
 .../src/routes/assessmentRequest/route.ts     | 21 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/backend/src/drizzle/schema/respondents.ts b/apps/backend/src/drizzle/schema/respondents.ts
index 744ec4f..98d8805 100644
--- a/apps/backend/src/drizzle/schema/respondents.ts
+++ b/apps/backend/src/drizzle/schema/respondents.ts
@@ -15,7 +15,7 @@ export const respondents = pgTable("respondents", {
     phoneNumber: varchar("phoneNumber", { length: 13 }).notNull(),
     createdAt: timestamp("createdAt", { mode: "date" }).defaultNow(),
     updatedAt: timestamp("updatedAt", { mode: "date" }).defaultNow(),
-    deletedAt: timestamp("deletetAt", { mode: "date" }),
+    deletedAt: timestamp("deletedAt", { mode: "date" }),
 });
 
 export const respondentsRelations = relations(respondents, ({ one }) => ({
diff --git a/apps/backend/src/routes/assessmentRequest/route.ts b/apps/backend/src/routes/assessmentRequest/route.ts
index 3332c71..8499b35 100644
--- a/apps/backend/src/routes/assessmentRequest/route.ts
+++ b/apps/backend/src/routes/assessmentRequest/route.ts
@@ -97,7 +97,6 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
             });
         }
     )
-    
 
     // Post assessment request by user ID
     .post(
@@ -106,7 +105,7 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
         requestValidator(
             "json",
             z.object({
-                respondentId: z.string().min(1),
+                respondentId: z.string().min(1), // Memastikan respondentId minimal ada
             })
         ),
         async (c) => {
@@ -114,36 +113,36 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
             const currentUser = c.get("currentUser");
             const userId = currentUser?.id; // Mengambil userId dari currentUser yang disimpan di context
 
-            // Make sure the userId exists
+            // Memastikan user sudah terautentikasi
             if (!userId) {
-                throw new HTTPException(400, { message: "User not authenticated" });
+                return c.text("User not authenticated", 401);
             }
 
-            // Validate if respondent exists
+            // Validasi apakah respondent dengan respondentId tersebut ada
             const respondent = await db
                 .select()
                 .from(respondents)
-                .where(eq(respondents.id, respondentId));
+                .where(and(eq(respondents.id, respondentId), eq(respondents.userId, userId)));
 
             if (!respondent.length) {
-                throw new HTTPException(404, { message: "Respondent not found." });
+                throw new HTTPException(404, { message: "Respondent not found or unauthorized." });
             }
 
-            // Create the assessment request
+            // Membuat permohonan asesmen baru
             const newAssessment = await db
                 .insert(assessments)
                 .values({
                     id: createId(),
                     respondentId,
-                    status: "menunggu konfirmasi",
+                    status: "menunggu konfirmasi", // Status awal permohonan
                     validatedBy: null,
                     validatedAt: null,
                     createdAt: new Date(),
                 })
                 .returning();
 
-            return c.json({ message: "Successfully submitted the assessment request" }, 201);
+            return c.json({ message: "Successfully submitted the assessment request", data: newAssessment }, 201);
         }
     );
-    
+
 export default assessmentRequestRoute;
\ No newline at end of file

From e7cf3e881f57e142e720ea063c8503458540232e Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Mon, 30 Sep 2024 16:32:45 +0700
Subject: [PATCH 12/22] update : condition on Get method

---
 apps/backend/src/routes/assessmentRequest/route.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/backend/src/routes/assessmentRequest/route.ts b/apps/backend/src/routes/assessmentRequest/route.ts
index 8499b35..07e823e 100644
--- a/apps/backend/src/routes/assessmentRequest/route.ts
+++ b/apps/backend/src/routes/assessmentRequest/route.ts
@@ -9,7 +9,7 @@ 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 { forbidden, notFound } from "../../errors/DashboardError";
 import checkPermission from "../../middlewares/checkPermission";
 import requestValidator from "../../utils/requestValidator";
 import { HTTPException } from "hono/http-exception";
@@ -33,11 +33,12 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
         async (c) => {
             const currentUser = c.get("currentUser");
             const userId = currentUser?.id; // Mengambil userId dari currentUser yang disimpan di context
-            if (!userId) {
-                // Handle case where userId is undefined
-                return c.text("User not authenticated", 401);
-            }
     
+            if (!userId) {
+                throw forbidden({ 
+                    message: "User not authenticated" 
+                });
+              }
             const { page, limit, q } = c.req.valid("query");
     
             // Query untuk menghitung total data

From 3c73af914f3880c41c5c39f046b8de4679978660 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Thu, 3 Oct 2024 11:12:52 +0700
Subject: [PATCH 13/22] add: color for button register

---
 apps/frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 6f4ed59..c6f68d5 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -69,5 +69,5 @@
 }
 
 :root {
-  --primary-color: #2555FF
+  --primary-color: #2555FF;
 }
\ No newline at end of file

From ec545c3d7b8d207b5fcc24188ff28977c1dddb0b Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Thu, 3 Oct 2024 13:43:20 +0700
Subject: [PATCH 14/22] Update : Integrasi on Create Assessment Request

---
 .../backend/src/drizzle/schema/assessments.ts |   2 +-
 .../src/routes/assessmentRequest/route.ts     |   7 +-
 .../modals/FormModal.tsx                      | 191 ++++++++++++++++++
 .../queries/assessmentRequestQueries.ts       |  56 +----
 apps/frontend/src/routeTree.gen.ts            |  66 ++++++
 .../assessmentRequest/index.lazy.tsx          |   7 +-
 apps/frontend/vite.config.ts                  |   2 +-
 7 files changed, 277 insertions(+), 54 deletions(-)
 create mode 100644 apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx

diff --git a/apps/backend/src/drizzle/schema/assessments.ts b/apps/backend/src/drizzle/schema/assessments.ts
index 75b9ccd..fd228cc 100644
--- a/apps/backend/src/drizzle/schema/assessments.ts
+++ b/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", ["menunggu konfirmasi", "disetujui", "ditolak", "selesai"]);
+const statusEnum = pgEnum("status", ["menunggu konfirmasi", "diterima", "ditolak", "selesai"]);
 
 export const assessments = pgTable("assessments", {
     id: varchar("id", { length: 50 })
diff --git a/apps/backend/src/routes/assessmentRequest/route.ts b/apps/backend/src/routes/assessmentRequest/route.ts
index 07e823e..efc8cdf 100644
--- a/apps/backend/src/routes/assessmentRequest/route.ts
+++ b/apps/backend/src/routes/assessmentRequest/route.ts
@@ -1,4 +1,4 @@
-import { eq, sql, ilike, isNull, and } from "drizzle-orm";
+import { eq, sql, ilike, isNull, and, desc } from "drizzle-orm";
 import { Hono } from "hono";
 import { z } from "zod";
 import db from "../../drizzle";
@@ -69,6 +69,9 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                     id: assessments.id,
                     tanggal: assessments.createdAt,
                     status: assessments.status,
+                    respondentId: respondents.id,
+                    email: users.email,
+                    username: users.username,
                 })
                 .from(users)
                 .leftJoin(rolesToUsers, eq(users.id, rolesToUsers.userId))
@@ -81,8 +84,10 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                         q ? ilike(assessments.status, `%${q}%`) : undefined
                     )
                 )
+                .orderBy(desc(assessments.createdAt))
                 .offset(page * limit)
                 .limit(limit);
+                
     
             if (!queryResult[0]) throw notFound();
     
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
new file mode 100644
index 0000000..9a896d0
--- /dev/null
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
@@ -0,0 +1,191 @@
+import stringToColorHex from "@/utils/stringToColorHex";
+import {
+	Avatar,
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ScrollArea,
+	Stack,
+	Text
+} from "@mantine/core";
+// import { Button } from "@/shadcn/components/ui/button";
+import { useForm } from "@mantine/form";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import { useEffect } from "react";
+import { notifications } from "@mantine/notifications";
+import FormResponseError from "@/errors/FormResponseError";
+import createInputComponents from "@/utils/createInputComponents";
+import { assessmentRequestQueryOptions, createAssessmentRequest } from "../queries/assessmentRequestQueries";
+
+/**
+ * Change this
+ */
+const routeApi = getRouteApi("/_dashboardLayout/assessmentRequest/");
+
+export default function UserFormModal() {
+	/**
+	 * DON'T CHANGE FOLLOWING:
+	 */
+	const queryClient = useQueryClient();
+
+	const navigate = routeApi.useNavigate();
+
+	const searchParams = routeApi.useSearch();
+
+	const dataId = searchParams.detail || searchParams.edit;
+
+	const isModalOpen = Boolean(dataId || searchParams.create);
+
+	const detailId = searchParams.detail;
+	const editId = searchParams.edit;
+
+	const formType = detailId ? "detail" : editId ? "edit" : "create";
+
+	/**
+	 * CHANGE FOLLOWING:
+	 */
+
+	const userQuery = useQuery(assessmentRequestQueryOptions(0, 10));
+
+	const modalTitle = 
+	<b>
+		Konfirmasi
+	</b>
+
+	const form = useForm({
+		initialValues: {
+			id: "",
+			respondentsId: "",
+			name: "",
+		},
+	});
+
+	useEffect(() => {
+		const data = userQuery.data;
+
+		if (!data) {
+			form.reset();
+			return;
+		}
+
+		form.setValues({
+			id: data.data[0].id ?? "",
+			respondentsId: data.data[0].respondentId ?? "",
+			name: data.data[0].name ?? "",
+		});
+
+		form.setErrors({});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [userQuery.data]);
+
+	const mutation = useMutation({
+		mutationKey: ["usersMutation"],
+		mutationFn: async (options: { action: "create"; data: { respondentsId: string } }) => {
+		console.log("called");
+		  if (options.action === "create") {
+			return await createAssessmentRequest(options.data);
+		  }
+		},
+		onError: (error: unknown) => {
+		  console.log(error);
+	  
+		  if (error instanceof FormResponseError) {
+			form.setErrors(error.formErrors);
+			return;
+		  }
+	  
+		  if (error instanceof Error) {
+			notifications.show({
+			  message: error.message,
+			  color: "red",
+			});
+		  }
+		},
+	  });
+	  
+	  const handleSubmit = async (values: typeof form.values) => {
+		if (formType === "detail") return;
+	  
+		if (formType === "create") {
+		  try {
+			await mutation.mutateAsync({
+			  action: "create",
+			  data: {
+				respondentsId: values.respondentsId,
+			  },
+			});
+			notifications.show({
+			  message: "Permohonan Asesmen berhasil dibuat!",
+			  color: "green",
+			});
+		  } catch (error) {
+			console.error(error);
+		  }
+		}
+	  
+		queryClient.invalidateQueries({ queryKey: ["users"] });
+		navigate({ search: {} });
+	  };
+	  
+
+	return (
+		<Modal
+			opened={isModalOpen}
+			onClose={() => navigate({ search: {} })}
+			title= {modalTitle} 
+			size="md"
+		>	
+			<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+
+				<Text>Apakah anda yakin ingin membuat Permohonan Asesmen Baru?</Text>
+
+				{createInputComponents({
+					disableAll: mutation.isPending,
+					readonlyAll: formType === "detail",
+					inputs: [
+						{
+							type: "text",
+							label: "User ID",
+							readOnly: true,
+							variant: "filled",
+							...form.getInputProps("id"),
+							hidden: true
+						},
+						{
+							type: "text",
+							label: "Respondent ID",
+							...form.getInputProps("respondentsId"),
+							hidden: true,
+						},
+						{
+							type: "text",
+							label: "Name",
+							...form.getInputProps("name"),
+							hidden: true,
+						},
+					],
+				})}
+
+				{/* Buttons */}
+				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+					<Button
+						variant="outline"
+						onClick={() => navigate({ search: {} })}
+						disabled={mutation.isPending}
+					>
+						Tidak
+					</Button>
+						<Button
+							// variant="filled"
+							type="submit"
+							loading={mutation.isPending}
+						>
+							Ya
+						</Button>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
index 17344f6..95f6923 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
+++ b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
@@ -1,7 +1,6 @@
 import client from "@/honoClient";
 import fetchRPC from "@/utils/fetchRPC";
 import { queryOptions } from "@tanstack/react-query";
-import { InferRequestType } from "hono";
 
 export const assessmentRequestQueryOptions = (page: number, limit: number, q?: string) =>
 	queryOptions({
@@ -18,51 +17,14 @@ export const assessmentRequestQueryOptions = (page: number, limit: number, q?: s
 			),
 	});
 
-export const getUserByIdQueryOptions = (userId: string | undefined) =>
-	queryOptions({
-		queryKey: ["user", userId],
-		queryFn: () =>
-			fetchRPC(
-				client.users[":id"].$get({
-					param: {
-						id: userId!,
-					},
-					query: {},
-				})
-			),
-		enabled: Boolean(userId),
+export const createAssessmentRequest = async ({ respondentsId }: { respondentsId: string }) => {
+	const response = await client.assessmentRequest.$post({
+	  json: { respondentId: respondentsId }, // pastikan key-nya sesuai dengan backend API Anda
 	});
-
-export const createUser = async (
-	form: InferRequestType<typeof client.users.$post>["form"]
-) => {
-	return await fetchRPC(
-		client.users.$post({
-			form,
-		})
-	);
-};
-
-export const updateUser = async (
-	form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
-		id: string;
+  
+	if (!response.ok) {
+	  throw new Error("Failed to create assessment request");
 	}
-) => {
-	return await fetchRPC(
-		client.users[":id"].$patch({
-			param: {
-				id: form.id,
-			},
-			form,
-		})
-	);
-};
-
-export const deleteUser = async (id: string) => {
-	return await fetchRPC(
-		client.users[":id"].$delete({
-			param: { id },
-			form: {},
-		})
-	);
-};
+  
+	return await response.json();
+  };
\ No newline at end of file
diff --git a/apps/frontend/src/routeTree.gen.ts b/apps/frontend/src/routeTree.gen.ts
index 8619974..c0c2314 100644
--- a/apps/frontend/src/routeTree.gen.ts
+++ b/apps/frontend/src/routeTree.gen.ts
@@ -17,12 +17,17 @@ import { Route as DashboardLayoutImport } from './routes/_dashboardLayout'
 import { Route as DashboardLayoutUsersIndexImport } from './routes/_dashboardLayout/users/index'
 import { Route as DashboardLayoutTimetableIndexImport } from './routes/_dashboardLayout/timetable/index'
 import { Route as DashboardLayoutDashboardIndexImport } from './routes/_dashboardLayout/dashboard/index'
+import { Route as DashboardLayoutAssessmentRequestIndexImport } from './routes/_dashboardLayout/assessmentRequest/index'
 
 // Create Virtual Routes
 
 const IndexLazyImport = createFileRoute('/')()
 const LogoutIndexLazyImport = createFileRoute('/logout/')()
 const LoginIndexLazyImport = createFileRoute('/login/')()
+const ForgotPasswordIndexLazyImport = createFileRoute('/forgot-password/')()
+const ForgotPasswordVerifyLazyImport = createFileRoute(
+  '/forgot-password/verify',
+)()
 
 // Create/Update Routes
 
@@ -46,6 +51,20 @@ const LoginIndexLazyRoute = LoginIndexLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/login/index.lazy').then((d) => d.Route))
 
+const ForgotPasswordIndexLazyRoute = ForgotPasswordIndexLazyImport.update({
+  path: '/forgot-password/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/forgot-password/index.lazy').then((d) => d.Route),
+)
+
+const ForgotPasswordVerifyLazyRoute = ForgotPasswordVerifyLazyImport.update({
+  path: '/forgot-password/verify',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/forgot-password/verify.lazy').then((d) => d.Route),
+)
+
 const DashboardLayoutUsersIndexRoute = DashboardLayoutUsersIndexImport.update({
   path: '/users/',
   getParentRoute: () => DashboardLayoutRoute,
@@ -65,6 +84,16 @@ const DashboardLayoutDashboardIndexRoute =
     getParentRoute: () => DashboardLayoutRoute,
   } as any)
 
+const DashboardLayoutAssessmentRequestIndexRoute =
+  DashboardLayoutAssessmentRequestIndexImport.update({
+    path: '/assessmentRequest/',
+    getParentRoute: () => DashboardLayoutRoute,
+  } as any).lazy(() =>
+    import('./routes/_dashboardLayout/assessmentRequest/index.lazy').then(
+      (d) => d.Route,
+    ),
+  )
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -83,6 +112,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardLayoutImport
       parentRoute: typeof rootRoute
     }
+    '/forgot-password/verify': {
+      id: '/forgot-password/verify'
+      path: '/forgot-password/verify'
+      fullPath: '/forgot-password/verify'
+      preLoaderRoute: typeof ForgotPasswordVerifyLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/forgot-password/': {
+      id: '/forgot-password/'
+      path: '/forgot-password'
+      fullPath: '/forgot-password'
+      preLoaderRoute: typeof ForgotPasswordIndexLazyImport
+      parentRoute: typeof rootRoute
+    }
     '/login/': {
       id: '/login/'
       path: '/login'
@@ -97,6 +140,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LogoutIndexLazyImport
       parentRoute: typeof rootRoute
     }
+    '/_dashboardLayout/assessmentRequest/': {
+      id: '/_dashboardLayout/assessmentRequest/'
+      path: '/assessmentRequest'
+      fullPath: '/assessmentRequest'
+      preLoaderRoute: typeof DashboardLayoutAssessmentRequestIndexImport
+      parentRoute: typeof DashboardLayoutImport
+    }
     '/_dashboardLayout/dashboard/': {
       id: '/_dashboardLayout/dashboard/'
       path: '/dashboard'
@@ -126,10 +176,13 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
   IndexLazyRoute,
   DashboardLayoutRoute: DashboardLayoutRoute.addChildren({
+    DashboardLayoutAssessmentRequestIndexRoute,
     DashboardLayoutDashboardIndexRoute,
     DashboardLayoutTimetableIndexRoute,
     DashboardLayoutUsersIndexRoute,
   }),
+  ForgotPasswordVerifyLazyRoute,
+  ForgotPasswordIndexLazyRoute,
   LoginIndexLazyRoute,
   LogoutIndexLazyRoute,
 })
@@ -144,6 +197,8 @@ export const routeTree = rootRoute.addChildren({
       "children": [
         "/",
         "/_dashboardLayout",
+        "/forgot-password/verify",
+        "/forgot-password/",
         "/login/",
         "/logout/"
       ]
@@ -154,17 +209,28 @@ export const routeTree = rootRoute.addChildren({
     "/_dashboardLayout": {
       "filePath": "_dashboardLayout.tsx",
       "children": [
+        "/_dashboardLayout/assessmentRequest/",
         "/_dashboardLayout/dashboard/",
         "/_dashboardLayout/timetable/",
         "/_dashboardLayout/users/"
       ]
     },
+    "/forgot-password/verify": {
+      "filePath": "forgot-password/verify.lazy.tsx"
+    },
+    "/forgot-password/": {
+      "filePath": "forgot-password/index.lazy.tsx"
+    },
     "/login/": {
       "filePath": "login/index.lazy.tsx"
     },
     "/logout/": {
       "filePath": "logout/index.lazy.tsx"
     },
+    "/_dashboardLayout/assessmentRequest/": {
+      "filePath": "_dashboardLayout/assessmentRequest/index.tsx",
+      "parent": "/_dashboardLayout"
+    },
     "/_dashboardLayout/dashboard/": {
       "filePath": "_dashboardLayout/dashboard/index.tsx",
       "parent": "/_dashboardLayout"
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index 08db5ed..51b9dc7 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -1,11 +1,10 @@
 import { assessmentRequestQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestQueries";
 import PageTemplate from "@/components/PageTemplate";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import UserFormModal from "@/modules/assessmentRequestManagement/modals/UserFormModal";
+import FormModal from "@/modules/assessmentRequestManagement/modals/FormModal";
 import ExtractQueryDataType from "@/types/ExtractQueryDataType";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Badge, Flex } from "@mantine/core";
-import UserDeleteModal from "@/modules/assessmentRequestManagement/modals/UserDeleteModal";
 import { Button } from "@/shadcn/components/ui/button";
 
 export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({
@@ -19,9 +18,9 @@ const columnHelper = createColumnHelper<DataType>();
 export default function UsersPage() {
 	return (
 		<PageTemplate
-			title="Users"
+			title="Permohonan Asesmen"
 			queryOptions={assessmentRequestQueryOptions}
-			modals={[<UserFormModal />, <UserDeleteModal />]}
+			modals={[<FormModal />]}
 			columnDefs={[
 				columnHelper.display({
 					header: "No",
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index 2d6bad5..6c9655b 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
 	plugins: [react(), TanStackRouterVite()],
 	resolve: {
 		alias: {
-			"@": path.resolve(__dirname,"/src"),
+			"@": path.resolve(__dirname,"src"),
 		},
 	},
 });

From 10df38e7a72e0393b331744b2351a590d2f105c4 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Fri, 4 Oct 2024 10:59:22 +0700
Subject: [PATCH 15/22] Update : Create Assessment Request

---
 .../modals/FormModal.tsx                      | 38 ++++++++++---------
 .../queries/assessmentRequestQueries.ts       |  4 +-
 .../src/shadcn/components/ui/button.tsx       | 13 ++++++-
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
index 9a896d0..bb2442e 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
@@ -1,7 +1,7 @@
 import stringToColorHex from "@/utils/stringToColorHex";
 import {
 	Avatar,
-	Button,
+	// Button,
 	Center,
 	Flex,
 	Modal,
@@ -9,7 +9,7 @@ import {
 	Stack,
 	Text
 } from "@mantine/core";
-// import { Button } from "@/shadcn/components/ui/button";
+import { Button } from "@/shadcn/components/ui/button";
 import { useForm } from "@mantine/form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
@@ -34,14 +34,9 @@ export default function UserFormModal() {
 
 	const searchParams = routeApi.useSearch();
 
-	const dataId = searchParams.detail || searchParams.edit;
+	const isModalOpen = Boolean(searchParams.create);
 
-	const isModalOpen = Boolean(dataId || searchParams.create);
-
-	const detailId = searchParams.detail;
-	const editId = searchParams.edit;
-
-	const formType = detailId ? "detail" : editId ? "edit" : "create";
+	const formType = "create";
 
 	/**
 	 * CHANGE FOLLOWING:
@@ -77,7 +72,6 @@ export default function UserFormModal() {
 		});
 
 		form.setErrors({});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [userQuery.data]);
 
 	const mutation = useMutation({
@@ -88,6 +82,18 @@ export default function UserFormModal() {
 			return await createAssessmentRequest(options.data);
 		  }
 		},
+		onSuccess: () => {
+			// Ini akan memaksa react-query untuk mengambil data terbaru
+			queryClient.invalidateQueries({ queryKey: ["assessmentRequest"] });
+		
+			notifications.show({
+			  message: "Permohonan Asesmen berhasil dibuat!",
+			  color: "green",
+			});
+		
+			// Menutup modal
+			navigate({ search: {} });
+		  },
 		onError: (error: unknown) => {
 		  console.log(error);
 	  
@@ -106,7 +112,6 @@ export default function UserFormModal() {
 	  });
 	  
 	  const handleSubmit = async (values: typeof form.values) => {
-		if (formType === "detail") return;
 	  
 		if (formType === "create") {
 		  try {
@@ -116,10 +121,6 @@ export default function UserFormModal() {
 				respondentsId: values.respondentsId,
 			  },
 			});
-			notifications.show({
-			  message: "Permohonan Asesmen berhasil dibuat!",
-			  color: "green",
-			});
 		  } catch (error) {
 			console.error(error);
 		  }
@@ -141,9 +142,10 @@ export default function UserFormModal() {
 
 				<Text>Apakah anda yakin ingin membuat Permohonan Asesmen Baru?</Text>
 
+				{/* Fields to display data will be sent */}
 				{createInputComponents({
 					disableAll: mutation.isPending,
-					readonlyAll: formType === "detail",
+					readonlyAll: formType === "create",
 					inputs: [
 						{
 							type: "text",
@@ -172,15 +174,15 @@ export default function UserFormModal() {
 				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
 					<Button
 						variant="outline"
+						type="button"
 						onClick={() => navigate({ search: {} })}
 						disabled={mutation.isPending}
 					>
 						Tidak
 					</Button>
 						<Button
-							// variant="filled"
 							type="submit"
-							loading={mutation.isPending}
+							isLoading={mutation.isPending}
 						>
 							Ya
 						</Button>
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
index 95f6923..1be2a03 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
+++ b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts
@@ -4,7 +4,7 @@ import { queryOptions } from "@tanstack/react-query";
 
 export const assessmentRequestQueryOptions = (page: number, limit: number, q?: string) =>
 	queryOptions({
-		queryKey: ["assesmentRequest", { page, limit, q }],
+		queryKey: ["assessmentRequest", { page, limit, q }],
 		queryFn: () =>
 			fetchRPC(
 				client.assessmentRequest.$get({
@@ -19,7 +19,7 @@ export const assessmentRequestQueryOptions = (page: number, limit: number, q?: s
 
 export const createAssessmentRequest = async ({ respondentsId }: { respondentsId: string }) => {
 	const response = await client.assessmentRequest.$post({
-	  json: { respondentId: respondentsId }, // pastikan key-nya sesuai dengan backend API Anda
+	  json: { respondentId: respondentsId },
 	});
   
 	if (!response.ok) {
diff --git a/apps/frontend/src/shadcn/components/ui/button.tsx b/apps/frontend/src/shadcn/components/ui/button.tsx
index 0ba4277..33ba732 100644
--- a/apps/frontend/src/shadcn/components/ui/button.tsx
+++ b/apps/frontend/src/shadcn/components/ui/button.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { TbLoader2 } from "react-icons/tb"
 
 import { cn } from "@/lib/utils"
 
@@ -37,17 +38,25 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  isLoading?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, isLoading, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        disabled={isLoading || props.disabled} // Disable tombol jika loading
         {...props}
-      />
+      >
+        {isLoading ? (
+          <TbLoader2 className="mr-2 h-4 w-4 animate-spin" /> // Tampilkan spinner saat loading
+        ) : (
+          children
+        )}
+      </Comp>
     )
   }
 )

From 0fccc638fe148eabe3d1e129af2ea3aad7ef147c Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Fri, 4 Oct 2024 15:01:44 +0700
Subject: [PATCH 16/22] update : button action with alert

---
 .../assessmentRequest/index.lazy.tsx          | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index 51b9dc7..83a6a49 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -16,6 +16,17 @@ type DataType = ExtractQueryDataType<typeof assessmentRequestQueryOptions>;
 const columnHelper = createColumnHelper<DataType>();
 
 export default function UsersPage() {
+	
+	const handleStartAssessment = (assessmentId: string) => {
+		const userConfirmed = window.confirm("Apakah anda yakin untuk memulai asesmen?");
+		
+		if (userConfirmed) {
+			// Redirect ke URL baru di tab baru
+			const assessmentUrl = `/assessment?id=${assessmentId}`;
+			window.open(assessmentUrl, "_blank");
+		}
+	};
+	
 	return (
 		<PageTemplate
 			title="Permohonan Asesmen"
@@ -61,20 +72,39 @@ export default function UsersPage() {
 				}),
 
 				columnHelper.display({
-					header: "Actions",
+					header: "Aksi",
 					cell: (props) => {
 						const status = props.row.original.status;
+						const assessmentId = props.row.original.id;
+
 
 						return (
 							<Flex gap="xs">
 								{status === "selesai" ? (
-									<Button onClick={() => alert('Lihat Hasil')}>Lihat Hasil</Button>
+									<>
+										<Button disabled>Mulai Asesmen</Button>
+										<Button onClick={() => alert('Lihat Hasil')}>Lihat Hasil</Button>
+									</>
 								) : status === "diterima" ? (
-									<Button onClick={() => alert('Mulai Asesmen')}>Mulai Asesmen</Button>
+									<>
+										<Button 
+											onClick={() => {
+												if (assessmentId) {
+													handleStartAssessment(assessmentId); 
+												} else {
+													alert("Assessment ID tidak valid.");
+												}
+											}}
+										>
+											Mulai Asesmen
+										</Button>
+										<Button disabled>Lihat Hasil</Button>
+									</>
 								) : status === "menunggu konfirmasi" || status === "ditolak" ? (
-									<Button disabled>
-										Mulai Asesmen
-									</Button>
+									<>
+										<Button disabled>Mulai Asesmen</Button>
+										<Button disabled>Lihat Hasil</Button>
+									</>
 								) : null}
 							</Flex>
 						);

From 8ff729a7abe6319c446da11dd90e277293a46ee1 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Mon, 7 Oct 2024 10:58:38 +0700
Subject: [PATCH 17/22] Update : using component Shadcn,  create Modal for
 actions with redirect

---
 .../modals/ConfirmModal.tsx                   |  34 +++
 ...l.tsx => CreateAssessmentRequestModal.tsx} |  25 +-
 .../assessmentRequest/index.lazy.tsx          | 215 +++++++++++-------
 .../src/shadcn/components/ui/badge.tsx        |   6 +
 .../src/shadcn/components/ui/button.tsx       |   2 +-
 5 files changed, 177 insertions(+), 105 deletions(-)
 create mode 100644 apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx
 rename apps/frontend/src/modules/assessmentRequestManagement/modals/{FormModal.tsx => CreateAssessmentRequestModal.tsx} (91%)

diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx
new file mode 100644
index 0000000..3ef2248
--- /dev/null
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx
@@ -0,0 +1,34 @@
+import { Modal, Text, Flex } from "@mantine/core";
+import { Button } from "@/shadcn/components/ui/button";
+
+interface StartAssessmentModalProps {
+	assessmentId: string;
+	isOpen: boolean;
+	onClose: () => void;
+	onConfirm: (assessmentId: string) => void;
+}
+
+export default function StartAssessmentModal({
+	assessmentId,
+	isOpen,
+	onClose,
+	onConfirm,
+}: StartAssessmentModalProps) {
+	return (
+		<Modal opened={isOpen} onClose={onClose} title="Konfirmasi Mulai Asesmen">
+			<Text>Apakah Anda yakin ingin memulai asesmen ini?</Text>
+			<Flex gap="sm" justify="flex-end" mt="md">
+				<Button variant="outline" onClick={onClose}>
+					Batal
+				</Button>
+				<Button
+					onClick={() => {
+						onConfirm(assessmentId); // Menggunakan assessmentId saat konfirmasi
+					}}
+				>
+					Mulai Asesmen
+				</Button>
+			</Flex>
+		</Modal>
+	);
+}
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx
similarity index 91%
rename from apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
rename to apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx
index bb2442e..2f50a42 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx
@@ -25,9 +25,7 @@ import { assessmentRequestQueryOptions, createAssessmentRequest } from "../queri
 const routeApi = getRouteApi("/_dashboardLayout/assessmentRequest/");
 
 export default function UserFormModal() {
-	/**
-	 * DON'T CHANGE FOLLOWING:
-	 */
+	
 	const queryClient = useQueryClient();
 
 	const navigate = routeApi.useNavigate();
@@ -38,16 +36,9 @@ export default function UserFormModal() {
 
 	const formType = "create";
 
-	/**
-	 * CHANGE FOLLOWING:
-	 */
-
 	const userQuery = useQuery(assessmentRequestQueryOptions(0, 10));
 
-	const modalTitle = 
-	<b>
-		Konfirmasi
-	</b>
+	const modalTitle = <b>Konfirmasi</b>
 
 	const form = useForm({
 		initialValues: {
@@ -82,8 +73,9 @@ export default function UserFormModal() {
 			return await createAssessmentRequest(options.data);
 		  }
 		},
+		// auto refresh after mutation
 		onSuccess: () => {
-			// Ini akan memaksa react-query untuk mengambil data terbaru
+			// force a query-reaction to retrieve the latest data
 			queryClient.invalidateQueries({ queryKey: ["assessmentRequest"] });
 		
 			notifications.show({
@@ -91,7 +83,7 @@ export default function UserFormModal() {
 			  color: "green",
 			});
 		
-			// Menutup modal
+			// close modal
 			navigate({ search: {} });
 		  },
 		onError: (error: unknown) => {
@@ -111,6 +103,7 @@ export default function UserFormModal() {
 		},
 	  });
 	  
+	// Handle submit form, mutate data to server and close modal after success
 	  const handleSubmit = async (values: typeof form.values) => {
 	  
 		if (formType === "create") {
@@ -142,7 +135,7 @@ export default function UserFormModal() {
 
 				<Text>Apakah anda yakin ingin membuat Permohonan Asesmen Baru?</Text>
 
-				{/* Fields to display data will be sent */}
+				{/* Fields to display data will be sent but only respondentId  */}
 				{createInputComponents({
 					disableAll: mutation.isPending,
 					readonlyAll: formType === "create",
@@ -171,7 +164,7 @@ export default function UserFormModal() {
 				})}
 
 				{/* Buttons */}
-				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+				<Flex justify="flex-end" align="center" gap="sm" mt="lg">
 					<Button
 						variant="outline"
 						type="button"
@@ -184,7 +177,7 @@ export default function UserFormModal() {
 							type="submit"
 							isLoading={mutation.isPending}
 						>
-							Ya
+							Buat Permohonan
 						</Button>
 				</Flex>
 			</form>
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index 83a6a49..43141a1 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -1,11 +1,14 @@
+import { useState } from "react";
 import { assessmentRequestQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestQueries";
 import PageTemplate from "@/components/PageTemplate";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import FormModal from "@/modules/assessmentRequestManagement/modals/FormModal";
+import FormModal from "@/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal";
 import ExtractQueryDataType from "@/types/ExtractQueryDataType";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Badge, Flex } from "@mantine/core";
+import { Flex } from "@mantine/core";
+import { Badge } from "@/shadcn/components/ui/badge";
 import { Button } from "@/shadcn/components/ui/button";
+import StartAssessmentModal from "@/modules/assessmentRequestManagement/modals/ConfirmModal";
 
 export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({
 	component: UsersPage,
@@ -16,101 +19,137 @@ type DataType = ExtractQueryDataType<typeof assessmentRequestQueryOptions>;
 const columnHelper = createColumnHelper<DataType>();
 
 export default function UsersPage() {
-	
-	const handleStartAssessment = (assessmentId: string) => {
-		const userConfirmed = window.confirm("Apakah anda yakin untuk memulai asesmen?");
+	const [modalOpen, setModalOpen] = useState(false);
+	const [selectedAssessmentId, setSelectedAssessmentId] = useState<string | null>(null);
+
+	/**
+	 * Fungsi untuk membuka modal konfirmasi mulai asesmen
+	 * @param {string} assessmentId ID asesmen yang akan di mulai
+	 */
+	const handleOpenModal = (assessmentId: string) => {
+		if (!assessmentId) {
+			console.error("Assessment ID is missing");
+			return;
+		  }
 		
-		if (userConfirmed) {
-			// Redirect ke URL baru di tab baru
-			const assessmentUrl = `/assessment?id=${assessmentId}`;
-			window.open(assessmentUrl, "_blank");
-		}
+		setSelectedAssessmentId(assessmentId);
+		setModalOpen(true);
 	};
-	
+
+	/**
+	 * Fungsi untuk membuka halaman asesmen di tab baru
+	 * @param {string} assessmentId ID asesmen yang akan di buka
+	 */
+	const handleStartAssessment = (assessmentId: string) => {
+		// Redirect ke URL baru di tab baru
+		const assessmentUrl = `/assessment?id=${assessmentId}`;
+		window.open(assessmentUrl, "_blank");
+		setModalOpen(false);
+	};
+
+	/**
+	 * Fungsi untuk membuka halaman hasil asesmen berdasarkan ID yang valid
+	 * Digunakan ketika tombol "Lihat Hasil" diklik
+	 * @param {string} assessmentId ID asesmen yang akan di buka
+	 */
+	const handleViewResult = (assessmentId: string) => {
+		// Make sure assessmentId is valid and not null
+		if (!assessmentId) {
+			console.error("Assessment ID is missing");
+			return;
+		}
+		const resultUrl = `/assessmentResult/${assessmentId}`;
+		window.location.href = resultUrl;
+	  };
+	  
+
 	return (
-		<PageTemplate
-			title="Permohonan Asesmen"
-			queryOptions={assessmentRequestQueryOptions}
-			modals={[<FormModal />]}
-			columnDefs={[
-				columnHelper.display({
-					header: "No",
-					cell: (props) => props.row.index + 1,
-				}),
-				columnHelper.display({
-					header: "Tanggal",
-					cell: (props) =>
-						props.row.original.createdAt
-							? new Intl.DateTimeFormat("ID", {
-									year: "numeric",
-									month: "long",
-									day: "2-digit",
-									hour: "2-digit",
-									minute: "2-digit",
-									hour12: true,
-							  }).format(new Date(props.row.original.createdAt))
-							: 'N/A',
-				}),
+		<>
+			<PageTemplate
+				title="Permohonan Asesmen"
+				queryOptions={assessmentRequestQueryOptions}
+				modals={[<FormModal />]}
+				columnDefs={[
+					columnHelper.display({
+						header: "No",
+						cell: (props) => props.row.index + 1,
+					}),
+					columnHelper.display({
+						header: "Tanggal",
+						cell: (props) =>
+							props.row.original.createdAt
+								? new Intl.DateTimeFormat("ID", {
+										year: "numeric",
+										month: "long",
+										day: "2-digit",
+										hour: "2-digit",
+										minute: "2-digit",
+										hour12: true,
+								  }).format(new Date(props.row.original.createdAt))
+								: 'N/A',
+					}),
+					columnHelper.display({
+						header: "Status",
+						cell: (props) => {
+							const status = props.row.original.status;
+							switch (status) {
+								case "menunggu konfirmasi":
+									// return <Badge color="yellow">Menunggu Konfirmasi</Badge>;
+									return <Badge variant={"waiting"}>Menunggu Konfirmasi</Badge>;
+								case "diterima":
+									return <Badge variant={"accepted"}>Diterima</Badge>;
+								case "ditolak":
+									return <Badge variant={"rejected"}>Ditolak</Badge>;
+								case "selesai":
+									return <Badge variant={"completed"}>Selesai</Badge>;
+								default:
+									return <Badge variant={"outline"}>Tidak diketahui</Badge>;
+							}
+						},
+					}),
+					columnHelper.display({
+						header: "Actions",
+						cell: (props) => {
+							const status = props.row.original.status;
+							const assessmentId = props.row.original.id; // Retrieve the assessmentId from the data row
 
-				columnHelper.display({
-					header: "Status",
-					cell: (props) => {
-						const status = props.row.original.status;
-						switch (status) {
-							case "menunggu konfirmasi":
-								return <Badge color="yellow">Menunggu Konfirmasi</Badge>;
-							case "diterima":
-								return <Badge color="green">Diterima</Badge>;
-							case "ditolak":
-								return <Badge color="red">Ditolak</Badge>;
-							case "selesai":
-								return <Badge color="blue">Selesai</Badge>;
-							default:
-								return <Badge color="gray">Tidak diketahui</Badge>;
-						}
-					},
-				}),
-
-				columnHelper.display({
-					header: "Aksi",
-					cell: (props) => {
-						const status = props.row.original.status;
-						const assessmentId = props.row.original.id;
-
-
-						return (
-							<Flex gap="xs">
-								{status === "selesai" ? (
-									<>
+							return (
+								<Flex gap="xs">
+									{/* Button Create Assessment */}
+									{status === "selesai" ? (
 										<Button disabled>Mulai Asesmen</Button>
-										<Button onClick={() => alert('Lihat Hasil')}>Lihat Hasil</Button>
-									</>
-								) : status === "diterima" ? (
-									<>
+									) : status === "diterima" ? (
 										<Button 
-											onClick={() => {
-												if (assessmentId) {
-													handleStartAssessment(assessmentId); 
-												} else {
-													alert("Assessment ID tidak valid.");
-												}
-											}}
+											onClick={() => handleOpenModal(assessmentId ?? '')}
 										>
 											Mulai Asesmen
 										</Button>
-										<Button disabled>Lihat Hasil</Button>
-									</>
-								) : status === "menunggu konfirmasi" || status === "ditolak" ? (
-									<>
+									) : (
 										<Button disabled>Mulai Asesmen</Button>
+									)}
+
+									{/* Button View Result */}
+									{status === "selesai" ? (
+										<Button onClick={()=>handleViewResult(assessmentId ?? '')}>Lihat Hasil</Button>
+									) : (
 										<Button disabled>Lihat Hasil</Button>
-									</>
-								) : null}
-							</Flex>
-						);
-					},
-				}),
-			]}
-		/>
+									)}
+								</Flex>
+							);
+						},
+					}),
+				]}
+			/>
+			
+			{/* Modal Konfirmasi Start Asessment */}
+			{selectedAssessmentId && (
+				<StartAssessmentModal
+					assessmentId={selectedAssessmentId}
+					isOpen={modalOpen}
+					onClose={() => setModalOpen(false)}
+					onConfirm={handleStartAssessment}
+				/>
+			)}
+		</>
 	);
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/src/shadcn/components/ui/badge.tsx b/apps/frontend/src/shadcn/components/ui/badge.tsx
index f000e3e..d6abc25 100644
--- a/apps/frontend/src/shadcn/components/ui/badge.tsx
+++ b/apps/frontend/src/shadcn/components/ui/badge.tsx
@@ -15,6 +15,12 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
+
+         // Custom variants for status
+        waiting: "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
+        accepted: "border-transparent bg-green-500 text-white hover:bg-green-600",
+        rejected: "border-transparent bg-red-500 text-white hover:bg-red-600",
+        completed: "border-transparent bg-blue-500 text-white hover:bg-blue-600",
       },
     },
     defaultVariants: {
diff --git a/apps/frontend/src/shadcn/components/ui/button.tsx b/apps/frontend/src/shadcn/components/ui/button.tsx
index 33ba732..d7a6de3 100644
--- a/apps/frontend/src/shadcn/components/ui/button.tsx
+++ b/apps/frontend/src/shadcn/components/ui/button.tsx
@@ -52,7 +52,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {isLoading ? (
-          <TbLoader2 className="mr-2 h-4 w-4 animate-spin" /> // Tampilkan spinner saat loading
+          <TbLoader2 className="mr-2 h-4 w-4 animate-spin" /> // Show spinner when loading
         ) : (
           children
         )}

From d1a9f9c1ffc9089a1a0310b384dfc754a2cb59cc Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Tue, 8 Oct 2024 10:07:21 +0700
Subject: [PATCH 18/22] Update : add comment

---
 .../src/routes/assessmentRequest/route.ts     | 19 ++++++--------
 .../modals/ConfirmModal.tsx                   |  2 +-
 .../modals/CreateAssessmentRequestModal.tsx   | 22 ++++------------
 .../assessmentRequest/index.lazy.tsx          | 25 +++++++++----------
 .../src/shadcn/components/ui/button.tsx       |  2 +-
 5 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/apps/backend/src/routes/assessmentRequest/route.ts b/apps/backend/src/routes/assessmentRequest/route.ts
index efc8cdf..a048429 100644
--- a/apps/backend/src/routes/assessmentRequest/route.ts
+++ b/apps/backend/src/routes/assessmentRequest/route.ts
@@ -25,14 +25,14 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
         requestValidator(
             "query",
             z.object({
-                page: z.coerce.number().int().min(0).default(0), // Menambahkan pagination page
-                limit: z.coerce.number().int().min(1).max(1000).default(10), // Menambahkan pagination limit
-                q: z.string().optional(), // Kata kunci pencarian (search)
+                page: z.coerce.number().int().min(0).default(0),
+                limit: z.coerce.number().int().min(1).max(1000).default(10),
+                q: z.string().optional(),
             })
         ),
         async (c) => {
             const currentUser = c.get("currentUser");
-            const userId = currentUser?.id; // Mengambil userId dari currentUser yang disimpan di context
+            const userId = currentUser?.id; // Get user ID of the currently logged in currentUser 
     
             if (!userId) {
                 throw forbidden({ 
@@ -41,7 +41,7 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
               }
             const { page, limit, q } = c.req.valid("query");
     
-            // Query untuk menghitung total data
+            // Query to count total data
             const totalCountQuery = db
                 .select({
                     count: sql<number>`count(distinct ${assessments.id})`,
@@ -59,19 +59,15 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
             const totalCountResult = await totalCountQuery;
             const totalItems = totalCountResult[0]?.count || 0;
     
-            // Query untuk mendapatkan data assessment dengan pagination
+            // Query to get assessment data with pagination
             const queryResult = await db
                 .select({
                     userId: users.id,
-                    createdAt: assessments.createdAt,
                     name: users.name,
-                    code: rolesSchema.code,
-                    id: assessments.id,
+                    assessmentId: assessments.id,
                     tanggal: assessments.createdAt,
                     status: assessments.status,
                     respondentId: respondents.id,
-                    email: users.email,
-                    username: users.username,
                 })
                 .from(users)
                 .leftJoin(rolesToUsers, eq(users.id, rolesToUsers.userId))
@@ -91,7 +87,6 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
     
             if (!queryResult[0]) throw notFound();
     
-            // Mengembalikan data dengan metadata pagination
             return c.json({
                 data: queryResult,
                 _metadata: {
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx
index 3ef2248..a05220b 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/ConfirmModal.tsx
@@ -23,7 +23,7 @@ export default function StartAssessmentModal({
 				</Button>
 				<Button
 					onClick={() => {
-						onConfirm(assessmentId); // Menggunakan assessmentId saat konfirmasi
+						onConfirm(assessmentId); // Use assessmentId when confirming
 					}}
 				>
 					Mulai Asesmen
diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx
index 2f50a42..ab53f48 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal.tsx
@@ -1,12 +1,6 @@
-import stringToColorHex from "@/utils/stringToColorHex";
 import {
-	Avatar,
-	// Button,
-	Center,
 	Flex,
 	Modal,
-	ScrollArea,
-	Stack,
 	Text
 } from "@mantine/core";
 import { Button } from "@/shadcn/components/ui/button";
@@ -40,14 +34,16 @@ export default function UserFormModal() {
 
 	const modalTitle = <b>Konfirmasi</b>
 
+	
 	const form = useForm({
 		initialValues: {
-			id: "",
 			respondentsId: "",
 			name: "",
 		},
 	});
 
+	// used to get the respondentId of the currently logged in user
+	// and then set respondentsId in the form to create an assessment request
 	useEffect(() => {
 		const data = userQuery.data;
 
@@ -57,7 +53,6 @@ export default function UserFormModal() {
 		}
 
 		form.setValues({
-			id: data.data[0].id ?? "",
 			respondentsId: data.data[0].respondentId ?? "",
 			name: data.data[0].name ?? "",
 		});
@@ -65,6 +60,7 @@ export default function UserFormModal() {
 		form.setErrors({});
 	}, [userQuery.data]);
 
+	// Mutation function to create a new assessment request and refresh query after success
 	const mutation = useMutation({
 		mutationKey: ["usersMutation"],
 		mutationFn: async (options: { action: "create"; data: { respondentsId: string } }) => {
@@ -140,19 +136,11 @@ export default function UserFormModal() {
 					disableAll: mutation.isPending,
 					readonlyAll: formType === "create",
 					inputs: [
-						{
-							type: "text",
-							label: "User ID",
-							readOnly: true,
-							variant: "filled",
-							...form.getInputProps("id"),
-							hidden: true
-						},
 						{
 							type: "text",
 							label: "Respondent ID",
 							...form.getInputProps("respondentsId"),
-							hidden: true,
+							hidden: true,	
 						},
 						{
 							type: "text",
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index 43141a1..ab82eb1 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -23,8 +23,8 @@ export default function UsersPage() {
 	const [selectedAssessmentId, setSelectedAssessmentId] = useState<string | null>(null);
 
 	/**
-	 * Fungsi untuk membuka modal konfirmasi mulai asesmen
-	 * @param {string} assessmentId ID asesmen yang akan di mulai
+	 * Function to open confirmation modal to start assessment
+	 * @param {string} assessmentId ID of the assessment to be started
 	 */
 	const handleOpenModal = (assessmentId: string) => {
 		if (!assessmentId) {
@@ -37,8 +37,8 @@ export default function UsersPage() {
 	};
 
 	/**
-	 * Fungsi untuk membuka halaman asesmen di tab baru
-	 * @param {string} assessmentId ID asesmen yang akan di buka
+	 * Function to open assessment page in new tab
+	 * @param {string} assessmentId ID of the assessment to be opened
 	 */
 	const handleStartAssessment = (assessmentId: string) => {
 		// Redirect ke URL baru di tab baru
@@ -48,12 +48,12 @@ export default function UsersPage() {
 	};
 
 	/**
-	 * Fungsi untuk membuka halaman hasil asesmen berdasarkan ID yang valid
-	 * Digunakan ketika tombol "Lihat Hasil" diklik
-	 * @param {string} assessmentId ID asesmen yang akan di buka
+	 * Function to open assessment result page based on valid ID
+	 * Used when "View Result" button is clicked
+	 * @param {string} assessmentId ID of the assessment to be opened
 	 */
 	const handleViewResult = (assessmentId: string) => {
-		// Make sure assessmentId is valid and not null
+		// to make sure assessmentId is valid and not null
 		if (!assessmentId) {
 			console.error("Assessment ID is missing");
 			return;
@@ -77,7 +77,7 @@ export default function UsersPage() {
 					columnHelper.display({
 						header: "Tanggal",
 						cell: (props) =>
-							props.row.original.createdAt
+							props.row.original.tanggal
 								? new Intl.DateTimeFormat("ID", {
 										year: "numeric",
 										month: "long",
@@ -85,7 +85,7 @@ export default function UsersPage() {
 										hour: "2-digit",
 										minute: "2-digit",
 										hour12: true,
-								  }).format(new Date(props.row.original.createdAt))
+								  }).format(new Date(props.row.original.tanggal))
 								: 'N/A',
 					}),
 					columnHelper.display({
@@ -94,7 +94,6 @@ export default function UsersPage() {
 							const status = props.row.original.status;
 							switch (status) {
 								case "menunggu konfirmasi":
-									// return <Badge color="yellow">Menunggu Konfirmasi</Badge>;
 									return <Badge variant={"waiting"}>Menunggu Konfirmasi</Badge>;
 								case "diterima":
 									return <Badge variant={"accepted"}>Diterima</Badge>;
@@ -111,7 +110,7 @@ export default function UsersPage() {
 						header: "Actions",
 						cell: (props) => {
 							const status = props.row.original.status;
-							const assessmentId = props.row.original.id; // Retrieve the assessmentId from the data row
+							const assessmentId = props.row.original.assessmentId; // Retrieve the assessmentId from the data row
 
 							return (
 								<Flex gap="xs">
@@ -141,7 +140,7 @@ export default function UsersPage() {
 				]}
 			/>
 			
-			{/* Modal Konfirmasi Start Asessment */}
+			{/* Confirmation Modal to Start Assessment */}
 			{selectedAssessmentId && (
 				<StartAssessmentModal
 					assessmentId={selectedAssessmentId}
diff --git a/apps/frontend/src/shadcn/components/ui/button.tsx b/apps/frontend/src/shadcn/components/ui/button.tsx
index d7a6de3..f79e70e 100644
--- a/apps/frontend/src/shadcn/components/ui/button.tsx
+++ b/apps/frontend/src/shadcn/components/ui/button.tsx
@@ -48,7 +48,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
-        disabled={isLoading || props.disabled} // Disable tombol jika loading
+        disabled={isLoading || props.disabled} // Disable button if loading
         {...props}
       >
         {isLoading ? (

From b1de52dbb4ec6d3b3973b6004fb67ef011cb44d0 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Tue, 8 Oct 2024 11:44:08 +0700
Subject: [PATCH 19/22] Update : Fix Get method for search by status coloumn

---
 apps/backend/src/routes/assessmentRequest/route.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/backend/src/routes/assessmentRequest/route.ts b/apps/backend/src/routes/assessmentRequest/route.ts
index a048429..ff912bf 100644
--- a/apps/backend/src/routes/assessmentRequest/route.ts
+++ b/apps/backend/src/routes/assessmentRequest/route.ts
@@ -1,12 +1,10 @@
-import { eq, sql, ilike, isNull, and, desc } from "drizzle-orm";
+import { eq, sql, ilike, and, desc} 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 { forbidden, notFound } from "../../errors/DashboardError";
@@ -52,7 +50,9 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                 .where(
                     and(
                         eq(users.id, userId),
-                        q ? ilike(assessments.status, `%${q}%`) : undefined
+                        q && q.trim() !== "" 
+                        ? ilike(sql`${assessments.status}::text`, `%${q}%`) // Cast status to text for ilike
+                        : undefined                    
                     )
                 )
     
@@ -70,14 +70,14 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                     respondentId: respondents.id,
                 })
                 .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(
                     and(
                         eq(users.id, userId),
-                        q ? ilike(assessments.status, `%${q}%`) : undefined
+                        q && q.trim() !== "" 
+                        ? ilike(sql`${assessments.status}::text`, `%${q}%`) // Cast status to text for ilike
+                        : undefined
                     )
                 )
                 .orderBy(desc(assessments.createdAt))

From 55d371f7c8f796a89baa31aa82d323012b952a32 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Tue, 8 Oct 2024 11:54:46 +0700
Subject: [PATCH 20/22] Update : using Flex on tailwind instead of mantine

---
 .../_dashboardLayout/assessmentRequest/index.lazy.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index ab82eb1..940b716 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -41,7 +41,7 @@ export default function UsersPage() {
 	 * @param {string} assessmentId ID of the assessment to be opened
 	 */
 	const handleStartAssessment = (assessmentId: string) => {
-		// Redirect ke URL baru di tab baru
+		// Redirect to new URL in new tab
 		const assessmentUrl = `/assessment?id=${assessmentId}`;
 		window.open(assessmentUrl, "_blank");
 		setModalOpen(false);
@@ -113,7 +113,7 @@ export default function UsersPage() {
 							const assessmentId = props.row.original.assessmentId; // Retrieve the assessmentId from the data row
 
 							return (
-								<Flex gap="xs">
+								<div className="flex gap-2">
 									{/* Button Create Assessment */}
 									{status === "selesai" ? (
 										<Button disabled>Mulai Asesmen</Button>
@@ -133,7 +133,7 @@ export default function UsersPage() {
 									) : (
 										<Button disabled>Lihat Hasil</Button>
 									)}
-								</Flex>
+								</div>
 							);
 						},
 					}),

From a54d3ca7977a5760aecb1d859ea095d039062935 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Tue, 8 Oct 2024 11:56:06 +0700
Subject: [PATCH 21/22] Delete : import Flex from mantine

---
 .../src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index 940b716..4d8ecbb 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -5,7 +5,6 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import FormModal from "@/modules/assessmentRequestManagement/modals/CreateAssessmentRequestModal";
 import ExtractQueryDataType from "@/types/ExtractQueryDataType";
 import { createColumnHelper } from "@tanstack/react-table";
-import { Flex } from "@mantine/core";
 import { Badge } from "@/shadcn/components/ui/badge";
 import { Button } from "@/shadcn/components/ui/button";
 import StartAssessmentModal from "@/modules/assessmentRequestManagement/modals/ConfirmModal";

From 0f8be788dfa0cf2baf291f8f050d9259ac929bfe Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Wed, 9 Oct 2024 09:23:16 +0700
Subject: [PATCH 22/22] Update : variants of action button

---
 .../_dashboardLayout/assessmentRequest/index.lazy.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index 4d8ecbb..1a3503b 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
@@ -115,7 +115,7 @@ export default function UsersPage() {
 								<div className="flex gap-2">
 									{/* Button Create Assessment */}
 									{status === "selesai" ? (
-										<Button disabled>Mulai Asesmen</Button>
+										<Button variant={"secondary"} disabled>Mulai Asesmen</Button>
 									) : status === "diterima" ? (
 										<Button 
 											onClick={() => handleOpenModal(assessmentId ?? '')}
@@ -123,14 +123,14 @@ export default function UsersPage() {
 											Mulai Asesmen
 										</Button>
 									) : (
-										<Button disabled>Mulai Asesmen</Button>
+										<Button variant={"secondary"} disabled>Mulai Asesmen</Button>
 									)}
 
 									{/* Button View Result */}
 									{status === "selesai" ? (
-										<Button onClick={()=>handleViewResult(assessmentId ?? '')}>Lihat Hasil</Button>
+										<Button variant={"outline"} onClick={()=>handleViewResult(assessmentId ?? '')}>Lihat Hasil</Button>
 									) : (
-										<Button disabled>Lihat Hasil</Button>
+										<Button variant={"outline"} disabled>Lihat Hasil</Button>
 									)}
 								</div>
 							);