Berkay
/
evyos-frontend-development
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

users update create delete tested

This commit is contained in:
Berkay 2025-11-16 20:35:19 +03:00
parent cf4f632afe
commit f870c2e62e
58 changed files with 4511 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
backend/src/users/dto/create-user.input.ts
View File

@ -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;
}

53
backend/src/users/dto/update-user.input.ts Normal file
View File

@ -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;
}

9
backend/src/users/users.resolver.ts
View File

@ -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) }
}

11
backend/src/users/users.service.ts
View File

@ -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 }
}

53
frontend/app/api/users/add/route.ts Normal file
View File

@ -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 })
// }

29
frontend/app/api/users/add/schema.ts Normal file
View File

@ -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>

22
frontend/app/api/users/delete/route.ts Normal file
View File

@ -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 });
}
}

3
frontend/app/api/users/list/route.ts
View File

@ -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 });

35
frontend/app/api/users/update/route.ts Normal file
View File

@ -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 });
}
}

28
frontend/app/api/users/update/schema.ts Normal file
View File

@ -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>

5
frontend/app/dashboard/page.tsx
View File

@ -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;

31
frontend/app/layout.tsx
View File

@ -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>
);

5
frontend/app/users/add/page.tsx Normal file
View File

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

7
frontend/app/users/update/page.tsx Normal file
View File

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

1
frontend/components/dashboard/data-table.tsx
View File

@ -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"

10
frontend/components/dashboard/nav-documents.tsx
View File

@ -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 (

49
frontend/components/dashboard/nav-main.tsx
View File

@ -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
}[]
}) {
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>
<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>
))}
{items.map((item) => pathname?.includes(item.url) ? linkRenderDisabled(item) : linkRenderActive(item))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>

3
frontend/components/dashboard/site-header.tsx
View File

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

183
frontend/components/sidebar/app-sidebar.tsx Normal file
View File

@ -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>
)
}

92
frontend/components/sidebar/navs/nav-documents.tsx Normal file
View File

@ -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>
)
}

58
frontend/components/sidebar/navs/nav-main.tsx Normal file
View File

@ -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>
)
}

42
frontend/components/sidebar/navs/nav-secondary.tsx Normal file
View File

@ -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>
)
}

110
frontend/components/sidebar/navs/nav-user.tsx Normal file
View File

@ -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>
)
}

29
frontend/components/sidebar/site-header.tsx Normal file
View File

@ -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>
)
}

216
frontend/components/ui/calendar.tsx Normal file
View File

@ -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 }

20
frontend/components/ui/chart.tsx
View File

@ -86,13 +86,13 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
}
`
)
@ -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
)}
>
@ -320,8 +320,8 @@ function getPayloadConfigFromPayload(
const payloadPayload =
"payload" in payload &&
typeof payload.payload === "object" &&
payload.payload !== null
typeof payload.payload === "object" &&
payload.payload !== null
? payload.payload
: undefined

219
frontend/components/ui/date-time-picker.tsx Normal file
View File

@ -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())}`;
};

14
frontend/components/ui/dropdown-menu.tsx
View File

@ -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}

167
frontend/components/ui/form.tsx Normal file
View File

@ -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,
}

48
frontend/components/ui/popover.tsx Normal file
View File

@ -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 }

10
frontend/components/ui/select.tsx
View File

@ -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,9 +62,9 @@ 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",
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
@ -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}

4
frontend/components/ui/table.tsx
View File

@ -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}

2
frontend/components/ui/tooltip.tsx
View File

@ -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>
)

6
frontend/lib/utils.ts
View File

@ -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" }
);
}

494
frontend/package-lock.json generated
View File

@ -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",

5
frontend/package.json
View File

@ -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",

4
frontend/pages/dashboard/page.tsx
View File

@ -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>

289
frontend/pages/users/add/form.tsx Normal file
View File

@ -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 }

26
frontend/pages/users/add/page.tsx Normal file
View File

@ -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 };

21
frontend/pages/users/add/queries.tsx Normal file
View File

@ -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) },
})
}

29
frontend/pages/users/add/schema.ts Normal file
View File

@ -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>

267
frontend/pages/users/add/table/columns.tsx Normal file
View File

@ -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 };

287
frontend/pages/users/add/table/data-table.tsx Normal file
View File

@ -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>
)
}

47
frontend/pages/users/add/table/schema.tsx Normal file
View File

@ -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>;

24
frontend/pages/users/add/types.ts Normal file
View File

@ -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 };

34
frontend/pages/users/page.tsx
View File

@ -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 };

22
frontend/pages/users/queries.tsx
View File

@ -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) },
})
}

267
frontend/pages/users/table/columns.tsx Normal file
View File

@ -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 };

280
frontend/pages/users/table/data-table.tsx Normal file
View File

@ -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>
)
}

47
frontend/pages/users/table/schema.tsx Normal file
View File

@ -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>;

250
frontend/pages/users/update/form.tsx Normal file
View File

@ -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 }

46
frontend/pages/users/update/page.tsx Normal file
View File

@ -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 };

21
frontend/pages/users/update/queries.tsx Normal file
View File

@ -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) },
})
}

27
frontend/pages/users/update/schema.ts Normal file
View File

@ -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>

267
frontend/pages/users/update/table/columns.tsx Normal file
View File

@ -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 };

287
frontend/pages/users/update/table/data-table.tsx Normal file
View File

@ -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>
)
}

47
frontend/pages/users/update/table/schema.tsx Normal file
View File

@ -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>;

24
frontend/pages/users/update/types.ts Normal file
View File

@ -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 };