for production

Author: aldughairi

README.md

@@ -2,6 +2,16 @@
 
 A production-ready approvals system built with Next.js, featuring role-based access control for CEO and Executive users. Executives create requests with multiple suggestions, and CEOs review and make decisions.
 
+## 🧩 Project Idea (What and Why)
+
+Organizations routinely need clear, auditable decisions on proposals (budgets, policies, purchases). Email threads and chat messages are hard to track and easy to lose. This project provides a focused approvals workflow where:
+
+- Executives submit a request with 2–10 concrete suggestions/options.
+- A CEO reviews the context and either chooses an option, writes a custom decision, or rejects the request.
+- Every action is captured in an immutable audit trail for accountability and compliance.
+
+The result is a transparent, structured, and fast decision-making process with role-based access, localization (AR/EN), and a modern, responsive UI.
+
 ## 🚀 Features
 
 ### Core Functionality
@@ -183,30 +193,110 @@ Test coverage includes:
 
 ## 🚀 Deployment
 
-### Environment Variables
+This guide covers production deployment using Yarn, Docker, and Vercel.
+
+### 1) Environment Variables
+Create `.env` from `env.example` and set the following:
+
 ```bash
 DATABASE_URL="postgresql://user:pass@host:port/db"
 NEXTAUTH_SECRET="your-production-secret"
 NEXTAUTH_URL="https://your-domain.com"
 NODE_ENV="production"
 ```
 
-### Build and Deploy
+Notes:
+- Set `NEXTAUTH_URL` to your public URL (e.g. `https://app.example.com`).
+- Generate a strong `NEXTAUTH_SECRET` (e.g. `openssl rand -base64 32`).
+- Ensure the database is reachable from your hosting environment.
+
+### 2) Production Build & Run (Node.js server)
+
 ```bash
-# Build the application
-npm run build
+# Install deps
+yarn install --frozen-lockfile
+
+# Generate Prisma client
+yarn prisma:generate
 
-# Start production server
-npm start
+# Apply migrations
+yarn prisma:deploy
+
+# Build Next.js (standalone output is enabled in next.config.js)
+yarn build
+
+# Start server
+yarn start
+```
+
+Optional: systemd service (Linux)
+
+```ini
+[Unit]
+Description=Approvals Next.js
+After=network.target
+
+[Service]
+Type=simple
+WorkingDirectory=/var/www/approvals-nextjs
+Environment=NODE_ENV=production
+EnvironmentFile=/var/www/approvals-nextjs/.env
+ExecStart=/usr/bin/yarn start
+Restart=always
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
 ```
 
-### Docker Production
+### 3) Docker Deployment
+
+Build and run the standalone server image:
+
 ```bash
-# Build production image
+# Build image
 docker build -t approvals-system .
 
-# Run with environment variables
-docker run -p 3000:3000 --env-file .env approvals-system
+# Run container
+docker run --name approvals \
+  --env-file .env \
+  -p 3000:3000 \
+  approvals-system
+```
+
+With Docker Compose (database + app):
+
+```bash
+# Start services in background
+yarn docker:up
+
+# Apply migrations inside the app container (first run)
+docker exec -it $(docker ps -qf name=approvals) yarn prisma:deploy
+```
+
+### 4) Vercel Deployment
+
+Vercel is well-suited for Next.js deployments:
+- Connect your Git repository in Vercel.
+- Set environment variables in the Vercel dashboard (`DATABASE_URL`, `NEXTAUTH_SECRET`, `NEXTAUTH_URL`).
+- Ensure your database allows connections from Vercel (or use a managed Postgres like Neon/Supabase/PlanetScale compatible).
+
+Prisma on Vercel:
+- Use `prisma migrate deploy` during build via a Vercel Build Step or CI step before deployment.
+- Alternatively, run migrations from a CI/CD pipeline or a one-off script targeting the same database.
+
+No extra configuration is required for Next.js 15 app router. This project already sets `output: 'standalone'`.
+
+### 5) Health Checks
+
+After deployment, verify:
+
+```bash
+# App responds
+curl -I https://your-domain.com | head -n 1
+
+# Sign-in route (localized)
+curl -I https://your-domain.com/ar/sign-in | head -n 1
 ```
 
 ## 🔧 Development Scripts

app/dashboard/page.tsx app/[locale]/dashboard/page.tsxapp/dashboard/page.tsx renamed to app/[locale]/dashboard/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { useSession } from 'next-auth/react'
+import { useTranslations } from 'next-intl'
 import { MainLayout } from '@/components/layout/main-layout'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
