users update create delete tested

backend/src/users/dto/create-user.input.ts

@@ -44,4 +44,16 @@ export class CreateUserInput {
 
     @Field(() => ID, { nullable: true })
     type?: string;
+
+    @Field(() => ID, { nullable: true })
+    expiryStarts?: string;
+
+    @Field(() => ID, { nullable: true })
+    expiryEnds?: string;
+
+    @Field(() => Boolean, { nullable: true })
+    isConfirmed?: boolean;
+
+    @Field(() => Boolean, { nullable: true })
+    isNotificationSend?: boolean;
 }

backend/src/users/dto/update-user.input.ts

@@ -0,0 +1,53 @@
+import { InputType, Field, ID } from '@nestjs/graphql';
+
+@InputType()
+export class UpdateCollectionTokenItemInput {
+    @Field({ nullable: true })
+    prefix?: string;
+
+    @Field({ nullable: true })
+    token?: string;
+}
+
+@InputType()
+export class UpdateCollectionTokenInput {
+    @Field(() => [UpdateCollectionTokenItemInput], { nullable: true })
+    tokens?: UpdateCollectionTokenItemInput[];
+
+    @Field({ nullable: true })
+    default?: string;
+}
+
+@InputType()
+export class UpdateUserInput {
+
+    @Field({ nullable: true })
+    tag?: string;
+
+    @Field({ nullable: true })
+    email?: string;
+
+    @Field({ nullable: true })
+    phone?: string;
+
+    @Field(() => UpdateCollectionTokenInput, { nullable: true })
+    collectionTokens?: UpdateCollectionTokenInput;
+
+    @Field(() => ID, { nullable: true })
+    person?: string;
+
+    @Field(() => ID, { nullable: true })
+    type?: string;
+
+    @Field({ nullable: true })
+    expiryStarts?: string;
+
+    @Field({ nullable: true })
+    expiryEnds?: string;
+
+    @Field(() => Boolean, { nullable: true })
+    isConfirmed?: boolean;
+
+    @Field(() => Boolean, { nullable: true })
+    isNotificationSend?: boolean;
+}

backend/src/users/users.resolver.ts

@@ -1,10 +1,11 @@
-import { Resolver, Query, Args, ID, Info, Mutation, Int } from '@nestjs/graphql';
+import { Resolver, Query, Args, ID, Info, Mutation } from '@nestjs/graphql';
 import { Types } from 'mongoose';
 import { User } from '@/models/user.model';
 import { UsersService } from '@/users/users.service';
 import { CreateUserInput } from './dto/create-user.input';
 import { ListArguments } from '@/dto/list.input';
 import { UsersListResponse } from '@/people/dto/list-result.response';
+import { UpdateUserInput } from './dto/update-user.input';
 import graphqlFields from 'graphql-fields';
 import type { GraphQLResolveInfo } from 'graphql';
 
@@ -27,4 +28,10 @@ export class UsersResolver {
     @Mutation(() => User, { name: 'createUser' })
     async createUser(@Args('input') input: CreateUserInput): Promise<User> { return this.usersService.create(input) }
 
+    @Mutation(() => User, { name: 'updateUser' })
+    async updateUser(@Args('uuid') uuid: string, @Args('input') input: UpdateUserInput): Promise<User> { return this.usersService.update(uuid, input) }
+
+    @Mutation(() => Boolean, { name: 'deleteUser' })
+    async deleteUser(@Args('uuid') uuid: string): Promise<boolean> { return this.usersService.delete(uuid) }
+
 }

backend/src/users/users.service.ts

@@ -4,6 +4,7 @@ import { Types, Model } from 'mongoose';
 import { User, UserDocument } from '@/models/user.model';
 import { CreateUserInput } from './dto/create-user.input';
 import { UsersListResponse } from '@/people/dto/list-result.response';
