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

updated living space added

Browse Source
This commit is contained in:
Berkay
2025-12-04 15:46:24 +03:00
parent 56b42bb906
commit 53e1f1e4fc
70 changed files with 1128 additions and 824 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/pages/users/add/form.tsx
View File

@@ -20,8 +20,8 @@ const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
expiryEnds: "",
isConfirmed: false,
isNotificationSend: false,
password: "",
rePassword: "",
// password: "",
// rePassword: "",
tag: "",
email: "",
phone: ""
@@ -31,6 +31,7 @@ const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
const [defaultSelection, setDefaultSelection] = useState<string>("")
const [selectedBuildIDS, setSelectedBuildIDS] = useState<string[]>([])
const [selectedCompanyIDS, setSelectedCompanyIDS] = useState<string[]>([])
const [personID, setPersonID] = useState<string>("")
const appendBuildID = (id: string) => setSelectedBuildIDS((prev) => (id && !selectedBuildIDS.includes(id) ? [...prev, id] : prev))
const appendCompanyID = (id: string) => setSelectedCompanyIDS((prev) => (id && !selectedCompanyIDS.includes(id) ? [...prev, id] : prev))
@@ -40,12 +41,12 @@ const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
const { handleSubmit } = form
const mutation = useAddUserMutation();
function onSubmit(values: UserAdd) { mutation.mutate({ data: values as any, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable }); }
function onSubmit(values: UserAdd) { console.dir({ values, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID }); mutation.mutate({ data: values, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID, refetchTable }); }
return (
<div>
<PageAddUserSelections
selectedCompanyIDS={selectedCompanyIDS} selectedBuildingIDS={selectedBuildIDS} appendCompanyID={appendCompanyID} appendBuildingID={appendBuildID}
selectedCompanyIDS={selectedCompanyIDS} selectedBuildingIDS={selectedBuildIDS} appendCompanyID={appendCompanyID} appendBuildingID={appendBuildID} personID={personID} setPersonID={setPersonID}
removeCompanyID={removeCompanyID} removeBuildingID={removeBuildID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection}
/>
<Form {...form}>
@@ -82,7 +83,7 @@ const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
{/* PASSWORD / TAG */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
{/* <FormField
control={form.control}
name="password"
render={({ field }) => (
@@ -107,7 +108,7 @@ const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
<FormMessage />
</FormItem>
)}
/>
/> */}
<FormField
control={form.control}

6
frontend/pages/users/add/page.tsx
View File

@@ -9,15 +9,11 @@ const PageAddUser = () => {
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}
/>
<UserDataTableAdd data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch} />
<UserForm refetchTable={refetch} />
</>
)

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

@@ -1,6 +1,6 @@
'use client'
import { useMutation } from '@tanstack/react-query'
import { UserAdd } from './types'
import { UserAdd } from './schema'
import { toISOIfNotZ } from '@/lib/utils'
const fetchGraphQlUsersAdd = async (
@@ -8,15 +8,16 @@ const fetchGraphQlUsersAdd = async (
selectedBuildIDS: string[],
selectedCompanyIDS: string[],
defaultSelection: string,
personID: string,
refetchTable: () => void
): Promise<{ data: UserAdd | null; status: number }> => {
record.expiryStarts = toISOIfNotZ(record.expiryStarts);
record.expiryEnds = toISOIfNotZ(record.expiryEnds);
record.expiryStarts = record?.expiryStarts ? toISOIfNotZ(record.expiryStarts) : undefined;
record.expiryEnds = record?.expiryEnds ? toISOIfNotZ(record.expiryEnds) : undefined;
const payload = { ...record, person: personID, collectionTokens: { defaultSelection, selectedBuildIDS, selectedCompanyIDS } }
try {
const res = await fetch('/api/users/add', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ ...record, selectedBuildIDS, selectedCompanyIDS, defaultSelection }) });
const res = await fetch('/api/users/add', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(payload) });
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();
refetchTable();
const data = await res.json(); refetchTable();
return { data: data.data, status: res.status }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
@@ -24,8 +25,12 @@ const fetchGraphQlUsersAdd = async (
export function useAddUserMutation() {
return useMutation({
mutationFn: (
{ data, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable }: { data: UserAdd, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, refetchTable: () => void }
) => fetchGraphQlUsersAdd(data, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable),
{
data, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID, refetchTable
}: {
data: UserAdd, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, personID: string, refetchTable: () => void
}
) => fetchGraphQlUsersAdd(data, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID, refetchTable),
onSuccess: () => { console.log("User created successfully") },
onError: (error) => { console.error("Create user failed:", error) },
})

8
frontend/pages/users/add/schema.ts
View File

@@ -1,15 +1,15 @@
import { z } from "zod"
import { z } from "zod";
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),
// password: z.string().min(6),
// rePassword: z.string().min(6),
tag: z.string().optional(),
email: z.string().email(),
phone: z.string().min(5),

