@mettlecast/domain-cli 0.2.2 → 0.2.4

package/src/templates/dashboard-pages/auth/login.tsx

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { signIn } from '@mettlecast/dashboard-shell';
-import { TibFormField, TibFormError, TibSubmitButton } from '../../components/ui/mc-form';
-
-export function LoginPage() {
-  const navigate = useNavigate();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    try {
-      await signIn(email, password);
-      navigate('/');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Sign in failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
-          <p className="text-sm text-muted-foreground mt-1">Enter your credentials to continue</p>
-        </div>
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <TibFormField name="email" label="Email">
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={e => setEmail(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required
-              autoComplete="email"
-              autoFocus
-            />
-          </TibFormField>
-          <TibFormField name="password" label="Password">
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required
-              autoComplete="current-password"
-            />
-          </TibFormField>
-          <div className="text-right">
-            <Link to="/forgot-password" className="text-sm text-primary hover:underline underline-offset-4">
-              Forgot password?
-            </Link>
-          </div>
-          <TibFormError error={error} />
-          <TibSubmitButton loading={loading} className="w-full">Sign in</TibSubmitButton>
-        </form>
-        <p className="text-center text-sm text-muted-foreground">
-          No account?{' '}
-          <Link to="/signup" className="text-primary hover:underline underline-offset-4">Create one</Link>
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default LoginPage;

package/src/templates/dashboard-pages/auth/mfa-setup.tsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useApi } from '@mettlecast/sdk';
-import { TibFormField, TibFormError, TibSubmitButton } from '../../components/ui/mc-form';
-
-export function MfaSetupPage() {
-  const tib = useApi();
-  const navigate = useNavigate();
-  const [code, setCode] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const totpUri = (tib as any)?.auth?.getTotpUri?.() ?? '';
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    try {
-      await (tib as any)?.auth?.verifyTotpSetup({ code });
-      navigate('/');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'MFA setup failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Set up two-factor authentication</h1>
-          <p className="text-sm text-muted-foreground mt-1">Scan the QR code with your authenticator app</p>
-        </div>
-        {totpUri && (
-          <div className="flex justify-center">
-            <img src={`https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(totpUri)}`}
-              alt="TOTP QR code" className="rounded-md border border-border" width={180} height={180} />
-          </div>
-        )}
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <TibFormField name="code" label="6-digit code">
-            <input id="code" type="text" inputMode="numeric" pattern="[0-9]{6}" value={code}
-              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm tracking-widest text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="one-time-code" autoFocus maxLength={6} />
-          </TibFormField>
-          <TibFormError error={error} />
-          <TibSubmitButton loading={loading} className="w-full">Enable MFA</TibSubmitButton>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default MfaSetupPage;

package/src/templates/dashboard-pages/auth/mfa-verify.tsx

@@ -1,49 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useApi } from '@mettlecast/sdk';
-import { TibFormField, TibFormError, TibSubmitButton } from '../../components/ui/mc-form';
-
-export function MfaVerifyPage() {
-  const tib = useApi();
-  const navigate = useNavigate();
-  const [code, setCode] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    try {
-      await (tib as any)?.auth?.verifyMfa({ code });
-      navigate('/');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Verification failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Two-factor authentication</h1>
-          <p className="text-sm text-muted-foreground mt-1">Enter the code from your authenticator app</p>
-        </div>
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <TibFormField name="code" label="Authentication code">
-            <input id="code" type="text" inputMode="numeric" pattern="[0-9]{6}" value={code}
-              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm tracking-widest text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="one-time-code" autoFocus maxLength={6} />
-          </TibFormField>
-          <TibFormError error={error} />
-          <TibSubmitButton loading={loading} className="w-full">Verify</TibSubmitButton>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default MfaVerifyPage;

package/src/templates/dashboard-pages/auth/reset-password.tsx

@@ -1,64 +0,0 @@
-import { useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useApi } from '@mettlecast/sdk';
-import { TibFormField, TibFormError, TibSubmitButton } from '../../components/ui/mc-form';
-
-export function ResetPasswordPage() {
-  const tib = useApi();
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const email = searchParams.get('email') ?? '';
-  const [code, setCode] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirm, setConfirm] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (password !== confirm) { setError('Passwords do not match'); return; }
-    setLoading(true);
-    setError(null);
-    try {
-      await (tib as any)?.auth?.confirmForgotPassword({ email, code, newPassword: password });
-      navigate('/login');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Reset failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Set new password</h1>
-          <p className="text-sm text-muted-foreground mt-1">Enter the code from your email and a new password</p>
-        </div>
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <TibFormField name="code" label="Reset code">
-            <input id="code" type="text" inputMode="numeric" value={code}
-              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm tracking-widest text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="one-time-code" autoFocus maxLength={6} />
-          </TibFormField>
-          <TibFormField name="password" label="New password">
-            <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="new-password" minLength={8} />
-          </TibFormField>
-          <TibFormField name="confirm" label="Confirm password">
-            <input id="confirm" type="password" value={confirm} onChange={e => setConfirm(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="new-password" />
-          </TibFormField>
-          <TibFormError error={error} />
-          <TibSubmitButton loading={loading} className="w-full">Reset password</TibSubmitButton>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default ResetPasswordPage;

package/src/templates/dashboard-pages/auth/sign-out.tsx

@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { signOut } from '@mettlecast/dashboard-shell';
-
-export function SignOutPage() {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    signOut();
-    navigate('/login', { replace: true });
-  }, [navigate]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <p className="text-sm text-muted-foreground">Signing out…</p>
-    </div>
-  );
-}
-
-export default SignOutPage;

package/src/templates/dashboard-pages/auth/signup.tsx

@@ -1,71 +0,0 @@
-import { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { useApi } from '@mettlecast/sdk';
-import { TibFormField, TibFormError, TibSubmitButton } from '../../components/ui/mc-form';
-
-export function SignupPage() {
-  const tib = useApi();
-  const navigate = useNavigate();
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [orgName, setOrgName] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    try {
-      // tib.auth.signUp is implemented by the auth domain
-      await (tib as any)?.auth?.signUp({ name, email, password, orgName });
-      navigate('/verify-email', { state: { email } });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Sign up failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Create account</h1>
-          <p className="text-sm text-muted-foreground mt-1">Set up your workspace</p>
-        </div>
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <TibFormField name="name" label="Full name">
-            <input id="name" type="text" value={name} onChange={e => setName(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="name" autoFocus />
-          </TibFormField>
-          <TibFormField name="orgName" label="Organisation name">
-            <input id="orgName" type="text" value={orgName} onChange={e => setOrgName(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="organization" />
-          </TibFormField>
-          <TibFormField name="email" label="Work email">
-            <input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="email" />
-          </TibFormField>
-          <TibFormField name="password" label="Password">
-            <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="new-password" minLength={8} />
-          </TibFormField>
-          <TibFormError error={error} />
-          <TibSubmitButton loading={loading} className="w-full">Create account</TibSubmitButton>
-        </form>
-        <p className="text-center text-sm text-muted-foreground">
-          Already have an account?{' '}
-          <Link to="/login" className="text-primary hover:underline underline-offset-4">Sign in</Link>
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default SignupPage;

package/src/templates/dashboard-pages/auth/verify-email.tsx

@@ -1,53 +0,0 @@
-import { useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useApi } from '@mettlecast/sdk';
-import { TibFormField, TibFormError, TibSubmitButton } from '../../components/ui/mc-form';
-
-export function VerifyEmailPage() {
-  const tib = useApi();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const email = (location.state as { email?: string })?.email ?? '';
-  const [code, setCode] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    try {
-      await (tib as any)?.auth?.confirmSignUp({ email, code });
-      navigate('/login');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Verification failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Verify your email</h1>
-          <p className="text-sm text-muted-foreground mt-1">
-            We sent a 6-digit code to <strong>{email || 'your email'}</strong>
-          </p>
-        </div>
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          <TibFormField name="code" label="Verification code">
-            <input id="code" type="text" inputMode="numeric" pattern="[0-9]{6}" value={code}
-              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm tracking-widest text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              required autoComplete="one-time-code" autoFocus maxLength={6} />
-          </TibFormField>
-          <TibFormError error={error} />
-          <TibSubmitButton loading={loading} className="w-full">Verify email</TibSubmitButton>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default VerifyEmailPage;

package/src/templates/dashboard-pages/index.ts

@@ -1,22 +0,0 @@
-export const PAGE_REGISTRY = [
-  { id: 'login',               category: 'auth',    path: 'auth/login.tsx',                name: 'LoginPage' },
-  { id: 'signup',              category: 'auth',    path: 'auth/signup.tsx',               name: 'SignupPage' },
-  { id: 'verify-email',        category: 'auth',    path: 'auth/verify-email.tsx',         name: 'VerifyEmailPage' },
-  { id: 'forgot-password',     category: 'auth',    path: 'auth/forgot-password.tsx',      name: 'ForgotPasswordPage' },
-  { id: 'reset-password',      category: 'auth',    path: 'auth/reset-password.tsx',       name: 'ResetPasswordPage' },
-  { id: 'mfa-setup',           category: 'auth',    path: 'auth/mfa-setup.tsx',            name: 'MfaSetupPage' },
-  { id: 'mfa-verify',          category: 'auth',    path: 'auth/mfa-verify.tsx',           name: 'MfaVerifyPage' },
-  { id: 'accept-invitation',   category: 'auth',    path: 'auth/accept-invitation.tsx',    name: 'AcceptInvitationPage' },
-  { id: 'choose-org',          category: 'auth',    path: 'auth/choose-org.tsx',           name: 'ChooseOrgPage' },
-  { id: 'sign-out',            category: 'auth',    path: 'auth/sign-out.tsx',             name: 'SignOutPage' },
-  { id: 'dashboard-home',      category: 'shell',   path: 'shell/dashboard-home.tsx',      name: 'DashboardHomePage' },
-  { id: 'not-found',           category: 'shell',   path: 'shell/not-found.tsx',           name: 'NotFoundPage' },
-  { id: 'forbidden',           category: 'shell',   path: 'shell/forbidden.tsx',           name: 'ForbiddenPage' },
-  { id: 'server-error',        category: 'shell',   path: 'shell/server-error.tsx',        name: 'ServerErrorPage' },
-  { id: 'maintenance',         category: 'shell',   path: 'shell/maintenance.tsx',         name: 'MaintenancePage' },
-  { id: 'profile',             category: 'account', path: 'account/profile.tsx',           name: 'ProfilePage' },
-  { id: 'workspace-settings',  category: 'account', path: 'account/workspace-settings.tsx',name: 'WorkspaceSettingsPage' },
-  { id: 'members',             category: 'account', path: 'account/members.tsx',           name: 'MembersPage' },
-  { id: 'api-keys',            category: 'account', path: 'account/api-keys.tsx',          name: 'ApiKeysPage' },
-  { id: 'audit-log',           category: 'account', path: 'account/audit-log.tsx',         name: 'AuditLogPage' },
-] as const;

package/src/templates/dashboard-pages/shell/dashboard-home.tsx

@@ -1,41 +0,0 @@
-import { useApi } from '@mettlecast/sdk';
-import { useProject } from '@mettlecast/dashboard-shell';
-
-export function DashboardHomePage() {
-  const tib = useApi();
-  const { projectId, workspaceId } = useProject();
-
-  return (
-    <div className="p-6 space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          Workspace <code className="text-xs font-mono bg-muted px-1 py-0.5 rounded">{workspaceId}</code>
-          {projectId && (
-            <> · Project <code className="text-xs font-mono bg-muted px-1 py-0.5 rounded">{projectId}</code></>
-          )}
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <div className="rounded-lg border border-border bg-card p-6 space-y-2">
-          <h2 className="text-sm font-medium text-muted-foreground">Getting started</h2>
-          <p className="text-sm">Your domain modules will appear here once deployed.</p>
-        </div>
-        <div className="rounded-lg border border-border bg-card p-6 space-y-2">
-          <h2 className="text-sm font-medium text-muted-foreground">Activity</h2>
-          <p className="text-sm text-muted-foreground">No recent activity.</p>
-        </div>
-        <div className="rounded-lg border border-border bg-card p-6 space-y-2">
-          <h2 className="text-sm font-medium text-muted-foreground">Status</h2>
-          <div className="flex items-center gap-2">
-            <div className="h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
-            <span className="text-sm">All systems operational</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default DashboardHomePage;

package/src/templates/dashboard-pages/shell/forbidden.tsx

@@ -1,46 +0,0 @@
-import { useNavigate, useSearchParams } from 'react-router-dom';
-
-type ForbiddenReason = 'TENANT_MISMATCH' | 'ROLE_DENIED' | 'GENERIC';
-
-const MESSAGES: Record<ForbiddenReason, { title: string; description: string }> = {
-  TENANT_MISMATCH: {
-    title: 'Wrong workspace',
-    description: 'This resource belongs to a different workspace. Check the URL and try again.',
-  },
-  ROLE_DENIED: {
-    title: 'Insufficient permissions',
-    description: 'You don\'t have the required role to access this page. Contact your workspace admin.',
-  },
-  GENERIC: {
-    title: 'Access denied',
-    description: 'You don\'t have permission to view this page.',
-  },
-};
-
-export function ForbiddenPage() {
-  const navigate = useNavigate();
-  const [params] = useSearchParams();
-  const reason = (params.get('reason') as ForbiddenReason | null) ?? 'GENERIC';
-  const { title, description } = MESSAGES[reason] ?? MESSAGES.GENERIC;
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="text-center space-y-4 max-w-md">
-        <p className="text-8xl font-bold text-muted-foreground/30 select-none" aria-hidden="true">403</p>
-        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        <p className="text-sm text-muted-foreground">{description}</p>
-        <div className="flex gap-3 justify-center pt-2">
-          <button
-            type="button"
-            onClick={() => navigate('/')}
-            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            Go to dashboard
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ForbiddenPage;

package/src/templates/dashboard-pages/shell/index.ts

@@ -1,5 +0,0 @@
-export { DashboardHomePage } from './dashboard-home';
-export { NotFoundPage } from './not-found';
-export { ForbiddenPage } from './forbidden';
-export { ServerErrorPage } from './server-error';
-export { MaintenancePage } from './maintenance';

package/src/templates/dashboard-pages/shell/maintenance.tsx

@@ -1,27 +0,0 @@
-export function MaintenancePage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="text-center space-y-4 max-w-md">
-        <div className="text-5xl" role="img" aria-label="Under maintenance">🔧</div>
-        <h1 className="text-2xl font-semibold tracking-tight">Down for maintenance</h1>
-        <p className="text-sm text-muted-foreground">
-          We're making improvements. Please check back shortly.
-        </p>
-        <p className="text-xs text-muted-foreground">
-          Follow{' '}
-          <a
-            href="https://status.mettlecast.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline underline-offset-4 hover:text-foreground"
-          >
-            status.mettlecast.com
-          </a>
-          {' '}for updates.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default MaintenancePage;

package/src/templates/dashboard-pages/shell/not-found.tsx

@@ -1,34 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-export function NotFoundPage() {
-  const navigate = useNavigate();
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="text-center space-y-4 max-w-md">
-        <p className="text-8xl font-bold text-muted-foreground/30 select-none" aria-hidden="true">404</p>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="text-sm text-muted-foreground">
-          The page you're looking for doesn't exist or has been moved.
-        </p>
-        <div className="flex gap-3 justify-center pt-2">
-          <button
-            type="button"
-            onClick={() => navigate(-1)}
-            className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4"
-          >
-            Go back
-          </button>
-          <button
-            type="button"
-            onClick={() => navigate('/')}
-            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            Go to dashboard
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default NotFoundPage;

package/src/templates/dashboard-pages/shell/server-error.tsx

@@ -1,44 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-interface ServerErrorPageProps {
-  traceId?: string;
-}
-
-export function ServerErrorPage({ traceId }: ServerErrorPageProps = {}) {
-  const navigate = useNavigate();
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="text-center space-y-4 max-w-md">
-        <p className="text-8xl font-bold text-muted-foreground/30 select-none" aria-hidden="true">500</p>
-        <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
-        <p className="text-sm text-muted-foreground">
-          An unexpected error occurred. Our team has been notified.
-        </p>
-        {traceId && (
-          <p className="text-xs text-muted-foreground font-mono">
-            Trace ID: {traceId}
-          </p>
-        )}
-        <div className="flex gap-3 justify-center pt-2">
-          <button
-            type="button"
-            onClick={() => window.location.reload()}
-            className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4"
-          >
-            Retry
-          </button>
-          <button
-            type="button"
-            onClick={() => navigate('/')}
-            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            Go to dashboard
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ServerErrorPage;