+import { UpdateUserInput } from './dto/update-user.input';
 
 @Injectable()
 export class UsersService {
@@ -13,7 +14,7 @@ export class UsersService {
     async findAll(projection: any, skip: number, limit: number, sort?: Record<string, 1 | -1>, filters?: Record<string, any>): Promise<UsersListResponse> {
         const query: any = {}; if (filters && Object.keys(filters).length > 0) { Object.assign(query, filters) };
         const totalCount = await this.userModel.countDocuments(query).exec();
-        const data = await this.userModel.find(query, projection, { lean: true }).skip(skip).limit(limit).sort(sort).exec()
+        const data = await this.userModel.find(query, projection, { lean: true }).skip(skip).limit(limit).sort(sort).exec();
         return { data, totalCount };
     }
 
@@ -21,8 +22,10 @@ export class UsersService {
 
     async create(input: CreateUserInput): Promise<UserDocument> { const user = new this.userModel(input); return user.save() }
 
-    buildProjection(fields: Record<string, any>): Record<string, 1> {
-        const projection: Record<string, 1> = {}; for (const key in fields) { projection[key] = 1 }; console.dir({ fields, projection }, { depth: null }); return projection
-    }
+    async update(uuid: string, input: UpdateUserInput): Promise<UserDocument> { const user = await this.userModel.findOne({ uuid }); if (!user) { throw new Error('User not found') }; user.set(input); console.dir({ uuid, input }, { depth: null }); return user.save() }
+
+    async delete(uuid: string): Promise<boolean> { const user = await this.userModel.deleteMany({ uuid }); return user.deletedCount > 0 }
+
+    buildProjection(fields: Record<string, any>): Record<string, 1> { const projection: Record<string, 1> = {}; for (const key in fields) { projection[key] = 1 }; return projection }
 
 }

frontend/app/api/users/add/route.ts

@@ -0,0 +1,53 @@
+'use server';
+import { NextResponse } from 'next/server';
+import { GraphQLClient, gql } from 'graphql-request';
+import { userAddSchema } from './schema';
+
+const endpoint = "http://localhost:3001/graphql";
+
+export async function POST(request: Request) {
+    const body = await request.json();
+    console.log("BODY")
+    console.dir({ body })
+    const validatedBody = userAddSchema.parse(body);
+    validatedBody.person = "6917732face2287b1d901738"
+    try {
+        const client = new GraphQLClient(endpoint);
+        const query = gql`
+            mutation CreateUser($input: CreateUserInput!) {
+                createUser(input: $input) {
+                _id
+                password
+                tag
+                email
+                phone
+                collectionTokens {
+                    default
+                    tokens {
+                    prefix
+                    token
+                    }
+                }
+                person
+                }
+            }
+        `;
+        const variables = { input: validatedBody };
+        const data = await client.request(query, variables);
+        console.log("DATA")
+        console.dir({ data })
+        return NextResponse.json({ data: data.createUser, status: 200 });
+    } catch (err: any) {
+        console.error(err);
+        return NextResponse.json({ error: err.message }, { status: 500 });
+    }
+}
+
+// export async function POST(request: Request) {
+
+//     const body = await request.json();
+//     const validatedBody = userAddSchema.parse(body);
+//     console.log("VALIDATED")
+//     console.dir({ validatedBody })
+//     return NextResponse.json({ data: validatedBody })
+// }

frontend/app/api/users/add/schema.ts

@@ -0,0 +1,29 @@
+import { z } from "zod"
+
+export const tokenSchema = z.object({
+    prefix: z.string().min(1, "Prefix is required"),
+    token: z.string().min(1, "Token is required"),
+})
+
+export const collectionTokensSchema = z.object({
+    default: z.string().optional(),
+    tokens: z.array(tokenSchema)
+})
+
+export const userAddSchema = z.object({
+    expiryStarts: z.string().optional(),
+    expiryEnds: z.string().optional(),
+
+    isConfirmed: z.boolean(),
+    isNotificationSend: z.boolean(),
+
+    password: z.string().min(6),
+    tag: z.string().optional(),
+    email: z.string().email(),
+    phone: z.string().min(5),
+    person: z.string().optional(),
+
+    collectionTokens: collectionTokensSchema,
+})
+
+export type UserAdd = z.infer<typeof userAddSchema>

frontend/app/api/users/delete/route.ts

@@ -0,0 +1,22 @@
+'use server';
+import { NextResponse } from 'next/server';
+import { GraphQLClient, gql } from 'graphql-request';
+
+const endpoint = "http://localhost:3001/graphql";
+
+export async function GET(request: Request) {
+
+    const searchParams = new URL(request.url).searchParams;
+    const uuid = searchParams.get('uuid');
+    if (!uuid) { return NextResponse.json({ error: 'UUID not found in search params' }, { status: 400 }) }
+    try {
+        const client = new GraphQLClient(endpoint);
+        const query = gql`mutation DeleteUser($uuid: String!) { deleteUser(uuid: $uuid)}`;
+        const variables = { uuid: uuid };
+        const data = await client.request(query, variables);
+        return NextResponse.json({ data: data.deleteUser, status: 200 });
+    } catch (err: any) {
+        console.error(err);
+        return NextResponse.json({ error: err.message }, { status: 500 });
+    }
+}

frontend/app/api/users/list/route.ts

@@ -2,7 +2,7 @@
 import { NextResponse } from 'next/server';
 import { GraphQLClient, gql } from 'graphql-request';
 
-const endpoint = process.env.GRAPHQL_URL || "http://localhost:3001/graphql";
+const endpoint = "http://localhost:3001/graphql";
 
 export async function POST(request: Request) {
     const body = await request.json();
@@ -50,7 +50,6 @@ export async function POST(request: Request) {
                 }
             }
         `;
-        console.dir({ limit, skip, sort, filters }, { depth: null });
         const variables = { input: { limit, skip, sort, filters } };
         const data = await client.request(query, variables);
         return NextResponse.json({ data: data.users.data, totalCount: data.users.totalCount });

frontend/app/api/users/update/route.ts

@@ -0,0 +1,35 @@
+'use server';
+import { NextResponse } from 'next/server';
+import { GraphQLClient, gql } from 'graphql-request';
+import { userUpdateSchema } from './schema';
+
+const endpoint = "http://localhost:3001/graphql";
+
+export async function POST(request: Request) {
+    const searchUrl = new URL(request.url);
+    const uuid = searchUrl.searchParams.get("uuid") || "";
+    const body = await request.json();
+    const validatedBody = userUpdateSchema.parse(body);
+    if (uuid === "") { return NextResponse.json({ error: "UUID is required" }, { status: 400 }) }
+    try {
+        const client = new GraphQLClient(endpoint);
+        const query = gql`
+            mutation UpdateUserTest($uuid: String!, $input: UpdateUserInput!) {
+                updateUser(uuid: $uuid, input: $input) {
+                tag
+                email
+                phone
+                person
+                expiryStarts
+                expiryEnds
+                }
+            }
+        `;
+        const variables = { uuid: uuid, input: validatedBody };
+        const data = await client.request(query, variables);
+        return NextResponse.json({ data: data.updateUser, status: 200 });
+    } catch (err: any) {
+        console.error(err);
+        return NextResponse.json({ error: err.message }, { status: 500 });
+    }
+}

frontend/app/api/users/update/schema.ts

@@ -0,0 +1,28 @@
+import { z } from "zod"
+
+export const tokenSchema = z.object({
+    prefix: z.string().min(1, "Prefix is required").optional(),
+    token: z.string().min(1, "Token is required").optional(),
+})
+
+export const collectionTokensSchema = z.object({
+    default: z.string().optional(),
+    tokens: z.array(tokenSchema).optional()
+})
+
+export const userUpdateSchema = z.object({
+    expiryStarts: z.string().optional(),
+    expiryEnds: z.string().optional(),
+
+    isConfirmed: z.boolean().optional(),
+    isNotificationSend: z.boolean().optional(),
+
+    tag: z.string().optional(),
+    email: z.string().email().optional(),
+    phone: z.string().min(5).optional(),
+    person: z.string().optional(),
+
+    collectionTokens: collectionTokensSchema,
+})
+
+export type UserUpdate = z.infer<typeof userUpdateSchema>

frontend/app/dashboard/page.tsx

@@ -1,5 +1,6 @@
-import DashboardPage from "@/pages/dashboard/page";
+// import DashboardPage from "@/pages/dashboard/page";
 
-const PageDashboard = () => { return <DashboardPage /> };
+// const PageDashboard = () => { return <DashboardPage /> };
+const PageDashboard = () => { return <></> };
 
 export default PageDashboard;

frontend/app/layout.tsx

@@ -1,17 +1,14 @@
+import "./globals.css";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/sidebar/app-sidebar";
+import { SiteHeader } from "@/components/sidebar/site-header";
 import Providers from "./providers";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -22,7 +19,21 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Providers>{children}</Providers>
+        <Providers>
+          <SidebarProvider style={{ "--sidebar-width": "calc(var(--spacing) * 72)", "--header-height": "calc(var(--spacing) * 12)" } as React.CSSProperties}>
+            <AppSidebar variant="inset" />
+            <SidebarInset>
+              <SiteHeader />
+              <div className="flex flex-1 flex-col">
+                <div className="@container/main flex flex-1 flex-col gap-2">
+                  <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+                    {children}
+                  </div>
+                </div>
+              </div>
+            </SidebarInset>
+          </SidebarProvider>
+        </Providers>
       </body>
     </html>
   );

frontend/app/users/add/page.tsx

@@ -0,0 +1,5 @@
+import { PageAddUser } from "@/pages/users/add/page";
+
+const AddUserPage = () => { return <><PageAddUser /></> }
+
+export default AddUserPage;

frontend/app/users/update/page.tsx

@@ -0,0 +1,7 @@
+import { PageUpdateUser } from '@/pages/users/update/page';
+
+const UpdateUserPage = async () => {
+    return <PageUpdateUser />
+}
+
+export default UpdateUserPage;

frontend/components/dashboard/data-table.tsx

@@ -52,7 +52,6 @@ import {
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { toast } from "sonner"
 import { z } from "zod"
-
 import { useIsMobile } from "@/hooks/use-mobile"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"

frontend/components/dashboard/nav-documents.tsx

@@ -25,15 +25,7 @@ import {
     useSidebar,
 } from "@/components/ui/sidebar"
 
-export function NavDocuments({
-    items,
-}: {
-    items: {
-        name: string
-        url: string
-        icon: Icon
-    }[]
-}) {
+export function NavDocuments({ items }: { items: { name: string, url: string, icon: Icon }[] }) {
     const { isMobile } = useSidebar()
 
     return (

frontend/components/dashboard/nav-main.tsx

@@ -10,6 +10,8 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from "@/components/ui/sidebar"
+import Link from "next/link"
+import { usePathname } from 'next/navigation'
 
 export function NavMain({
     items,
@@ -20,37 +22,30 @@ export function NavMain({
         icon?: Icon
     }[]
 }) {
-    return (
-        <SidebarGroup>
-            <SidebarGroupContent className="flex flex-col gap-2">
-                <SidebarMenu>
-                    <SidebarMenuItem className="flex items-center gap-2">
-                        <SidebarMenuButton
-                            tooltip="Quick Create"
-                            className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
-                        >
-                            <IconCirclePlusFilled />
-                            <span>Quick Create</span>
-                        </SidebarMenuButton>
-                        <Button
-                            size="icon"
-                            className="size-8 group-data-[collapsible=icon]:opacity-0"
-                            variant="outline"
-                        >
-                            <IconMail />
-                            <span className="sr-only">Inbox</span>
-                        </Button>
-                    </SidebarMenuItem>
-                </SidebarMenu>
-                <SidebarMenu>
-                    {items.map((item) => (
-                        <SidebarMenuItem key={item.title}>
+    const pathname = usePathname()
+    const linkRenderActive = (item: { title: string; url: string; icon?: Icon }) =>
+        <Link key={`${item.title}-${item.url}`} href={item.url}>
+            <SidebarMenuItem>
                 <SidebarMenuButton tooltip={item.title}>
                     {item.icon && <item.icon />}
                     <span>{item.title}</span>
                 </SidebarMenuButton>
             </SidebarMenuItem>
-                    ))}
+        </Link>
+
+    const linkRenderDisabled = (item: { title: string; url: string; icon?: Icon }) =>
+        <SidebarMenuItem key={`${item.title}-${item.url}`} className="opacity-50 bg-gray-300 border-gray-300 border-2 rounded-2xl">
+            <SidebarMenuButton disabled tooltip={item.title}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+            </SidebarMenuButton>
+        </SidebarMenuItem>
+
+    return (
+        <SidebarGroup>
+            <SidebarGroupContent className="flex flex-col gap-2">
+                <SidebarMenu>
+                    {items.map((item) => pathname?.includes(item.url) ? linkRenderDisabled(item) : linkRenderActive(item))}
                 </SidebarMenu>
             </SidebarGroupContent>
         </SidebarGroup>

frontend/components/dashboard/site-header.tsx

@@ -19,8 +19,7 @@ export function SiteHeader() {
                             rel="noopener noreferrer"
                             target="_blank"
                             className="dark:text-foreground"
-                        >
-                            GitHub
+                        >GitHub
                         </a>
                     </Button>
                 </div>

frontend/components/sidebar/app-sidebar.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import * as React from "react"
+import {
+    IconCamera,
+    IconChartBar,
+    IconDashboard,
+    IconDatabase,
+    IconFileAi,
+    IconFileDescription,
+    IconFileWord,
+    IconFolder,
+    IconHelp,
+    IconInnerShadowTop,
+    IconListDetails,
+    IconReport,
+    IconSearch,
+    IconSettings,
+    IconUsers,
+    IconBuilding
+} from "@tabler/icons-react"
+
+import { NavMain } from "@/components/dashboard/nav-main"
+import { NavSecondary } from "@/components/dashboard/nav-secondary"
+import { NavUser } from "@/components/dashboard/nav-user"
+import { NavDocuments } from "@/components/dashboard/nav-documents"
+
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+const data = {
+    user: {
+        name: "shadcn",
+        email: "m@example.com",
+        avatar: "https://avatars.githubusercontent.com/u/124599?v=4",
+    },
+    navMain: [
+        {
+            title: "Users",
+            url: "/users",
+            icon: IconUsers,
+        },
+        {
+            title: "People",
+            url: "/people",
+            icon: IconListDetails,
+        },
+        {
+            title: "Build",
+            url: "/build",
+            icon: IconBuilding,
+        },
+        // {
+        //     title: "Projects",
+        //     url: "#",
+        //     icon: IconFolder,
+        // },
+        // {
+        //     title: "Team",
+        //     url: "#",
+        //     icon: IconUsers,
+        // },
+    ],
+    navClouds: [
+        {
+            title: "Capture",
+            icon: IconCamera,
+            isActive: true,
+            url: "#",
+            items: [
+                {
+                    title: "Active Proposals",
+                    url: "#",
+                },
+                {
+                    title: "Archived",
+                    url: "#",
+                },
+            ],
+        },
+        {
+            title: "Proposal",
+            icon: IconFileDescription,
+            url: "#",
+            items: [
+                {
+                    title: "Active Proposals",
+                    url: "#",
+                },
+                {
+                    title: "Archived",
+                    url: "#",
+                },
+            ],
+        },
+        {
+            title: "Prompts",
+            icon: IconFileAi,
+            url: "#",
+            items: [
+                {
+                    title: "Active Proposals",
+                    url: "#",
+                },
+                {
+                    title: "Archived",
+                    url: "#",
+                },
+            ],
+        },
+    ],
+    navSecondary: [
+        {
+            title: "Settings",
+            url: "#",
+            icon: IconSettings,
+        },
+        {
+            title: "Get Help",
+            url: "#",
+            icon: IconHelp,
+        },
+        {
+            title: "Search",
+            url: "#",
+            icon: IconSearch,
+        },
+    ],
+    documents: [
+        {
+            name: "Data Library",
+            url: "#",
+            icon: IconDatabase,
+        },
+        {
+            name: "Reports",
+            url: "#",
+            icon: IconReport,
+        },
+        {
+            name: "Word Assistant",
+            url: "#",
+            icon: IconFileWord,
+        },
+    ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+    return (
+        <Sidebar collapsible="offcanvas" {...props}>
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            asChild
+                            className="data-[slot=sidebar-menu-button]:p-1.5!"
+                        >
+                            <a href="#">
+                                <IconInnerShadowTop className="size-5!" />
+                                <span className="text-base font-semibold">Acme Inc.</span>
+                            </a>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+            <SidebarContent>
+                <NavMain items={data.navMain} />
+                <NavDocuments items={data.documents} />
+                <NavSecondary items={data.navSecondary} className="mt-auto" />
+            </SidebarContent>
+            <SidebarFooter>
+                <NavUser user={data.user} />
+            </SidebarFooter>
+        </Sidebar>
+    )
+}

frontend/components/sidebar/navs/nav-documents.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import {
+    IconDots,
+    IconFolder,
+    IconShare3,
+    IconTrash,
+    type Icon,
+} from "@tabler/icons-react"
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from "@/components/ui/sidebar"
+
+export function NavDocuments({
+    items,
+}: {
+    items: {
+        name: string
+        url: string
+        icon: Icon
+    }[]
+}) {
+    const { isMobile } = useSidebar()
+
+    return (
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Documents</SidebarGroupLabel>
+            <SidebarMenu>
+                {items.map((item) => (
+                    <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton asChild>
+                            <a href={item.url}>
+                                <item.icon />
+                                <span>{item.name}</span>
+                            </a>
+                        </SidebarMenuButton>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <SidebarMenuAction
+                                    showOnHover
+                                    className="data-[state=open]:bg-accent rounded-sm"
+                                >
+                                    <IconDots />
+                                    <span className="sr-only">More</span>
+                                </SidebarMenuAction>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="w-24 rounded-lg"
+                                side={isMobile ? "bottom" : "right"}
+                                align={isMobile ? "end" : "start"}
+                            >
+                                <DropdownMenuItem>
+                                    <IconFolder />
+                                    <span>Open</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <IconShare3 />
+                                    <span>Share</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem variant="destructive">
+                                    <IconTrash />
+                                    <span>Delete</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                    <SidebarMenuButton className="text-sidebar-foreground/70">
+                        <IconDots className="text-sidebar-foreground/70" />
+                        <span>More</span>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        </SidebarGroup>
+    )
+}

frontend/components/sidebar/navs/nav-main.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"
+
+import { Button } from "@/components/ui/button"
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavMain({
+    items,
+}: {
+    items: {
+        title: string
+        url: string
+        icon?: Icon
+    }[]
+}) {
+    return (
+        <SidebarGroup>
+            <SidebarGroupContent className="flex flex-col gap-2">
+                <SidebarMenu>
+                    <SidebarMenuItem className="flex items-center gap-2">
+                        <SidebarMenuButton
+                            tooltip="Quick Create"
+                            className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+                        >
+                            <IconCirclePlusFilled />
+                            <span>Quick Create</span>
+                        </SidebarMenuButton>
+                        <Button
+                            size="icon"
+                            className="size-8 group-data-[collapsible=icon]:opacity-0"
+                            variant="outline"
+                        >
+                            <IconMail />
+                            <span className="sr-only">Inbox</span>
+                        </Button>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton tooltip={item.title}>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    )
+}

frontend/components/sidebar/navs/nav-secondary.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { type Icon } from "@tabler/icons-react"
+
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavSecondary({
+    items,
+    ...props
+}: {
+    items: {
+        title: string
+        url: string
+        icon: Icon
+    }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+    return (
+        <SidebarGroup {...props}>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton asChild>
+                                <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    )
+}

frontend/components/sidebar/navs/nav-user.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import {
+    IconCreditCard,
+    IconDotsVertical,
+    IconLogout,
+    IconNotification,
+    IconUserCircle,
+} from "@tabler/icons-react"
+
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from "@/components/ui/sidebar"
+
+export function NavUser({
+    user,
+}: {
+    user: {
+        name: string
+        email: string
+        avatar: string
+    }
+}) {
+    const { isMobile } = useSidebar()
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                        >
+                            <Avatar className="h-8 w-8 rounded-lg grayscale">
+                                <AvatarImage src={user.avatar} alt={user.name} />
+                                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                            </Avatar>
+                            <div className="grid flex-1 text-left text-sm leading-tight">
+                                <span className="truncate font-medium">{user.name}</span>
+                                <span className="text-muted-foreground truncate text-xs">
+                                    {user.email}
+                                </span>
+                            </div>
+                            <IconDotsVertical className="ml-auto size-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        side={isMobile ? "bottom" : "right"}
+                        align="end"
+                        sideOffset={4}
+                    >
+                        <DropdownMenuLabel className="p-0 font-normal">
+                            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage src={user.avatar} alt={user.name} />
+                                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                                </Avatar>
+                                <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-medium">{user.name}</span>
+                                    <span className="text-muted-foreground truncate text-xs">
+                                        {user.email}
+                                    </span>
+                                </div>
+                            </div>
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem>
+                                <IconUserCircle />
+                                Account
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                <IconCreditCard />
+                                Billing
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                <IconNotification />
+                                Notifications
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                            <IconLogout />
+                            Log out
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    )
+}

frontend/components/sidebar/site-header.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+
+export function SiteHeader() {
+    return (
+        <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+            <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+                <SidebarTrigger className="-ml-1" />
+                <Separator
+                    orientation="vertical"
+                    className="mx-2 data-[orientation=vertical]:h-4"
+                />
+                <h1 className="text-base font-medium">Documents</h1>
+                <div className="ml-auto flex items-center gap-2">
+                    <Button variant="ghost" asChild size="sm" className="hidden sm:flex">
+                        <a
+                            href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            className="dark:text-foreground"
+                        >GitHub
+                        </a>
+                    </Button>
+                </div>
+            </div>
+        </header>
+    )
+}

frontend/components/ui/calendar.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

frontend/components/ui/chart.tsx

@@ -173,7 +173,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >

frontend/components/ui/date-time-picker.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import * as React from "react";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+
+interface Props {
+    value?: string; // "dd/mm/yyyy hh:mm:ss"
+    onChange?: (value: string) => void;
+    className?: string;
+}
+
+export function DateTimePicker({ value, onChange, className }: Props) {
+    // --- store each part as string ---
+    const [local, setLocal] = React.useState({
+        d: "",
+        m: "",
+        y: "",
+        h: "",
+        min: "",
+        s: "",
+    });
+    const [open, setOpen] = React.useState(false);
+
+    // --- parse incoming value string ---
+    React.useEffect(() => {
+        if (!value) return;
+        const dt = dateGetter(value);
+        if (!dt) return;
+        setLocal({
+            d: String(dt.getDate()),
+            m: String(dt.getMonth() + 1),
+            y: String(dt.getFullYear()),
+            h: String(dt.getHours()),
+            min: String(dt.getMinutes()),
+            s: String(dt.getSeconds()),
+        });
+    }, [value]);
+
+    // --- emit combined string ---
+    const emitChange = React.useCallback(() => {
+        const dt = new Date(
+            Number(local.y) || 0,
+            Number(local.m) - 1 || 0,
+            Number(local.d) || 1,
+            Number(local.h) || 0,
+            Number(local.min) || 0,
+            Number(local.s) || 0
+        );
+        if (!isNaN(dt.getTime())) {
+            onChange?.(dateSetter(dt));
+        }
+    }, [local, onChange]);
+
+    const handleInput = (field: keyof typeof local, val: string) => {
+        if (/^\d*$/.test(val)) {
+            setLocal((prev) => ({ ...prev, [field]: val }));
+        }
+    };
+
+    const handleBlur = (field: keyof typeof local) => {
+        // Validate ranges
+        let val = Number(local[field]);
+        if (isNaN(val)) val = 0;
+
+        switch (field) {
+            case "d":
+                val = Math.max(1, Math.min(31, val));
+                break;
+            case "m":
+                val = Math.max(1, Math.min(12, val));
+                break;
+            case "y":
+                val = Math.max(1900, Math.min(2100, val));
+                break;
+            case "h":
+                val = Math.max(0, Math.min(23, val));
+                break;
+            case "min":
+            case "s":
+                val = Math.max(0, Math.min(59, val));
+                break;
+        }
+
+        setLocal((prev) => ({ ...prev, [field]: String(val) }));
+        emitChange();
+    };
+
+    const currentDate = dateGetter(dateSetter(new Date(
+        Number(local.y) || 0,
+        Number(local.m) - 1 || 0,
+        Number(local.d) || 1,
+        Number(local.h) || 0,
+        Number(local.min) || 0,
+        Number(local.s) || 0
+    )));
+
+    const handleCalendarSelect = (d: Date | undefined) => {
+        if (!d) return;
+        const updated = new Date(
+            d.getFullYear(),
+            d.getMonth(),
+            d.getDate(),
+            Number(local.h) || 0,
+            Number(local.min) || 0,
+            Number(local.s) || 0
+        );
+        const str = dateSetter(updated);
+        setLocal({
+            d: String(updated.getDate()),
+            m: String(updated.getMonth() + 1),
+            y: String(updated.getFullYear()),
+            h: String(updated.getHours()),
+            min: String(updated.getMinutes()),
+            s: String(updated.getSeconds()),
+        });
+        onChange?.(str);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" className={cn("w-full justify-start", className)}>
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {value || "Select date and time"}
+                </Button>
+            </PopoverTrigger>
+
+            <PopoverContent className="w-auto p-4 space-y-3" align="start">
+                {/* Calendar */}
+                <Calendar mode="single" selected={currentDate ?? undefined} onSelect={handleCalendarSelect} />
+
+                {/* Inputs */}
+                <div className="grid grid-cols-3 gap-2">
+                    <Input
+                        className="w-18"
+                        min={1}
+                        max={31}
+                        placeholder="DD"
+                        value={local.d}
+                        onChange={(e) => handleInput("d", e.target.value)}
+                        onBlur={() => handleBlur("d")}
+                    />
+                    <Input
+                        className="w-18"
+                        min={1}
+                        max={12}
+                        placeholder="MM"
+                        value={local.m}
+                        onChange={(e) => handleInput("m", e.target.value)}
+                        onBlur={() => handleBlur("m")}
+                    />
+                    <Input
+                        className="w-18"
+                        min={1900}
+                        max={2100}
+                        placeholder="YYYY"
+                        value={local.y}
+                        onChange={(e) => handleInput("y", e.target.value)}
+                        onBlur={() => handleBlur("y")}
+                    />
+                </div>
+
+                <div className="grid grid-cols-3 gap-2 mt-2">
+                    <Input
+                        className="w-18"
+                        min={0}
+                        max={23}
+                        placeholder="HH"
+                        value={local.h}
+                        onChange={(e) => handleInput("h", e.target.value)}
+                        onBlur={() => handleBlur("h")}
+                    />
+                    <Input
+                        className="w-18"
+                        min={0}
+                        max={59}
+                        placeholder="MM"
+                        value={local.min}
+                        onChange={(e) => handleInput("min", e.target.value)}
+                        onBlur={() => handleBlur("min")}
+                    />
+                    <Input
+                        className="w-18"
+                        min={0}
+                        max={59}
+                        placeholder="SS"
+                        value={local.s}
+                        onChange={(e) => handleInput("s", e.target.value)}
+                        onBlur={() => handleBlur("s")}
+                    />
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}
+
+// --- helpers for external usage ---
+export const dateGetter = (str: string | undefined): Date | null => {
+    if (!str) return null;
+    const [d, m, yAndTime] = str.split("/");
+    if (!d || !m || !yAndTime) return null;
+    const [y, time] = yAndTime.split(" ");
+    if (!time) return null;
+    const [h, min, s] = time.split(":").map(Number);
+    return new Date(Number(y), Number(m) - 1, Number(d), h || 0, min || 0, s || 0);
+};
+
+export const dateSetter = (date: Date | null): string => {
+    if (!date) return "";
+    const fmt = (n: number) => String(n).padStart(2, "0");
+    return `${fmt(date.getDate())}/${fmt(date.getMonth() + 1)}/${date.getFullYear()} ${fmt(
+        date.getHours()
+    )}:${fmt(date.getMinutes())}:${fmt(date.getSeconds())}`;
+};

frontend/components/ui/dropdown-menu.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
           className
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "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 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
         className
       )}
       {...props}

frontend/components/ui/form.tsx

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

frontend/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

frontend/components/ui/select.tsx

@@ -37,7 +37,7 @@ function SelectTrigger({
       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",
+        "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}
@@ -62,7 +62,7 @@ function SelectContent({
       <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",
+          "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 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
@@ -76,7 +76,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
           )}
         >
           {children}
@@ -109,7 +109,7 @@ function SelectItem({
     <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",
+        "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}

frontend/components/ui/table.tsx

@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap *:[role=checkbox]:pr-0 *:[role=checkbox]:translate-y-[2px]",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle whitespace-nowrap *:[role=checkbox]:pr-0 *:[role=checkbox]:translate-y-[2px]",
         className
       )}
       {...props}

frontend/components/ui/tooltip.tsx

@@ -52,7 +52,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

frontend/lib/utils.ts

@@ -4,3 +4,9 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function dateToLocaleString(date: string) {
+  return new Date(date).toLocaleString("en-US",
+    { timeZone: "Europe/Istanbul", hour12: false, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }
+  );
+}

frontend/package-lock.json

@@ -11,11 +11,13 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
+        "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
@@ -28,6 +30,7 @@
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "graphql-request": "^7.3.3",
         "graphql-type-json": "^0.3.2",
         "lucide-react": "^0.553.0",
@@ -35,7 +38,9 @@
         "next-auth": "^4.24.7",
         "next-themes": "^0.4.6",
         "react": "19.2.0",
+        "react-day-picker": "^9.11.1",
         "react-dom": "19.2.0",
+        "react-hook-form": "^7.66.0",
         "recharts": "^2.15.4",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
@@ -317,6 +322,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@dnd-kit/accessibility": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
@@ -386,9 +397,9 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz",
-      "integrity": "sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz",
+      "integrity": "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -398,9 +409,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.0.tgz",
-      "integrity": "sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
+      "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -609,6 +620,18 @@
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1494,21 +1517,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-context": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
-      "integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
@@ -1539,6 +1547,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -1606,6 +1629,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -1663,9 +1701,9 @@
       }
     },
     "node_modules/@radix-ui/react-context": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
+      "integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
@@ -1713,6 +1751,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -1866,6 +1919,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2069,6 +2137,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2110,6 +2193,99 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -2142,6 +2318,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2326,6 +2517,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2410,6 +2616,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2522,6 +2743,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2617,6 +2853,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -2733,6 +2984,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
@@ -3005,6 +3271,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -3312,9 +3584,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.90.8",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.8.tgz",
-      "integrity": "sha512-4E0RP/0GJCxSNiRF2kAqE/LQkTJVlL/QNU7gIJSptaseV9HP6kOuA+N11y4bZKZxa3QopK3ZuewwutHx6DqDXQ==",
+      "version": "5.90.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.9.tgz",
+      "integrity": "sha512-UFOCQzi6pRGeVTVlPNwNdnAvT35zugcIydqjvFUzG62dvz2iVjElmNp/hJkUoM5eqbUPfSU/GJIr/wbvD8bTUw==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3322,12 +3594,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.90.8",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.8.tgz",
-      "integrity": "sha512-/3b9QGzkf4rE5/miL6tyhldQRlLXzMHcySOm/2Tm2OLEFE9P1ImkH0+OviDBSvyAvtAOJocar5xhd7vxdLi3aQ==",
+      "version": "5.90.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.9.tgz",
+      "integrity": "sha512-Zke2AaXiaSfnG8jqPZR52m8SsclKT2d9//AgE/QIzyNvbpj/Q2ln+FsZjb1j69bJZUouBvX2tg9PHirkTm8arw==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.90.8"
+        "@tanstack/query-core": "5.90.9"
       },
       "funding": {
         "type": "github",
@@ -3476,9 +3748,9 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
-      "integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-keKxkZMqnDicuvFoJbzrhbtdLSPhj/rZThDlKWCDbgXmUg0rEUFtRssDXKYmtXluZlIqiC5VqkCgRwzuyLHKHw==",
       "devOptional": true,
       "license": "MIT",
       "peer": true,
@@ -4375,9 +4647,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.27",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.27.tgz",
-      "integrity": "sha512-2CXFpkjVnY2FT+B6GrSYxzYf65BJWEqz5tIRHCvNsZZ2F3CmsCB37h8SpYgKG7y9C4YAeTipIPWG7EmFmhAeXA==",
+      "version": "2.8.28",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.28.tgz",
+      "integrity": "sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -4504,9 +4776,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001754",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
-      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
+      "version": "1.0.30001755",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001755.tgz",
+      "integrity": "sha512-44V+Jm6ctPj7R52Na4TLi3Zri4dWUljJd+RDm+j8LtNCc/ihLCT+X1TzoOAkRETEWqjuLnh9581Tl80FvK7jVA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4626,9 +4898,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.1.tgz",
+      "integrity": "sha512-98XGutrXoh75MlgLihlNxAGbUuFQc7l1cqcnEZlLNKc0UrVdPndgmaDmYTDDh929VS/eqTZV0rozmhu2qqT1/g==",
       "license": "MIT"
     },
     "node_modules/d3-array": {
@@ -4813,6 +5085,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -4935,9 +5223,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.250",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz",
-      "integrity": "sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw==",
+      "version": "1.5.254",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.254.tgz",
+      "integrity": "sha512-DcUsWpVhv9svsKRxnSCZ86SjD+sp32SGidNB37KpqXJncp1mfUgKbHvBomE89WJDbfVKw1mdv5+ikrvd43r+Bg==",
       "dev": true,
       "license": "ISC"
     },
@@ -5354,7 +5642,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -6614,6 +6901,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jose": {
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7260,36 +7556,6 @@
         }
       }
     },
-    "node_modules/next-auth/node_modules/jose": {
-      "version": "4.15.9",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
-      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
-    "node_modules/next-auth/node_modules/preact-render-to-string": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
-      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
-      "license": "MIT",
-      "dependencies": {
-        "pretty-format": "^3.8.0"
-      },
-      "peerDependencies": {
-        "preact": ">=10"
-      }
-    },
-    "node_modules/next-auth/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
@@ -7496,15 +7762,6 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
-    "node_modules/openid-client/node_modules/jose": {
-      "version": "4.15.9",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
-      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
     "node_modules/openid-client/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -7690,9 +7947,9 @@
       }
     },
     "node_modules/preact": {
-      "version": "10.24.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
-      "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
+      "version": "10.27.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.27.2.tgz",
+      "integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==",
       "license": "MIT",
       "peer": true,
       "funding": {
@@ -7700,6 +7957,18 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/preact-render-to-string": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "license": "MIT",
+      "dependencies": {
+        "pretty-format": "^3.8.0"
+      },
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7768,6 +8037,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.1.tgz",
+      "integrity": "sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
@@ -7781,6 +8071,23 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.66.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
+      "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8985,6 +9292,15 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vaul": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",

frontend/package.json

@@ -12,11 +12,13 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
@@ -29,6 +31,7 @@
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "graphql-request": "^7.3.3",
     "graphql-type-json": "^0.3.2",
     "lucide-react": "^0.553.0",
@@ -36,7 +39,9 @@
     "next-auth": "^4.24.7",
     "next-themes": "^0.4.6",
     "react": "19.2.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "19.2.0",
+    "react-hook-form": "^7.66.0",
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",

frontend/pages/dashboard/page.tsx

@@ -26,10 +26,10 @@ export default function DashboardPage() {
                 <div className="flex flex-1 flex-col">
                     <div className="@container/main flex flex-1 flex-col gap-2">
                         <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-                            <SectionCards />
+                            {/* <SectionCards />
                             <div className="px-4 lg:px-6">
                                 <ChartAreaInteractive />
-                            </div>
+                            </div> */}
                             <DataTable data={data} />
                         </div>
                     </div>

frontend/pages/users/add/form.tsx

@@ -0,0 +1,289 @@
+"use client"
+import { useFieldArray, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { userAddSchema, type UserAdd } from "./schema"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Separator } from "@/components/ui/separator"
+import { useAddUserMutation } from "./queries"
+import { DateTimePicker } from "@/components/ui/date-time-picker"
+
+const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
+    const form = useForm<UserAdd>({
+        resolver: zodResolver(userAddSchema),
+        defaultValues: {
+            expiryStarts: "",
+            expiryEnds: "",
+            isConfirmed: false,
+            isNotificationSend: false,
+            password: "",
+            rePassword: "",
+            tag: "",
+            email: "",
+            phone: "",
+            collectionTokens: {
+                default: "",
+                tokens: [],
+            },
+        },
+    })
+
+    const { control, handleSubmit } = form
+
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "collectionTokens.tokens",
+    })
+
+    const mutation = useAddUserMutation();
+
+    function onSubmit(values: UserAdd) {
+        mutation.mutate(values as any);
+        setTimeout(() => refetchTable(), 200);
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="space-y-6 p-4"
+            >
+                {/* BASIC INFO */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                        control={form.control}
+                        name="email"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Email</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="user@example.com" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="phone"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Phone</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="+901234567" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* PASSWORD / TAG */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                        control={form.control}
+                        name="password"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Password</FormLabel>
+                                <FormControl>
+                                    <Input type="password" placeholder="•••••••" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="rePassword"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Re-Password</FormLabel>
+                                <FormControl>
+                                    <Input type="password" placeholder="•••••••" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="tag"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Tag</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="User tag..." {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* DATES */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                    <FormField
+                        control={form.control}
+                        name="expiryStarts"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Expiry Starts</FormLabel>
+                                <FormControl>
+                                    <DateTimePicker {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="expiryEnds"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Expiry Ends</FormLabel>
+                                <FormControl>
+                                    <DateTimePicker {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* SWITCHES */}
+                <div className="flex items-center gap-6">
+                    <FormField
+                        control={form.control}
+                        name="isConfirmed"
+                        render={({ field }) => (
+                            <FormItem className="flex items-center gap-2">
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                    />
+                                </FormControl>
+                                <FormLabel className="mt-0!">Confirmed</FormLabel>
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="isNotificationSend"
+                        render={({ field }) => (
+                            <FormItem className="flex items-center gap-2">
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                    />
+                                </FormControl>
+                                <FormLabel className="mt-0!">Send Notification</FormLabel>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                <Separator />
+
+                {/* COLLECTION TOKENS */}
+                <FormField
+                    control={form.control}
+                    name="collectionTokens.default"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Default Token</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Default token..." {...field} />
+                            </FormControl>
+                        </FormItem>
+                    )}
+                />
+
+                <div className="space-y-3">
+                    <div className="flex justify-between items-center">
+                        <FormLabel>Tokens</FormLabel>
+
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => append({ prefix: "", token: "" })}
+                        >
+                            + Add Token
+                        </Button>
+                    </div>
+
+                    {fields.length === 0 && (
+                        <p className="text-sm text-muted-foreground">No tokens added.</p>
+                    )}
+
+                    {fields.map((fieldItem, i) => (
+                        <div
+                            key={fieldItem.id}
+                            className="grid grid-cols-12 gap-2 items-end"
+                        >
+                            <div className="col-span-4">
+                                <FormField
+                                    control={form.control}
+                                    name={`collectionTokens.tokens.${i}.prefix`}
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Prefix</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder="prefix" {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+
+                            <div className="col-span-6">
+                                <FormField
+                                    control={form.control}
+                                    name={`collectionTokens.tokens.${i}.token`}
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Token</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder="token" {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+
+                            <Button
+                                type="button"
+                                variant="destructive"
+                                size="icon"
+                                className="col-span-2 h-10"
+                                onClick={() => remove(i)}
+                            >
+                                ✕
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+
+                <Separator />
+
+                <Button type="submit" className="w-full">
+                    Create User
+                </Button>
+            </form>
+        </Form>
+    )
+}
+
+export { UserForm }

frontend/pages/users/add/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { useState } from 'react';
+import { useGraphQlUsersList } from '@/pages/users/queries';
+import { UserDataTableAdd } from '@/pages/users/add/table/data-table';
+import { UserForm } from '@/pages/users/add/form';
+
+const PageAddUser = () => {
+    const [page, setPage] = useState(1);
+    const [limit, setLimit] = useState(10);
+    const [sort, setSort] = useState({ createdAt: 'desc' });
+    const [filters, setFilters] = useState({});
+
+    const { data, isLoading, error, refetch } = useGraphQlUsersList({ limit, skip: (page - 1) * limit, sort, filters });
+
+    return (
+        <>
+            <UserDataTableAdd
+                data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
+                onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
+            />
+            <UserForm refetchTable={refetch} />
+        </>
+    )
+}
+
+export { PageAddUser };

frontend/pages/users/add/queries.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { useMutation } from '@tanstack/react-query'
+import { UserAdd } from './types'
+
+const fetchGraphQlUsersAdd = async (record: UserAdd): Promise<{ data: UserAdd | null; status: number }> => {
+    console.log('Fetching test data from local API');
+    try {
+        const res = await fetch('/api/users/add', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(record) });
+        if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
+        const data = await res.json();
+        return { data: data.data, status: res.status }
+    } catch (error) { console.error('Error fetching test data:', error); throw error }
+};
+
+export function useAddUserMutation() {
+    return useMutation({
+        mutationFn: (data: UserAdd) => fetchGraphQlUsersAdd(data),
+        onSuccess: () => { console.log("User created successfully") },
+        onError: (error) => { console.error("Create user failed:", error) },
+    })
+}

frontend/pages/users/add/schema.ts

@@ -0,0 +1,29 @@
+import { z } from "zod"
+
+export const tokenSchema = z.object({
+    prefix: z.string().min(1, "Prefix is required"),
+    token: z.string().min(1, "Token is required"),
+})
+
+export const collectionTokensSchema = z.object({
+    default: z.string().optional(),
+    tokens: z.array(tokenSchema)
+})
+
+export const userAddSchema = z.object({
+    expiryStarts: z.string().optional(),
+    expiryEnds: z.string().optional(),
+
+    isConfirmed: z.boolean(),
+    isNotificationSend: z.boolean(),
+
+    password: z.string().min(6),
+    rePassword: z.string().min(6),
+    tag: z.string().optional(),
+    email: z.string().email(),
+    phone: z.string().min(5),
+
+    collectionTokens: collectionTokensSchema,
+})
+
+export type UserAdd = z.infer<typeof userAddSchema>

frontend/pages/users/add/table/columns.tsx

@@ -0,0 +1,267 @@
+"use client"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTrigger } from "@/components/ui/drawer"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useSortable } from "@dnd-kit/sortable"
+import { IconGripVertical } from "@tabler/icons-react"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Separator } from "@/components/ui/separator"
+import { ColumnDef, flexRender, Row } from "@tanstack/react-table"
+import { TableCell, TableRow } from "@/components/ui/table"
+import { CSS } from "@dnd-kit/utilities"
+import { schema, schemaType } from "./schema"
+import { dateToLocaleString } from "@/lib/utils"
+import { Pencil, Trash } from "lucide-react"
+
+function TableCellViewer({ item }: { item: schemaType }) {
+    const isMobile = useIsMobile();
+
+    return (
+        <Drawer direction={isMobile ? "bottom" : "right"}>
+            <DrawerTrigger asChild>
+                <Button variant="link" className="text-foreground w-fit px-0 text-left">
+                    {item.email ?? "Unknown Email"}
+                </Button>
+            </DrawerTrigger>
+
+            <DrawerContent>
+                <DrawerHeader className="gap-1">
+                    <h2 className="text-lg font-semibold">{item.email}</h2>
+                    <p className="text-sm text-muted-foreground">
+                        User details
+                    </p>
+                </DrawerHeader>
+
+                <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+
+                    {/* BASIC INFO */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <Label>Email</Label>
+                            <Input value={item.email ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Phone</Label>
+                            <Input value={item.phone ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Tag</Label>
+                            <Input value={item.tag ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Active</Label>
+                            <Input value={item.active ? "Active" : "Inactive"} readOnly />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* DATES */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <Label>Created At</Label>
+                            <Input
+                                value={item.createdAt ? new Date(item.createdAt).toLocaleString() : ""}
+                                readOnly
+                            />
+                        </div>
+
+                        <div>
+                            <Label>Updated At</Label>
+                            <Input
+                                value={item.updatedAt ? new Date(item.updatedAt).toLocaleString() : ""}
+                                readOnly
+                            />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* TOKENS */}
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" className="w-full">
+                                Collection Tokens ({item.collectionTokens?.tokens?.length ?? 0})
+                            </Button>
+                        </DropdownMenuTrigger>
+
+                        <DropdownMenuContent className="w-72">
+                            <DropdownMenuLabel>Tokens</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {(item.collectionTokens?.tokens ?? []).length === 0 && (<DropdownMenuItem disabled>No tokens found</DropdownMenuItem>)}
+                            {(item.collectionTokens?.tokens ?? []).map((t, i) => (
+                                <DropdownMenuItem key={i} className="flex flex-col gap-2">
+                                    <div className="grid grid-cols-2 gap-2 w-full">
+                                        <Input value={t.prefix} readOnly />
+                                        <Input value={t.token} readOnly />
+                                    </div>
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                </div>
+
+                <DrawerFooter>
+                    <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                    </DrawerClose>
+                </DrawerFooter>
+            </DrawerContent>
+        </Drawer>
+    );
+}
+
+function DragHandle({ id }: { id: number }) {
+    const { attributes, listeners } = useSortable({ id })
+    return (
+        <Button {...attributes} {...listeners} variant="ghost" size="icon" className="text-muted-foreground size-7 hover:bg-transparent">
+            <IconGripVertical className="text-muted-foreground size-3" />
+            <span className="sr-only">Drag to reorder</span>
+        </Button>
+    )
+}
+
+export function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+    const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original._id })
+    return (
+        <TableRow data-state={row.getIsSelected() && "selected"} data-dragging={isDragging} ref={setNodeRef}
+            className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+            style={{ transform: CSS.Transform.toString(transform), transition: transition }}
+        >
+            {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+            ))}
+        </TableRow>
+    )
+}
+
+function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef<schemaType>[] {
+    return [
+        {
+            accessorKey: "uuid",
+            header: "UUID",
+            cell: ({ getValue }) => (<div className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">{String(getValue())}</div>),
+        },
+        {
+            accessorKey: "email",
+            header: "Email",
+        },
+        {
+            accessorKey: "phone",
+            header: "Phone",
+        },
+        {
+            accessorKey: "tag",
+            header: "Tag",
+        },
+        {
+            accessorKey: "active",
+            header: "Active",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "isConfirmed",
+            header: "Confirmed",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "createdAt",
+            header: "Created",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
+        },
+        {
+            accessorKey: "updatedAt",
+            header: "Updated",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
+        },
+        {
+            accessorKey: "expiryStarts",
+            header: "Expiry Starts",
+            cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
+        },
+        {
+            accessorKey: "expiryEnds",
+            header: "Expiry Ends",
+            cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
+        },
+        {
+            accessorKey: "crypUuId",
+            header: "Encrypted UUID",
+        },
+        {
+            accessorKey: "history",
+            header: "History",
+            cell: ({ getValue }) => (<div className="truncate max-w-[150px] text-xs text-muted-foreground">{String(getValue() ?? "")}</div>),
+        },
+        {
+            accessorKey: "collectionTokens.tokens",
+            header: "Tokens",
+            cell: ({ row }) => {
+                const tokens = row.original.collectionTokens?.tokens ?? [];
+                const defaultToken = row.original.collectionTokens?.default;
+                if (!tokens.length) return "-";
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" className="h-8 px-2 text-xs">
+                                Tokens ({tokens.length})
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-72">
+                            <DropdownMenuLabel>Collection Tokens</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {defaultToken && (
+                                <>
+                                    <DropdownMenuItem>
+                                        <div className="flex flex-col w-full">
+                                            <span className="font-semibold">Default</span>
+                                            <span className="font-mono text-xs text-muted-foreground break-all">
+                                                {defaultToken}
+                                            </span>
+                                        </div>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                </>
+                            )}
+                            {tokens.map((t, i) => (
+                                <DropdownMenuItem key={i} className="flex flex-col items-start">
+                                    <div className="w-full flex justify-between">
+                                        <span className="font-medium">{t.prefix}</span>
+                                        <span className="font-mono text-muted-foreground break-all">
+                                            {t.token}
+                                        </span>
+                                    </div>
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            },
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                return (
+                    <div>
+                        <Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/users/update/${row.original.uuid}`) }}>
+                            <Pencil />
+                        </Button>
+                        <Button className="bg-red-700 text-white border-red-700 mx-4" variant="outline" size="sm" onClick={() => { deleteHandler(row.original.uuid || "") }}>
+                            <Trash />
+                        </Button>
+                    </div>
+                );
+            },
+        }
+    ]
+}
+
+export { getColumns };

