[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/pages/ [ Home ]
File: AdminLogin.jsx
Action: file_editor create /app/frontend/src/pages/AdminLogin.jsx --file-text "import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, CardHeader, CardContent } from '../components/ui/card';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Alert, AlertDescription } from '../components/ui/alert';
import { Lock, Mail, Eye, EyeOff } from 'lucide-react';

const AdminLogin = () => {
  const navigate = useNavigate();
  const [showPassword, setShowPassword] = useState(false);
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    // Mock authentication - will be replaced with real backend
    setTimeout(() => {
      if (formData.email === 'admin@akfar.ac.id' && formData.password === 'admin123') {
        localStorage.setItem('adminToken', 'mock-token-123');
        localStorage.setItem('adminEmail', formData.email);
        navigate('/admin/dashboard');
      } else {
        setError('Email atau password salah / Invalid email or password');
      }
      setLoading(false);
    }, 1000);
  };

  return (
    <div className=\"min-h-screen bg-gradient-to-br from-emerald-600 via-teal-500 to-emerald-700 flex items-center justify-center p-4\">
      {/* Background Pattern */}
      <div className=\"absolute inset-0 opacity-10\">
        <div className=\"absolute inset-0\" style={{
          backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)',
          backgroundSize: '48px 48px'
        }}></div>
      </div>

      <Card className=\"w-full max-w-md shadow-2xl border-0 relative z-10\">
        <CardHeader className=\"space-y-4 pb-8\">
          {/* Logo */}
          <div className=\"flex justify-center\">
            <div className=\"w-20 h-20 bg-gradient-to-br from-emerald-600 to-teal-500 rounded-2xl flex items-center justify-center shadow-xl\">
              <Lock className=\"h-10 w-10 text-white\" />
            </div>
          </div>
          
          <div className=\"text-center space-y-2\">
            <h1 className=\"text-3xl font-bold text-gray-900\">Admin Panel</h1>
            <p className=\"text-gray-600\">Akademi Farmasi Bandung</p>
            <p className=\"text-sm text-gray-500\">Masuk untuk mengelola konten website</p>
          </div>
        </CardHeader>

        <CardContent>
          {error && (
            <Alert variant=\"destructive\" className=\"mb-6\">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <form onSubmit={handleSubmit} className=\"space-y-6\">
            {/* Email */}
            <div className=\"space-y-2\">
              <Label htmlFor=\"email\">Email</Label>
              <div className=\"relative\">
                <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />
                <Input
                  id=\"email\"
                  type=\"email\"
                  placeholder=\"admin@akfar.ac.id\"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className=\"pl-10\"
                  required
                />
              </div>
            </div>

            {/* Password */}
            <div className=\"space-y-2\">
              <Label htmlFor=\"password\">Password</Label>
              <div className=\"relative\">
                <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />
                <Input
                  id=\"password\"
                  type={showPassword ? 'text' : 'password'}
                  placeholder=\"••••••••\"
                  value={formData.password}
                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                  className=\"pl-10 pr-10\"
                  required
                />
                <button
                  type=\"button\"
                  onClick={() => setShowPassword(!showPassword)}
                  className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"
                >
                  {showPassword ? <EyeOff className=\"h-5 w-5\" /> : <Eye className=\"h-5 w-5\" />}
                </button>
              </div>
            </div>

            {/* Demo Credentials */}
            <div className=\"bg-emerald-50 border border-emerald-200 rounded-lg p-4\">
              <p className=\"text-xs font-semibold text-emerald-800 mb-2\">Demo Credentials:</p>
              <p className=\"text-xs text-emerald-700\">Email: admin@akfar.ac.id</p>
              <p className=\"text-xs text-emerald-700\">Password: admin123</p>
            </div>

            {/* Submit Button */}
            <Button
              type=\"submit\"
              className=\"w-full bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-700 hover:to-teal-600 text-base py-6\"
              disabled={loading}
            >
              {loading ? 'Memproses...' : 'Masuk / Login'}
            </Button>
          </form>

          {/* Back to Home */}
          <div className=\"mt-6 text-center\">
            <Button
              variant=\"ghost\"
              onClick={() => navigate('/')}
              className=\"text-sm text-gray-600 hover:text-gray-900\"
            >
              ← Kembali ke Website / Back to Website
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default AdminLogin;
"
Observation: Create successful: /app/frontend/src/pages/AdminLogin.jsx