feat: i18n — EN/MS/ZH translations with cookie-based locale switching, report form translated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FFDuBhMKvoWjrWT3ZnGmmr
2026-07-11 19:01:44 +08:00
parent c67c489ab3
commit 87264a5497
12 changed files with 372 additions and 52 deletions
@@ -1,33 +1,50 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+import { I18nProvider } from '@/lib/i18n/context'
+import { getLocale, loadMessages } from '@/lib/i18n/server'

 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})

 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})

 export const metadata: Metadata = {
-  title: "IMS — HSE Incident Management",
-  description: "Setia Corporation HSE Incident Management System",
-};
+  title: 'IMS — HSE Incident Management',
+  description: 'Setia Corporation HSE Incident Management System',
+}

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
+  const locale = await getLocale()
+  const messages = await loadMessages(locale)
+
  return (
    <html
-      lang="en"
+      lang={locale}
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <head>
+        <link rel="manifest" href="/ims/manifest.json" />
+      </head>
+      <body className="min-h-full flex flex-col">
+        <I18nProvider messages={messages}>
+          {children}
+        </I18nProvider>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `if('serviceWorker'in navigator){navigator.serviceWorker.register('/ims/sw.js',{scope:'/ims/'}).catch(console.error)}`,
+          }}
+        />
+      </body>
    </html>
-  );
+  )
 }
@@ -3,6 +3,7 @@ export const dynamic = 'force-dynamic'
 import { redirect } from 'next/navigation'
 import { createClient } from '@/lib/supabase/server'
 import { ReportForm } from '@/components/incidents/report-form'
+import { LanguageSwitcher } from '@/components/language-switcher'

 interface Props {
  searchParams: Promise<{ zone?: string }>
@@ -33,7 +34,10 @@ export default async function ReportPage({ searchParams }: Props) {
  return (
    <main className="min-h-screen bg-gray-50 py-6 px-4 max-w-lg mx-auto">
      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900">Report an Incident</h1>
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-gray-900">{/* will be translated via ReportForm */}Report an Incident</h1>
+          <LanguageSwitcher />
+        </div>
        {zoneName ? (
          <p className="text-sm text-gray-600 mt-1">
            {siteName ?? 'Unknown Site'} — {zoneName}