frontend/pages/users/add/table/data-table.tsx

@@ -0,0 +1,287 @@
+"use client"
+
+import * as React from "react"
+import {
+    closestCenter,
+    DndContext,
+    KeyboardSensor,
+    MouseSensor,
+    TouchSensor,
+    useSensor,
+    useSensors,
+    type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import {
+    IconChevronDown,
+    IconChevronLeft,
+    IconChevronRight,
+    IconChevronsLeft,
+    IconChevronsRight,
+    IconLayoutColumns,
+} from "@tabler/icons-react"
+import {
+    ColumnFiltersState,
+    flexRender,
+    getCoreRowModel,
+    getFacetedRowModel,
+    getFacetedUniqueValues,
+    getFilteredRowModel,
+    getSortedRowModel,
+    SortingState,
+    useReactTable,
+    VisibilityState,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Label } from "@/components/ui/label"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@/components/ui/tabs"
+import { schemaType } from "./schema"
+import { getColumns, DraggableRow } from "./columns"
+import { useRouter } from "next/navigation"
+import { Home } from "lucide-react"
+import { useDeleteUserMutation } from "@/pages/users/queries"
+
+export function UserDataTableAdd({
+    data,
+    totalCount,
+    currentPage,
+    pageSize,
+    onPageChange,
+    onPageSizeChange,
+    refetchTable,
+}: {
+    data: schemaType[],
+    totalCount: number,
+    currentPage: number,
+    pageSize: number,
+    onPageChange: (page: number) => void,
+    onPageSizeChange: (size: number) => void,
+    refetchTable: () => void
+}) {
+
+    const router = useRouter();
+    const [rowSelection, setRowSelection] = React.useState({})
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+    const [sorting, setSorting] = React.useState<SortingState>([])
+    const sortableId = React.useId()
+    const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}))
+    const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
+
+    const deleteMutation = useDeleteUserMutation()
+    const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 200) }
+    const columns = getColumns(router, deleteHandler);
+    const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize, }), [currentPage, pageSize])
+    const totalPages = Math.ceil(totalCount / pageSize)
+
+    const table = useReactTable({
+        data,
+        columns,
+        pageCount: totalPages,
+        state: { sorting, columnVisibility, rowSelection, columnFilters, pagination },
+        manualPagination: true,
+        enableRowSelection: true,
+        getRowId: (row) => row._id.toString(),
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onPaginationChange: (updater) => {
+            const nextPagination = typeof updater === "function" ? updater(pagination) : updater;
+            onPageChange(nextPagination.pageIndex + 1);
+            onPageSizeChange(nextPagination.pageSize);
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    })
+
+    const handlePageSizeChange = (value: string) => {
+        const newSize = Number(value);
+        onPageSizeChange(newSize);
+        onPageChange(1);
+    }
+
+    return (
+        <Tabs
+            defaultValue="outline"
+            className="w-full flex-col justify-start gap-6"
+        >
+            <div className="flex items-center justify-between px-4 lg:px-6">
+                <Label htmlFor="view-selector" className="sr-only">
+                    View
+                </Label>
+                <Select defaultValue="outline">
+                    <SelectTrigger className="flex w-fit @4xl/main:hidden" size="sm" id="view-selector">
+                        <SelectValue placeholder="Select a view" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="outline">Outline</SelectItem>
+                        <SelectItem value="past-performance">Past Performance</SelectItem>
+                        <SelectItem value="key-personnel">Key Personnel</SelectItem>
+                        <SelectItem value="focus-documents">Focus Documents</SelectItem>
+                    </SelectContent>
+                </Select>
+                <div className="flex items-center gap-2">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="sm">
+                                <IconLayoutColumns />
+                                <span className="hidden lg:inline">Customize Columns</span>
+                                <span className="lg:hidden">Columns</span>
+                                <IconChevronDown />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-56">
+                            {table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
+                                return (
+                                    <DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)} >
+                                        {column.id}
+                                    </DropdownMenuCheckboxItem>
+                                )
+                            })}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    <Button variant="outline" size="sm" onClick={() => { router.push("/users") }}>
+                        <Home />
+                        <span className="hidden lg:inline">Back to Users</span>
+                    </Button>
+                </div>
+            </div>
+            <TabsContent value="outline"
+                className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+            >
+                <div className="overflow-hidden rounded-lg border">
+                    <DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} sensors={sensors} id={sortableId} >
+                        <Table>
+                            <TableHeader className="bg-muted sticky top-0 z-10">
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => {
+                                            return (
+                                                <TableHead key={header.id} colSpan={header.colSpan}>
+                                                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                                                </TableHead>
+                                            )
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                                {table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
+                                    {table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
+                                </SortableContext>) : (
+                                    <TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
+                                )}
+                            </TableBody>
+                        </Table>
+                    </DndContext>
+                </div>
+                <div className="flex items-center justify-between px-4">
+                    <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+                        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                        {table.getFilteredRowModel().rows.length} row(s) selected.
+                    </div>
+                    <div className="flex w-full items-center gap-8 lg:w-fit">
+                        <div className="hidden items-center gap-2 lg:flex">
+                            <Label htmlFor="rows-per-page" className="text-sm font-medium">Rows per page</Label>
+                            <Select value={`${pageSize}`} onValueChange={handlePageSizeChange}>
+                                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                                    <SelectValue placeholder={pageSize} />
+                                </SelectTrigger>
+                                <SelectContent side="top">
+                                    {[10, 20, 30].map((size) => <SelectItem key={size} value={`${size}`}>{size}</SelectItem>)}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="flex w-fit items-center justify-center text-sm font-medium">
+                            Page {currentPage} of {totalPages}
+                        </div>
+                        <div className="flex w-fit items-center justify-center text-sm font-medium">
+                            Total Count: {totalCount}
+                        </div>
+                        <div className="ml-auto flex items-center gap-2 lg:ml-0">
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(1)}
+                                disabled={currentPage === 1}
+                            >
+                                <IconChevronsLeft />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(currentPage - 1)}
+                                disabled={currentPage === 1}
+                            >
+                                <IconChevronLeft />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(currentPage + 1)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <IconChevronRight />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(totalPages)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <IconChevronsRight />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="past-performance" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+            <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+            <TabsContent value="focus-documents" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+        </Tabs>
+    )
+}