181
frontend/pages/users/add/table/columns.tsx
View File

@@ -16,117 +16,6 @@ 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 })
@@ -161,6 +50,16 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
accessorKey: "tag",
header: "Tag",
},
{
accessorKey: "isNotificationSend",
header: "Notificated?",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "isEmailSend",
header: "Email Send?",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "active",
header: "Active",
@@ -171,6 +70,11 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
header: "Confirmed",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "deleted",
header: "Deleted",
cell: ({ getValue }) => getValue() ? (<div className="text-red-600 font-medium">Yes</div>) : (<div className="text-green-600 font-medium">No</div>),
},
{
accessorKey: "createdAt",
header: "Created",
@@ -191,57 +95,16 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
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",
header: "Default Token",
cell: ({ row }) => {
const tokens = row.original.collectionTokens?.tokens ?? [];
const defaultToken = row.original.collectionTokens?.default;
if (!tokens.length) return "-";
const defaultToken = row.original.collectionTokens?.defaultSelection;
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>
defaultToken ? <div><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></div> : <div>No Default Token is registered.</div>
);
},
},
@@ -251,7 +114,7 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
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}`) }}>
<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 || "") }}>

2
frontend/pages/users/add/table/data-table.tsx
View File

@@ -100,7 +100,7 @@ export function UserDataTableAdd({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteUserMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }) }
const columns = getColumns(router, deleteHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize, }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)

57
frontend/pages/users/add/table/schema.tsx
View File

@@ -2,46 +2,23 @@ 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(),
uuid: z.string(),
expiryStarts: z.string(),
expiryEnds: z.string(),
isConfirmed: z.boolean(),
deleted: z.boolean(),
active: z.boolean(),
isNotificationSend: z.boolean(),
isEmailSend: z.boolean(),
expiresAt: z.string(),
tag: z.string(),
email: z.string(),
phone: z.string().optional(),
collectionTokens: z.object({
defaultSelection: z.string().nullable().optional(), selectedBuildIDS: z.array(z.string()).optional(), selectedCompanyIDS: z.array(z.string()).optional()
}).nullable().optional(),
createdAt: z.string(),
updatedAt: z.string(),
});
export type schemaType = z.infer<typeof schema>;

4
frontend/pages/users/add/types.ts
View File

@@ -9,8 +9,8 @@ interface CollectionTokens {
}
interface UserAdd {
expiryStarts: string;
expiryEnds: string;
expiryStarts?: string;
expiryEnds?: string;
isConfirmed: boolean;
isNotificationSend: boolean;
password: string;

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

@@ -9,26 +9,12 @@ const PageUsers = () => {
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 });
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 (
<UserDataTable
data={data?.data || []}
totalCount={data?.totalCount || 0}
currentPage={page}
pageSize={limit}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
refetchTable={refetch}
/>
);
return <UserDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} />;
};
export { PageUsers };

9
frontend/pages/users/selections/addPage.tsx
View File

@@ -2,6 +2,7 @@
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import PageUsersCompanyTableSection from "./companies/page";
import PageUsersBuildingTableSection from "./builds/page";
import PageUsersPersonTableSection from "./people/page";
const PageAddUserSelections = ({
selectedCompanyIDS,
@@ -11,7 +12,9 @@ const PageAddUserSelections = ({
appendBuildingID,
removeCompanyID,
removeBuildingID,
setDefaultSelection
setDefaultSelection,
personID,
setPersonID,
}: {
selectedCompanyIDS: string[];
selectedBuildingIDS: string[];
@@ -21,6 +24,8 @@ const PageAddUserSelections = ({
removeCompanyID: (id: string) => void;
removeBuildingID: (id: string) => void;
setDefaultSelection: (id: string) => void;
personID: string;
setPersonID: (id: string) => void;
}) => {
const tabsClassName = "border border-gray-300 rounded-sm h-10"
return (
@@ -29,10 +34,12 @@ const PageAddUserSelections = ({
<TabsList className="grid w-full grid-flow-col auto-cols-fr gap-1.5 mx-5">
<TabsTrigger className={tabsClassName} value="builds">Append Builds</TabsTrigger>
<TabsTrigger className={tabsClassName} value="company">Append Company</TabsTrigger>
<TabsTrigger className={tabsClassName} value="person">Append Person</TabsTrigger>
</TabsList>
<div className="mt-6">
<TabsContent value="builds"><PageUsersBuildingTableSection selectedBuildIDS={selectedBuildingIDS} appendBuildID={appendBuildingID} removeBuildID={removeBuildingID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection} /></TabsContent>
<TabsContent value="company"><PageUsersCompanyTableSection selectedCompanyIDS={selectedCompanyIDS} appendCompanyID={appendCompanyID} removeCompanyID={removeCompanyID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection} /></TabsContent>
<TabsContent value="person"><PageUsersPersonTableSection personID={personID} setPersonID={setPersonID} /></TabsContent>
</div>
</Tabs>
</div>

33
frontend/pages/users/selections/builds/columns.tsx
View File

@@ -8,7 +8,7 @@ import { CSS } from "@dnd-kit/utilities"
import { schema, schemaType } from "./schema"
import { dateToLocaleString } from "@/lib/utils"
import { Pencil, Trash } from "lucide-react"
import { IconCircleMinus, IconHandClick } from "@tabler/icons-react"
import { IconCircleMinus, IconHandClick, IconHandGrab } from "@tabler/icons-react"
export function DraggableRow({ row, selectedIDs }: { row: Row<z.infer<typeof schema>>; selectedIDs: string[] }) {
const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original._id })
@@ -120,18 +120,25 @@ function getColumns(appendBuildID: (id: string) => void, removeBuildID: (id: str
header: "Actions",
cell: ({ row }) => {
return (
selectedBuildIDS.includes(row.original._id) ? (
<div>
<Button className="bg-blue-600 border-blue-600 text-white" variant="outline" size="sm" onClick={() => { appendBuildID(row.original._id) }}>
<IconHandClick />
</Button>
</div>
) :
<div>
<Button className="bg-blue-600 border-blue-600 text-white" variant="outline" size="sm" onClick={() => { removeBuildID(row.original._id) }}>
<IconCircleMinus />
</Button>
</div>
<div className="flex items-center gap-2">
{defaultSelection !== row.original._id && <div>
<Button className="bg-amber-600 border-amber-600 text-white" variant="outline" size="sm" onClick={() => { setDefaultSelection(row.original._id) }}>
<IconHandGrab />
</Button></div>}
{!selectedBuildIDS.includes(row.original._id) ? (
<div>
<Button className="bg-blue-600 border-blue-600 text-white" variant="outline" size="sm" onClick={() => { appendBuildID(row.original._id) }}>
<IconHandClick />
</Button>
</div>
) :
<div>
<Button className="bg-blue-600 border-blue-600 text-white" variant="outline" size="sm" onClick={() => { removeBuildID(row.original._id) }}>
<IconCircleMinus />
</Button>
</div>
}
</div>
);
},
}

2
frontend/pages/users/selections/builds/page.tsx
View File

@@ -29,10 +29,8 @@ const PageUsersBuildsTableSection = (
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 <>
<UsersBuildDataTable
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange}

148
frontend/pages/users/selections/people/columns.tsx Normal file
View File

@@ -0,0 +1,148 @@
"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, IconHandClick } 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 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, selectedID }: { row: Row<z.infer<typeof schema>>; selectedID: string }) {
const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original._id })
return (
<TableRow data-state={row.getIsSelected() && "selected"} data-dragging={isDragging} ref={setNodeRef}
className={`${selectedID === row.original._id ? "bg-blue-700/50 hover:bg-blue-700/50" : ""} 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(personID: string, setPersonID: (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 (
personID !== row.original._id && (
<div>
<Button className="bg-blue-600 border-blue-600 text-white" variant="outline" size="sm" onClick={() => { setPersonID(row.original._id) }}>
<IconHandClick />
</Button>
</div>
)
);
},
}
]
}
export { getColumns };

