Merge branch 'dev-ms' of github.com:fosrl/pangolin into dev-ms

messages/en-US.json

@@ -2142,5 +2142,9 @@
     "maintenanceTime": "e.g., 2 hours, Nov 1 at 5:00 PM",
     "maintenanceEstimatedTimeDescription": "When you expect maintenance to be completed",
     "editDomain": "Edit Domain",
-    "editDomainDescription": "Select a domain for your resource"
+    "editDomainDescription": "Select a domain for your resource",
+    "maintenanceModeDisabledTooltip": "This feature requires a valid license to enable.",
+    "maintenanceScreenTitle": "Service Temporarily Unavailable",
+    "maintenanceScreenMessage": "We are currently experiencing technical difficulties. Please check back soon.",
+    "maintenanceScreenEstimatedCompletion": "Estimated Completion:"
 }

src/app/maintenance-screen/page.tsx

@@ -1,15 +1,23 @@
-
 import { headers } from "next/headers";
 import { priv } from "@app/lib/api";
 import { GetMaintenanceInfoResponse } from "@server/routers/resource/types";
+import { getTranslations } from "next-intl/server";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle
+} from "@app/components/ui/card";
+import { Alert, AlertTitle, AlertDescription } from "@app/components/ui/alert";
+import { Clock } from "lucide-react";
 
 export const dynamic = "force-dynamic";
-export const revalidate = 0;
 
 export default async function MaintenanceScreen() {
-    let title = "Service Temporarily Unavailable";
-    let message =
-        "We are currently experiencing technical difficulties. Please check back soon.";
+    const t = await getTranslations();
+
+    let title = t("maintenanceScreenTitle");
+    let message = t("maintenanceScreenMessage");
     let estimatedTime: string | null = null;
 
     try {
@@ -28,36 +36,33 @@ export default async function MaintenanceScreen() {
             estimatedTime = maintenanceInfo?.maintenanceEstimatedTime || null;
         }
     } catch (err) {
-        console.warn(
+        console.error(
             "Failed to fetch maintenance info",
             err instanceof Error ? err.message : String(err)
         );
     }
 
     return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-100">
-            <div className="max-w-2xl w-full bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
-                <div className="text-center">
-                    <div className="text-6xl mb-6 animate-pulse">🔧</div>
-
-                    <h1 className="text-4xl font-bold text-black mb-4">
-                        {title}
-                    </h1>
-
-                    <p className="text-xl text-black/90 mb-6">{message}</p>
-
+        <div className="min-h-screen flex items-center justify-center p-4">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle>{title}</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <p>{message}</p>
                     {estimatedTime && (
-                        <div className="mt-8 p-4 bg-white/15 rounded-xl">
-                            <p className="text-black font-semibold">
-                                Estimated completion:
-                            </p>
-                            <p className="text-black/90 mt-2">
+                        <Alert className="w-full" variant="neutral">
+                            <Clock className="h-5 w-5" />
+                            <AlertTitle>
+                                {t("maintenanceScreenEstimatedCompletion")}
+                            </AlertTitle>
+                            <AlertDescription className="flex flex-col space-y-2">
                                 {estimatedTime}
-                            </p>
-                        </div>
+                            </AlertDescription>
+                        </Alert>
                     )}
-                </div>
-            </div>
+                </CardContent>
+            </Card>
         </div>
     );
-}
+}