frontend/pages/users/add/table/schema.tsx

@@ -0,0 +1,47 @@
+import { z } from "zod";
+
+export const schema = z.object({
+    _id: z.string(),
+    uuid: z.string().nullable().optional(),
+    expiryStarts: z.string().nullable().optional(),
+    expiryEnds: z.string().nullable().optional(),
+    isConfirmed: z.boolean().nullable().optional(),
+    deleted: z.boolean().nullable().optional(),
+    active: z.boolean().nullable().optional(),
+    crypUuId: z.string().nullable().optional(),
+    createdCredentialsToken: z.string().nullable().optional(),
+    updatedCredentialsToken: z.string().nullable().optional(),
+    confirmedCredentialsToken: z.string().nullable().optional(),
+    isNotificationSend: z.boolean().nullable().optional(),
+    isEmailSend: z.boolean().nullable().optional(),
+    refInt: z.number().nullable().optional(),
+    refId: z.string().nullable().optional(),
+    replicationId: z.number().nullable().optional(),
+    expiresAt: z.string().nullable().optional(),
+    resetToken: z.string().nullable().optional(),
+    password: z.string().nullable().optional(),
+    history: z.array(z.string()).optional(),
+    tag: z.string().nullable().optional(),
+    email: z.string().nullable().optional(),
+    phone: z.string().nullable().optional(),
+
+    collectionTokens: z
+        .object({
+            default: z.string().nullable().optional(),
+            tokens: z
+                .array(
+                    z.object({
+                        prefix: z.string(),
+                        token: z.string(),
+                    })
+                )
+                .optional(),
+        })
+        .nullable()
+        .optional(),
+
+    createdAt: z.string().nullable().optional(),
+    updatedAt: z.string().nullable().optional(),
+});
+
+export type schemaType = z.infer<typeof schema>;

