NORY-15: show identities in data-table

dashboard/src/app/user/data-table.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Identity } from '@ory/client';
+import { DataTable } from '@/components/ui/data-table';
+import { CircleCheck, CircleX } from 'lucide-react';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+
+interface IdentityDataTableProps {
+    data: Identity[];
+}
+
+export function IdentityDataTable({ data }: IdentityDataTableProps) {
+
+    const columns: ColumnDef<Identity>[] = [
+        {
+            id: 'id',
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            id: 'active',
+            header: 'Active',
+            cell: ({ row }) => {
+
+                const identity = row.original;
+
+                if (identity.state === 'active') {
+                    return <CircleCheck/>;
+                } else {
+                    return <CircleX/>;
+                }
+            },
+        },
+        {
+            id: 'name',
+            accessorKey: 'traits.name',
+            header: 'Name',
+        },
+        {
+            id: 'email',
+            header: 'Email',
+            cell: ({ row }) => {
+
+                const identity = row.original;
+                const email = identity.verifiable_addresses ?
+                    identity.verifiable_addresses[0] : undefined;
+
+                if (!email) {
+                    return <p>Something went wrong</p>;
+                } else {
+                    return (
+                        <div className="flex flex-row space-x-2 items-center">
+                            <span>{email.value}</span>
+                            {
+                                email.verified ?
+                                    <HoverCard>
+                                        <HoverCardTrigger>
+                                            <CircleCheck/>
+                                        </HoverCardTrigger>
+                                        <HoverCardContent>
+                                            <span>This email was confirmed at </span>
+                                            {new Date(email.verified_at!!).toLocaleString()}
+                                        </HoverCardContent>
+                                    </HoverCard>
+                                    :
+                                    <HoverCard>
+                                        <HoverCardTrigger>
+                                            <CircleX/>
+                                        </HoverCardTrigger>
+                                        <HoverCardContent>
+                                            This email is not confirmed yet
+                                        </HoverCardContent>
+                                    </HoverCard>
+                            }
+                        </div>
+                    );
+                }
+            },
+        },
+    ];
+
+    return (
+        <DataTable columns={columns} data={data}/>
+    );
+}

dashboard/src/app/user/page.tsx

@@ -1,3 +1,25 @@
+import React, { Suspense } from 'react';
+import { DataTableFallback } from '@/components/ui/data-table-fallback';
+import { IdentityDataTable } from '@/app/user/data-table';
+import { getIdentityApi } from '@/ory/sdk/server';
+
 export default async function UserPage() {
-    return <></>;
+
+    const identityApi = await getIdentityApi();
+
+    const { data } = await identityApi.listIdentities();
+
+    return (
+        <div className="flex flex-col space-y-4">
+            <div>
+                <p className="text-3xl font-bold leading-tight tracking-tight">Users</p>
+                <p className="text-lg font-light">See and manage all identities registered with your Ory Kratos
+                    instance</p>
+            </div>
+
+            <Suspense fallback={<DataTableFallback columnCount={5} rowCount={20}/>}>
+                <IdentityDataTable data={data}/>
+            </Suspense>
+        </div>
+    );
 }