diff --git a/apps/portal-internal/next.config.js b/apps/portal-internal/next.config.js index 9877bab..bac529f 100644 --- a/apps/portal-internal/next.config.js +++ b/apps/portal-internal/next.config.js @@ -1,7 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, - transpilePackages: ['@the-order/ui', '@the-order/schemas', '@the-order/auth'], + transpilePackages: ['@the-order/ui', '@the-order/schemas', '@the-order/auth', '@the-order/api-client'], }; module.exports = nextConfig; diff --git a/apps/portal-internal/package.json b/apps/portal-internal/package.json index 2720fa2..f1a7e48 100644 --- a/apps/portal-internal/package.json +++ b/apps/portal-internal/package.json @@ -15,7 +15,20 @@ "react-dom": "^18.2.0", "@the-order/ui": "workspace:*", "@the-order/schemas": "workspace:*", - "@the-order/auth": "workspace:*" + "@the-order/auth": "workspace:*", + "@the-order/api-client": "workspace:*", + "@tanstack/react-query": "^5.17.0", + "zustand": "^4.4.7", + "axios": "^1.6.2", + "clsx": "^2.1.0", + "tailwind-merge": "^2.2.0", + "class-variance-authority": "^0.7.0", + "lucide-react": "^0.309.0", + "react-hook-form": "^7.49.2", + "@hookform/resolvers": "^3.3.4", + "zod": "^3.22.4", + "date-fns": "^3.0.6", + "recharts": "^2.10.3" }, "devDependencies": { "@types/node": "^20.10.6", @@ -23,7 +36,11 @@ "@types/react-dom": "^18.2.18", "typescript": "^5.3.3", "eslint": "^8.57.1", - "eslint-config-next": "^14.0.4" + "eslint-config-next": "^14.0.4", + "tailwindcss": "^3.4.1", + "postcss": "^8.4.33", + "autoprefixer": "^10.4.16", + "tailwindcss-animate": "^1.0.7" } } diff --git a/apps/portal-internal/postcss.config.js b/apps/portal-internal/postcss.config.js new file mode 100644 index 0000000..c21c076 --- /dev/null +++ b/apps/portal-internal/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; + diff --git a/apps/portal-internal/src/app/audit/page.tsx b/apps/portal-internal/src/app/audit/page.tsx new file mode 100644 index 0000000..e35356c --- /dev/null +++ b/apps/portal-internal/src/app/audit/page.tsx @@ -0,0 +1,196 @@ +'use client'; + +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Select, Button, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton } from '@the-order/ui'; +import { getApiClient } from '@the-order/api-client'; + +export default function AuditPage() { + const apiClient = getApiClient(); + const [filters, setFilters] = useState({ + action: '', + credentialId: '', + subjectDid: '', + page: 1, + pageSize: 50, + }); + + const { data: auditLogs, isLoading, error } = useQuery({ + queryKey: ['audit-logs', filters], + queryFn: () => + apiClient.identity.searchAuditLogs({ + action: filters.action as 'issued' | 'revoked' | 'verified' | 'renewed' | undefined, + credentialId: filters.credentialId || undefined, + subjectDid: filters.subjectDid || undefined, + page: filters.page, + pageSize: filters.pageSize, + }), + }); + + const getActionBadge = (action: string) => { + switch (action) { + case 'issued': + return Issued; + case 'revoked': + return Revoked; + case 'verified': + return Verified; + case 'renewed': + return Renewed; + default: + return {action}; + } + }; + + return ( +
+
+
+

Audit Logs

+

Search and view audit logs for credential operations

+
+ + + + Filters + Filter audit logs by various criteria + + +
+
+ + +
+
+ + setFilters({ ...filters, credentialId: e.target.value })} + /> +
+
+ + setFilters({ ...filters, subjectDid: e.target.value })} + /> +
+
+ +
+
+ + + + + + Audit Log Entries + + {auditLogs?.total ? `${auditLogs.total} total entries` : 'No entries found'} + + + + {isLoading ? ( +
+ {[1, 2, 3, 4, 5].map((i) => ( + + ))} +
+ ) : error ? ( +

+ {error instanceof Error ? error.message : 'Failed to load audit logs'} +

+ ) : auditLogs?.logs && auditLogs.logs.length > 0 ? ( + <> + + + + Timestamp + Action + Credential ID + Subject DID + Performed By + IP Address + + + + {auditLogs.logs.map((log: any) => ( + + + {log.performed_at + ? new Date(log.performed_at).toLocaleString() + : 'N/A'} + + {getActionBadge(log.action || 'unknown')} + + {log.credential_id || 'N/A'} + + {log.subject_did || 'N/A'} + {log.performed_by || 'System'} + {log.ip_address || 'N/A'} + + ))} + +
+
+

+ Showing {auditLogs.logs.length} of {auditLogs.total} entries +

+
+ + +
+
+ + ) : ( +

No audit log entries found

+ )} + + +
+
+ ); +} + diff --git a/apps/portal-internal/src/app/credentials/issue/page.tsx b/apps/portal-internal/src/app/credentials/issue/page.tsx new file mode 100644 index 0000000..b61c70f --- /dev/null +++ b/apps/portal-internal/src/app/credentials/issue/page.tsx @@ -0,0 +1,244 @@ +'use client'; + +import { useState } from 'react'; +import { useMutation } from '@tanstack/react-query'; +import { useRouter } from 'next/navigation'; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, + Input, + Label, + Button, + Select, + Textarea, + useToast, + Alert, + AlertDescription, +} from '@the-order/ui'; +import { getApiClient } from '@the-order/api-client'; + +export default function IssueCredentialPage() { + const router = useRouter(); + const apiClient = getApiClient(); + const { success, error: showError } = useToast(); + const [formData, setFormData] = useState({ + subjectDid: '', + credentialType: 'eResident' as 'eResident' | 'eCitizen', + expirationDate: '', + givenName: '', + familyName: '', + email: '', + dateOfBirth: '', + nationality: '', + notes: '', + }); + + const mutation = useMutation({ + mutationFn: async (data: typeof formData) => { + const credentialSubject: Record = { + givenName: data.givenName, + familyName: data.familyName, + email: data.email, + }; + + if (data.dateOfBirth) { + credentialSubject.dateOfBirth = data.dateOfBirth; + } + if (data.nationality) { + credentialSubject.nationality = data.nationality; + } + + return apiClient.identity.issueCredential({ + subject: data.subjectDid, + credentialSubject, + expirationDate: data.expirationDate || undefined, + }); + }, + onSuccess: (data) => { + success('Credential issued successfully', `Credential ID: ${data.credential.id}`); + router.push('/credentials'); + }, + onError: (error) => { + showError( + error instanceof Error ? error.message : 'Failed to issue credential', + 'Issuance Error' + ); + }, + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!formData.subjectDid.trim()) { + showError('Subject DID is required', 'Validation Error'); + return; + } + if (!formData.givenName.trim() || !formData.familyName.trim()) { + showError('Given name and family name are required', 'Validation Error'); + return; + } + mutation.mutate(formData); + }; + + return ( +
+
+
+ +
+ + + + Issue New Credential + + Create and issue a new verifiable credential to a subject + + + +
+
+ + setFormData({ ...formData, subjectDid: e.target.value })} + placeholder="did:example:123456789" + className="mt-2" + /> +

+ The Decentralized Identifier (DID) of the credential subject +

+
+ +
+ + +
+ +
+
+ + setFormData({ ...formData, givenName: e.target.value })} + className="mt-2" + /> +
+
+ + setFormData({ ...formData, familyName: e.target.value })} + className="mt-2" + /> +
+
+ +
+ + setFormData({ ...formData, email: e.target.value })} + className="mt-2" + /> +
+ +
+
+ + setFormData({ ...formData, dateOfBirth: e.target.value })} + className="mt-2" + /> +
+
+ + setFormData({ ...formData, nationality: e.target.value })} + className="mt-2" + /> +
+
+ +
+ + setFormData({ ...formData, expirationDate: e.target.value })} + className="mt-2" + /> +

+ Leave empty for credentials that don't expire +

+
+ +
+ +