@@ -17,6 +18,7 @@ import { type RequestListItem, type RequestStatus, type PaginatedResponse, type
 
 export default function DashboardPage() {
   const { data: session } = useSession()
+  const t = useTranslations('dashboard')
   const [requests, setRequests] = useState<RequestListItem[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)

app/[locale]/layout.tsx

@@ -0,0 +1,28 @@
+import {NextIntlClientProvider} from 'next-intl'
+import {getMessages, setRequestLocale} from 'next-intl/server'
+
+interface LocaleLayoutProps {
+  children: React.ReactNode
+  params: { locale: string }
+}
+
+export default async function LocaleLayout({
+  children,
+  params
+}: LocaleLayoutProps) {
+  const { locale } = params
+  setRequestLocale(locale)
+
+  const isRTL = locale === 'ar'
+  const messages = await getMessages()
+
+  return (
+    <NextIntlClientProvider messages={messages} locale={locale}>
+      <div dir={isRTL ? 'rtl' : 'ltr'}>{children}</div>
+    </NextIntlClientProvider>
+  )
+}
+
+export function generateStaticParams() {
+  return [{ locale: 'en' }, { locale: 'ar' }]
+}

app/my-requests/page.tsx app/[locale]/my-requests/page.tsxapp/my-requests/page.tsx renamed to app/[locale]/my-requests/page.tsx

@@ -0,0 +1,86 @@
+import Link from 'next/link'
+import {getTranslations} from 'next-intl/server'
+
+interface HomePageProps {
+  params: { locale: string }
+}
+
+export default async function HomePage({ params }: HomePageProps) {
+  const { locale } = params
+  const tNav = await getTranslations('navigation')
+  const tCommon = await getTranslations('common')
+  const tAuth = await getTranslations('auth')
+
+  return (
+    <main className="min-h-[80vh] bg-gradient-to-b from-white to-slate-50 py-16">
+      <div className="container mx-auto px-4">
+        <section className="text-center max-w-3xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight">
+            {tNav('appTitle')}
+          </h1>
+          <p className="mt-4 text-muted-foreground text-lg">
+            {locale === 'ar'
+              ? 'أنشئ الطلبات ووافق عليها بسهولة مع سجل تدقيق كامل.'
+              : 'Create and approve requests with a complete audit trail.'}
+          </p>
+
+          <div className="mt-8 flex items-center justify-center gap-3">
+            <Link
+              href={`/${locale}/sign-in`}
+              className="inline-flex items-center rounded-md bg-primary px-5 py-2.5 text-white shadow hover:opacity-95 focus:outline-none focus:ring-2 focus:ring-primary/30"
+            >
+              {tAuth('signIn')}
+            </Link>
+            <Link
+              href={`/${locale}/my-requests`}
+              className="inline-flex items-center rounded-md border px-5 py-2.5 text-foreground hover:bg-secondary"
+            >
+              {locale === 'ar' ? 'طلباتي' : 'My Requests'}
+            </Link>
+          </div>
+        </section>
+
+        <section className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded-lg border bg-card p-6 shadow-sm">
+            <h3 className="text-lg font-semibold">
+              {locale === 'ar' ? 'قرارات مرنة' : 'Flexible Decisions'}
+            </h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {locale === 'ar'
+                ? 'اختر اقتراحاً أو أدخل قراراً مخصصاً أو ارفض الطلب.'
+                : 'Choose a suggestion, enter a custom decision, or reject.'}
+            </p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 shadow-sm">
+            <h3 className="text-lg font-semibold">
+              {locale === 'ar' ? 'تتبع كامل' : 'Full Traceability'}
+            </h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {locale === 'ar'
+                ? 'سجل تدقيق يوضح جميع الإجراءات بالتوقيتات.'
+                : 'Audit trail capturing every action with timestamps.'}
+            </p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 shadow-sm">
+            <h3 className="text-lg font-semibold">
+              {locale === 'ar' ? 'واجهة حديثة' : 'Modern UI'}
+            </h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {locale === 'ar'
+                ? 'مصمم بـ Tailwind و shadcn/ui مع دعم RTL.'
+                : 'Built with Tailwind and shadcn/ui with RTL support.'}
+            </p>
+          </div>
+        </section>
+
+        <div className="mt-14 text-center text-sm text-muted-foreground">
+          <span className="rounded bg-secondary px-2 py-1">
+            {tCommon('confirm')} • {locale.toUpperCase()}
+          </span>
+        </div>
+      </div>
+    </main>
+  )
+}

app/[locale]/page.tsx

@@ -5,17 +5,22 @@ import { signIn } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslations, useLocale } from 'next-intl'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { LoadingSpinner } from '@/components/ui/loading-spinner'
+import { LanguageSwitcher } from '@/components/ui/language-switcher'
 import { signInSchema, type SignInInput } from '@/lib/validations'
 
 export default function SignInPage() {
   const [error, setError] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const router = useRouter()
+  const t = useTranslations('auth')
+  const tNav = useTranslations('navigation')
+  const locale = useLocale()
 
   const {
     register,
@@ -37,12 +42,12 @@ export default function SignInPage() {
       })
 
       if (result?.error) {
-        setError('Invalid email or password')
+        setError(t('invalidCredentials'))
       } else {
         router.refresh()
       }
     } catch (err) {
-      setError('An unexpected error occurred')
+      setError(t('invalidCredentials'))
     } finally {
       setIsLoading(false)
     }
@@ -52,25 +57,28 @@ export default function SignInPage() {
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-900">Approvals System</h1>
-          <p className="mt-2 text-gray-600">Sign in to your account</p>
+          <div className="flex justify-between items-center mb-4">
+            <h1 className="text-3xl font-bold text-gray-900">{tNav('appTitle')}</h1>
+            <LanguageSwitcher />
+          </div>
+          <p className="mt-2 text-gray-600">{t('signIn')}</p>
         </div>
 
         <Card>
           <CardHeader>
-            <CardTitle>Sign In</CardTitle>
+            <CardTitle>{t('signIn')}</CardTitle>
             <CardDescription>
-              Enter your credentials to access the system
+              {t('enterCredentials')}
             </CardDescription>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
               <div>
-                <Label htmlFor="email">Email</Label>
+                <Label htmlFor="email">{t('email')}</Label>
                 <Input
                   id="email"
                   type="email"
-                  placeholder="Enter your email"
+                  placeholder={t('enterEmail')}
                   {...register('email')}
                   disabled={isLoading}
                 />
@@ -80,11 +88,11 @@ export default function SignInPage() {
               </div>
 
               <div>
-                <Label htmlFor="password">Password</Label>
+                <Label htmlFor="password">{t('password')}</Label>
                 <Input
                   id="password"
                   type="password"
-                  placeholder="Enter your password"
+                  placeholder={t('enterPassword')}
                   {...register('password')}
                   disabled={isLoading}
                 />
@@ -106,17 +114,17 @@ export default function SignInPage() {
               >
                 {isLoading ? (
                   <div className="flex items-center justify-center">
-                    <LoadingSpinner size="sm" className="mr-2" />
-                    Signing in...
+                    <LoadingSpinner size="sm" className={locale === 'ar' ? 'ml-2' : 'mr-2'} />
+                    {t('signingIn')}
                   </div>
                 ) : (
-                  'Sign In'
+                  t('signIn')
                 )}
               </Button>
             </form>
 
             <div className="mt-6 text-sm text-gray-600">
-              <p className="font-semibold">Demo Accounts:</p>
+              <p className="font-semibold">{t('demoAccounts')}:</p>
               <div className="mt-2 space-y-1">
                 <p><strong>CEO:</strong> ceo@example.com / Passw0rd!</p>
                 <p><strong>Executive:</strong> exec@example.com / Passw0rd!</p>

app/requests/[id]/page.tsx app/[locale]/requests/[id]/page.tsxapp/requests/[id]/page.tsx renamed to app/[locale]/requests/[id]/page.tsx

@@ -0,0 +1,18 @@
+interface TestPageProps {
+  params: Promise<{ locale: string }>
+}
+
+export default async function TestPage({ params }: TestPageProps) {
+  const { locale } = await params
+  
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
+      <h1>Test Page</h1>
+      <p>Current locale: {locale}</p>
+      <p>This is a test page to verify locale routing works.</p>
+      <div style={{ direction: locale === 'ar' ? 'rtl' : 'ltr' }}>
+        <p>{locale === 'ar' ? 'مرحبا بك في صفحة الاختبار' : 'Welcome to the test page'}</p>
+      </div>
+    </div>
+  )
+}