build frontend ใหม่ ผ่านทั้ง dev และ proc

frontend/app/(auth)/login/page.jsx

@@ -1,4 +1,4 @@
-// File: frontend/app/(auth)/login/page· typescript
+// File: frontend/app/(auth)/login/page.jsx
 
 "use client";
 
@@ -9,7 +9,7 @@
 // - เอา RootLayout/metadata ออก เพราะไฟล์เพจเป็น client component
 // - เพิ่มการอ่าน NEXT_PUBLIC_API_BASE และ error handling ให้ตรงกับ backend
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import {
   Card,
@@ -26,7 +26,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 
 const API_BASE = process.env.NEXT_PUBLIC_API_BASE?.replace(/\/$/, "") || "";
 
-export default function LoginPage() {
+function LoginForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const nextPath = useMemo(
@@ -194,6 +194,39 @@ export default function LoginPage() {
   );
 }
 
+export default function LoginPage() {
+  return (
+    <Suspense fallback={<LoginPageSkeleton />}>
+      <LoginForm />
+    </Suspense>
+  );
+}
+
+/** Loading skeleton */
+function LoginPageSkeleton() {
+  return (
+    <div className="grid min-h-[calc(100vh-4rem)] place-items-center p-4">
+      <Card className="w-full max-w-md border-0 shadow-xl ring-1 ring-black/5 bg-white/90 backdrop-blur">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-sky-800">
+            เข้าสู่ระบบ
+          </CardTitle>
+          <CardDescription className="text-sky-700">
+            Document Management System • LCBP3
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 animate-pulse">
+            <div className="h-10 rounded bg-slate-200"></div>
+            <div className="h-10 rounded bg-slate-200"></div>
+            <div className="h-10 rounded bg-slate-200"></div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
 /** Spinner แบบไม่พึ่งไลบรารีเสริม */
 function Spinner() {
   return (
@@ -218,4 +251,4 @@ function Spinner() {
       />
     </svg>
   );
-}
+}