frontend/pages/users/add/types.ts

@@ -0,0 +1,24 @@
+interface UserToken {
+    prefix: string;
+    token: string;
+}
+
+interface CollectionTokens {
+    default: string;
+    tokens: UserToken[];
+}
+
+interface UserAdd {
+    expiryStarts: string;
+    expiryEnds: string;
+    isConfirmed: boolean;
+    isNotificationSend: boolean;
+    password: string;
+    tag: string;
+    email: string;
+    phone: string;
+    collectionTokens: CollectionTokens;
+}
+
+
+export type { UserAdd };

frontend/pages/users/page.tsx

@@ -1,26 +1,32 @@
 'use client';
 import { useGraphQlUsersList } from './queries';
 import { useState } from 'react';
+import { UserDataTable } from '@/pages/users/table/data-table';
 
 const PageUsers = () => {
     const [page, setPage] = useState(1);
     const [limit, setLimit] = useState(10);
     const [sort, setSort] = useState({ createdAt: 'desc' });
     const [filters, setFilters] = useState({});
-    const { data, isLoading, error } = useGraphQlUsersList({ limit, skip: (page - 1) * limit, sort, filters });
+
+    const { data, isLoading, error, refetch } = useGraphQlUsersList({ limit, skip: (page - 1) * limit, sort, filters });
+
+    const handlePageChange = (newPage: number) => { setPage(newPage) };
+    const handlePageSizeChange = (newSize: number) => { setLimit(newSize); setPage(1) };
+    if (isLoading) { return <div className="flex items-center justify-center p-8">Loading...</div> }
+    if (error) { return <div className="flex items-center justify-center p-8 text-red-500">Error loading users</div> }
+
     return (
-        <div>
-            <h1>Users</h1>
-            {isLoading && <p>Loading...</p>}
-            {error && <p>Error: {error.message}</p>}
-            {data && <p>Total count: {data.totalCount}</p>}
-            <div>
-                {data && <p>Data: {JSON.stringify(data.data)}</p>}
-                <button onClick={() => setPage(page - 1)}>Previous</button>
-                <button onClick={() => setPage(page + 1)}>Next</button>
-            </div>
-        </div>
-    )
-}
+        <UserDataTable
+            data={data?.data || []}
+            totalCount={data?.totalCount || 0}
+            currentPage={page}
+            pageSize={limit}
+            onPageChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+            refetchTable={refetch}
+        />
+    );
+};
 
 export { PageUsers };

frontend/pages/users/queries.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useMutation } from '@tanstack/react-query'
 import { UsersListResponse } from './types'
 import { ListArguments } from '@/types/listRequest'
 
