[comp] Production Deploy

apps/portal/package.json

@@ -11,9 +11,7 @@
     "better-auth": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "next": "15.4.0-canary.85",
-    "next-international": "^1.3.1",
-    "react-email": "^4.0.15",
-    "react-otp-input": "^3.1.1"
+    "react-email": "^4.0.15"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.10",

apps/portal/src/app/[locale]/(app)/(home)/layout.tsx → apps/portal/src/app/(app)/(home)/layout.tsx

@@ -1,12 +1,9 @@
-import { getI18n } from '@/app/locales/server';
 import { SecondaryMenu } from '@comp/ui/secondary-menu';
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
-  const t = await getI18n();
-
   return (
     <>
-      <SecondaryMenu items={[{ path: '/', label: t('sidebar.dashboard') }]} />
+      <SecondaryMenu items={[{ path: '/', label: 'Employee Portal Overview' }]} />
 
       <div className="mt-8">{children}</div>
     </>

apps/portal/src/app/[locale]/(app)/(home)/page.tsx → apps/portal/src/app/(app)/(home)/page.tsx

@@ -1,11 +1,9 @@
-import { getI18n } from '@/app/locales/server';
 import type { Metadata } from 'next';
-import { setStaticParamsLocale } from 'next-international/server';
 import { Suspense } from 'react';
 import { Overview } from './components/Overview';
 
 interface HomePageProps {
-  params: Promise<{ locale: string }>;
+  params: Promise<{}>;
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }
 
@@ -22,16 +20,8 @@ export default function HomePage({ params, searchParams }: HomePageProps) {
   );
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-  const { locale } = await params;
-  setStaticParamsLocale(locale);
-  const t = await getI18n();
-
+export async function generateMetadata(): Promise<Metadata> {
   return {
-    title: t('sidebar.dashboard'),
+    title: 'Employee Portal Overview',
   };
 }

apps/portal/src/app/[locale]/(public)/auth/page.tsx → apps/portal/src/app/(public)/auth/page.tsx

@@ -1,5 +1,4 @@
 import { OtpSignIn } from '@/app/components/otp';
-import { getI18n } from '@/app/locales/server';
 import { Button } from '@comp/ui/button';
 import { ArrowRight } from 'lucide-react';
 import type { Metadata } from 'next';
@@ -10,8 +9,6 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-  const t = await getI18n();
-
   const defaultSignInOptions = (
     <div className="flex flex-col space-y-2">
       <OtpSignIn />
@@ -29,26 +26,31 @@ export default async function Page() {
                   <h1 className="font-mono text-xl font-semibold">Comp AI</h1>
                 </Link>
               </div>
-              <h2 className="mt-4 text-lg font-medium">{t('auth.title')}</h2>
+              <h2 className="mt-4 text-lg font-medium">Employee Portal</h2>
               <div className="mt-2">
-                <span className="text-muted-foreground text-xs">{t('auth.description')}</span>
+                <span className="text-muted-foreground text-xs">
+                  Enter your email address to receive a one time password.
+                </span>
               </div>
             </div>
 
             <div className="pointer-events-auto flex flex-col">{defaultSignInOptions}</div>
           </div>
 
           <div className="from-primary/10 via-primary/5 to-primary/5 mt-8 rounded-sm bg-gradient-to-r p-4">
-            <h3 className="text-sm font-medium">{t('powered_by.title')}</h3>
-            <p className="text-muted-foreground mt-1 text-xs">{t('powered_by.description')}</p>
+            <h3 className="text-sm font-medium">Comp AI - OSS Compliance Platform</h3>
+            <p className="text-muted-foreground mt-1 text-xs">
+              Get SOC 2, ISO 27001, and GDPR compliant in weeks, not months. Open source, instant
+              sign up, free trial.
+            </p>
             <Button variant="link" className="mt-2 p-0" asChild>
               <Link
                 href="https://trycomp.ai"
                 target="_blank"
                 className="hover:underline hover:underline-offset-2"
               >
                 <span className="text-primary mt-2 inline-flex items-center gap-2 text-xs font-medium">
-                  {t('powered_by.learn_more')}
+                  Start Free Trial & Get Compliant
                   <ArrowRight className="h-3 w-3" />
                 </span>
               </Link>

apps/portal/src/app/components/logout.tsx

@@ -1,13 +1,11 @@
 'use client';
 
 import { authClient } from '@/app/lib/auth-client';
-import { useI18n } from '@/app/locales/client';
 import { DropdownMenuItem } from '@comp/ui/dropdown-menu';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 export function Logout() {
-  const t = useI18n();
   const [isLoading, setLoading] = useState(false);
   const router = useRouter();
 
@@ -25,7 +23,7 @@ export function Logout() {
 
   return (
     <DropdownMenuItem onClick={handleLogout}>
-      {isLoading ? 'Loading...' : t('user_menu.sign_out')}
+      {isLoading ? 'Loading...' : 'Sign Out'}
     </DropdownMenuItem>
   );
 }

apps/portal/src/app/components/main-menu.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useI18n } from '@/app/locales/client';
 import { cn } from '@comp/ui/cn';
 import { Icons } from '@comp/ui/icons';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@comp/ui/tooltip';
@@ -92,8 +91,6 @@ type Props = {
 };
 
 export function MainMenu({ initialItems, onSelect }: Props) {
-  const t = useI18n();
-
   const defaultItems = [
     {
       path: '/',

apps/portal/src/app/components/otp-form.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from '@comp/ui/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@comp/ui/form';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@comp/ui/input-otp';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
 import { useAction } from 'next-safe-action/hooks';
@@ -11,7 +12,6 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 import { login } from '../actions/login';
-import { OtpStyledInput } from './otp-input';
 
 const INPUT_LENGTH = 6;
 
@@ -71,7 +71,17 @@ export function OtpForm({ email }: OtpFormProps) {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <OtpStyledInput numInputs={INPUT_LENGTH} {...field} />
+                <InputOTP
+                  maxLength={INPUT_LENGTH}
+                  {...field}
+                  render={({ slots }) => (
+                    <InputOTPGroup>
+                      {slots.map((slot, index) => (
+                        <InputOTPSlot key={index} {...slot} />
+                      ))}
+                    </InputOTPGroup>
+                  )}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>

apps/portal/src/app/components/otp.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { authClient } from '@/app/lib/auth-client';
-import { useI18n } from '@/app/locales/client';
 import { Button } from '@comp/ui/button';
 import { cn } from '@comp/ui/cn';
 import { Form, FormControl, FormField, FormItem } from '@comp/ui/form';
@@ -23,7 +22,6 @@ type Props = {
 };
 
 export function OtpSignIn({ className }: Props) {
-  const t = useI18n();
   const [isLoading, setLoading] = useState(false);
   const [isSent, setSent] = useState(false);
   const [_email, setEmail] = useState<string>();
@@ -72,7 +70,7 @@ export function OtpSignIn({ className }: Props) {
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder={t('auth.email.placeholder')}
+                    placeholder="Your work email"
                     {...field}
                     autoFocus
                     className="h-[40px]"
@@ -94,7 +92,7 @@ export function OtpSignIn({ className }: Props) {
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : (
               <>
-                <span>{t('auth.email.button')}</span>
+                <span>Continue</span>
                 <ArrowRight className="h-4 w-4" />
               </>
             )}

apps/portal/src/app/components/theme-switch.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useI18n } from '@/app/locales/client';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
@@ -31,22 +30,21 @@ const ThemeIcon = ({ currentTheme }: Props) => {
 };
 
 export const ThemeSwitch = () => {
-  const t = useI18n();
   const { theme, setTheme, themes } = useTheme();
 
   return (
     <div className="relative flex items-center">
       <Select defaultValue={theme} onValueChange={(value: Theme) => setTheme(value)}>
         <SelectTrigger className="h-[32px] w-full bg-transparent py-1.5 pr-3 pl-6 text-xs capitalize outline-hidden">
-          <SelectValue placeholder={t('user_menu.theme')} />
+          <SelectValue placeholder="Theme" />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
             {themes.map((theme) => (
               <SelectItem key={theme} value={theme} className="capitalize">
-                {theme.toLowerCase() === 'dark' && t('theme.options.dark')}
-                {theme.toLowerCase() === 'system' && t('theme.options.system')}
-                {theme.toLowerCase() === 'light' && t('theme.options.light')}
+                {theme.toLowerCase() === 'dark' && 'Dark'}
+                {theme.toLowerCase() === 'system' && 'System'}
+                {theme.toLowerCase() === 'light' && 'Light'}
               </SelectItem>
             ))}
           </SelectGroup>

apps/portal/src/app/components/user-menu.tsx

@@ -1,5 +1,4 @@
 import { auth } from '@/app/lib/auth';
-import { getI18n } from '@/app/locales/server';
 import { Avatar, AvatarFallback, AvatarImageNext } from '@comp/ui/avatar';
 import {
   DropdownMenu,
@@ -9,7 +8,6 @@ import {
   DropdownMenuTrigger,
 } from '@comp/ui/dropdown-menu';
 import { headers } from 'next/headers';
-import { LocaleSwitch } from './locale-switch';
 import { Logout } from './logout';
 import { ThemeSwitch } from './theme-switch';
 
@@ -32,8 +30,6 @@ function getInitials(name?: string | null, email?: string | null): string {
 }
 
 export async function UserMenu() {
-  const t = await getI18n();
-
   const session = await auth.api.getSession({
     headers: await headers(),
   });
@@ -75,14 +71,9 @@ export async function UserMenu() {
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <div className="flex flex-row items-center justify-between p-2">
-          <p className="text-sm">{t('user_menu.theme')}</p>
+          <p className="text-sm">Theme</p>
           <ThemeSwitch />
         </div>{' '}
-        <DropdownMenuSeparator />{' '}
-        <div className="flex flex-row items-center justify-between p-2">
-          <p className="text-sm">{t('user_menu.language')}</p>
-          <LocaleSwitch />
-        </div>{' '}
         <DropdownMenuSeparator />
         <Logout />
       </DropdownMenuContent>