282
frontend/pages/users/selections/people/data-table.tsx Normal file
View File

@@ -0,0 +1,282 @@
"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"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export default function TableUsersPersonTableSection({
data,
totalCount,
currentPage = 1,
pageSize = 10,
onPageChange,
onPageSizeChange,
refetchTable,
tableIsLoading,
personID,
setPersonID
}: {
data: schemaType[],
totalCount: number,
currentPage?: number,
pageSize?: number,
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void,
tableIsLoading: boolean,
personID: string,
setPersonID: (id: string) => 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 columns = getColumns(personID, setPersonID);
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("/people/add") }}>
<IconPlus />
<span className="hidden lg:inline">Add Person</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">
{tableIsLoading ?
<TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
<SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow selectedID={personID} key={row.id} row={row} />)}</SortableContext>}
</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>
)
}

30
frontend/pages/users/selections/people/page.tsx Normal file
View File

@@ -0,0 +1,30 @@
'use client';
import { useGraphQlPeopleList } from './queries';
import { useState } from 'react';
import TableUsersPersonTableSection from './data-table';
const PageUsersPersonTableSection = ({
personID,
setPersonID
}: {
personID: string;
setPersonID: (id: string) => void;
}) => {
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [sort, setSort] = useState({ createdAt: 'desc' });
const [filters, setFilters] = useState({});
const { data, isFetching, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
const handlePageChange = (newPage: number) => { setPage(newPage) };
const handlePageSizeChange = (newSize: number) => { setLimit(newSize); setPage(1) };
if (error) { return <div className="flex items-center justify-center p-8 text-red-500">Error loading users</div> }
return <TableUsersPersonTableSection
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange}
refetchTable={refetch} tableIsLoading={isLoading || isFetching} personID={personID} setPersonID={setPersonID}
/>;
};
export default PageUsersPersonTableSection;

