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

build-address added tested

Browse Source
This commit is contained in:
Berkay
2025-11-18 16:25:03 +03:00
parent 6a5acd28db
commit 688576a1de
129 changed files with 8116 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
frontend/pages/people/update/form.tsx Normal file
View File

@@ -0,0 +1,294 @@
"use client"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { DateTimePicker } from "@/components/ui/date-time-picker"
import { useUpdatePeopleMutation } from "@/pages/people/update/queries"
import { personUpdateSchema, type PeopleUpdate } from "@/pages/people/update/schema"
const PeopleForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: PeopleUpdate, selectedUuid: string }) => {
const form = useForm<PeopleUpdate>({ resolver: zodResolver(personUpdateSchema), defaultValues: { ...initData } })
const { handleSubmit } = form
const mutation = useUpdatePeopleMutation();
function onSubmit(values: PeopleUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid }); setTimeout(() => refetchTable(), 400) }
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="firstName"
render={({ field }) => (
<FormItem>
<FormLabel>First Name</FormLabel>
<FormControl>
<Input placeholder="John" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="surname"
render={({ field }) => (
<FormItem>
<FormLabel>Surname</FormLabel>
<FormControl>
<Input placeholder="Doe" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* SECOND ROW */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="middleName"
render={({ field }) => (
<FormItem>
<FormLabel>Middle Name</FormLabel>
<FormControl>
<Input placeholder="Alexander" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="sexCode"
render={({ field }) => (
<FormItem>
<FormLabel>Sex Code</FormLabel>
<FormControl>
<Input placeholder="M / F" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* THIRD ROW */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="personRef"
render={({ field }) => (
<FormItem>
<FormLabel>Person Ref</FormLabel>
<FormControl>
<Input placeholder="REF123" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="personTag"
render={({ field }) => (
<FormItem>
<FormLabel>Person Tag</FormLabel>
<FormControl>
<Input placeholder="TAG001" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* FAMILY INFO */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="fatherName"
render={({ field }) => (
<FormItem>
<FormLabel>Father Name</FormLabel>
<FormControl>
<Input placeholder="Father..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="motherName"
render={({ field }) => (
<FormItem>
<FormLabel>Mother Name</FormLabel>
<FormControl>
<Input placeholder="Mother..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* COUNTRY + NATIONAL ID */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="countryCode"
render={({ field }) => (
<FormItem>
<FormLabel>Country Code</FormLabel>
<FormControl>
<Input placeholder="TR" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="nationalIdentityId"
render={({ field }) => (
<FormItem>
<FormLabel>National Identity ID</FormLabel>
<FormControl>
<Input placeholder="12345678901" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* BIRTH INFO */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="birthPlace"
render={({ field }) => (
<FormItem>
<FormLabel>Birth Place</FormLabel>
<FormControl>
<Input placeholder="Istanbul" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="birthDate"
render={({ field }) => (
<FormItem>
<FormLabel>Birth Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* TAX/BIRTHNAME */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="taxNo"
render={({ field }) => (
<FormItem>
<FormLabel>Tax No</FormLabel>
<FormControl>
<Input placeholder="Tax number..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="birthname"
render={({ field }) => (
<FormItem>
<FormLabel>Birth Name</FormLabel>
<FormControl>
<Input placeholder="Birth name..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<Separator />
{/* EXPIRY 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>
<Button type="submit" className="w-full">
Update Person
</Button>
</form>
</Form>
);
}
export { PeopleForm }

36
frontend/pages/people/update/page.tsx Normal file
View File

@@ -0,0 +1,36 @@
'use client';
import { useState } from 'react';
import { useGraphQlPeopleList } from '@/pages/people/queries';
import { PeopleDataTableUpdate } from '@/pages/people/update/table/data-table';
import { PeopleForm } from '@/pages/people/update/form';
import { useSearchParams, useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button';
const PageUpdatePeople = () => {
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
const backToPeople = <>
<div>UUID not found in search params</div>
<Button onClick={() => router.push('/people')}>Back to People</Button>
</>
if (!uuid) { return backToPeople }
const { data, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
const initData = data?.data?.[0] || null;
if (!initData) { return backToPeople }
return (
<>
<PeopleDataTableUpdate
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
/>
<PeopleForm refetchTable={refetch} initData={initData} selectedUuid={uuid} />
</>
)
}
export { PageUpdatePeople };

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

@@ -0,0 +1,21 @@
'use client'
import { useMutation } from '@tanstack/react-query'
import { UserUpdate } from './types';
const fetchGraphQlPeopleUpdate = 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/people/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 useUpdatePeopleMutation() {
return useMutation({
mutationFn: ({ data, uuid }: { data: UserUpdate, uuid: string }) => fetchGraphQlPeopleUpdate(data, uuid),
onSuccess: () => { console.log("People updated successfully") },
onError: (error) => { console.error("Update people failed:", error) },
})
}

22
frontend/pages/people/update/schema.ts Normal file
View File

@@ -0,0 +1,22 @@
import { z } from "zod"
export const personUpdateSchema = z.object({
firstName: z.string(),
surname: z.string(),
middleName: z.string().optional(),
sexCode: z.string(),
personRef: z.string().optional(),
personTag: z.string().optional(),
fatherName: z.string().optional(),
motherName: z.string().optional(),
countryCode: z.string().optional(),
nationalIdentityId: z.string().optional(),
birthPlace: z.string().optional(),
birthDate: z.string().optional(),
taxNo: z.string().optional(),
birthname: z.string().optional(),
expiryStarts: z.string().optional(),
expiryEnds: z.string().optional(),
});
export type PeopleUpdate = z.infer<typeof personUpdateSchema>;

251
frontend/pages/people/update/table/columns.tsx Normal file
View File

@@ -0,0 +1,251 @@
"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: "firstName",
header: "First Name",
},
{
accessorKey: "surname",
header: "Surname",
},
{
accessorKey: "middleName",
header: "Middle Name",
},
{
accessorKey: "sexCode",
header: "Sex",
},
{
accessorKey: "personRef",
header: "Person Ref",
},
{
accessorKey: "personTag",
header: "Person Tag",
},
{
accessorKey: "fatherName",
header: "Father Name",
},
{
accessorKey: "motherName",
header: "Mother Name",
},
{
accessorKey: "countryCode",
header: "Country",
},
{
accessorKey: "nationalIdentityId",
header: "National ID",
},
{
accessorKey: "birthPlace",
header: "Birth Place",
},
{
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: "birthDate",
header: "Birth Date",
cell: ({ getValue }) => dateToLocaleString(getValue() as string),
},
{
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) : "-",
},
{
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(`/people/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/people/update/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,
} 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 { useDeletePersonMutation } from "@/pages/people/queries"
export function PeopleDataTableUpdate({
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 = useDeletePersonMutation()
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("/people") }}>
<Home />
<span className="hidden lg:inline">Back to People</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/people/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/people/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 };