From 1b231e13fc861f20609eb090c4a9d28527e137cc Mon Sep 17 00:00:00 2001
From: Minoti <Minotigupta2006@gmail.com>
Date: Thu, 5 Feb 2026 21:49:57 +0530
Subject: [PATCH 1/6] Initial trial

---
 src/components/login-form.tsx   |  70 +++++++++
 src/components/ui/button.tsx    |  18 +--
 src/components/ui/card.tsx      |  92 ++++++++++++
 src/components/ui/field.tsx     | 246 ++++++++++++++++++++++++++++++++
 src/components/ui/input.tsx     |  21 +++
 src/components/ui/label.tsx     |  22 +++
 src/components/ui/separator.tsx |  28 ++++
 src/routeTree.gen.ts            |  24 +++-
 src/routes/login/index.tsx      |  14 ++
 9 files changed, 523 insertions(+), 12 deletions(-)
 create mode 100644 src/components/login-form.tsx
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/field.tsx
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/components/ui/separator.tsx
 create mode 100644 src/routes/login/index.tsx

diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
new file mode 100644
index 0000000..58968b1
--- /dev/null
+++ b/src/components/login-form.tsx
@@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Login to your account</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </Field>
+              <Field>
+                <div className="flex items-center">
+                  <FieldLabel htmlFor="password">Password</FieldLabel>
+                  <a
+                    href="#"
+                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </Field>
+              <Field>
+                <Button type="submit">Login</Button>
+                <Button variant="outline" type="button">
+                  Login with Google
+                </Button>
+                <FieldDescription className="text-center">
+                  Don&apos;t have an account? <a href="#">Sign up</a>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 5310695..b5ea4ab 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -36,7 +36,7 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-);
+)
 
 function Button({
   className,
@@ -46,9 +46,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+    asChild?: boolean
   }) {
-  const Comp = asChild ? Slot.Root : "button";
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
@@ -58,7 +58,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
new file mode 100644
index 0000000..db0dc12
--- /dev/null
+++ b/src/components/ui/field.tsx
@@ -0,0 +1,246 @@
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..8916905
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..f752f82
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..4c24b2a
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index a34af05..7b1bcd3 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -10,33 +10,43 @@
 
 import { Route as rootRouteImport } from "./routes/__root"
 import { Route as IndexRouteImport } from "./routes/index"
+import { Route as LoginIndexRouteImport } from "./routes/login/index"
 
 const IndexRoute = IndexRouteImport.update({
   id: "/",
   path: "/",
   getParentRoute: () => rootRouteImport,
 } as any)
+const LoginIndexRoute = LoginIndexRouteImport.update({
+  id: "/login/",
+  path: "/login/",
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   "/": typeof IndexRoute
+  "/login/": typeof LoginIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
+  "/login": typeof LoginIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   "/": typeof IndexRoute
+  "/login/": typeof LoginIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: "/"
+  fullPaths: "/" | "/login/"
   fileRoutesByTo: FileRoutesByTo
-  to: "/"
-  id: "__root__" | "/"
+  to: "/" | "/login"
+  id: "__root__" | "/" | "/login/"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  LoginIndexRoute: typeof LoginIndexRoute
 }
 
 declare module "@tanstack/react-router" {
@@ -48,11 +58,19 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    "/login/": {
+      id: "/login/"
+      path: "/login"
+      fullPath: "/login/"
+      preLoaderRoute: typeof LoginIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  LoginIndexRoute: LoginIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx
new file mode 100644
index 0000000..78e6b82
--- /dev/null
+++ b/src/routes/login/index.tsx
@@ -0,0 +1,14 @@
+import { LoginForm } from "@/components/login-form"
+import { createFileRoute } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/login/")({
+  component: LoginPage,
+})
+
+function LoginPage() {
+  return (
+    <>
+      <LoginForm />
+    </>
+  )
+}

From 5dde35b9c5cbdd2bac20d1c453785199e23d1f6c Mon Sep 17 00:00:00 2001
From: Minoti <Minotigupta2006@gmail.com>
Date: Thu, 5 Feb 2026 23:44:14 +0530
Subject: [PATCH 2/6] Add login page

---
 src/components/auth/login-form.tsx | 174 +++++++++++++++++++++++++++++
 src/components/login-form.tsx      | 168 +++++++++++++++++++++++-----
 src/components/theme-provider.tsx  |  72 ++++++++++++
 src/lib/api-endpoints.ts           |   3 +
 src/main.tsx                       |   5 +-
 src/routeTree.gen.ts               |  24 +++-
 src/routes/app/login.tsx           |  16 +++
 src/routes/login/index.tsx         |   9 +-
 src/schemas/auth.ts                |   8 ++
 9 files changed, 447 insertions(+), 32 deletions(-)
 create mode 100644 src/components/auth/login-form.tsx
 create mode 100644 src/components/theme-provider.tsx
 create mode 100644 src/lib/api-endpoints.ts
 create mode 100644 src/routes/app/login.tsx
 create mode 100644 src/schemas/auth.ts

diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
new file mode 100644
index 0000000..87410d6
--- /dev/null
+++ b/src/components/auth/login-form.tsx
@@ -0,0 +1,174 @@
+import axiosClient from "@/lib/axios"
+import { apiEndpoints } from "@/lib/api-endpoints"
+import { cn } from "@/lib/utils"
+import { loginSchema } from "@/schemas/auth"
+import type { LoginSchema } from "@/schemas/auth"
+import { useMutation } from "@tanstack/react-query"
+import { createFileRoute } from "@tanstack/react-router"
+import { useState } from "react"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const [formData, setFormData] = useState<LoginSchema>({
+    username: "",
+    password: "",
+  })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const loginMutation = useMutation({
+    mutationFn: async (data: LoginSchema) => {
+      const response = await axiosClient.post(apiEndpoints.LOGIN, data)
+      return response.data
+    },
+    onSuccess: (data) => {
+      // Handle success (e.g., redirect, toast)
+      console.log("Login success:", data)
+      // For now just logging, navigation would handle redirect
+      alert("Login successful!")
+    },
+    onError: (error: any) => {
+      console.error("Login failed:", error)
+      setErrors({
+        root:
+          error.response?.data?.message || "Login failed. Please try again.",
+      })
+    },
+  })
+
+  const validateField = (field: keyof LoginSchema, value: string) => {
+    try {
+      loginSchema.shape[field].parse(value)
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        setErrors((prev) => ({
+          ...prev,
+          [field]: error.errors[0].message,
+        }))
+      }
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = e.target
+    setFormData((prev) => ({ ...prev, [id]: value }))
+    // Clear error on change or validate on change?
+    // AGENTS.md says "Show validation errors directly below corresponding fields"
+    // Let's validate on change to give immediate feedback or clear error
+    validateField(id as keyof LoginSchema, value)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setErrors({})
+
+    const result = loginSchema.safeParse(formData)
+
+    if (!result.success) {
+      const newErrors: Record<string, string> = {}
+      result.error.errors.forEach((err) => {
+        if (err.path[0]) {
+          newErrors[err.path[0].toString()] = err.message
+        }
+      })
+      setErrors(newErrors)
+      return
+    }
+
+    loginMutation.mutate(result.data)
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Welcome back</CardTitle>
+          <CardDescription>Login to your account to continue</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit}>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="username">Username</FieldLabel>
+                <Input
+                  id="username"
+                  type="text"
+                  placeholder="Enter your username"
+                  value={formData.username}
+                  onChange={handleChange}
+                  // invalid={!!errors.username} // Input component might not accept invalid prop directly, checking simple input usage
+                  className={
+                    errors.username
+                      ? "border-destructive focus-visible:ring-destructive"
+                      : ""
+                  }
+                />
+                <FieldError>
+                  {errors.username && <p>{errors.username}</p>}
+                </FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  className={
+                    errors.password
+                      ? "border-destructive focus-visible:ring-destructive"
+                      : ""
+                  }
+                />
+                <FieldError>
+                  {errors.password && <p>{errors.password}</p>}
+                </FieldError>
+              </Field>
+
+              {errors.root && (
+                <div className="text-destructive text-sm font-medium">
+                  {errors.root}
+                </div>
+              )}
+
+              <Field>
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={loginMutation.isPending}
+                >
+                  {loginMutation.isPending ? "Logging in..." : "Login"}
+                </Button>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index 58968b1..64de891 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -1,4 +1,12 @@
+import axiosClient from "@/lib/axios"
+import { apiEndpoints } from "@/lib/api-endpoints"
 import { cn } from "@/lib/utils"
+import { loginSchema } from "@/schemas/auth"
+import type { LoginSchema } from "@/schemas/auth"
+import { useMutation } from "@tanstack/react-query"
+import { Eye, EyeOff } from "lucide-react"
+import { useState } from "react"
+import { z } from "zod"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -9,7 +17,7 @@ import {
 } from "@/components/ui/card"
 import {
   Field,
-  FieldDescription,
+  FieldError,
   FieldGroup,
   FieldLabel,
 } from "@/components/ui/field"
@@ -19,47 +27,157 @@ export function LoginForm({
   className,
   ...props
 }: React.ComponentProps<"div">) {
+  const [formData, setFormData] = useState<LoginSchema>({
+    username: "",
+    password: "",
+  })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [showPassword, setShowPassword] = useState(false)
+
+  const loginMutation = useMutation({
+    mutationFn: async (data: LoginSchema) => {
+      const response = await axiosClient.post(apiEndpoints.LOGIN, data)
+      return response.data
+    },
+    onSuccess: (data) => {
+      // TODO: Navigate to dashboard or handle success state
+      // window.location.href = "/dashboard"
+    },
+    onError: (error: any) => {
+      console.error("Login failed:", error)
+      setErrors({
+        root:
+          error.response?.data?.message || "Login failed. Please try again.",
+      })
+    },
+  })
+
+  const validateField = (field: keyof LoginSchema, value: string) => {
+    try {
+      loginSchema.shape[field].parse(value)
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        setErrors((prev) => ({
+          ...prev,
+          [field]: error.errors?.[0]?.message || "Invalid input",
+        }))
+      }
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = e.target
+    setFormData((prev) => ({ ...prev, [id]: value }))
+    validateField(id as keyof LoginSchema, value)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setErrors({})
+
+    const result = loginSchema.safeParse(formData)
+
+    if (!result.success) {
+      const newErrors: Record<string, string> = {}
+      result.error.errors.forEach((err) => {
+        if (err.path[0]) {
+          newErrors[err.path[0].toString()] = err.message
+        }
+      })
+      setErrors(newErrors)
+      return
+    }
+
+    loginMutation.mutate(result.data)
+  }
+
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Login to your account</CardTitle>
+      <Card className="bg-background/60 backdrop-blur-xl border-accent/20 shadow-xl">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl">Welcome back</CardTitle>
           <CardDescription>
-            Enter your email below to login to your account
+            Login with your organizer credentials
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form>
+          <form onSubmit={handleSubmit}>
             <FieldGroup>
               <Field>
-                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <FieldLabel htmlFor="username">Email</FieldLabel>
                 <Input
-                  id="email"
-                  type="email"
-                  placeholder="m@example.com"
-                  required
+                  id="username"
+                  type="text"
+                  placeholder="email@example.com"
+                  value={formData.username}
+                  onChange={handleChange}
+                  className={
+                    errors.username
+                      ? "border-destructive focus-visible:ring-destructive"
+                      : ""
+                  }
                 />
+                <FieldError>
+                  {errors.username && <p>{errors.username}</p>}
+                </FieldError>
               </Field>
+
               <Field>
-                <div className="flex items-center">
-                  <FieldLabel htmlFor="password">Password</FieldLabel>
-                  <a
-                    href="#"
-                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    placeholder="Enter your password"
+                    value={formData.password}
+                    onChange={handleChange}
+                    className={
+                      errors.password
+                        ? "border-destructive focus-visible:ring-destructive pr-10"
+                        : "pr-10"
+                    }
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    aria-label={
+                      showPassword ? "Hide password" : "Show password"
+                    }
                   >
-                    Forgot your password?
-                  </a>
+                    {showPassword ? (
+                      <EyeOff className="h-4 w-4 text-muted-foreground" />
+                    ) : (
+                      <Eye className="h-4 w-4 text-muted-foreground" />
+                    )}
+                  </Button>
                 </div>
-                <Input id="password" type="password" required />
+                <FieldError>
+                  {errors.password && <p>{errors.password}</p>}
+                </FieldError>
               </Field>
+
+              {errors.root && (
+                <div className="text-destructive text-sm font-medium">
+                  {errors.root}
+                </div>
+              )}
+
               <Field>
-                <Button type="submit">Login</Button>
-                <Button variant="outline" type="button">
-                  Login with Google
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={loginMutation.isPending}
+                >
+                  {loginMutation.isPending ? "Logging in..." : "Login"}
                 </Button>
-                <FieldDescription className="text-center">
-                  Don&apos;t have an account? <a href="#">Sign up</a>
-                </FieldDescription>
               </Field>
             </FieldGroup>
           </form>
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
new file mode 100644
index 0000000..892881f
--- /dev/null
+++ b/src/components/theme-provider.tsx
@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}
diff --git a/src/lib/api-endpoints.ts b/src/lib/api-endpoints.ts
new file mode 100644
index 0000000..2c7f1c0
--- /dev/null
+++ b/src/lib/api-endpoints.ts
@@ -0,0 +1,3 @@
+export const apiEndpoints = {
+  LOGIN: "/auth/login",
+} as const
diff --git a/src/main.tsx b/src/main.tsx
index a053cfd..a2e581b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from "react"
 import ReactDOM from "react-dom/client"
 import { RouterProvider, createRouter } from "@tanstack/react-router"
+import { ThemeProvider } from "./components/theme-provider"
 
 import * as TanStackQueryProvider from "./integrations/tanstack-query/root-provider.tsx"
 
@@ -39,7 +40,9 @@ if (rootElement && !rootElement.innerHTML) {
   root.render(
     <StrictMode>
       <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
-        <RouterProvider router={router} />
+        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+          <RouterProvider router={router} />
+        </ThemeProvider>
       </TanStackQueryProvider.Provider>
     </StrictMode>
   )
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 7b1bcd3..c2953e3 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from "./routes/__root"
 import { Route as IndexRouteImport } from "./routes/index"
 import { Route as LoginIndexRouteImport } from "./routes/login/index"
+import { Route as AppLoginRouteImport } from "./routes/app/login"
 
 const IndexRoute = IndexRouteImport.update({
   id: "/",
@@ -22,30 +23,39 @@ const LoginIndexRoute = LoginIndexRouteImport.update({
   path: "/login/",
   getParentRoute: () => rootRouteImport,
 } as any)
+const AppLoginRoute = AppLoginRouteImport.update({
+  id: "/app/login",
+  path: "/app/login",
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   "/": typeof IndexRoute
+  "/app/login": typeof AppLoginRoute
   "/login/": typeof LoginIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
+  "/app/login": typeof AppLoginRoute
   "/login": typeof LoginIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   "/": typeof IndexRoute
+  "/app/login": typeof AppLoginRoute
   "/login/": typeof LoginIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: "/" | "/login/"
+  fullPaths: "/" | "/app/login" | "/login/"
   fileRoutesByTo: FileRoutesByTo
-  to: "/" | "/login"
-  id: "__root__" | "/" | "/login/"
+  to: "/" | "/app/login" | "/login"
+  id: "__root__" | "/" | "/app/login" | "/login/"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AppLoginRoute: typeof AppLoginRoute
   LoginIndexRoute: typeof LoginIndexRoute
 }
 
@@ -65,11 +75,19 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof LoginIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    "/app/login": {
+      id: "/app/login"
+      path: "/app/login"
+      fullPath: "/app/login"
+      preLoaderRoute: typeof AppLoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AppLoginRoute: AppLoginRoute,
   LoginIndexRoute: LoginIndexRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/src/routes/app/login.tsx b/src/routes/app/login.tsx
new file mode 100644
index 0000000..38a2e70
--- /dev/null
+++ b/src/routes/app/login.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { LoginForm } from "@/components/auth/login-form"
+
+export const Route = createFileRoute("/app/login")({
+  component: LoginPage,
+})
+
+function LoginPage() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx
index 78e6b82..91c81d9 100644
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -7,8 +7,11 @@ export const Route = createFileRoute("/login/")({
 
 function LoginPage() {
   return (
-    <>
-      <LoginForm />
-    </>
+    <div className="relative flex min-h-svh w-full items-center justify-center p-6 md:p-10 overflow-hidden">
+      <div className="absolute inset-0 z-0 bg-gradient-to-br from-primary/20 via-background to-secondary/20 blur-3xl" />
+      <div className="z-10 w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
   )
 }
diff --git a/src/schemas/auth.ts b/src/schemas/auth.ts
new file mode 100644
index 0000000..308364b
--- /dev/null
+++ b/src/schemas/auth.ts
@@ -0,0 +1,8 @@
+import { z } from "zod"
+
+export const loginSchema = z.object({
+  username: z.string().min(1, "Username is required"),
+  password: z.string().min(1, "Password is required"),
+})
+
+export type LoginSchema = z.infer<typeof loginSchema>

From 3462cf18ed25e757713a01b48798d8d13447a7b6 Mon Sep 17 00:00:00 2001
From: Minoti <Minotigupta2006@gmail.com>
Date: Sat, 7 Feb 2026 00:48:43 +0530
Subject: [PATCH 3/6] address PR review comments

---
 src/components/auth/login-form.tsx | 174 -----------------------------
 src/components/login-form.tsx      |  25 +----
 src/routes/app/login.tsx           |   2 +-
 3 files changed, 4 insertions(+), 197 deletions(-)
 delete mode 100644 src/components/auth/login-form.tsx

diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
deleted file mode 100644
index 87410d6..0000000
--- a/src/components/auth/login-form.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import axiosClient from "@/lib/axios"
-import { apiEndpoints } from "@/lib/api-endpoints"
-import { cn } from "@/lib/utils"
-import { loginSchema } from "@/schemas/auth"
-import type { LoginSchema } from "@/schemas/auth"
-import { useMutation } from "@tanstack/react-query"
-import { createFileRoute } from "@tanstack/react-router"
-import { useState } from "react"
-import { z } from "zod"
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field"
-import { Input } from "@/components/ui/input"
-
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  const [formData, setFormData] = useState<LoginSchema>({
-    username: "",
-    password: "",
-  })
-  const [errors, setErrors] = useState<Record<string, string>>({})
-
-  const loginMutation = useMutation({
-    mutationFn: async (data: LoginSchema) => {
-      const response = await axiosClient.post(apiEndpoints.LOGIN, data)
-      return response.data
-    },
-    onSuccess: (data) => {
-      // Handle success (e.g., redirect, toast)
-      console.log("Login success:", data)
-      // For now just logging, navigation would handle redirect
-      alert("Login successful!")
-    },
-    onError: (error: any) => {
-      console.error("Login failed:", error)
-      setErrors({
-        root:
-          error.response?.data?.message || "Login failed. Please try again.",
-      })
-    },
-  })
-
-  const validateField = (field: keyof LoginSchema, value: string) => {
-    try {
-      loginSchema.shape[field].parse(value)
-      setErrors((prev) => {
-        const newErrors = { ...prev }
-        delete newErrors[field]
-        return newErrors
-      })
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        setErrors((prev) => ({
-          ...prev,
-          [field]: error.errors[0].message,
-        }))
-      }
-    }
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target
-    setFormData((prev) => ({ ...prev, [id]: value }))
-    // Clear error on change or validate on change?
-    // AGENTS.md says "Show validation errors directly below corresponding fields"
-    // Let's validate on change to give immediate feedback or clear error
-    validateField(id as keyof LoginSchema, value)
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setErrors({})
-
-    const result = loginSchema.safeParse(formData)
-
-    if (!result.success) {
-      const newErrors: Record<string, string> = {}
-      result.error.errors.forEach((err) => {
-        if (err.path[0]) {
-          newErrors[err.path[0].toString()] = err.message
-        }
-      })
-      setErrors(newErrors)
-      return
-    }
-
-    loginMutation.mutate(result.data)
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Welcome back</CardTitle>
-          <CardDescription>Login to your account to continue</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="username">Username</FieldLabel>
-                <Input
-                  id="username"
-                  type="text"
-                  placeholder="Enter your username"
-                  value={formData.username}
-                  onChange={handleChange}
-                  // invalid={!!errors.username} // Input component might not accept invalid prop directly, checking simple input usage
-                  className={
-                    errors.username
-                      ? "border-destructive focus-visible:ring-destructive"
-                      : ""
-                  }
-                />
-                <FieldError>
-                  {errors.username && <p>{errors.username}</p>}
-                </FieldError>
-              </Field>
-
-              <Field>
-                <FieldLabel htmlFor="password">Password</FieldLabel>
-                <Input
-                  id="password"
-                  type="password"
-                  placeholder="Enter your password"
-                  value={formData.password}
-                  onChange={handleChange}
-                  className={
-                    errors.password
-                      ? "border-destructive focus-visible:ring-destructive"
-                      : ""
-                  }
-                />
-                <FieldError>
-                  {errors.password && <p>{errors.password}</p>}
-                </FieldError>
-              </Field>
-
-              {errors.root && (
-                <div className="text-destructive text-sm font-medium">
-                  {errors.root}
-                </div>
-              )}
-
-              <Field>
-                <Button
-                  type="submit"
-                  className="w-full"
-                  disabled={loginMutation.isPending}
-                >
-                  {loginMutation.isPending ? "Logging in..." : "Login"}
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index 64de891..8dd04aa 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -6,7 +6,7 @@ import type { LoginSchema } from "@/schemas/auth"
 import { useMutation } from "@tanstack/react-query"
 import { Eye, EyeOff } from "lucide-react"
 import { useState } from "react"
-import { z } from "zod"
+
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -39,7 +39,7 @@ export function LoginForm({
       const response = await axiosClient.post(apiEndpoints.LOGIN, data)
       return response.data
     },
-    onSuccess: (data) => {
+    onSuccess: (_data) => {
       // TODO: Navigate to dashboard or handle success state
       // window.location.href = "/dashboard"
     },
@@ -52,28 +52,9 @@ export function LoginForm({
     },
   })
 
-  const validateField = (field: keyof LoginSchema, value: string) => {
-    try {
-      loginSchema.shape[field].parse(value)
-      setErrors((prev) => {
-        const newErrors = { ...prev }
-        delete newErrors[field]
-        return newErrors
-      })
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        setErrors((prev) => ({
-          ...prev,
-          [field]: error.errors?.[0]?.message || "Invalid input",
-        }))
-      }
-    }
-  }
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = e.target
     setFormData((prev) => ({ ...prev, [id]: value }))
-    validateField(id as keyof LoginSchema, value)
   }
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -84,7 +65,7 @@ export function LoginForm({
 
     if (!result.success) {
       const newErrors: Record<string, string> = {}
-      result.error.errors.forEach((err) => {
+      result.error.issues.forEach((err) => {
         if (err.path[0]) {
           newErrors[err.path[0].toString()] = err.message
         }
diff --git a/src/routes/app/login.tsx b/src/routes/app/login.tsx
index 38a2e70..5a527cb 100644
--- a/src/routes/app/login.tsx
+++ b/src/routes/app/login.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { LoginForm } from "@/components/auth/login-form"
+import { LoginForm } from "@/components/login-form"
 
 export const Route = createFileRoute("/app/login")({
   component: LoginPage,

From 49a82f2bfe463adbe0f0c85bb797c3749e779b68 Mon Sep 17 00:00:00 2001
From: Minoti <Minotigupta2006@gmail.com>
Date: Sat, 7 Feb 2026 11:01:24 +0530
Subject: [PATCH 4/6] Initial events page

---
 src/components/events/event-card.tsx    |  66 +++++++++
 src/components/events/events-filter.tsx | 105 +++++++++++++
 src/components/events/mock-data.ts      |  61 ++++++++
 src/components/login-form.tsx           |  85 +++--------
 src/components/ui/select.tsx            | 188 ++++++++++++++++++++++++
 src/components/ui/switch.tsx            |  33 +++++
 src/routeTree.gen.ts                    |  24 ++-
 src/routes/app/events.tsx               |  71 +++++++++
 8 files changed, 566 insertions(+), 67 deletions(-)
 create mode 100644 src/components/events/event-card.tsx
 create mode 100644 src/components/events/events-filter.tsx
 create mode 100644 src/components/events/mock-data.ts
 create mode 100644 src/components/ui/select.tsx
 create mode 100644 src/components/ui/switch.tsx
 create mode 100644 src/routes/app/events.tsx

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
new file mode 100644
index 0000000..fa624c0
--- /dev/null
+++ b/src/components/events/event-card.tsx
@@ -0,0 +1,66 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+import type { Event } from "./mock-data"
+
+interface EventCardProps {
+  event: Event
+  className?: string
+  isActive?: boolean
+}
+
+export function EventCard({
+  event,
+  className,
+  isActive = false,
+}: EventCardProps) {
+  return (
+    <Card
+      className={cn(
+        // Base glass effect
+        "w-full overflow-hidden rounded-2xl border border-white/10",
+        "bg-white/5 backdrop-blur-xl",
+        // Soft inner highlight
+        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]",
+        // Grey outer glow
+        "shadow-[0_0_30px_rgba(200,200,200,0.1)]",
+        // Smooth transitions
+        "transition-all duration-300 ease-out",
+        // Hover/Active states
+        isActive
+          ? "shadow-[0_0_40px_rgba(234,179,8,0.4),inset_0_1px_1px_rgba(255,255,255,0.2)] border-amber-400/30"
+          : "hover:shadow-[0_0_40px_rgba(200,200,200,0.2),inset_0_1px_1px_rgba(255,255,255,0.15)] hover:border-white/20 hover:-translate-y-1",
+        className
+      )}
+      style={{
+        background: isActive
+          ? "linear-gradient(135deg, rgba(234,179,8,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(234,179,8,0.05) 100%)"
+          : "linear-gradient(135deg, rgba(147,51,234,0.1) 0%, rgba(255,255,255,0.03) 50%, rgba(147,51,234,0.05) 100%)",
+      }}
+    >
+      <CardHeader className="pb-1">
+        <CardTitle className="text-xl font-bold text-white/90">
+          {event.name}
+        </CardTitle>
+        <CardDescription className="text-sm font-medium text-white/60">
+          {event.organizer}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <div
+          className={cn(
+            "inline-block rounded-lg px-3 py-1 text-sm font-semibold",
+            "bg-purple-500/10 text-purple-300/80 border border-purple-400/10"
+          )}
+        >
+          {event.day}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/events/events-filter.tsx b/src/components/events/events-filter.tsx
new file mode 100644
index 0000000..1c3951a
--- /dev/null
+++ b/src/components/events/events-filter.tsx
@@ -0,0 +1,105 @@
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+import { Search } from "lucide-react"
+import { ORGANIZERS } from "./mock-data"
+
+interface EventsFilterProps {
+  searchQuery: string
+  setSearchQuery: (query: string) => void
+  selectedOrg: string
+  setSelectedOrg: (org: string) => void
+  selectedDay: "All" | "Day 1" | "Day 2" | "Day 3"
+  setSelectedDay: (day: "All" | "Day 1" | "Day 2" | "Day 3") => void
+}
+
+export function EventsFilter({
+  searchQuery,
+  setSearchQuery,
+  selectedOrg,
+  setSelectedOrg,
+  selectedDay,
+  setSelectedDay,
+}: EventsFilterProps) {
+  return (
+    <div
+      className={cn(
+        // Glass effect container
+        "flex flex-col gap-4 p-4 rounded-2xl",
+        "bg-white/5 backdrop-blur-xl",
+        "border border-white/10",
+        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]",
+        "shadow-[0_0_30px_rgba(200,200,200,0.1)]"
+      )}
+      style={{
+        background:
+          "linear-gradient(135deg, rgba(147,51,234,0.05) 0%, rgba(255,255,255,0.02) 50%, rgba(147,51,234,0.03) 100%)",
+      }}
+    >
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-purple-300/60" />
+        <Input
+          id="search"
+          placeholder="Search by name, organization..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className={cn(
+            "w-full pl-10 bg-purple-500/10 border-purple-400/20 text-purple-200",
+            "placeholder:text-purple-200",
+            "focus:border-purple-400/30 focus:ring-purple-400/10"
+          )}
+        />
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="w-full sm:flex-1">
+          <Select value={selectedOrg} onValueChange={setSelectedOrg}>
+            <SelectTrigger
+              className={cn(
+                "w-full bg-purple-500/10 border-purple-400/20 text-purple-200",
+                "focus:border-purple-400/30 focus:ring-purple-400/10"
+              )}
+            >
+              <SelectValue placeholder="Select Organization" />
+            </SelectTrigger>
+            <SelectContent className="bg-zinc-900/90 backdrop-blur-xl border-purple-400/20">
+              {ORGANIZERS.map((org) => (
+                <SelectItem
+                  key={org}
+                  value={org}
+                  className="text-purple-200/80 focus:bg-purple-500/5 focus:text-purple-100"
+                >
+                  {org}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="w-full sm:flex-1 flex gap-2">
+          {(["All", "Day 1", "Day 2", "Day 3"] as const).map((day) => (
+            <button
+              key={day}
+              onClick={() => setSelectedDay(day)}
+              className={cn(
+                "flex-1 rounded-lg px-2 py-1 text-xs font-semibold whitespace-nowrap h-8 backdrop-blur-sm",
+                "transition-all duration-200",
+                selectedDay === day
+                  ? "bg-purple-500/10 text-purple-200 border border-purple-400/30"
+                  : "bg-purple-500/[0.03] text-purple-300/60 border border-purple-400/10 hover:bg-purple-500/[0.08] hover:text-purple-300/80"
+              )}
+            >
+              {day === "All" ? "All" : day}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/events/mock-data.ts b/src/components/events/mock-data.ts
new file mode 100644
index 0000000..52d3380
--- /dev/null
+++ b/src/components/events/mock-data.ts
@@ -0,0 +1,61 @@
+export interface Event {
+  id: string
+  name: string
+  organizer: string
+  day: "Day 1" | "Day 2" | "Day 3"
+}
+
+export const MOOCK_EVENTS: Event[] = [
+  {
+    id: "1",
+    name: "Tech Talk 2024",
+    organizer: "Computer Science Dept",
+    day: "Day 1",
+  },
+  {
+    id: "2",
+    name: "Cultural Fest",
+    organizer: "Arts Club",
+    day: "Day 2",
+  },
+  {
+    id: "3",
+    name: "Robotics Workshop",
+    organizer: "Robotics Club",
+    day: "Day 3",
+  },
+  {
+    id: "4",
+    name: "Coding Marathon",
+    organizer: "Computer Science Dept",
+    day: "Day 1",
+  },
+  {
+    id: "5",
+    name: "Music Concert",
+    organizer: "Music Club",
+    day: "Day 2",
+  },
+  {
+    id: "6",
+    name: "Gaming Tournament",
+    organizer: "Gaming Club",
+    day: "Day 3",
+  },
+  {
+    id: "7",
+    name: "AI Seminar",
+    organizer: "AI Research Group",
+    day: "Day 1",
+  },
+]
+
+export const ORGANIZERS = [
+  "All organizers",
+  "Computer Science Dept",
+  "Arts Club",
+  "Robotics Club",
+  "Music Club",
+  "Gaming Club",
+  "AI Research Group",
+]
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index 8dd04aa..5cde5a5 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -1,9 +1,8 @@
-import axiosClient from "@/lib/axios"
-import { apiEndpoints } from "@/lib/api-endpoints"
+import { useNavigate } from "@tanstack/react-router"
 import { cn } from "@/lib/utils"
-import { loginSchema } from "@/schemas/auth"
-import type { LoginSchema } from "@/schemas/auth"
-import { useMutation } from "@tanstack/react-query"
+// import { loginSchema } from "@/schemas/auth"
+// import type { LoginSchema } from "@/schemas/auth"
+// import { useMutation } from "@tanstack/react-query"
 import { Eye, EyeOff } from "lucide-react"
 import { useState } from "react"
 
@@ -17,7 +16,7 @@ import {
 } from "@/components/ui/card"
 import {
   Field,
-  FieldError,
+  // FieldError,
   FieldGroup,
   FieldLabel,
 } from "@/components/ui/field"
@@ -27,13 +26,14 @@ export function LoginForm({
   className,
   ...props
 }: React.ComponentProps<"div">) {
-  const [formData, setFormData] = useState<LoginSchema>({
-    username: "",
-    password: "",
-  })
-  const [errors, setErrors] = useState<Record<string, string>>({})
+  const navigate = useNavigate()
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  // const [errors, setErrors] = useState<Record<string, string>>({})
   const [showPassword, setShowPassword] = useState(false)
 
+  // Login mutation commented out for mock implementation
+  /*
   const loginMutation = useMutation({
     mutationFn: async (data: LoginSchema) => {
       const response = await axiosClient.post(apiEndpoints.LOGIN, data)
@@ -51,30 +51,12 @@ export function LoginForm({
       })
     },
   })
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target
-    setFormData((prev) => ({ ...prev, [id]: value }))
-  }
+  */
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    setErrors({})
-
-    const result = loginSchema.safeParse(formData)
-
-    if (!result.success) {
-      const newErrors: Record<string, string> = {}
-      result.error.issues.forEach((err) => {
-        if (err.path[0]) {
-          newErrors[err.path[0].toString()] = err.message
-        }
-      })
-      setErrors(newErrors)
-      return
-    }
-
-    loginMutation.mutate(result.data)
+    // Bypass validation and API call
+    navigate({ to: "/app/events" })
   }
 
   return (
@@ -95,17 +77,9 @@ export function LoginForm({
                   id="username"
                   type="text"
                   placeholder="email@example.com"
-                  value={formData.username}
-                  onChange={handleChange}
-                  className={
-                    errors.username
-                      ? "border-destructive focus-visible:ring-destructive"
-                      : ""
-                  }
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
                 />
-                <FieldError>
-                  {errors.username && <p>{errors.username}</p>}
-                </FieldError>
               </Field>
 
               <Field>
@@ -115,13 +89,9 @@ export function LoginForm({
                     id="password"
                     type={showPassword ? "text" : "password"}
                     placeholder="Enter your password"
-                    value={formData.password}
-                    onChange={handleChange}
-                    className={
-                      errors.password
-                        ? "border-destructive focus-visible:ring-destructive pr-10"
-                        : "pr-10"
-                    }
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pr-10"
                   />
                   <Button
                     type="button"
@@ -140,24 +110,11 @@ export function LoginForm({
                     )}
                   </Button>
                 </div>
-                <FieldError>
-                  {errors.password && <p>{errors.password}</p>}
-                </FieldError>
               </Field>
 
-              {errors.root && (
-                <div className="text-destructive text-sm font-medium">
-                  {errors.root}
-                </div>
-              )}
-
               <Field>
-                <Button
-                  type="submit"
-                  className="w-full"
-                  disabled={loginMutation.isPending}
-                >
-                  {loginMutation.isPending ? "Logging in..." : "Login"}
+                <Button type="submit" className="w-full">
+                  Login
                 </Button>
               </Field>
             </FieldGroup>
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..9589ede
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,188 @@
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..b81c340
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index c2953e3..508cc68 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from "./routes/__root"
 import { Route as IndexRouteImport } from "./routes/index"
 import { Route as LoginIndexRouteImport } from "./routes/login/index"
 import { Route as AppLoginRouteImport } from "./routes/app/login"
+import { Route as AppEventsRouteImport } from "./routes/app/events"
 
 const IndexRoute = IndexRouteImport.update({
   id: "/",
@@ -28,33 +29,42 @@ const AppLoginRoute = AppLoginRouteImport.update({
   path: "/app/login",
   getParentRoute: () => rootRouteImport,
 } as any)
+const AppEventsRoute = AppEventsRouteImport.update({
+  id: "/app/events",
+  path: "/app/events",
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   "/": typeof IndexRoute
+  "/app/events": typeof AppEventsRoute
   "/app/login": typeof AppLoginRoute
   "/login/": typeof LoginIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
+  "/app/events": typeof AppEventsRoute
   "/app/login": typeof AppLoginRoute
   "/login": typeof LoginIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   "/": typeof IndexRoute
+  "/app/events": typeof AppEventsRoute
   "/app/login": typeof AppLoginRoute
   "/login/": typeof LoginIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: "/" | "/app/login" | "/login/"
+  fullPaths: "/" | "/app/events" | "/app/login" | "/login/"
   fileRoutesByTo: FileRoutesByTo
-  to: "/" | "/app/login" | "/login"
-  id: "__root__" | "/" | "/app/login" | "/login/"
+  to: "/" | "/app/events" | "/app/login" | "/login"
+  id: "__root__" | "/" | "/app/events" | "/app/login" | "/login/"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AppEventsRoute: typeof AppEventsRoute
   AppLoginRoute: typeof AppLoginRoute
   LoginIndexRoute: typeof LoginIndexRoute
 }
@@ -82,11 +92,19 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof AppLoginRouteImport
       parentRoute: typeof rootRouteImport
     }
+    "/app/events": {
+      id: "/app/events"
+      path: "/app/events"
+      fullPath: "/app/events"
+      preLoaderRoute: typeof AppEventsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AppEventsRoute: AppEventsRoute,
   AppLoginRoute: AppLoginRoute,
   LoginIndexRoute: LoginIndexRoute,
 }
diff --git a/src/routes/app/events.tsx b/src/routes/app/events.tsx
new file mode 100644
index 0000000..76606f4
--- /dev/null
+++ b/src/routes/app/events.tsx
@@ -0,0 +1,71 @@
+import { useState, useMemo } from "react"
+import { createFileRoute } from "@tanstack/react-router"
+import { CalendarDays } from "lucide-react"
+import { EventCard } from "@/components/events/event-card"
+import { EventsFilter } from "@/components/events/events-filter"
+import { MOOCK_EVENTS } from "@/components/events/mock-data"
+
+export const Route = createFileRoute("/app/events")({
+  component: EventsPage,
+})
+
+function EventsPage() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedOrg, setSelectedOrg] = useState("All organizers")
+  const [selectedDay, setSelectedDay] = useState<
+    "All" | "Day 1" | "Day 2" | "Day 3"
+  >("All")
+
+  const filteredEvents = useMemo(() => {
+    return MOOCK_EVENTS.filter((event) => {
+      const matchesSearch =
+        event.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        event.organizer.toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesOrg =
+        selectedOrg === "All organizers" || event.organizer === selectedOrg
+      const matchesDay = selectedDay === "All" || event.day === selectedDay
+
+      return matchesSearch && matchesOrg && matchesDay
+    })
+  }, [searchQuery, selectedOrg, selectedDay])
+
+  return (
+    <div
+      className="min-h-screen w-full"
+      style={{
+        background:
+          "linear-gradient(to bottom right, hsl(240 10% 4%), hsl(260 30% 15%))",
+      }}
+    >
+      <div className="container mx-auto p-4 max-w-md md:max-w-2xl lg:max-w-4xl space-y-6 pb-20">
+        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
+          <CalendarDays className="h-8 w-8" />
+          Events
+        </h1>
+
+        <EventsFilter
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          selectedOrg={selectedOrg}
+          setSelectedOrg={setSelectedOrg}
+          selectedDay={selectedDay}
+          setSelectedDay={setSelectedDay}
+        />
+
+        <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {filteredEvents.length > 0 ? (
+            filteredEvents.map((event) => (
+              <EventCard key={event.id} event={event} />
+            ))
+          ) : (
+            <div className="text-center py-10 col-span-full">
+              <p className="text-muted-foreground">
+                No events found matching your criteria.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

From 571de803d06a6588f1c7ed95c08d7e146db350d0 Mon Sep 17 00:00:00 2001
From: Minoti <Minotigupta2006@gmail.com>
Date: Sun, 8 Feb 2026 19:24:32 +0530
Subject: [PATCH 5/6] Update events page, sidebar and routes

---
 src/components/events/event-card.tsx    |  16 +--
 src/components/events/events-filter.tsx |  93 +++++++-------
 src/components/events/mock-data.ts      |  29 +----
 src/components/login-form.tsx           |  55 ++++----
 src/components/sidebar.tsx              | 160 ++++++++++++++++++++++++
 src/routeTree.gen.ts                    |  60 ++++-----
 src/routes/app/login.tsx                |  16 ---
 src/routes/{app => }/events.tsx         |  58 +++++----
 src/styles.css                          |   3 +
 src/types/events.ts                     |  27 ++++
 src/types/sidebar.ts                    |   4 +
 11 files changed, 333 insertions(+), 188 deletions(-)
 create mode 100644 src/components/sidebar.tsx
 delete mode 100644 src/routes/app/login.tsx
 rename src/routes/{app => }/events.tsx (51%)
 create mode 100644 src/types/events.ts
 create mode 100644 src/types/sidebar.ts

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
index fa624c0..a00db23 100644
--- a/src/components/events/event-card.tsx
+++ b/src/components/events/event-card.tsx
@@ -6,13 +6,7 @@ import {
   CardDescription,
 } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
-import type { Event } from "./mock-data"
-
-interface EventCardProps {
-  event: Event
-  className?: string
-  isActive?: boolean
-}
+import type { EventCardProps } from "@/types/events"
 
 export function EventCard({
   event,
@@ -24,7 +18,7 @@ export function EventCard({
       className={cn(
         // Base glass effect
         "w-full overflow-hidden rounded-2xl border border-white/10",
-        "bg-white/5 backdrop-blur-xl",
+        "backdrop-blur-xl",
         // Soft inner highlight
         "shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]",
         // Grey outer glow
@@ -38,9 +32,7 @@ export function EventCard({
         className
       )}
       style={{
-        background: isActive
-          ? "linear-gradient(135deg, rgba(234,179,8,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(234,179,8,0.05) 100%)"
-          : "linear-gradient(135deg, rgba(147,51,234,0.1) 0%, rgba(255,255,255,0.03) 50%, rgba(147,51,234,0.05) 100%)",
+        backgroundColor: "var(--navy-card)",
       }}
     >
       <CardHeader className="pb-1">
@@ -55,7 +47,7 @@ export function EventCard({
         <div
           className={cn(
             "inline-block rounded-lg px-3 py-1 text-sm font-semibold",
-            "bg-purple-500/10 text-purple-300/80 border border-purple-400/10"
+            "bg-amber-500/10 text-amber-300/80 border border-amber-400/10"
           )}
         >
           {event.day}
diff --git a/src/components/events/events-filter.tsx b/src/components/events/events-filter.tsx
index 1c3951a..3e8b45b 100644
--- a/src/components/events/events-filter.tsx
+++ b/src/components/events/events-filter.tsx
@@ -2,22 +2,16 @@ import { Input } from "@/components/ui/input"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
+  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
 import { cn } from "@/lib/utils"
-import { Search } from "lucide-react"
+import { Search, Users } from "lucide-react"
 import { ORGANIZERS } from "./mock-data"
-
-interface EventsFilterProps {
-  searchQuery: string
-  setSearchQuery: (query: string) => void
-  selectedOrg: string
-  setSelectedOrg: (org: string) => void
-  selectedDay: "All" | "Day 1" | "Day 2" | "Day 3"
-  setSelectedDay: (day: "All" | "Day 1" | "Day 2" | "Day 3") => void
-}
+import type { EventsFilterProps } from "@/types/events"
 
 export function EventsFilter({
   searchQuery,
@@ -28,74 +22,71 @@ export function EventsFilter({
   setSelectedDay,
 }: EventsFilterProps) {
   return (
-    <div
-      className={cn(
-        // Glass effect container
-        "flex flex-col gap-4 p-4 rounded-2xl",
-        "bg-white/5 backdrop-blur-xl",
-        "border border-white/10",
-        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]",
-        "shadow-[0_0_30px_rgba(200,200,200,0.1)]"
-      )}
-      style={{
-        background:
-          "linear-gradient(135deg, rgba(147,51,234,0.05) 0%, rgba(255,255,255,0.02) 50%, rgba(147,51,234,0.03) 100%)",
-      }}
-    >
+    <div className="flex flex-col gap-4">
+      {/* Search */}
       <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-purple-300/60" />
+        <Search
+          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+          size={16}
+        />
         <Input
           id="search"
           placeholder="Search by name, organization..."
+          className="pl-9 border-input text-foreground focus-visible:ring-ring"
+          style={{ backgroundColor: "var(--navy-dark)" }}
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
-          className={cn(
-            "w-full pl-10 bg-purple-500/10 border-purple-400/20 text-purple-200",
-            "placeholder:text-purple-200",
-            "focus:border-purple-400/30 focus:ring-purple-400/10"
-          )}
         />
       </div>
 
       <div className="flex flex-col sm:flex-row gap-4">
         <div className="w-full sm:flex-1">
+          {/* Organizers Dropdown */}
           <Select value={selectedOrg} onValueChange={setSelectedOrg}>
             <SelectTrigger
-              className={cn(
-                "w-full bg-purple-500/10 border-purple-400/20 text-purple-200",
-                "focus:border-purple-400/30 focus:ring-purple-400/10"
-              )}
+              className="w-full pl-9 relative border-input"
+              style={{ backgroundColor: "var(--navy-dark)" }}
             >
-              <SelectValue placeholder="Select Organization" />
+              <Users
+                size={16}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+              />
+              <SelectValue placeholder="All organizers" />
             </SelectTrigger>
-            <SelectContent className="bg-zinc-900/90 backdrop-blur-xl border-purple-400/20">
-              {ORGANIZERS.map((org) => (
-                <SelectItem
-                  key={org}
-                  value={org}
-                  className="text-purple-200/80 focus:bg-purple-500/5 focus:text-purple-100"
-                >
-                  {org}
-                </SelectItem>
-              ))}
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Organizers</SelectLabel>
+                <SelectItem value="All organizers">All organizers</SelectItem>
+                {ORGANIZERS.filter((org) => org !== "All organizers").map(
+                  (org) => (
+                    <SelectItem key={org} value={org}>
+                      {org}
+                    </SelectItem>
+                  )
+                )}
+              </SelectGroup>
             </SelectContent>
           </Select>
         </div>
 
-        <div className="w-full sm:flex-1 flex gap-2">
-          {(["All", "Day 1", "Day 2", "Day 3"] as const).map((day) => (
+        {/* Toggle container - matches dropdown height */}
+        <div
+          className="w-full sm:flex-1 flex items-center gap-0.5 px-1 rounded-md border border-zinc-700/50 h-9"
+          style={{ backgroundColor: "var(--navy-dark)" }}
+        >
+          {(["All", "20 Feb", "21 Feb"] as const).map((day) => (
             <button
               key={day}
               onClick={() => setSelectedDay(day)}
               className={cn(
-                "flex-1 rounded-lg px-2 py-1 text-xs font-semibold whitespace-nowrap h-8 backdrop-blur-sm",
+                "flex-1 rounded px-2 py-1 text-sm font-medium whitespace-nowrap",
                 "transition-all duration-200",
                 selectedDay === day
-                  ? "bg-purple-500/10 text-purple-200 border border-purple-400/30"
-                  : "bg-purple-500/[0.03] text-purple-300/60 border border-purple-400/10 hover:bg-purple-500/[0.08] hover:text-purple-300/80"
+                  ? "border border-amber-500/80 text-amber-400 bg-transparent"
+                  : "border border-transparent text-zinc-400 hover:text-zinc-200"
               )}
             >
-              {day === "All" ? "All" : day}
+              {day}
             </button>
           ))}
         </div>
diff --git a/src/components/events/mock-data.ts b/src/components/events/mock-data.ts
index 52d3380..6cb0da4 100644
--- a/src/components/events/mock-data.ts
+++ b/src/components/events/mock-data.ts
@@ -1,52 +1,35 @@
-export interface Event {
-  id: string
-  name: string
-  organizer: string
-  day: "Day 1" | "Day 2" | "Day 3"
-}
+import type { Event } from "@/types/events"
 
 export const MOOCK_EVENTS: Event[] = [
   {
     id: "1",
     name: "Tech Talk 2024",
     organizer: "Computer Science Dept",
-    day: "Day 1",
+    day: "20 Feb",
   },
   {
     id: "2",
     name: "Cultural Fest",
     organizer: "Arts Club",
-    day: "Day 2",
-  },
-  {
-    id: "3",
-    name: "Robotics Workshop",
-    organizer: "Robotics Club",
-    day: "Day 3",
+    day: "21 Feb",
   },
   {
     id: "4",
     name: "Coding Marathon",
     organizer: "Computer Science Dept",
-    day: "Day 1",
+    day: "20 Feb",
   },
   {
     id: "5",
     name: "Music Concert",
     organizer: "Music Club",
-    day: "Day 2",
-  },
-  {
-    id: "6",
-    name: "Gaming Tournament",
-    organizer: "Gaming Club",
-    day: "Day 3",
+    day: "21 Feb",
   },
   {
     id: "7",
     name: "AI Seminar",
     organizer: "AI Research Group",
-    day: "Day 1",
+    day: "20 Feb",
   },
 ]
 
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index 5cde5a5..0689bd4 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -1,10 +1,10 @@
 import { useNavigate } from "@tanstack/react-router"
 import { cn } from "@/lib/utils"
-// import { loginSchema } from "@/schemas/auth"
-// import type { LoginSchema } from "@/schemas/auth"
-// import { useMutation } from "@tanstack/react-query"
+import { useMutation } from "@tanstack/react-query"
 import { Eye, EyeOff } from "lucide-react"
 import { useState } from "react"
+import axiosClient from "@/lib/axios"
+import { apiEndpoints } from "@/lib/api-endpoints"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -14,12 +14,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import {
-  Field,
-  // FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field"
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 
 export function LoginForm({
@@ -29,34 +24,35 @@ export function LoginForm({
   const navigate = useNavigate()
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
-  // const [errors, setErrors] = useState<Record<string, string>>({})
+  const [error, setError] = useState("")
   const [showPassword, setShowPassword] = useState(false)
 
-  // Login mutation commented out for mock implementation
-  /*
   const loginMutation = useMutation({
-    mutationFn: async (data: LoginSchema) => {
+    mutationFn: async (data: { email: string; password: string }) => {
       const response = await axiosClient.post(apiEndpoints.LOGIN, data)
       return response.data
     },
-    onSuccess: (_data) => {
-      // TODO: Navigate to dashboard or handle success state
-      // window.location.href = "/dashboard"
+    onSuccess: () => {
+      navigate({ to: "/events" })
     },
     onError: (error: any) => {
       console.error("Login failed:", error)
-      setErrors({
-        root:
-          error.response?.data?.message || "Login failed. Please try again.",
-      })
+      setError(
+        error.response?.data?.message || "Login failed. Please try again."
+      )
     },
   })
-  */
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    // Bypass validation and API call
-    navigate({ to: "/app/events" })
+    setError("")
+
+    if (!username || !password) {
+      setError("Please enter both email and password")
+      return
+    }
+
+    loginMutation.mutate({ email: username, password })
   }
 
   return (
@@ -112,9 +108,18 @@ export function LoginForm({
                 </div>
               </Field>
 
+              {/* Error message */}
+              {error && (
+                <div className="text-sm text-red-500 text-center">{error}</div>
+              )}
+
               <Field>
-                <Button type="submit" className="w-full">
-                  Login
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={loginMutation.isPending}
+                >
+                  {loginMutation.isPending ? "Logging in..." : "Login"}
                 </Button>
               </Field>
             </FieldGroup>
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
new file mode 100644
index 0000000..735bf99
--- /dev/null
+++ b/src/components/sidebar.tsx
@@ -0,0 +1,160 @@
+import { useState, useEffect, useRef } from "react"
+import { LogOut, X, Menu } from "lucide-react"
+import { useNavigate } from "@tanstack/react-router"
+import { cn } from "@/lib/utils"
+import type { SidebarProps } from "@/types/sidebar"
+
+export function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const navigate = useNavigate()
+
+  const handleLogout = () => {
+    // Clear any auth tokens/state here if needed
+    navigate({ to: "/login" })
+  }
+
+  return (
+    <>
+      {/* Backdrop - only visible on mobile when sidebar is open */}
+      <div
+        className={cn(
+          "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 md:hidden",
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        )}
+        onClick={onClose}
+      />
+
+      {/* Sidebar - always visible on desktop, slide-in on mobile */}
+      <aside
+        className={cn(
+          "fixed top-0 left-0 z-50 h-full w-64 flex flex-col transition-transform duration-300 ease-out",
+          "border-r border-amber-500/20",
+          // On desktop (md+), always visible. On mobile, slide based on isOpen
+          "md:translate-x-0",
+          isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+        )}
+        style={{
+          backgroundColor: "var(--navy-dark)",
+        }}
+      >
+        {/* Header */}
+        <div className="p-6 border-b border-amber-500/20">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
+                Pragati 2026
+              </h1>
+              <p className="text-xs text-muted-foreground mt-1">
+                Attendance App
+              </p>
+            </div>
+            {/* Close button - only on mobile */}
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-all md:hidden"
+            >
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Spacer - pushes logout to bottom */}
+        <div className="flex-1" />
+
+        {/* Footer with Logout */}
+        <div className="p-4 border-t border-amber-500/20">
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500/20 to-orange-500/20 border border-amber-500/10 flex items-center justify-center text-amber-500 font-bold shadow-inner">
+                U
+              </div>
+              <div className="overflow-hidden">
+                <p className="text-sm font-medium text-foreground truncate">
+                  User
+                </p>
+                <p className="text-xs text-muted-foreground truncate">
+                  user@pragati.edu
+                </p>
+              </div>
+            </div>
+
+            <button
+              onClick={handleLogout}
+              className="w-full flex items-center justify-center gap-2 p-2 rounded-lg 
+                       text-xs font-medium text-muted-foreground
+                       bg-black/20 backdrop-blur-sm border border-amber-500/30
+                       hover:bg-amber-500/10 hover:text-amber-500 hover:border-amber-500 
+                       transition-all duration-300 group"
+            >
+              <LogOut
+                size={14}
+                className="group-hover:scale-105 transition-transform"
+              />
+              <span>Logout</span>
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  )
+}
+
+// Hook for swipe gesture detection
+export function useSwipeToOpen() {
+  const [isOpen, setIsOpen] = useState(false)
+  const touchStartX = useRef(0)
+  const touchEndX = useRef(0)
+
+  useEffect(() => {
+    const handleTouchStart = (e: TouchEvent) => {
+      touchStartX.current = e.touches[0].clientX
+    }
+
+    const handleTouchMove = (e: TouchEvent) => {
+      touchEndX.current = e.touches[0].clientX
+    }
+
+    const handleTouchEnd = () => {
+      const swipeDistance = touchEndX.current - touchStartX.current
+      const startedFromEdge = touchStartX.current < 30 // Started from left edge
+
+      // Open sidebar if swiped right from left edge
+      if (startedFromEdge && swipeDistance > 50) {
+        setIsOpen(true)
+      }
+
+      // Close sidebar if swiped left while open
+      if (isOpen && swipeDistance < -50) {
+        setIsOpen(false)
+      }
+
+      // Reset
+      touchStartX.current = 0
+      touchEndX.current = 0
+    }
+
+    document.addEventListener("touchstart", handleTouchStart)
+    document.addEventListener("touchmove", handleTouchMove)
+    document.addEventListener("touchend", handleTouchEnd)
+
+    return () => {
+      document.removeEventListener("touchstart", handleTouchStart)
+      document.removeEventListener("touchmove", handleTouchMove)
+      document.removeEventListener("touchend", handleTouchEnd)
+    }
+  }, [isOpen])
+
+  return { isOpen, setIsOpen, close: () => setIsOpen(false) }
+}
+
+// Menu button component for triggering sidebar
+export function SidebarTrigger({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-all"
+      aria-label="Open menu"
+    >
+      <Menu size={24} />
+    </button>
+  )
+}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 508cc68..ac63d52 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,11 +9,15 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from "./routes/__root"
+import { Route as EventsRouteImport } from "./routes/events"
 import { Route as IndexRouteImport } from "./routes/index"
 import { Route as LoginIndexRouteImport } from "./routes/login/index"
-import { Route as AppLoginRouteImport } from "./routes/app/login"
-import { Route as AppEventsRouteImport } from "./routes/app/events"
 
+const EventsRoute = EventsRouteImport.update({
+  id: "/events",
+  path: "/events",
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: "/",
   path: "/",
@@ -24,53 +28,46 @@ const LoginIndexRoute = LoginIndexRouteImport.update({
   path: "/login/",
   getParentRoute: () => rootRouteImport,
 } as any)
-const AppLoginRoute = AppLoginRouteImport.update({
-  id: "/app/login",
-  path: "/app/login",
-  getParentRoute: () => rootRouteImport,
-} as any)
-const AppEventsRoute = AppEventsRouteImport.update({
-  id: "/app/events",
-  path: "/app/events",
-  getParentRoute: () => rootRouteImport,
-} as any)
 
 export interface FileRoutesByFullPath {
   "/": typeof IndexRoute
-  "/app/events": typeof AppEventsRoute
-  "/app/login": typeof AppLoginRoute
+  "/events": typeof EventsRoute
   "/login/": typeof LoginIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
-  "/app/events": typeof AppEventsRoute
-  "/app/login": typeof AppLoginRoute
+  "/events": typeof EventsRoute
   "/login": typeof LoginIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   "/": typeof IndexRoute
-  "/app/events": typeof AppEventsRoute
-  "/app/login": typeof AppLoginRoute
+  "/events": typeof EventsRoute
   "/login/": typeof LoginIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: "/" | "/app/events" | "/app/login" | "/login/"
+  fullPaths: "/" | "/events" | "/login/"
   fileRoutesByTo: FileRoutesByTo
-  to: "/" | "/app/events" | "/app/login" | "/login"
-  id: "__root__" | "/" | "/app/events" | "/app/login" | "/login/"
+  to: "/" | "/events" | "/login"
+  id: "__root__" | "/" | "/events" | "/login/"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  AppEventsRoute: typeof AppEventsRoute
-  AppLoginRoute: typeof AppLoginRoute
+  EventsRoute: typeof EventsRoute
   LoginIndexRoute: typeof LoginIndexRoute
 }
 
 declare module "@tanstack/react-router" {
   interface FileRoutesByPath {
+    "/events": {
+      id: "/events"
+      path: "/events"
+      fullPath: "/events"
+      preLoaderRoute: typeof EventsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     "/": {
       id: "/"
       path: "/"
@@ -85,27 +82,12 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof LoginIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    "/app/login": {
-      id: "/app/login"
-      path: "/app/login"
-      fullPath: "/app/login"
-      preLoaderRoute: typeof AppLoginRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    "/app/events": {
-      id: "/app/events"
-      path: "/app/events"
-      fullPath: "/app/events"
-      preLoaderRoute: typeof AppEventsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  AppEventsRoute: AppEventsRoute,
-  AppLoginRoute: AppLoginRoute,
+  EventsRoute: EventsRoute,
   LoginIndexRoute: LoginIndexRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/src/routes/app/login.tsx b/src/routes/app/login.tsx
deleted file mode 100644
index 5a527cb..0000000
--- a/src/routes/app/login.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { LoginForm } from "@/components/login-form"
-
-export const Route = createFileRoute("/app/login")({
-  component: LoginPage,
-})
-
-function LoginPage() {
-  return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-      <div className="w-full max-w-sm">
-        <LoginForm />
-      </div>
-    </div>
-  )
-}
diff --git a/src/routes/app/events.tsx b/src/routes/events.tsx
similarity index 51%
rename from src/routes/app/events.tsx
rename to src/routes/events.tsx
index 76606f4..4aea4c1 100644
--- a/src/routes/app/events.tsx
+++ b/src/routes/events.tsx
@@ -4,17 +4,20 @@ import { CalendarDays } from "lucide-react"
 import { EventCard } from "@/components/events/event-card"
 import { EventsFilter } from "@/components/events/events-filter"
 import { MOOCK_EVENTS } from "@/components/events/mock-data"
+import { Sidebar, SidebarTrigger, useSwipeToOpen } from "@/components/sidebar"
+import type { DayFilter } from "@/types/events"
 
-export const Route = createFileRoute("/app/events")({
+export const Route = createFileRoute("/events")({
   component: EventsPage,
 })
 
 function EventsPage() {
   const [searchQuery, setSearchQuery] = useState("")
   const [selectedOrg, setSelectedOrg] = useState("All organizers")
-  const [selectedDay, setSelectedDay] = useState<
-    "All" | "Day 1" | "Day 2" | "Day 3"
-  >("All")
+  const [selectedDay, setSelectedDay] = useState<DayFilter>("All")
+
+  // Sidebar state with swipe support
+  const { isOpen, setIsOpen, close } = useSwipeToOpen()
 
   const filteredEvents = useMemo(() => {
     return MOOCK_EVENTS.filter((event) => {
@@ -32,27 +35,38 @@ function EventsPage() {
   return (
     <div
       className="min-h-screen w-full"
-      style={{
-        background:
-          "linear-gradient(to bottom right, hsl(240 10% 4%), hsl(260 30% 15%))",
-      }}
+      style={{ backgroundColor: "var(--navy-dark)" }}
     >
-      <div className="container mx-auto p-4 max-w-md md:max-w-2xl lg:max-w-4xl space-y-6 pb-20">
-        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
-          <CalendarDays className="h-8 w-8" />
-          Events
-        </h1>
+      {/* Sidebar - opens on swipe from left edge or menu button click */}
+      <Sidebar isOpen={isOpen} onClose={close} />
+
+      {/* Main content - offset by sidebar width on desktop */}
+      <div className="md:ml-64 p-4 md:p-6 space-y-6 pb-20">
+        {/* Header with menu button (mobile only) */}
+        <div className="flex items-center gap-3 mb-14">
+          <div className="md:hidden">
+            <SidebarTrigger onClick={() => setIsOpen(true)} />
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
+            <CalendarDays className="h-8 w-8" />
+            Events
+          </h1>
+        </div>
 
-        <EventsFilter
-          searchQuery={searchQuery}
-          setSearchQuery={setSearchQuery}
-          selectedOrg={selectedOrg}
-          setSelectedOrg={setSelectedOrg}
-          selectedDay={selectedDay}
-          setSelectedDay={setSelectedDay}
-        />
+        {/* Filter section - constrained width */}
+        <div className="max-w-md md:max-w-2xl lg:max-w-4xl">
+          <EventsFilter
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            selectedOrg={selectedOrg}
+            setSelectedOrg={setSelectedOrg}
+            selectedDay={selectedDay}
+            setSelectedDay={setSelectedDay}
+          />
+        </div>
 
-        <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        {/* Cards grid - fills available width */}
+        <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {filteredEvents.length > 0 ? (
             filteredEvents.map((event) => (
               <EventCard key={event.id} event={event} />
diff --git a/src/styles.css b/src/styles.css
index a3ebbd7..f9c6bc4 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -87,6 +87,9 @@ code {
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.274 0.006 286.033);
   --sidebar-ring: oklch(0.442 0.017 285.786);
+  /* Custom app colors */
+  --navy-dark: oklch(0.1 0.02 260);
+  --navy-card: oklch(0.15 0.03 260);
 }
 
 @theme inline {
diff --git a/src/types/events.ts b/src/types/events.ts
new file mode 100644
index 0000000..f4b3dc2
--- /dev/null
+++ b/src/types/events.ts
@@ -0,0 +1,27 @@
+// Event entity type
+export interface Event {
+  id: string
+  name: string
+  organizer: string
+  day: "20 Feb" | "21 Feb"
+}
+
+// Event card props
+export interface EventCardProps {
+  event: Event
+  className?: string
+  isActive?: boolean
+}
+
+// Day filter type
+export type DayFilter = "All" | "20 Feb" | "21 Feb"
+
+// Events filter props interface
+export interface EventsFilterProps {
+  searchQuery: string
+  setSearchQuery: (query: string) => void
+  selectedOrg: string
+  setSelectedOrg: (org: string) => void
+  selectedDay: DayFilter
+  setSelectedDay: (day: DayFilter) => void
+}
diff --git a/src/types/sidebar.ts b/src/types/sidebar.ts
new file mode 100644
index 0000000..35f3855
--- /dev/null
+++ b/src/types/sidebar.ts
@@ -0,0 +1,4 @@
+export interface SidebarProps {
+  isOpen: boolean
+  onClose: () => void
+}

From 9a3a6c3a66bdd8b61bb98bd4edf4a9f2621137c4 Mon Sep 17 00:00:00 2001
From: Minoti <Minotigupta2006@gmail.com>
Date: Mon, 9 Feb 2026 23:22:37 +0530
Subject: [PATCH 6/6] resolve review comments

---
 src/components/events/event-card.tsx    | 11 +---
 src/components/events/events-filter.tsx | 85 ++++++-------------------
 src/routes/events.tsx                   |  9 +--
 src/types/events.ts                     |  2 -
 4 files changed, 24 insertions(+), 83 deletions(-)

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
index a00db23..4587155 100644
--- a/src/components/events/event-card.tsx
+++ b/src/components/events/event-card.tsx
@@ -1,10 +1,4 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 import type { EventCardProps } from "@/types/events"
 
@@ -39,9 +33,6 @@ export function EventCard({
         <CardTitle className="text-xl font-bold text-white/90">
           {event.name}
         </CardTitle>
-        <CardDescription className="text-sm font-medium text-white/60">
-          {event.organizer}
-        </CardDescription>
       </CardHeader>
       <CardContent className="pt-2">
         <div
diff --git a/src/components/events/events-filter.tsx b/src/components/events/events-filter.tsx
index 3e8b45b..69882a7 100644
--- a/src/components/events/events-filter.tsx
+++ b/src/components/events/events-filter.tsx
@@ -1,23 +1,11 @@
 import { Input } from "@/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 import { cn } from "@/lib/utils"
-import { Search, Users } from "lucide-react"
-import { ORGANIZERS } from "./mock-data"
+import { Search } from "lucide-react"
 import type { EventsFilterProps } from "@/types/events"
 
 export function EventsFilter({
   searchQuery,
   setSearchQuery,
-  selectedOrg,
-  setSelectedOrg,
   selectedDay,
   setSelectedDay,
 }: EventsFilterProps) {
@@ -39,57 +27,26 @@ export function EventsFilter({
         />
       </div>
 
-      <div className="flex flex-col sm:flex-row gap-4">
-        <div className="w-full sm:flex-1">
-          {/* Organizers Dropdown */}
-          <Select value={selectedOrg} onValueChange={setSelectedOrg}>
-            <SelectTrigger
-              className="w-full pl-9 relative border-input"
-              style={{ backgroundColor: "var(--navy-dark)" }}
-            >
-              <Users
-                size={16}
-                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-              />
-              <SelectValue placeholder="All organizers" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Organizers</SelectLabel>
-                <SelectItem value="All organizers">All organizers</SelectItem>
-                {ORGANIZERS.filter((org) => org !== "All organizers").map(
-                  (org) => (
-                    <SelectItem key={org} value={org}>
-                      {org}
-                    </SelectItem>
-                  )
-                )}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Toggle container - matches dropdown height */}
-        <div
-          className="w-full sm:flex-1 flex items-center gap-0.5 px-1 rounded-md border border-zinc-700/50 h-9"
-          style={{ backgroundColor: "var(--navy-dark)" }}
-        >
-          {(["All", "20 Feb", "21 Feb"] as const).map((day) => (
-            <button
-              key={day}
-              onClick={() => setSelectedDay(day)}
-              className={cn(
-                "flex-1 rounded px-2 py-1 text-sm font-medium whitespace-nowrap",
-                "transition-all duration-200",
-                selectedDay === day
-                  ? "border border-amber-500/80 text-amber-400 bg-transparent"
-                  : "border border-transparent text-zinc-400 hover:text-zinc-200"
-              )}
-            >
-              {day}
-            </button>
-          ))}
-        </div>
+      {/* Day toggle */}
+      <div
+        className="flex items-center gap-0.5 px-1 rounded-md border border-zinc-700/50 h-9"
+        style={{ backgroundColor: "var(--navy-dark)" }}
+      >
+        {(["All", "20 Feb", "21 Feb"] as const).map((day) => (
+          <button
+            key={day}
+            onClick={() => setSelectedDay(day)}
+            className={cn(
+              "flex-1 rounded px-2 py-1 text-sm font-medium whitespace-nowrap",
+              "transition-all duration-200",
+              selectedDay === day
+                ? "border border-amber-500/80 text-amber-400 bg-transparent"
+                : "border border-transparent text-zinc-400 hover:text-zinc-200"
+            )}
+          >
+            {day}
+          </button>
+        ))}
       </div>
     </div>
   )
diff --git a/src/routes/events.tsx b/src/routes/events.tsx
index 4aea4c1..d69bd38 100644
--- a/src/routes/events.tsx
+++ b/src/routes/events.tsx
@@ -13,7 +13,6 @@ export const Route = createFileRoute("/events")({
 
 function EventsPage() {
   const [searchQuery, setSearchQuery] = useState("")
-  const [selectedOrg, setSelectedOrg] = useState("All organizers")
   const [selectedDay, setSelectedDay] = useState<DayFilter>("All")
 
   // Sidebar state with swipe support
@@ -24,13 +23,11 @@ function EventsPage() {
       const matchesSearch =
         event.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
         event.organizer.toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesOrg =
-        selectedOrg === "All organizers" || event.organizer === selectedOrg
       const matchesDay = selectedDay === "All" || event.day === selectedDay
 
-      return matchesSearch && matchesOrg && matchesDay
+      return matchesSearch && matchesDay
     })
-  }, [searchQuery, selectedOrg, selectedDay])
+  }, [searchQuery, selectedDay])
 
   return (
     <div
@@ -58,8 +55,6 @@ function EventsPage() {
           <EventsFilter
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
-            selectedOrg={selectedOrg}
-            setSelectedOrg={setSelectedOrg}
             selectedDay={selectedDay}
             setSelectedDay={setSelectedDay}
           />
diff --git a/src/types/events.ts b/src/types/events.ts
index f4b3dc2..ad21bed 100644
--- a/src/types/events.ts
+++ b/src/types/events.ts
@@ -20,8 +20,6 @@ export type DayFilter = "All" | "20 Feb" | "21 Feb"
 export interface EventsFilterProps {
   searchQuery: string
   setSearchQuery: (query: string) => void
-  selectedOrg: string
-  setSelectedOrg: (org: string) => void
   selectedDay: DayFilter
   setSelectedDay: (day: DayFilter) => void
 }