@@ -14,6 +14,26 @@ const fetchGraphQlUsersList = async (params: ListArguments): Promise<UsersListRe
     } catch (error) { console.error('Error fetching test data:', error); throw error }
 };
 
+const fetchGraphQlDeleteUser = async (uuid: string): Promise<boolean> => {
+    console.log('Fetching test data from local API');
+    try {
+        const res = await fetch(`/api/users/delete?uuid=${uuid}`, { method: 'GET', cache: 'no-store', credentials: "include" });
+        if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
+        const data = await res.json();
+        return data
+    } catch (error) { console.error('Error fetching test data:', error); throw error }
+};
+
 export function useGraphQlUsersList(params: ListArguments) {
     return useQuery({ queryKey: ['graphql-users-list', params], queryFn: () => fetchGraphQlUsersList(params) })
 }
+
+export function useDeleteUserMutation() {
+    return useMutation({
+        mutationFn: ({ uuid }: { uuid: string }) => fetchGraphQlDeleteUser(uuid),
+        onSuccess: () => { console.log("User deleted successfully") },
+        onError: (error) => { console.error("Delete user failed:", error) },
+    })
+}
+
+

frontend/pages/users/table/columns.tsx

@@ -0,0 +1,267 @@
+"use client"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTrigger } from "@/components/ui/drawer"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useSortable } from "@dnd-kit/sortable"
+import { IconGripVertical } from "@tabler/icons-react"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Separator } from "@/components/ui/separator"
+import { ColumnDef, flexRender, Row } from "@tanstack/react-table"
+import { TableCell, TableRow } from "@/components/ui/table"
+import { CSS } from "@dnd-kit/utilities"
+import { schema, schemaType } from "./schema"
+import { dateToLocaleString } from "@/lib/utils"
+import { Pencil, Trash } from "lucide-react"
+
+function TableCellViewer({ item }: { item: schemaType }) {
+    const isMobile = useIsMobile();
+
+    return (
+        <Drawer direction={isMobile ? "bottom" : "right"}>
+            <DrawerTrigger asChild>
+                <Button variant="link" className="text-foreground w-fit px-0 text-left">
+                    {item.email ?? "Unknown Email"}
+                </Button>
+            </DrawerTrigger>
+
+            <DrawerContent>
+                <DrawerHeader className="gap-1">
+                    <h2 className="text-lg font-semibold">{item.email}</h2>
+                    <p className="text-sm text-muted-foreground">
+                        User details
+                    </p>
+                </DrawerHeader>
+
+                <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+
+                    {/* BASIC INFO */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <Label>Email</Label>
+                            <Input value={item.email ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Phone</Label>
+                            <Input value={item.phone ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Tag</Label>
+                            <Input value={item.tag ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Active</Label>
+                            <Input value={item.active ? "Active" : "Inactive"} readOnly />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* DATES */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <Label>Created At</Label>
+                            <Input
+                                value={item.createdAt ? new Date(item.createdAt).toLocaleString() : ""}
+                                readOnly
+                            />
+                        </div>
+
+                        <div>
+                            <Label>Updated At</Label>
+                            <Input
+                                value={item.updatedAt ? new Date(item.updatedAt).toLocaleString() : ""}
+                                readOnly
+                            />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* TOKENS */}
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" className="w-full">
+                                Collection Tokens ({item.collectionTokens?.tokens?.length ?? 0})
+                            </Button>
+                        </DropdownMenuTrigger>
+
+                        <DropdownMenuContent className="w-72">
+                            <DropdownMenuLabel>Tokens</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {(item.collectionTokens?.tokens ?? []).length === 0 && (<DropdownMenuItem disabled>No tokens found</DropdownMenuItem>)}
+                            {(item.collectionTokens?.tokens ?? []).map((t, i) => (
+                                <DropdownMenuItem key={i} className="flex flex-col gap-2">
+                                    <div className="grid grid-cols-2 gap-2 w-full">
+                                        <Input value={t.prefix} readOnly />
+                                        <Input value={t.token} readOnly />
+                                    </div>
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                </div>
+
+                <DrawerFooter>
+                    <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                    </DrawerClose>
+                </DrawerFooter>
+            </DrawerContent>
+        </Drawer>
+    );
+}
+
+function DragHandle({ id }: { id: number }) {
+    const { attributes, listeners } = useSortable({ id })
+    return (
+        <Button {...attributes} {...listeners} variant="ghost" size="icon" className="text-muted-foreground size-7 hover:bg-transparent">
+            <IconGripVertical className="text-muted-foreground size-3" />
+            <span className="sr-only">Drag to reorder</span>
+        </Button>
+    )
+}
+
+export function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+    const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original._id })
+    return (
+        <TableRow data-state={row.getIsSelected() && "selected"} data-dragging={isDragging} ref={setNodeRef}
+            className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+            style={{ transform: CSS.Transform.toString(transform), transition: transition }}
+        >
+            {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+            ))}
+        </TableRow>
+    )
+}
+
+function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef<schemaType>[] {
+    return [
+        {
+            accessorKey: "uuid",
+            header: "UUID",
+            cell: ({ getValue }) => (<div className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">{String(getValue())}</div>),
+        },
+        {
+            accessorKey: "email",
+            header: "Email",
+        },
+        {
+            accessorKey: "phone",
+            header: "Phone",
+        },
+        {
+            accessorKey: "tag",
+            header: "Tag",
+        },
+        {
+            accessorKey: "active",
+            header: "Active",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "isConfirmed",
+            header: "Confirmed",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "createdAt",
+            header: "Created",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
+        },
+        {
+            accessorKey: "updatedAt",
+            header: "Updated",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
+        },
+        {
+            accessorKey: "expiryStarts",
+            header: "Expiry Starts",
+            cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
+        },
+        {
+            accessorKey: "expiryEnds",
+            header: "Expiry Ends",
+            cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
+        },
+        {
+            accessorKey: "crypUuId",
+            header: "Encrypted UUID",
+        },
+        {
+            accessorKey: "history",
+            header: "History",
+            cell: ({ getValue }) => (<div className="truncate max-w-[150px] text-xs text-muted-foreground">{String(getValue() ?? "")}</div>),
+        },
+        {
+            accessorKey: "collectionTokens.tokens",
+            header: "Tokens",
+            cell: ({ row }) => {
+                const tokens = row.original.collectionTokens?.tokens ?? [];
+                const defaultToken = row.original.collectionTokens?.default;
+                if (!tokens.length) return "-";
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" className="h-8 px-2 text-xs">
+                                Tokens ({tokens.length})
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-72">
+                            <DropdownMenuLabel>Collection Tokens</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {defaultToken && (
+                                <>
+                                    <DropdownMenuItem>
+                                        <div className="flex flex-col w-full">
+                                            <span className="font-semibold">Default</span>
+                                            <span className="font-mono text-xs text-muted-foreground break-all">
+                                                {defaultToken}
+                                            </span>
+                                        </div>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                </>
+                            )}
+                            {tokens.map((t, i) => (
+                                <DropdownMenuItem key={i} className="flex flex-col items-start">
+                                    <div className="w-full flex justify-between">
+                                        <span className="font-medium">{t.prefix}</span>
+                                        <span className="font-mono text-muted-foreground break-all">
+                                            {t.token}
+                                        </span>
+                                    </div>
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            },
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                return (
+                    <div>
+                        <Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/users/update?uuid=${row.original.uuid}`) }}>
+                            <Pencil />
+                        </Button>
+                        <Button className="bg-red-700 text-white border-red-700 mx-4" variant="outline" size="sm" onClick={() => { deleteHandler(row.original.uuid || "") }}>
+                            <Trash />
+                        </Button>
+                    </div>
+                );
+            },
+        }
+    ]
+}
+
+export { getColumns };

frontend/pages/users/table/data-table.tsx

@@ -0,0 +1,280 @@
+"use client"
+
+import * as React from "react"
+import {
+    closestCenter,
+    DndContext,
+    KeyboardSensor,
+    MouseSensor,
+    TouchSensor,
+    useSensor,
+    useSensors,
+    type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import {
+    IconChevronDown,
+    IconChevronLeft,
+    IconChevronRight,
+    IconChevronsLeft,
+    IconChevronsRight,
+    IconLayoutColumns,
+    IconPlus,
+} from "@tabler/icons-react"
+import {
+    ColumnFiltersState,
+    flexRender,
+    getCoreRowModel,
+    getFacetedRowModel,
+    getFacetedUniqueValues,
+    getFilteredRowModel,
+    getSortedRowModel,
+    SortingState,
+    useReactTable,
+    VisibilityState,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Label } from "@/components/ui/label"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@/components/ui/tabs"
+import { schemaType } from "./schema"
+import { getColumns, DraggableRow } from "./columns"
+import { useRouter } from "next/navigation"
+import { useDeleteUserMutation } from "@/pages/users/queries"
+
+export function UserDataTable({
+    data,
+    totalCount,
+    currentPage = 1,
+    pageSize = 10,
+    onPageChange,
+    onPageSizeChange,
+    refetchTable
+}: {
+    data: schemaType[],
+    totalCount: number,
+    currentPage?: number,
+    pageSize?: number,
+    onPageChange: (page: number) => void,
+    onPageSizeChange: (size: number) => void,
+    refetchTable: () => void,
+}) {
+
+    const router = useRouter();
+    const [rowSelection, setRowSelection] = React.useState({})
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+    const [sorting, setSorting] = React.useState<SortingState>([])
+    const sortableId = React.useId()
+    const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}))
+    const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
+
+    const deleteMutation = useDeleteUserMutation()
+    const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 200) }
+    const columns = getColumns(router, deleteHandler);
+    const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize }), [currentPage, pageSize])
+    const totalPages = Math.ceil(totalCount / pageSize)
+
+    const table = useReactTable({
+        data,
+        columns,
+        pageCount: totalPages,
+        state: { sorting, columnVisibility, rowSelection, columnFilters, pagination },
+        manualPagination: true,
+        getRowId: (row) => row._id.toString(),
+        enableRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onPaginationChange: (updater) => { const nextPagination = typeof updater === "function" ? updater(pagination) : updater; onPageChange(nextPagination.pageIndex + 1); onPageSizeChange(nextPagination.pageSize) },
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    })
+
+    const handlePageSizeChange = (value: string) => { const newSize = Number(value); onPageSizeChange(newSize); onPageChange(1) }
+
+    return (
+        <Tabs
+            defaultValue="outline"
+            className="w-full flex-col justify-start gap-6"
+        >
+            <div className="flex items-center justify-between px-4 lg:px-6">
+                <Label htmlFor="view-selector" className="sr-only">
+                    View
+                </Label>
+                <Select defaultValue="outline">
+                    <SelectTrigger className="flex w-fit @4xl/main:hidden" size="sm" id="view-selector">
+                        <SelectValue placeholder="Select a view" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="outline">Outline</SelectItem>
+                        <SelectItem value="past-performance">Past Performance</SelectItem>
+                        <SelectItem value="key-personnel">Key Personnel</SelectItem>
+                        <SelectItem value="focus-documents">Focus Documents</SelectItem>
+                    </SelectContent>
+                </Select>
+                <div className="flex items-center gap-2">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="sm">
+                                <IconLayoutColumns />
+                                <span className="hidden lg:inline">Customize Columns</span>
+                                <span className="lg:hidden">Columns</span>
+                                <IconChevronDown />
+                            </Button>
+                        </DropdownMenuTrigger>
+
+                        <DropdownMenuContent align="end" className="w-56">
+                            {table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
+                                return (
+                                    <DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)} >
+                                        {column.id}
+                                    </DropdownMenuCheckboxItem>
+                                )
+                            })}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    <Button variant="outline" size="sm" onClick={() => { router.push("/users/add") }}>
+                        <IconPlus />
+                        <span className="hidden lg:inline">Add User</span>
+                    </Button>
+                </div>
+            </div>
+            <TabsContent value="outline"
+                className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+            >
+                <div className="overflow-hidden rounded-lg border">
+                    <DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} sensors={sensors} id={sortableId} >
+                        <Table>
+                            <TableHeader className="bg-muted sticky top-0 z-10">
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => {
+                                            return (
+                                                <TableHead key={header.id} colSpan={header.colSpan}>
+                                                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                                                </TableHead>
+                                            )
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                                {table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
+                                    {table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
+                                </SortableContext>) : (
+                                    <TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
+                                )}
+                            </TableBody>
+                        </Table>
+                    </DndContext>
+                </div>
+                <div className="flex items-center justify-between px-4">
+                    <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+                        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                        {table.getFilteredRowModel().rows.length} row(s) selected.
+                    </div>
+                    <div className="flex w-full items-center gap-8 lg:w-fit">
+                        <div className="hidden items-center gap-2 lg:flex">
+                            <Label htmlFor="rows-per-page" className="text-sm font-medium">Rows per page</Label>
+                            <Select value={`${pageSize}`} onValueChange={handlePageSizeChange}>
+                                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                                    <SelectValue placeholder={pageSize} />
+                                </SelectTrigger>
+                                <SelectContent side="top">
+                                    {[10, 20, 30].map((size) => <SelectItem key={size} value={`${size}`}>{size}</SelectItem>)}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="flex w-fit items-center justify-center text-sm font-medium">
+                            Page {currentPage} of {totalPages}
+                        </div>
+                        <div className="flex w-fit items-center justify-center text-sm font-medium">
+                            Total Count: {totalCount}
+                        </div>
+                        <div className="ml-auto flex items-center gap-2 lg:ml-0">
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(1)}
+                                disabled={currentPage === 1}
+                            >
+                                <IconChevronsLeft />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(currentPage - 1)}
+                                disabled={currentPage === 1}
+                            >
+                                <IconChevronLeft />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(currentPage + 1)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <IconChevronRight />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(totalPages)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <IconChevronsRight />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="past-performance" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+            <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+            <TabsContent value="focus-documents" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+        </Tabs>
+    )
+}

frontend/pages/users/table/schema.tsx

@@ -0,0 +1,47 @@
+import { z } from "zod";
+
+export const schema = z.object({
+    _id: z.string(),
+    uuid: z.string().nullable().optional(),
+    expiryStarts: z.string().nullable().optional(),
+    expiryEnds: z.string().nullable().optional(),
+    isConfirmed: z.boolean().nullable().optional(),
+    deleted: z.boolean().nullable().optional(),
+    active: z.boolean().nullable().optional(),
+    crypUuId: z.string().nullable().optional(),
+    createdCredentialsToken: z.string().nullable().optional(),
+    updatedCredentialsToken: z.string().nullable().optional(),
+    confirmedCredentialsToken: z.string().nullable().optional(),
+    isNotificationSend: z.boolean().nullable().optional(),
+    isEmailSend: z.boolean().nullable().optional(),
+    refInt: z.number().nullable().optional(),
+    refId: z.string().nullable().optional(),
+    replicationId: z.number().nullable().optional(),
+    expiresAt: z.string().nullable().optional(),
+    resetToken: z.string().nullable().optional(),
+    password: z.string().nullable().optional(),
+    history: z.array(z.string()).optional(),
+    tag: z.string().nullable().optional(),
+    email: z.string().nullable().optional(),
+    phone: z.string().nullable().optional(),
+
+    collectionTokens: z
+        .object({
+            default: z.string().nullable().optional(),
+            tokens: z
+                .array(
+                    z.object({
+                        prefix: z.string(),
+                        token: z.string(),
+                    })
+                )
+                .optional(),
+        })
+        .nullable()
+        .optional(),
+
+    createdAt: z.string().nullable().optional(),
+    updatedAt: z.string().nullable().optional(),
+});
+
+export type schemaType = z.infer<typeof schema>;

frontend/pages/users/update/form.tsx

@@ -0,0 +1,250 @@
+"use client"
+import { useFieldArray, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { userUpdateSchema, type UserUpdate } from "./schema"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Separator } from "@/components/ui/separator"
+import { DateTimePicker } from "@/components/ui/date-time-picker"
+import { useUpdateUserMutation } from "./queries"
+
+const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: UserUpdate, selectedUuid: string }) => {
+    const form = useForm<UserUpdate>({
+        resolver: zodResolver(userUpdateSchema),
+        defaultValues: {
+            expiryStarts: initData.expiryStarts,
+            expiryEnds: initData.expiryEnds,
+            isConfirmed: initData.isConfirmed,
+            isNotificationSend: initData.isNotificationSend,
+            tag: initData.tag,
+            email: initData.email,
+            phone: initData.phone,
+            collectionTokens: initData.collectionTokens,
+        },
+    })
+
+    const { control, handleSubmit } = form
+
+    const { fields, append, remove } = useFieldArray({ control, name: "collectionTokens.tokens" })
+
+    const mutation = useUpdateUserMutation();
+
+    function onSubmit(values: UserUpdate) {
+        mutation.mutate({ data: values as any || initData, uuid: selectedUuid }); setTimeout(() => refetchTable(), 200)
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4">
+                {/* BASIC INFO */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                        control={form.control}
+                        name="email"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Email</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="user@example.com" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="phone"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Phone</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="+901234567" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* PASSWORD / TAG */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                        control={form.control}
+                        name="tag"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Tag</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="User tag..." {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* DATES */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                    <FormField
+                        control={form.control}
+                        name="expiryStarts"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Expiry Starts</FormLabel>
+                                <FormControl>
+                                    <DateTimePicker {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="expiryEnds"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Expiry Ends</FormLabel>
+                                <FormControl>
+                                    <DateTimePicker {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* SWITCHES */}
+                <div className="flex items-center gap-6">
+                    <FormField
+                        control={form.control}
+                        name="isConfirmed"
+                        render={({ field }) => (
+                            <FormItem className="flex items-center gap-2">
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                    />
+                                </FormControl>
+                                <FormLabel className="mt-0!">Confirmed</FormLabel>
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="isNotificationSend"
+                        render={({ field }) => (
+                            <FormItem className="flex items-center gap-2">
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                    />
+                                </FormControl>
+                                <FormLabel className="mt-0!">Send Notification</FormLabel>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                <Separator />
+
+                {/* COLLECTION TOKENS */}
+                <FormField
+                    control={form.control}
+                    name="collectionTokens.default"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Default Token</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Default token..." {...field} />
+                            </FormControl>
+                        </FormItem>
+                    )}
+                />
+
+                <div className="space-y-3">
+                    <div className="flex justify-between items-center">
+                        <FormLabel>Tokens</FormLabel>
+
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => append({ prefix: "", token: "" })}
+                        >
+                            + Add Token
+                        </Button>
+                    </div>
+
+                    {fields.length === 0 && (
+                        <p className="text-sm text-muted-foreground">No tokens added.</p>
+                    )}
+
+                    {fields.map((fieldItem, i) => (
+                        <div
+                            key={fieldItem.id}
+                            className="grid grid-cols-12 gap-2 items-end"
+                        >
+                            <div className="col-span-4">
+                                <FormField
+                                    control={form.control}
+                                    name={`collectionTokens.tokens.${i}.prefix`}
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Prefix</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder="prefix" {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+
+                            <div className="col-span-6">
+                                <FormField
+                                    control={form.control}
+                                    name={`collectionTokens.tokens.${i}.token`}
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Token</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder="token" {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+
+                            <Button
+                                type="button"
+                                variant="destructive"
+                                size="icon"
+                                className="col-span-2 h-10"
+                                onClick={() => remove(i)}
+                            >
+                                ✕
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+
+                <Separator />
+
+                <Button type="submit" className="w-full">
+                    Update User
+                </Button>
+            </form>
+        </Form>
+    )
+}
+
+export { UserForm }

frontend/pages/users/update/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { useState } from 'react';
+import { useGraphQlUsersList } from '@/pages/users/queries';
+import { UserDataTableUpdate } from '@/pages/users/update/table/data-table';
+import { UserForm } from '@/pages/users/update/form';
+import { useSearchParams, useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button';
+
+const PageUpdateUser = () => {
+    const [page, setPage] = useState(1);
+    const [limit, setLimit] = useState(10);
+    const [sort, setSort] = useState({ createdAt: 'desc' });
+    const [filters, setFilters] = useState({});
+    const searchParams = useSearchParams()
+    const router = useRouter()
+
+    const uuid = searchParams?.get('uuid') || null
+    if (!uuid) {
+        return <>
+            <div>UUID not found in search params</div>
+            <Button onClick={() => router.push('/users')}>Back to Users</Button>
+        </>
+    }
+
+    const { data, isLoading, error, refetch } = useGraphQlUsersList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
+    const initData = data?.data?.[0] || null;
+
+    if (!initData) {
+        return <>
+            <div>Selected User is either deleted or not found</div>
+            <Button onClick={() => router.push('/users')}>Back to Users</Button>
+        </>
+    }
+
+    return (
+        <>
+            <UserDataTableUpdate
+                data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
+                onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
+            />
+            <UserForm refetchTable={refetch} initData={initData} selectedUuid={uuid} />
+        </>
+    )
+}
+
+export { PageUpdateUser };

frontend/pages/users/update/queries.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { useMutation } from '@tanstack/react-query'
+import { UserUpdate } from './types';
+
+const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string): Promise<{ data: UserUpdate | null; status: number }> => {
+    console.log('Fetching test data from local API');
+    try {
+        const res = await fetch(`/api/users/update?uuid=${uuid || ''}`, { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(record) });
+        if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
+        const data = await res.json();
+        return { data: data.data, status: res.status }
+    } catch (error) { console.error('Error fetching test data:', error); throw error }
+};
+
+export function useUpdateUserMutation() {
+    return useMutation({
+        mutationFn: ({ data, uuid }: { data: UserUpdate, uuid: string }) => fetchGraphQlUsersUpdate(data, uuid),
+        onSuccess: () => { console.log("User updated successfully") },
+        onError: (error) => { console.error("Update user failed:", error) },
+    })
+}

frontend/pages/users/update/schema.ts

@@ -0,0 +1,27 @@
+import { z } from "zod"
+
+export const tokenSchema = z.object({
+    prefix: z.string().min(1, "Prefix is required"),
+    token: z.string().min(1, "Token is required"),
+})
+
+export const collectionTokensSchema = z.object({
+    default: z.string().optional(),
+    tokens: z.array(tokenSchema)
+})
+
+export const userUpdateSchema = z.object({
+    expiryStarts: z.string().optional(),
+    expiryEnds: z.string().optional(),
+
+    isConfirmed: z.boolean(),
+    isNotificationSend: z.boolean(),
+
+    tag: z.string().optional(),
+    email: z.string().email(),
+    phone: z.string().min(5),
+
+    collectionTokens: collectionTokensSchema,
+})
+
+export type UserUpdate = z.infer<typeof userUpdateSchema>

frontend/pages/users/update/table/columns.tsx

@@ -0,0 +1,267 @@
+"use client"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTrigger } from "@/components/ui/drawer"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useSortable } from "@dnd-kit/sortable"
+import { IconGripVertical } from "@tabler/icons-react"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Separator } from "@/components/ui/separator"
+import { ColumnDef, flexRender, Row } from "@tanstack/react-table"
+import { TableCell, TableRow } from "@/components/ui/table"
+import { CSS } from "@dnd-kit/utilities"
+import { schema, schemaType } from "./schema"
+import { dateToLocaleString } from "@/lib/utils"
+import { Pencil, Trash } from "lucide-react"
+
+function TableCellViewer({ item }: { item: schemaType }) {
+    const isMobile = useIsMobile();
+
+    return (
+        <Drawer direction={isMobile ? "bottom" : "right"}>
+            <DrawerTrigger asChild>
+                <Button variant="link" className="text-foreground w-fit px-0 text-left">
+                    {item.email ?? "Unknown Email"}
+                </Button>
+            </DrawerTrigger>
+
+            <DrawerContent>
+                <DrawerHeader className="gap-1">
+                    <h2 className="text-lg font-semibold">{item.email}</h2>
+                    <p className="text-sm text-muted-foreground">
+                        User details
+                    </p>
+                </DrawerHeader>
+
+                <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+
+                    {/* BASIC INFO */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <Label>Email</Label>
+                            <Input value={item.email ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Phone</Label>
+                            <Input value={item.phone ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Tag</Label>
+                            <Input value={item.tag ?? ""} readOnly />
+                        </div>
+
+                        <div>
+                            <Label>Active</Label>
+                            <Input value={item.active ? "Active" : "Inactive"} readOnly />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* DATES */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <Label>Created At</Label>
+                            <Input
+                                value={item.createdAt ? new Date(item.createdAt).toLocaleString() : ""}
+                                readOnly
+                            />
+                        </div>
+
+                        <div>
+                            <Label>Updated At</Label>
+                            <Input
+                                value={item.updatedAt ? new Date(item.updatedAt).toLocaleString() : ""}
+                                readOnly
+                            />
+                        </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* TOKENS */}
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" className="w-full">
+                                Collection Tokens ({item.collectionTokens?.tokens?.length ?? 0})
+                            </Button>
+                        </DropdownMenuTrigger>
+
+                        <DropdownMenuContent className="w-72">
+                            <DropdownMenuLabel>Tokens</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {(item.collectionTokens?.tokens ?? []).length === 0 && (<DropdownMenuItem disabled>No tokens found</DropdownMenuItem>)}
+                            {(item.collectionTokens?.tokens ?? []).map((t, i) => (
+                                <DropdownMenuItem key={i} className="flex flex-col gap-2">
+                                    <div className="grid grid-cols-2 gap-2 w-full">
+                                        <Input value={t.prefix} readOnly />
+                                        <Input value={t.token} readOnly />
+                                    </div>
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                </div>
+
+                <DrawerFooter>
+                    <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                    </DrawerClose>
+                </DrawerFooter>
+            </DrawerContent>
+        </Drawer>
+    );
+}
+
+function DragHandle({ id }: { id: number }) {
+    const { attributes, listeners } = useSortable({ id })
+    return (
+        <Button {...attributes} {...listeners} variant="ghost" size="icon" className="text-muted-foreground size-7 hover:bg-transparent">
+            <IconGripVertical className="text-muted-foreground size-3" />
+            <span className="sr-only">Drag to reorder</span>
+        </Button>
+    )
+}
+
+export function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
+    const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original._id })
+    return (
+        <TableRow data-state={row.getIsSelected() && "selected"} data-dragging={isDragging} ref={setNodeRef}
+            className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+            style={{ transform: CSS.Transform.toString(transform), transition: transition }}
+        >
+            {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+            ))}
+        </TableRow>
+    )
+}
+
+function getColumns(deleteHandler: (id: string) => void): ColumnDef<schemaType>[] {
+    return [
+        {
+            accessorKey: "uuid",
+            header: "UUID",
+            cell: ({ getValue }) => (<div className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">{String(getValue())}</div>),
+        },
+        {
+            accessorKey: "email",
+            header: "Email",
+        },
+        {
+            accessorKey: "phone",
+            header: "Phone",
+        },
+        {
+            accessorKey: "tag",
+            header: "Tag",
+        },
+        {
+            accessorKey: "active",
+            header: "Active",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "isConfirmed",
+            header: "Confirmed",
+            cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
+        },
+        {
+            accessorKey: "createdAt",
+            header: "Created",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
+        },
+        {
+            accessorKey: "updatedAt",
+            header: "Updated",
+            cell: ({ getValue }) => dateToLocaleString(getValue() as string),
+        },
+        {
+            accessorKey: "expiryStarts",
+            header: "Expiry Starts",
+            cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
+        },
+        {
+            accessorKey: "expiryEnds",
+            header: "Expiry Ends",
+            cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
+        },
+        {
+            accessorKey: "crypUuId",
+            header: "Encrypted UUID",
+        },
+        {
+            accessorKey: "history",
+            header: "History",
+            cell: ({ getValue }) => (<div className="truncate max-w-[150px] text-xs text-muted-foreground">{String(getValue() ?? "")}</div>),
+        },
+        {
+            accessorKey: "collectionTokens.tokens",
+            header: "Tokens",
+            cell: ({ row }) => {
+                const tokens = row.original.collectionTokens?.tokens ?? [];
+                const defaultToken = row.original.collectionTokens?.default;
+                if (!tokens.length) return "-";
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" className="h-8 px-2 text-xs">
+                                Tokens ({tokens.length})
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-72">
+                            <DropdownMenuLabel>Collection Tokens</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {defaultToken && (
+                                <>
+                                    <DropdownMenuItem>
+                                        <div className="flex flex-col w-full">
+                                            <span className="font-semibold">Default</span>
+                                            <span className="font-mono text-xs text-muted-foreground break-all">
+                                                {defaultToken}
+                                            </span>
+                                        </div>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                </>
+                            )}
+                            {tokens.map((t, i) => (
+                                <DropdownMenuItem key={i} className="flex flex-col items-start">
+                                    <div className="w-full flex justify-between">
+                                        <span className="font-medium">{t.prefix}</span>
+                                        <span className="font-mono text-muted-foreground break-all">
+                                            {t.token}
+                                        </span>
+                                    </div>
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            },
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                return (
+                    <div>
+                        {/* <Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/users/update/${row.original.uuid}`) }}>
+                            <Pencil />
+                        </Button> */}
+                        <Button className="bg-red-700 text-white border-red-700 mx-4" variant="outline" size="sm" onClick={() => { deleteHandler(row.original.uuid || "") }}>
+                            <Trash />
+                        </Button>
+                    </div>
+                );
+            },
+        }
+    ]
+}
+
+export { getColumns };