37
frontend/pages/users/selections/people/queries.tsx Normal file
View File

@@ -0,0 +1,37 @@
'use client'
import { useQuery, useMutation } from '@tanstack/react-query'
import { schemaType } from './schema'
import { ListArguments } from '@/types/listRequest'
const fetchGraphQlPeopleList = async (params: ListArguments): Promise<{ data: schemaType[], totalCount: number }> => {
console.log('Fetching test data from local API');
const { limit, skip, sort, filters } = params;
try {
const res = await fetch('/api/people/list', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ limit, skip, sort, filters }) });
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, totalCount: data.totalCount }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
const fetchGraphQlDeletePerson = async (uuid: string, refetchTable: () => void): Promise<boolean> => {
console.log('Fetching test data from local API');
try {
const res = await fetch(`/api/people/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(); refetchTable();
return data
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
export function useGraphQlPeopleList(params: ListArguments) {
return useQuery({ queryKey: ['graphql-people-list', params], queryFn: () => fetchGraphQlPeopleList(params) })
}
export function useDeletePersonMutation() {
return useMutation({
mutationFn: ({ uuid, refetchTable }: { uuid: string, refetchTable: () => void }) => fetchGraphQlDeletePerson(uuid, refetchTable),
onSuccess: () => { console.log("Person deleted successfully") },
onError: (error) => { console.error("Delete person failed:", error) },
})
}

27
frontend/pages/users/selections/people/schema.tsx Normal file
View File

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

180
frontend/pages/users/table/columns.tsx
View File

@@ -16,118 +16,6 @@ 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 (
@@ -161,6 +49,16 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
accessorKey: "tag",
header: "Tag",
},
{
accessorKey: "isNotificationSend",
header: "Notificated?",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "isEmailSend",
header: "Email Send?",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "active",
header: "Active",
@@ -171,6 +69,11 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
header: "Confirmed",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "deleted",
header: "Deleted",
cell: ({ getValue }) => getValue() ? (<div className="text-red-600 font-medium">Yes</div>) : (<div className="text-green-600 font-medium">No</div>),
},
{
accessorKey: "createdAt",
header: "Created",
@@ -191,57 +94,16 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
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",
header: "Default Token",
cell: ({ row }) => {
const tokens = row.original.collectionTokens?.tokens ?? [];
const defaultToken = row.original.collectionTokens?.default;
if (!tokens.length) return "-";
const defaultToken = row.original.collectionTokens?.defaultSelection;
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>
defaultToken ? <div><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></div> : <div>No Default Token is registered.</div>
);
},
},

2
frontend/pages/users/table/data-table.tsx
View File

@@ -100,7 +100,7 @@ export function UserDataTable({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteUserMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }) }
const columns = getColumns(router, deleteHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)

57
frontend/pages/users/table/schema.tsx
View File

@@ -2,46 +2,23 @@ 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(),
uuid: z.string(),
expiryStarts: z.string(),
expiryEnds: z.string(),
isConfirmed: z.boolean(),
deleted: z.boolean(),
active: z.boolean(),
isNotificationSend: z.boolean(),
isEmailSend: z.boolean(),
expiresAt: z.string(),
tag: z.string(),
email: z.string(),
phone: z.string().optional(),
collectionTokens: z.object({
defaultSelection: z.string().nullable().optional(), selectedBuildIDS: z.array(z.string()).optional(), selectedCompanyIDS: z.array(z.string()).optional()
}).nullable().optional(),
createdAt: z.string(),
updatedAt: z.string(),
});
export type schemaType = z.infer<typeof schema>;

20
frontend/pages/users/types.ts
View File

@@ -1,11 +1,7 @@
interface UserToken {
prefix: string;
token: string;
}
interface CollectionTokens {
default: string;
tokens: UserToken[];
defaultSelection: string;
selectedBuildIDS: string[];
selectedCompanyIDS: string[];
}
interface User {
@@ -16,19 +12,9 @@ interface User {
isConfirmed: boolean;
deleted: boolean;
active: boolean;
crypUuId: string;
createdCredentialsToken: string;
updatedCredentialsToken: string;
confirmedCredentialsToken: string;
isNotificationSend: boolean;
isEmailSend: boolean;
refInt: number;
refId: string;
replicationId: number;
expiresAt: string;
resetToken?: string | null;
password: string;
history: string[];
tag: string;
email: string;
phone: string;

43
frontend/pages/users/update/form.tsx
View File

@@ -12,7 +12,7 @@ import { useUpdateUserMutation } from "@/pages/users/update/queries"
import { userUpdateSchema, type UserUpdate } from "@/pages/users/update/schema"
import PageAddUserSelections from "../selections/addPage"
const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: UserUpdate, selectedUuid: string }) => {
const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: any, selectedUuid: string }) => {
const form = useForm<UserUpdate>({
resolver: zodResolver(userUpdateSchema),
@@ -28,10 +28,10 @@ const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () =
})
const { handleSubmit } = form
const [defaultSelection, setDefaultSelection] = useState<string>("")
const [selectedBuildIDS, setSelectedBuildIDS] = useState<string[]>([])
const [selectedCompanyIDS, setSelectedCompanyIDS] = useState<string[]>([])
const [defaultSelection, setDefaultSelection] = useState<string>(initData.collectionTokens.defaultSelection)
const [selectedBuildIDS, setSelectedBuildIDS] = useState<string[]>(initData.collectionTokens.selectedBuildIDS)
const [selectedCompanyIDS, setSelectedCompanyIDS] = useState<string[]>(initData.collectionTokens.selectedCompanyIDS)
const [personID, setPersonID] = useState<string>(initData.person)
const appendBuildID = (id: string) => setSelectedBuildIDS((prev) => (id && !selectedBuildIDS.includes(id) ? [...prev, id] : prev))
const appendCompanyID = (id: string) => setSelectedCompanyIDS((prev) => (id && !selectedCompanyIDS.includes(id) ? [...prev, id] : prev))
@@ -40,12 +40,12 @@ const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () =
const removeCompanyID = (id: string) => setSelectedCompanyIDS((prev) => prev.filter((item) => item !== id))
const mutation = useUpdateUserMutation();
function onSubmit(values: UserUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable }); setTimeout(() => refetchTable(), 400) }
function onSubmit(values: UserUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID, refetchTable }) }
return (
<div>
<PageAddUserSelections
selectedCompanyIDS={selectedCompanyIDS} selectedBuildingIDS={selectedBuildIDS} appendCompanyID={appendCompanyID} appendBuildingID={appendBuildID}
selectedCompanyIDS={selectedCompanyIDS} selectedBuildingIDS={selectedBuildIDS} appendCompanyID={appendCompanyID} appendBuildingID={appendBuildID} personID={personID} setPersonID={setPersonID}
removeCompanyID={removeCompanyID} removeBuildingID={removeBuildID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection}
/>
<Form {...form}>
@@ -82,33 +82,6 @@ const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () =
{/* 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"
@@ -188,7 +161,7 @@ const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () =
</div>
<Separator />
<Button type="submit" className="w-full">Create User</Button>
<Button type="submit" className="w-full">Update User</Button>
</form>
</Form>
</div>

14
frontend/pages/users/update/page.tsx
View File

@@ -24,20 +24,10 @@ const PageUpdateUser = () => {
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>
</>
}
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}
/>
<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} />
</>
)

16
frontend/pages/users/update/queries.tsx
View File

@@ -1,13 +1,17 @@
'use client'
import { useMutation } from '@tanstack/react-query'
import { UserUpdate } from './types';
import { UserUpdate } from './schema';
import { toISOIfNotZ } from '@/lib/utils';
const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, refetchTable: () => void): Promise<{ data: UserUpdate | null; status: number }> => {
const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, personID: string, refetchTable: () => void): Promise<{ data: UserUpdate | null; status: number }> => {
console.log('Fetching test data from local API');
record.expiryStarts = record?.expiryStarts ? toISOIfNotZ(record.expiryStarts) : undefined;
record.expiryEnds = record?.expiryEnds ? toISOIfNotZ(record.expiryEnds) : undefined;
const payload = { ...record, person: personID, collectionTokens: { defaultSelection, selectedBuildIDS, selectedCompanyIDS } }
try {
const res = await fetch(`/api/users/update?uuid=${uuid || ''}`, { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ ...record, selectedBuildIDS, selectedCompanyIDS, defaultSelection }) });
const res = await fetch(`/api/users/update?uuid=${uuid || ''}`, { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(payload) });
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();
const data = await res.json(); refetchTable();
return { data: data.data, status: res.status }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
@@ -15,8 +19,8 @@ const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string, selecte
export function useUpdateUserMutation() {
return useMutation({
mutationFn: (
{ data, uuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable }: { data: UserUpdate, uuid: string, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, refetchTable: () => void }
) => fetchGraphQlUsersUpdate(data, uuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable),
{ data, uuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID, refetchTable }: { data: UserUpdate, uuid: string, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, personID: string, refetchTable: () => void }
) => fetchGraphQlUsersUpdate(data, uuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, personID, refetchTable),
onSuccess: () => { console.log("User updated successfully") },
onError: (error) => { console.error("Update user failed:", error) },
})

4
frontend/pages/users/update/schema.ts
View File

@@ -8,8 +8,8 @@ export const userUpdateSchema = z.object({
isConfirmed: z.boolean(),
isNotificationSend: z.boolean(),
password: z.string().min(6),
rePassword: z.string().min(6),
// password: z.string().min(6),
// rePassword: z.string().min(6),
tag: z.string().optional(),
email: z.string().email(),
phone: z.string().min(5),

81
frontend/pages/users/update/table/columns.tsx
View File

@@ -24,7 +24,7 @@ export function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
)
}
function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef<schemaType>[] {
function getColumns(deleteHandler: (id: string) => void): ColumnDef<schemaType>[] {
return [
{
accessorKey: "uuid",
@@ -32,48 +32,26 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
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: "email",
header: "Email",
},
{
accessorKey: "surname",
header: "Surname",
accessorKey: "phone",
header: "Phone",
},
{
accessorKey: "middleName",
header: "Middle Name",
accessorKey: "tag",
header: "Tag",
},
{
accessorKey: "sexCode",
header: "Sex",
accessorKey: "isNotificationSend",
header: "Notificated?",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
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: "isEmailSend",
header: "Email Send?",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "active",
@@ -86,9 +64,9 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
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: "deleted",
header: "Deleted",
cell: ({ getValue }) => getValue() ? (<div className="text-red-600 font-medium">Yes</div>) : (<div className="text-green-600 font-medium">No</div>),
},
{
accessorKey: "createdAt",
@@ -110,15 +88,36 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
header: "Expiry Ends",
cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
},
{
accessorKey: "collectionTokens.tokens",
header: "Default Token",
cell: ({ row }) => {
const defaultToken = row.original.collectionTokens?.defaultSelection;
return defaultToken ? <div><div className="flex flex-col w-full"><span className="font-mono text-xs text-muted-foreground break-all">{defaultToken}</span></div></div> : <div>No Default Token</div>;
},
},
{
accessorKey: "collectionTokens.selectedBuildIDS",
header: "Selected Build IDS",
cell: ({ row }) => {
const selectedBuildIDS = row.original.collectionTokens?.selectedBuildIDS;
return selectedBuildIDS && <div><div className="flex flex-col w-full"><span className="font-mono text-xs text-muted-foreground break-all">{selectedBuildIDS.length}</span></div></div>;
},
},
{
accessorKey: "collectionTokens.selectedCompanyIDS",
header: "Selected Company IDS",
cell: ({ row }) => {
const selectedCompanyIDS = row.original.collectionTokens?.selectedCompanyIDS;
return selectedCompanyIDS && <div><div className="flex flex-col w-full"><span className="font-mono text-xs text-muted-foreground break-all">{selectedCompanyIDS.length}</span></div></div>;
},
},
{
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>

2
frontend/pages/users/update/table/data-table.tsx
View File

@@ -100,7 +100,7 @@ export function UserDataTableUpdate({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteUserMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }) }
const columns = getColumns(router, deleteHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize, }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)

57
frontend/pages/users/update/table/schema.tsx
View File

@@ -2,46 +2,23 @@ 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(),
uuid: z.string(),
expiryStarts: z.string(),
expiryEnds: z.string(),
isConfirmed: z.boolean(),
deleted: z.boolean(),
active: z.boolean(),
isNotificationSend: z.boolean(),
isEmailSend: z.boolean(),
expiresAt: z.string(),
tag: z.string(),
email: z.string(),
phone: z.string().optional(),
collectionTokens: z.object({
defaultSelection: z.string().nullable().optional(), selectedBuildIDS: z.array(z.string()).optional(), selectedCompanyIDS: z.array(z.string()).optional()
}).nullable().optional(),
createdAt: z.string(),
updatedAt: z.string(),
});
export type schemaType = z.infer<typeof schema>;