chore: remove shadcn components/ui dir; migrate login+topbar+providers to native components; single design system

app/(auth)/login/page.tsx

@@ -2,136 +2,89 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import { toast } from 'sonner';
-import { api } from '@/lib/api';
-import { useAuthStore } from '@/lib/auth-store';
-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 { Loader2 } from 'lucide-react';
-
-const loginSchema = z.object({
-  tenantSlug: z.string().min(1, 'Tenant slug is required'),
-  email: z.string().email('Invalid email address'),
-  password: z.string().min(6, 'Password must be at least 6 characters'),
-});
-
-type LoginForm = z.infer<typeof loginSchema>;
+import api from '@/lib/api';
+import { useAuthStore } from '@/lib/auth-store';
 
 export default function LoginPage() {
   const router = useRouter();
   const setAuth = useAuthStore((s) => s.setAuth);
   const [loading, setLoading] = useState(false);
+  const [form, setForm] = useState({ tenantSlug: '', email: '', password: '' });
+  const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<LoginForm>({
-    resolver: zodResolver(loginSchema),
-  });
+  const validate = () => {
+    const e: Record<string, string> = {};
+    if (!form.tenantSlug) e.tenantSlug = 'Required';
+    if (!form.email || !/\S+@\S+\.\S+/.test(form.email)) e.email = 'Valid email required';
+    if (!form.password || form.password.length < 6) e.password = 'Min 6 characters';
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
 
-  const onSubmit = async (data: LoginForm) => {
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
     setLoading(true);
     try {
-      const res = await api.post('/api/v1/auth/login', data);
+      const res = await api.post('/api/v1/auth/login', form);
       const { accessToken, user } = res.data;
-      setAuth({ accessToken, tenantSlug: data.tenantSlug, user });
-      toast.success('Welcome back, ' + user.firstName + '!');
+      setAuth({ accessToken, tenantSlug: form.tenantSlug, user });
+      toast.success(`Welcome back, ${user.firstName}!`);
       router.push('/dashboard');
-    } catch (err: unknown) {
-      const error = err as { response?: { data?: { message?: string } } };
-      toast.error(error.response?.data?.message || 'Login failed. Check your credentials.');
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'Login failed. Check your credentials.');
     } finally {
       setLoading(false);
     }
   };
 
+  const field = (key: keyof typeof form) => ({
+    value: form[key],
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+      setForm(f => ({ ...f, [key]: e.target.value })),
+  });
+
+  const inputClass = (key: string) =>
+    `w-full border rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors[key] ? 'border-red-400' : 'border-gray-300'}`;
+
   return (
-    <div
-      className="min-h-screen flex items-center justify-center p-4"
-      style={{ backgroundColor: '#F8FAFC' }}
-    >
-      <div className="w-full max-w-md">
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: '#F8FAFC' }}>
+      <div className="w-full max-w-sm">
         {/* Logo */}
         <div className="text-center mb-8">
-          <div
-            className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-xl mx-auto mb-3"
-            style={{ backgroundColor: '#0891B2' }}
-          >
-            F
-          </div>
-          <h1 className="text-2xl font-bold text-slate-800">FiberOps</h1>
-          <p className="text-slate-500 text-sm mt-1">ISP Management Platform</p>
+          <div className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-bold text-2xl mx-auto mb-3 shadow-md"
+            style={{ backgroundColor: '#0891B2' }}>F</div>
+          <h1 className="text-2xl font-bold text-gray-800">FiberOps</h1>
+          <p className="text-gray-500 text-sm mt-1">ISP Management Platform</p>
         </div>
 
-        <Card className="shadow-sm">
-          <CardHeader>
-            <CardTitle className="text-lg">Sign in to your account</CardTitle>
-            <CardDescription>Enter your tenant and credentials to continue</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-              <div className="space-y-1.5">
-                <Label htmlFor="tenantSlug">Tenant Slug</Label>
-                <Input
-                  id="tenantSlug"
-                  placeholder="e.g. demo-isp"
-                  {...register('tenantSlug')}
-                />
-                {errors.tenantSlug && (
-                  <p className="text-xs text-red-500">{errors.tenantSlug.message}</p>
-                )}
-              </div>
-
-              <div className="space-y-1.5">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="admin@yourisp.com"
-                  {...register('email')}
-                />
-                {errors.email && (
-                  <p className="text-xs text-red-500">{errors.email.message}</p>
-                )}
-              </div>
-
-              <div className="space-y-1.5">
-                <Label htmlFor="password">Password</Label>
-                <Input
-                  id="password"
-                  type="password"
-                  placeholder="••••••••"
-                  {...register('password')}
-                />
-                {errors.password && (
-                  <p className="text-xs text-red-500">{errors.password.message}</p>
-                )}
-              </div>
-
-              <Button
-                type="submit"
-                className="w-full"
-                disabled={loading}
-                style={{ backgroundColor: '#0891B2' }}
-              >
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Signing in…
-                  </>
-                ) : (
-                  'Sign In'
-                )}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+          <h2 className="text-base font-semibold text-gray-800 mb-5">Sign in to your account</h2>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Tenant Slug</label>
+              <input {...field('tenantSlug')} className={inputClass('tenantSlug')} placeholder="e.g. demo-isp" autoComplete="off" />
+              {errors.tenantSlug && <p className="text-xs text-red-500 mt-1">{errors.tenantSlug}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+              <input {...field('email')} type="email" className={inputClass('email')} placeholder="admin@yourisp.com" autoComplete="email" />
+              {errors.email && <p className="text-xs text-red-500 mt-1">{errors.email}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+              <input {...field('password')} type="password" className={inputClass('password')} placeholder="••••••••" autoComplete="current-password" />
+              {errors.password && <p className="text-xs text-red-500 mt-1">{errors.password}</p>}
+            </div>
+            <button type="submit" disabled={loading}
+              className="w-full py-2.5 rounded-lg text-white font-medium text-sm flex items-center justify-center gap-2 transition-colors disabled:opacity-70"
+              style={{ backgroundColor: '#0891B2' }}>
+              {loading ? <><Loader2 size={16} className="animate-spin" />Signing in…</> : 'Sign In'}
+            </button>
+          </form>
+        </div>
       </div>
     </div>
   );