frontend/pages/users/update/table/data-table.tsx

@@ -0,0 +1,287 @@
+"use client"
+
+import * as React from "react"
+import {
+    closestCenter,
+    DndContext,
+    KeyboardSensor,
+    MouseSensor,
+    TouchSensor,
+    useSensor,
+    useSensors,
+    type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import {
+    IconChevronDown,
+    IconChevronLeft,
+    IconChevronRight,
+    IconChevronsLeft,
+    IconChevronsRight,
+    IconLayoutColumns,
+} from "@tabler/icons-react"
+import {
+    ColumnFiltersState,
+    flexRender,
+    getCoreRowModel,
+    getFacetedRowModel,
+    getFacetedUniqueValues,
+    getFilteredRowModel,
+    getSortedRowModel,
+    SortingState,
+    useReactTable,
+    VisibilityState,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Label } from "@/components/ui/label"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@/components/ui/tabs"
+import { schemaType } from "./schema"
+import { getColumns, DraggableRow } from "./columns"
+import { useRouter } from "next/navigation"
+import { Home } from "lucide-react"
+import { useDeleteUserMutation } from "@/pages/users/queries"
+
+export function UserDataTableUpdate({
+    data,
+    totalCount,
+    currentPage,
+    pageSize,
+    onPageChange,
+    onPageSizeChange,
+    refetchTable,
+}: {
+    data: schemaType[],
+    totalCount: number,
+    currentPage: number,
+    pageSize: number,
+    onPageChange: (page: number) => void,
+    onPageSizeChange: (size: number) => void,
+    refetchTable: () => void
+}) {
+
+    const router = useRouter();
+    const [rowSelection, setRowSelection] = React.useState({})
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+    const [sorting, setSorting] = React.useState<SortingState>([])
+    const sortableId = React.useId()
+    const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}))
+    const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
+
+    const deleteMutation = useDeleteUserMutation()
+    const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 200) }
+    const columns = getColumns(deleteHandler);
+    const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize, }), [currentPage, pageSize])
+    const totalPages = Math.ceil(totalCount / pageSize)
+
+    const table = useReactTable({
+        data,
+        columns,
+        pageCount: totalPages,
+        state: { sorting, columnVisibility, rowSelection, columnFilters, pagination },
+        manualPagination: true,
+        enableRowSelection: true,
+        getRowId: (row) => row._id.toString(),
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onPaginationChange: (updater) => {
+            const nextPagination = typeof updater === "function" ? updater(pagination) : updater;
+            onPageChange(nextPagination.pageIndex + 1);
+            onPageSizeChange(nextPagination.pageSize);
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    })
+
+    const handlePageSizeChange = (value: string) => {
+        const newSize = Number(value);
+        onPageSizeChange(newSize);
+        onPageChange(1);
+    }
+
+    return (
+        <Tabs
+            defaultValue="outline"
+            className="w-full flex-col justify-start gap-6"
+        >
+            <div className="flex items-center justify-between px-4 lg:px-6">
+                <Label htmlFor="view-selector" className="sr-only">
+                    View
+                </Label>
+                <Select defaultValue="outline">
+                    <SelectTrigger className="flex w-fit @4xl/main:hidden" size="sm" id="view-selector">
+                        <SelectValue placeholder="Select a view" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="outline">Outline</SelectItem>
+                        <SelectItem value="past-performance">Past Performance</SelectItem>
+                        <SelectItem value="key-personnel">Key Personnel</SelectItem>
+                        <SelectItem value="focus-documents">Focus Documents</SelectItem>
+                    </SelectContent>
+                </Select>
+                <div className="flex items-center gap-2">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="sm">
+                                <IconLayoutColumns />
+                                <span className="hidden lg:inline">Customize Columns</span>
+                                <span className="lg:hidden">Columns</span>
+                                <IconChevronDown />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-56">
+                            {table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
+                                return (
+                                    <DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)} >
+                                        {column.id}
+                                    </DropdownMenuCheckboxItem>
+                                )
+                            })}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    <Button variant="outline" size="sm" onClick={() => { router.push("/users") }}>
+                        <Home />
+                        <span className="hidden lg:inline">Back to Users</span>
+                    </Button>
+                </div>
+            </div>
+            <TabsContent value="outline"
+                className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+            >
+                <div className="overflow-hidden rounded-lg border">
+                    <DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} sensors={sensors} id={sortableId} >
+                        <Table>
+                            <TableHeader className="bg-muted sticky top-0 z-10">
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => {
+                                            return (
+                                                <TableHead key={header.id} colSpan={header.colSpan}>
+                                                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                                                </TableHead>
+                                            )
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody className="**:data-[slot=table-cell]:first:w-8">
+                                {table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
+                                    {table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
+                                </SortableContext>) : (
+                                    <TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
+                                )}
+                            </TableBody>
+                        </Table>
+                    </DndContext>
+                </div>
+                <div className="flex items-center justify-between px-4">
+                    <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+                        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                        {table.getFilteredRowModel().rows.length} row(s) selected.
+                    </div>
+                    <div className="flex w-full items-center gap-8 lg:w-fit">
+                        <div className="hidden items-center gap-2 lg:flex">
+                            <Label htmlFor="rows-per-page" className="text-sm font-medium">Rows per page</Label>
+                            <Select value={`${pageSize}`} onValueChange={handlePageSizeChange}>
+                                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+                                    <SelectValue placeholder={pageSize} />
+                                </SelectTrigger>
+                                <SelectContent side="top">
+                                    {[10, 20, 30].map((size) => <SelectItem key={size} value={`${size}`}>{size}</SelectItem>)}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="flex w-fit items-center justify-center text-sm font-medium">
+                            Page {currentPage} of {totalPages}
+                        </div>
+                        <div className="flex w-fit items-center justify-center text-sm font-medium">
+                            Total Count: {totalCount}
+                        </div>
+                        <div className="ml-auto flex items-center gap-2 lg:ml-0">
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(1)}
+                                disabled={currentPage === 1}
+                            >
+                                <IconChevronsLeft />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(currentPage - 1)}
+                                disabled={currentPage === 1}
+                            >
+                                <IconChevronLeft />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(currentPage + 1)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <IconChevronRight />
+                            </Button>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={() => onPageChange(totalPages)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <IconChevronsRight />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="past-performance" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+            <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+            <TabsContent value="focus-documents" className="flex flex-col px-4 lg:px-6">
+                <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+            </TabsContent>
+        </Tabs>
+    )
+}

