From a5c1dd7c33cb62c2947d1baf436bcd0340757839 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:12:56 -0500
Subject: [PATCH] feat: improve admin login UI and sidebar branding

- Login page: split layout with gradient panel (desktop) + form,
  ProsApp logo mark, feature list, consistent blue brand colors
- Sidebar: replace plain text with logo mark + brand name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 admin/src/app/login/page.tsx     | 87 +++++++++++++++++++++++++++-----
 admin/src/components/sidebar.tsx | 14 ++++-
 2 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/admin/src/app/login/page.tsx b/admin/src/app/login/page.tsx
index f988a4c..1029a5a 100644
--- a/admin/src/app/login/page.tsx
+++ b/admin/src/app/login/page.tsx
@@ -5,7 +5,6 @@ import { useAuth } from '@/lib/auth';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Toaster } from '@/components/ui/sonner';
 import { toast } from 'sonner';
 
@@ -30,21 +29,85 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex h-screen items-center justify-center bg-muted/30">
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle className="text-center">ProsApp Admin</CardTitle>
-        </CardHeader>
-        <CardContent>
+    <div className="flex min-h-screen">
+      {/* Left panel — gradient */}
+      <div className="hidden lg:flex lg:w-1/2 flex-col items-center justify-center bg-gradient-to-br from-[#42A4EF] to-[#1565C0] text-white p-12">
+        <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm">
+          <span className="text-4xl font-black text-white">P</span>
+        </div>
+        <h1 className="text-4xl font-black tracking-tight">ProsApp</h1>
+        <p className="mt-3 text-lg text-white/80">Panel de administración</p>
+        <div className="mt-12 space-y-4 text-sm text-white/70 max-w-xs">
+          <div className="flex items-center gap-3">
+            <div className="h-1.5 w-1.5 rounded-full bg-white/60" />
+            <span>Gestión de usuarios y profesionales</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="h-1.5 w-1.5 rounded-full bg-white/60" />
+            <span>Control de servicios y estados</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="h-1.5 w-1.5 rounded-full bg-white/60" />
+            <span>Reseñas, ciudades y profesiones</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="h-1.5 w-1.5 rounded-full bg-white/60" />
+            <span>Configuración de SMS y notificaciones</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Right panel — form */}
+      <div className="flex w-full lg:w-1/2 flex-col items-center justify-center bg-background px-8 py-12">
+        <div className="w-full max-w-sm space-y-8">
+          {/* Logo for mobile */}
+          <div className="flex flex-col items-center lg:hidden">
+            <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-xl bg-[#42A4EF]">
+              <span className="text-2xl font-black text-white">P</span>
+            </div>
+            <h1 className="text-2xl font-black text-[#42A4EF]">ProsApp</h1>
+            <p className="text-sm text-muted-foreground">Panel de administración</p>
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold">Iniciar sesión</h2>
+            <p className="mt-1 text-sm text-muted-foreground">Ingresa tus credenciales de administrador</p>
+          </div>
+
           <form onSubmit={handleSubmit} className="space-y-4">
-            <Input placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
-            <Input placeholder="Contraseña" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
-            <Button type="submit" className="w-full" disabled={loading}>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Email</label>
+              <Input
+                placeholder="admin@prosapp.co"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="h-11"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Contraseña</label>
+              <Input
+                placeholder="••••••••"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="h-11"
+              />
+            </div>
+            <Button
+              type="submit"
+              className="w-full h-11 bg-[#42A4EF] hover:bg-[#1565C0] text-white font-semibold"
+              disabled={loading}
+            >
               {loading ? 'Ingresando...' : 'Ingresar'}
             </Button>
           </form>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
+
       <Toaster />
     </div>
   );
diff --git a/admin/src/components/sidebar.tsx b/admin/src/components/sidebar.tsx
index 6ed4fe6..a49c568 100644
--- a/admin/src/components/sidebar.tsx
+++ b/admin/src/components/sidebar.tsx
@@ -50,7 +50,19 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
         )}
       >
         <div className="flex h-14 items-center justify-between border-b px-3">
-          {!collapsed && <span className="font-semibold">ProsApp Admin</span>}
+          {!collapsed && (
+            <div className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#42A4EF]">
+                <span className="text-xs font-black text-white">P</span>
+              </div>
+              <span className="font-bold text-[#42A4EF]">ProsApp</span>
+            </div>
+          )}
+          {collapsed && (
+            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#42A4EF] mx-auto">
+              <span className="text-xs font-black text-white">P</span>
+            </div>
+          )}
           <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)}>
             {collapsed ? <Menu size={18} /> : <ChevronLeft size={18} />}
           </Button>