Refactor: Apply UI design from Figma

Implement the UI design from the provided Figma file, including fonts and colors.
2025-05-27 10:35:29 +00:00
parent 8c67dbad6a
commit 69268615b5
4 changed files with 358 additions and 124 deletions
@@ -0,0 +1,84 @@
+
+import React, { useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface LoginPageProps {
+  onLogin: () => void;
+}
+
+export const LoginPage = ({ onLogin }: LoginPageProps) => {
+  const [email, setEmail] = useState('admin@123.com');
+  const [password, setPassword] = useState('');
+  const [rememberMe, setRememberMe] = useState(false);
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    onLogin();
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Left side with purple gradient */}
+      <div className="flex-1 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 flex items-center justify-center text-white p-12">
+        <div className="max-w-md">
+          <h1 className="text-4xl font-bold mb-4">Cash Management Dashboard</h1>
+          <p className="text-lg text-purple-100">Real-time Cash Reconciliation – Ensuring Accuracy & Transparency</p>
+        </div>
+      </div>
+
+      {/* Right side with login form */}
+      <div className="flex-1 bg-white flex items-center justify-center p-12">
+        <div className="w-full max-w-md">
+          <h2 className="text-2xl font-semibold text-purple-600 mb-8">Sign In to Your Dashboard</h2>
+          
+          <form onSubmit={handleLogin} className="space-y-6">
+            <div>
+              <Input
+                type="email"
+                placeholder="admin@123.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500"
+              />
+            </div>
+            
+            <div>
+              <Input
+                type="password"
+                placeholder="Enter Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500"
+              />
+            </div>
+
+            <Button 
+              type="submit"
+              className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-lg"
+            >
+              Login to dashboard
+            </Button>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Checkbox 
+                  id="remember"
+                  checked={rememberMe}
+                  onCheckedChange={(checked) => setRememberMe(checked as boolean)}
+                />
+                <label htmlFor="remember" className="text-sm text-gray-600">
+                  Remember me
+                </label>
+              </div>
+              <a href="#" className="text-sm text-purple-600 hover:underline">
+                Forgot password
+              </a>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};