frontend/pages/users/update/table/schema.tsx

@@ -0,0 +1,47 @@
+import { z } from "zod";
+
+export const schema = z.object({
+    _id: z.string(),
+    uuid: z.string().nullable().optional(),
+    expiryStarts: z.string().nullable().optional(),
+    expiryEnds: z.string().nullable().optional(),
+    isConfirmed: z.boolean().nullable().optional(),
+    deleted: z.boolean().nullable().optional(),
+    active: z.boolean().nullable().optional(),
+    crypUuId: z.string().nullable().optional(),
+    createdCredentialsToken: z.string().nullable().optional(),
+    updatedCredentialsToken: z.string().nullable().optional(),
+    confirmedCredentialsToken: z.string().nullable().optional(),
+    isNotificationSend: z.boolean().nullable().optional(),
+    isEmailSend: z.boolean().nullable().optional(),
+    refInt: z.number().nullable().optional(),
+    refId: z.string().nullable().optional(),
+    replicationId: z.number().nullable().optional(),
+    expiresAt: z.string().nullable().optional(),
+    resetToken: z.string().nullable().optional(),
+    password: z.string().nullable().optional(),
+    history: z.array(z.string()).optional(),
+    tag: z.string().nullable().optional(),
+    email: z.string().nullable().optional(),
+    phone: z.string().nullable().optional(),
+
+    collectionTokens: z
+        .object({
+            default: z.string().nullable().optional(),
+            tokens: z
+                .array(
+                    z.object({
+                        prefix: z.string(),
+                        token: z.string(),
+                    })
+                )
+                .optional(),
+        })
+        .nullable()
+        .optional(),
+
+    createdAt: z.string().nullable().optional(),
+    updatedAt: z.string().nullable().optional(),
+});
+
+export type schemaType = z.infer<typeof schema>;

frontend/pages/users/update/types.ts

@@ -0,0 +1,24 @@
+interface UserToken {
+    prefix: string;
+    token: string;
+}
+
+interface CollectionTokens {
+    default: string;
+    tokens: UserToken[];
+}
+
+interface UserUpdate {
+    expiryStarts: string;
+    expiryEnds: string;
+    isConfirmed: boolean;
+    isNotificationSend: boolean;
+    password: string;
+    tag: string;
+    email: string;
+    phone: string;
+    collectionTokens: CollectionTokens;
+}
+
+
+export type { UserUpdate };