+
+
+ {!isMobileViewport &&
+
+
+ )}
+
+ {session?.user || 'Account'}
+
+
+ {isAdmin ? 'Administrator' : 'User'}
+
+
+ {backTo && (
+
+
+ {backTo.label}
+
+ )}
+
+
+
+ );
+}
diff --git a/create-a-container/client/src/components/FormPageLayout.tsx b/create-a-container/client/src/components/FormPageLayout.tsx
new file mode 100644
index 00000000..0e6065d4
--- /dev/null
+++ b/create-a-container/client/src/components/FormPageLayout.tsx
@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@mieweb/ui';
+import { FormPageHeader, type FormPageHeaderProps } from './FormPageHeader';
+
+interface FormPageLayoutProps extends FormPageHeaderProps {
+ /** Optional supplementary content (tips, docs links) shown beneath the card. */
+ aside?: ReactNode;
+ /** Card heading shown above the form fields. */
+ cardTitle?: string;
+ /** Constrain the inner content width. Defaults to 2xl. */
+ maxWidth?: 'xl' | '2xl' | '3xl' | '4xl';
+ /** Form body (fields). */
+ children: ReactNode;
+ /** Action row rendered in the card footer (typically Cancel + Submit buttons). */
+ actions: ReactNode;
+}
+
+const MAX_WIDTH_CLASS = {
+ xl: 'max-w-xl',
+ '2xl': 'max-w-2xl',
+ '3xl': 'max-w-3xl',
+ '4xl': 'max-w-4xl',
+} as const;
+
+/**
+ * Centered single-column form scaffold for create/edit pages.
+ * Renders a polished hero, a flush-footer card, and optional supporting content beneath.
+ */
+export function FormPageLayout({
+ icon,
+ title,
+ subtitle,
+ description,
+ aside,
+ backTo,
+ cardTitle,
+ maxWidth = '2xl',
+ children,
+ actions,
+}: FormPageLayoutProps) {
+ return (
+
+ {icon && (
+
+ )}
+
+ {description && (
+
+
+ + {title} +
+ {subtitle &&{subtitle}
} +{description}
+ )} +
+
+ {cardTitle && (
+
+ {cardTitle}
+
+ )}
+ {children}
+
+ {actions}
+
+
+
+ {aside &&
+ );
+}
diff --git a/create-a-container/client/src/lib/api.ts b/create-a-container/client/src/lib/api.ts
new file mode 100644
index 00000000..bd1e06ce
--- /dev/null
+++ b/create-a-container/client/src/lib/api.ts
@@ -0,0 +1,146 @@
+/**
+ * Typed JSON client for /api/v1. Handles:
+ * - cookies (session)
+ * - CSRF double-submit token (fetched on demand, cached, refreshed on 403)
+ * - `{ data }` / `{ error }` envelope unwrapping
+ * - 401 → optional auth-failure handler (router decides what to do)
+ */
+
+export interface ApiErrorPayload {
+ code: string;
+ message: string;
+ fields?: Record{aside}
}
+
+
+
+
+
+ )}
+
+ {creating && (
+
+ )}
+
+ {error && {(error as ApiError).message}
+
+ )}
+
+ );
+}
diff --git a/create-a-container/client/src/pages/auth/LoginPage.tsx b/create-a-container/client/src/pages/auth/LoginPage.tsx
new file mode 100644
index 00000000..e3ff69bd
--- /dev/null
+++ b/create-a-container/client/src/pages/auth/LoginPage.tsx
@@ -0,0 +1,389 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+ Alert,
+ AlertDescription,
+ AlertTitle,
+ Button,
+ Input,
+ Spinner,
+ usePrefersReducedMotion,
+} from '@mieweb/ui';
+import {
+ ShieldCheck,
+ Smartphone,
+ AlertTriangle,
+ XCircle,
+ Eye,
+ EyeOff,
+ Lock,
+} from 'lucide-react';
+import { useLoginMutation, useDevLoginMutation, useServerInfo, fetchChallenge, type ChallengeStatus } from '@/lib/auth';
+import { ApiError } from '@/lib/api';
+import { useDocumentTitle } from '@/lib/useDocumentTitle';
+
+const schema = z.object({
+ username: z.string().min(1, 'Username is required'),
+ password: z.string().min(1, 'Password is required'),
+});
+type FormData = z.infer
+ {created.warning}
+
+
+
+
+ {created.key}
+
+
+
+ { e.preventDefault(); setCreated(null); }}>
+ Dismiss
+
+
+ + Welcome back +
++ Sign in to your Container Manager account to continue. +
+
+ Protected by push-approved sign-in.{' '}
+
+ {!reduceMotion && (
+
+ )}
+
+
+
+
+
+
+ + Approve sign-in on your device +
++ We sent a push notification to your registered device. Tap{' '} + Approve to + finish signing in. +
+
+
+
+
+
+
+
+
+ + Device not registered +
++ No device is enrolled for push 2FA on this account. Contact an administrator to receive + an enrollment invite. +
+
+
+
+
+ + Sign-in not completed +
++ {status.message || `Status: ${status.status}`} +
+
+
+ );
+ }
+ if (token && inviteError) {
+ return (
+
+
+
+
+ {state.warning && (
+
+ Notice
+ {state.warning}
+
+ )}
+
+ {state.enrollmentToken && (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/auth/ResetPasswordPage.tsx b/create-a-container/client/src/pages/auth/ResetPasswordPage.tsx
new file mode 100644
index 00000000..1687b9c2
--- /dev/null
+++ b/create-a-container/client/src/pages/auth/ResetPasswordPage.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Alert, AlertDescription, AlertTitle, Button, Input, Spinner } from '@mieweb/ui';
+import { api, ApiError } from '@/lib/api';
+import { useDocumentTitle } from '@/lib/useDocumentTitle';
+
+const schema = z
+ .object({
+ password: z.string().min(8, 'At least 8 characters'),
+ confirmPassword: z.string(),
+ })
+ .refine((d) => d.password === d.confirmPassword, {
+ message: 'Passwords do not match',
+ path: ['confirmPassword'],
+ });
+type FormData = z.infer+ {state.status === 'active' ? 'Welcome aboard' : 'Almost there'} +
++ {state.message || + (state.status === 'active' + ? 'Your account is ready. You can sign in.' + : 'Your account is awaiting administrator approval.')} +
+
+
+ {qrError}
+
+ )}
+ {qr && (
+
+ )}
+
+
+ Continue to sign in
+
+ + Enroll your second factor +
++ Scan this QR code with the push-notification app to register your device for 2FA. +
+ {qrLoading && ( +
+
+ )}
+ {qrError && (
+
+ 
+
+ Open enrollment link
+
+
+ )}
+
+
+ );
+ }
+ if (tokenError) {
+ return (
+
+
+ Reset link invalid
+ {tokenError}
+
+
+ Request a new link
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/auth/ResetPasswordRequestPage.tsx b/create-a-container/client/src/pages/auth/ResetPasswordRequestPage.tsx
new file mode 100644
index 00000000..22f5f4fe
--- /dev/null
+++ b/create-a-container/client/src/pages/auth/ResetPasswordRequestPage.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Alert, AlertDescription, AlertTitle, Button, Input } from '@mieweb/ui';
+import { api, ApiError } from '@/lib/api';
+import { useDocumentTitle } from '@/lib/useDocumentTitle';
+
+const schema = z.object({
+ usernameOrEmail: z.string().min(1, 'Required'),
+});
+type FormData = z.infer
+
+ Check your inbox
+
+ If the account exists, we sent password reset instructions.
+
+
+
+ Back to sign in
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/containers/ContainerFormPage.tsx b/create-a-container/client/src/pages/containers/ContainerFormPage.tsx
new file mode 100644
index 00000000..9b01dafd
--- /dev/null
+++ b/create-a-container/client/src/pages/containers/ContainerFormPage.tsx
@@ -0,0 +1,519 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+ Alert,
+ AlertDescription,
+ Button,
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+ Input,
+ Select,
+ Spinner,
+ Switch,
+ useToast,
+} from '@mieweb/ui';
+import { Container, Plus, Search, Trash2 } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import { FormPageHeader } from '@/components/FormPageHeader';
+import type { ContainerCreateResult, ContainerMetadata } from '@/lib/types';
+
+const SERVICE_TYPES = [
+ { value: 'http', label: 'HTTP' },
+ { value: 'https', label: 'HTTPS (backend TLS)' },
+ { value: 'tcp', label: 'TCP' },
+ { value: 'udp', label: 'UDP' },
+ { value: 'srv', label: 'DNS (SRV record)' },
+];
+
+const serviceSchema = z.object({
+ id: z.number().optional(),
+ type: z.enum(['http', 'https', 'tcp', 'udp', 'srv']),
+ internalPort: z.string(),
+ externalHostname: z.string().optional(),
+ externalDomainId: z.string().optional(),
+ dnsName: z.string().optional(),
+ authRequired: z.boolean().optional(),
+ deleted: z.boolean().optional(),
+});
+
+const envVarSchema = z.object({ key: z.string(), value: z.string() });
+
+const schema = z.object({
+ hostname: z.string().min(1, 'Required'),
+ template: z.string().optional(),
+ customTemplate: z.string().optional(),
+ entrypoint: z.string().optional(),
+ nvidiaRequested: z.boolean().optional(),
+ restart: z.boolean().optional(),
+ services: z.array(serviceSchema),
+ environmentVars: z.array(envVarSchema),
+});
+type FormData = z.infer
+
+ );
+ }
+
+ const domainOptions = [
+ { value: '', label: '— None —' },
+ ...(bootstrap?.externalDomains.map((d) => ({ value: String(d.id), label: d.name })) || []),
+ ];
+ const templateOptions = [
+ { value: '', label: 'Select a template' },
+ ...COMMON_TEMPLATES.map((t) => ({ value: t, label: t })),
+ { value: 'custom', label: 'Custom…' },
+ ];
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/containers/ContainersListPage.tsx b/create-a-container/client/src/pages/containers/ContainersListPage.tsx
new file mode 100644
index 00000000..ae6c8501
--- /dev/null
+++ b/create-a-container/client/src/pages/containers/ContainersListPage.tsx
@@ -0,0 +1,188 @@
+import { Link, useParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+ Alert,
+ AlertDescription,
+ AlertTitle,
+ Badge,
+ Button,
+ PageHeader,
+ Spinner,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+ useToast,
+} from '@mieweb/ui';
+import { Container as ContainerIcon, ExternalLink, Pencil, Plus, Trash2 } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import type { Container } from '@/lib/types';
+
+function statusVariant(s: string): 'default' | 'success' | 'warning' | 'danger' | 'secondary' {
+ switch (s) {
+ case 'running':
+ return 'success';
+ case 'pending':
+ case 'restarting':
+ return 'warning';
+ case 'failed':
+ case 'error':
+ return 'danger';
+ case 'stopped':
+ return 'secondary';
+ default:
+ return 'default';
+ }
+}
+
+export function ContainersListPage() {
+ const { siteId } = useParams<{ siteId: string }>();
+ const qc = useQueryClient();
+ const toast = useToast();
+
+ const { data: site } = useQuery({
+ queryKey: keys.site(siteId!),
+ queryFn: () => queries.getSite(siteId!),
+ enabled: !!siteId,
+ });
+ const { data, isLoading, error } = useQuery({
+ queryKey: keys.containers(siteId!),
+ queryFn: () => queries.listContainers(siteId!),
+ enabled: !!siteId,
+ });
+
+ const del = useMutation({
+ mutationFn: (id: number) => api.delete(`/api/v1/sites/${siteId}/containers/${id}`),
+ onSuccess: () => {
+ toast.success('Container deleted');
+ qc.invalidateQueries({ queryKey: keys.containers(siteId!) });
+ },
+ onError: (err: ApiError) => toast.error(err.message),
+ });
+
+ return (
+
+
+ {(error as ApiError).message}
+
+ )}
+ {isLoading && (
+
+ No containers
+ Create your first container with the button above.
+
+ )}
+
+ {data && data.length > 0 && (
+
+
+ )}
+
+ );
+}
diff --git a/create-a-container/client/src/pages/external-domains/ExternalDomainFormPage.tsx b/create-a-container/client/src/pages/external-domains/ExternalDomainFormPage.tsx
new file mode 100644
index 00000000..df44ae3e
--- /dev/null
+++ b/create-a-container/client/src/pages/external-domains/ExternalDomainFormPage.tsx
@@ -0,0 +1,181 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+ Alert,
+ AlertDescription,
+ Button,
+ Input,
+ Select,
+ Spinner,
+ useToast,
+} from '@mieweb/ui';
+import { Globe } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import { FormPageLayout } from '@/components/FormPageLayout';
+import type { ExternalDomain } from '@/lib/types';
+
+const schema = z.object({
+ name: z.string().min(1, 'Required'),
+ siteId: z.string().optional(),
+ acmeEmail: z.string().email('Must be a valid email').or(z.literal('')).optional(),
+ acmeDirectoryUrl: z.string().url('Must be a valid URL').or(z.literal('')).optional(),
+ cloudflareApiEmail: z.string().email('Must be a valid email').or(z.literal('')).optional(),
+ cloudflareApiKey: z.string().optional(),
+ authServer: z.string().optional(),
+});
+type FormData = z.infer
+
+
+
+
+ }>
+ New container
+
+
+
+ }
+ />
+
+ {error && (
+
+
+ )}
+ {data && data.length === 0 && (
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/external-domains/ExternalDomainsListPage.tsx b/create-a-container/client/src/pages/external-domains/ExternalDomainsListPage.tsx
new file mode 100644
index 00000000..36b58321
--- /dev/null
+++ b/create-a-container/client/src/pages/external-domains/ExternalDomainsListPage.tsx
@@ -0,0 +1,112 @@
+import { Link } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+ Alert,
+ AlertDescription,
+ Badge,
+ Button,
+ PageHeader,
+ Spinner,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+ useToast,
+} from '@mieweb/ui';
+import { Globe, Pencil, Plus, Trash2 } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import type { ExternalDomain } from '@/lib/types';
+
+export function ExternalDomainsListPage() {
+ const { data, isLoading, error } = useQuery({
+ queryKey: keys.externalDomains(),
+ queryFn: queries.listExternalDomains,
+ });
+ const qc = useQueryClient();
+ const toast = useToast();
+ const del = useMutation({
+ mutationFn: (id: number) => api.delete(`/api/v1/external-domains/${id}`),
+ onSuccess: () => {
+ toast.success('External domain deleted');
+ qc.invalidateQueries({ queryKey: keys.externalDomains() });
+ },
+ onError: (err: ApiError) => toast.error(err.message),
+ });
+
+ return (
+
+
+ {(error as ApiError).message}
+
+ )}
+ {isLoading && (
+
+
+ )}
+
+ );
+}
diff --git a/create-a-container/client/src/pages/groups/GroupFormPage.tsx b/create-a-container/client/src/pages/groups/GroupFormPage.tsx
new file mode 100644
index 00000000..d3172fa8
--- /dev/null
+++ b/create-a-container/client/src/pages/groups/GroupFormPage.tsx
@@ -0,0 +1,131 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+ Alert,
+ AlertDescription,
+ Button,
+ Checkbox,
+ Input,
+ Spinner,
+ useToast,
+} from '@mieweb/ui';
+import { UsersRound } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import { FormPageLayout } from '@/components/FormPageLayout';
+import type { Group } from '@/lib/types';
+
+const schema = z.object({
+ gidNumber: z.string().min(1, 'Required').regex(/^\d+$/, 'Must be a positive integer'),
+ cn: z.string().min(1, 'Required'),
+ isAdmin: z.boolean().optional(),
+});
+type FormData = z.infer
+
+ )}
+ {data && (
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/groups/GroupsListPage.tsx b/create-a-container/client/src/pages/groups/GroupsListPage.tsx
new file mode 100644
index 00000000..18e82a53
--- /dev/null
+++ b/create-a-container/client/src/pages/groups/GroupsListPage.tsx
@@ -0,0 +1,92 @@
+import { Link } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+ Alert,
+ AlertDescription,
+ Badge,
+ Button,
+ PageHeader,
+ Spinner,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+ useToast,
+} from '@mieweb/ui';
+import { Pencil, Plus, Trash2, UsersRound } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import type { Group } from '@/lib/types';
+
+export function GroupsListPage() {
+ const { data, isLoading, error } = useQuery({ queryKey: keys.groups(), queryFn: queries.listGroups });
+ const qc = useQueryClient();
+ const toast = useToast();
+ const del = useMutation({
+ mutationFn: (id: number) => api.delete(`/api/v1/groups/${id}`),
+ onSuccess: () => {
+ toast.success('Group deleted');
+ qc.invalidateQueries({ queryKey: keys.groups() });
+ },
+ onError: (err: ApiError) => toast.error(err.message),
+ });
+
+ return (
+
+ {(error as ApiError).message}
+
+ )}
+
+ );
+}
diff --git a/create-a-container/client/src/pages/jobs/JobDetailPage.tsx b/create-a-container/client/src/pages/jobs/JobDetailPage.tsx
new file mode 100644
index 00000000..d5c4035b
--- /dev/null
+++ b/create-a-container/client/src/pages/jobs/JobDetailPage.tsx
@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useParams } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import {
+ Alert,
+ AlertDescription,
+ Badge,
+ Button,
+ PageHeader,
+ Spinner,
+} from '@mieweb/ui';
+import { ArrowLeft, Terminal } from 'lucide-react';
+import { ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import type { JobStatusRow } from '@/lib/types';
+
+interface SseLogEvent {
+ id: number;
+ output: string;
+ timestamp: string;
+}
+
+function statusVariant(s: string): 'default' | 'success' | 'warning' | 'danger' | 'secondary' {
+ switch (s) {
+ case 'running':
+ return 'warning';
+ case 'completed':
+ return 'success';
+ case 'failed':
+ return 'danger';
+ case 'cancelled':
+ return 'secondary';
+ default:
+ return 'default';
+ }
+}
+
+export function JobDetailPage() {
+ const { id } = useParams<{ id: string }>();
+ const { data: job, isLoading, error, refetch } = useQuery({
+ queryKey: keys.job(id!),
+ queryFn: () => queries.getJob(id!),
+ enabled: !!id,
+ });
+
+ const [logs, setLogs] = useState
+
+ );
+}
diff --git a/create-a-container/client/src/pages/nodes/NodeFormPage.tsx b/create-a-container/client/src/pages/nodes/NodeFormPage.tsx
new file mode 100644
index 00000000..f3a36799
--- /dev/null
+++ b/create-a-container/client/src/pages/nodes/NodeFormPage.tsx
@@ -0,0 +1,192 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+ Alert,
+ AlertDescription,
+ Button,
+ Input,
+ Spinner,
+ Switch,
+ useToast,
+} from '@mieweb/ui';
+import { Server } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import { FormPageLayout } from '@/components/FormPageLayout';
+import type { Node } from '@/lib/types';
+
+const schema = z.object({
+ name: z.string().min(1, 'Required'),
+ ipv4Address: z.string().optional(),
+ apiUrl: z.string().url('Must be a valid URL').or(z.literal('')).optional(),
+ tokenId: z.string().optional(),
+ secret: z.string().optional(),
+ tlsVerify: z.boolean().optional(),
+ imageStorage: z.string().min(1, 'Required'),
+ volumeStorage: z.string().min(1, 'Required'),
+ networkBridge: z.string().min(1, 'Required'),
+ nvidiaAvailable: z.boolean().optional(),
+});
+type FormData = z.infer
+ {effectiveStatus}
+
+ Started {new Date(job.createdAt).toLocaleString()} · by {job.createdBy}
+
+
+
+
+ {logs.length === 0 ? (
+ No log output yet…
+ ) : (
+ logs.map((row) => (
+
+
+ {row.output}
+
+ ))
+ )}
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/nodes/NodeImportPage.tsx b/create-a-container/client/src/pages/nodes/NodeImportPage.tsx
new file mode 100644
index 00000000..a0a098c7
--- /dev/null
+++ b/create-a-container/client/src/pages/nodes/NodeImportPage.tsx
@@ -0,0 +1,110 @@
+import { useNavigate, useParams } from 'react-router';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Alert, AlertDescription, Button, Input, Switch, useToast } from '@mieweb/ui';
+import { Download } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys } from '@/lib/queries';
+import { FormPageLayout } from '@/components/FormPageLayout';
+
+const schema = z.object({
+ apiUrl: z.string().url('Must be a valid URL'),
+ username: z.string().min(1, 'Required'),
+ password: z.string().min(1, 'Required'),
+ tlsVerify: z.boolean().optional(),
+});
+type FormData = z.infer
+ {(error as ApiError).message}
+
+ )}
+
+ );
+}
diff --git a/create-a-container/client/src/pages/settings/SettingsPage.tsx b/create-a-container/client/src/pages/settings/SettingsPage.tsx
new file mode 100644
index 00000000..a99b301b
--- /dev/null
+++ b/create-a-container/client/src/pages/settings/SettingsPage.tsx
@@ -0,0 +1,140 @@
+import { useEffect } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+ Alert,
+ AlertDescription,
+ Button,
+ Input,
+ PageHeader,
+ Spinner,
+ Switch,
+ useToast,
+} from '@mieweb/ui';
+import { Plus, Settings as SettingsIcon, Trash2 } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import type { AppSettings } from '@/lib/types';
+
+const envVarSchema = z.object({
+ key: z.string(),
+ value: z.string(),
+ description: z.string().optional(),
+});
+
+const schema = z.object({
+ pushNotificationEnabled: z.boolean(),
+ pushNotificationUrl: z.string(),
+ pushNotificationApiKey: z.string(),
+ smtpUrl: z.string(),
+ smtpNoreplyAddress: z.string(),
+ defaultContainerEnvVars: z.array(envVarSchema),
+}).refine(
+ (v) => !v.pushNotificationEnabled || v.pushNotificationUrl.trim() !== '',
+ { path: ['pushNotificationUrl'], message: 'URL is required when push notifications are enabled' },
+);
+type FormData = z.infer
+
+ }>Import from Proxmox
+
+
+ }>New node
+
+
+ }
+ />
+ {error &&
+
+ );
+}
diff --git a/create-a-container/client/src/pages/sites/SiteFormPage.tsx b/create-a-container/client/src/pages/sites/SiteFormPage.tsx
new file mode 100644
index 00000000..e475cb49
--- /dev/null
+++ b/create-a-container/client/src/pages/sites/SiteFormPage.tsx
@@ -0,0 +1,148 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Alert, AlertDescription, Button, Input, Spinner, useToast } from '@mieweb/ui';
+import { Building2 } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import { FormPageLayout } from '@/components/FormPageLayout';
+import type { Site } from '@/lib/types';
+
+const schema = z.object({
+ name: z.string().min(1, 'Required'),
+ internalDomain: z.string().min(1, 'Required'),
+ dhcpRange: z.string().optional().nullable(),
+ subnetMask: z.string().optional().nullable(),
+ gateway: z.string().optional().nullable(),
+ dnsForwarders: z.string().optional().nullable(),
+ externalIp: z.string().optional().nullable(),
+});
+type FormData = z.infer
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/create-a-container/client/src/pages/sites/SitesListPage.tsx b/create-a-container/client/src/pages/sites/SitesListPage.tsx
new file mode 100644
index 00000000..20c06e1d
--- /dev/null
+++ b/create-a-container/client/src/pages/sites/SitesListPage.tsx
@@ -0,0 +1,134 @@
+import { Link } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+ Alert,
+ AlertDescription,
+ AlertTitle,
+ Badge,
+ Button,
+ PageHeader,
+ Spinner,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+ useToast,
+} from '@mieweb/ui';
+import { Building2, Pencil, Plus, Trash2 } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+import { keys, queries } from '@/lib/queries';
+import { useSession } from '@/lib/auth';
+import type { Site } from '@/lib/types';
+
+export function SitesListPage() {
+ const { data: session } = useSession();
+ const { data, isLoading, error } = useQuery({
+ queryKey: keys.sites(),
+ queryFn: queries.listSites,
+ });
+ const qc = useQueryClient();
+ const toast = useToast();
+ const del = useMutation({
+ mutationFn: (id: number) => api.delete(`/api/v1/sites/${id}`),
+ onSuccess: () => {
+ toast.success('Site deleted');
+ qc.invalidateQueries({ queryKey: keys.sites() });
+ },
+ onError: (err: ApiError) => toast.error(err.message),
+ });
+
+ return (
+
+
+ Failed to load sites
+ {(error as ApiError).message}
+
+ )}
+ {isLoading && (
+
+ No sites yet
+ Create a site to begin managing nodes and containers.
+
+ )}
+ {data && data.length > 0 && (
+
+
+ )}
+
+ );
+}
diff --git a/create-a-container/client/src/pages/users/EmailAllModal.tsx b/create-a-container/client/src/pages/users/EmailAllModal.tsx
new file mode 100644
index 00000000..ef1cd7a6
--- /dev/null
+++ b/create-a-container/client/src/pages/users/EmailAllModal.tsx
@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import {
+ Button,
+ Input,
+ Modal,
+ ModalBody,
+ ModalClose,
+ ModalFooter,
+ ModalHeader,
+ ModalTitle,
+ Textarea,
+ useToast,
+} from '@mieweb/ui';
+import { Send } from 'lucide-react';
+import { api, ApiError } from '@/lib/api';
+
+interface EmailAllModalProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ recipientCount: number;
+}
+
+interface EmailAllResponse {
+ sent: number;
+ failed: number;
+ recipients: number;
+}
+
+export function EmailAllModal({ open, onOpenChange, recipientCount }: EmailAllModalProps) {
+ const toast = useToast();
+ const [subject, setSubject] = useState('');
+ const [message, setMessage] = useState('');
+
+ const mutation = useMutation
+
+ )}
+ {data && data.length === 0 && (
+
-
-
-<%- include('../layouts/footer') %>
-
-Invite User
-- Send an invitation email to a new user. They will receive a link to register their account, - and their account will be automatically activated upon registration. -
- - -