feat: stabilize frontend, fix lint errors, and enhance auth flow

Oghenesuvwe-dev · Oghenesuvwe-dev · commit 701168d67c9e · 2026-02-10T01:20:27.000+01:00
diff --git a/frontend/app/auth/register/page.tsx b/frontend/app/auth/register/page.tsx
@@ -2,7 +2,11 @@
 
 import React, { useState } from 'react';
 import Link from 'next/link';
-import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/store/authStore';
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+import { toast } from 'sonner';
 import {
     Github,
     Chrome,
@@ -12,11 +16,62 @@ import {
     Mail,
     User,
     Building2,
-    ShieldCheck
+    ShieldCheck,
+    Loader2
 } from 'lucide-react';
 
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1';
+
 export default function RegisterPage() {
-    const [isLoading, setIsLoading] = useState(false);
+    const router = useRouter();
+    const login = useAuthStore((state) => state.login);
+
+    // Form State
+    const [fullName, setFullName] = useState('');
+    const [email, setEmail] = useState('');
+    const [companyName, setCompanyName] = useState('');
+    const [password, setPassword] = useState('');
+
+    const { mutate: handleRegister, isPending } = useMutation({
+        mutationFn: async () => {
+            const response = await axios.post(`${API_URL}/auth/register`, {
+                name: fullName,
+                email,
+                password,
+                companyName
+            });
+            return response.data;
+        },
+        onSuccess: (data) => {
+            console.log("Registration success:", data);
+            // Assuming the API returns user and token structure similar to login
+            // If the API automatically logs them in, great. 
+            // If not, we might need to redirect to login or auto-login.
+            // Based on typical auth flows, we usually get a token back.
+            if (data.token && data.user) {
+                login(data.user, data.token);
+                toast.success("Workspace created successfully!");
+                router.push('/dashboard');
+            } else {
+                toast.success("Account created! Please log in.");
+                router.push('/auth/login');
+            }
+        },
+        onError: (error: any) => {
+            console.error("Registration error:", error);
+            const message = error.response?.data?.error || "Registration failed. Please try again.";
+            toast.error(message);
+        }
+    });
+
+    const onSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!fullName || !email || !companyName || !password) {
+            toast.error("Please fill in all fields");
+            return;
+        }
+        handleRegister();
+    };
 
     return (
         <div className="min-h-screen bg-slate-950 flex flex-col lg:flex-row overflow-hidden font-sans">
@@ -83,26 +138,59 @@ export default function RegisterPage() {
                         <div className="relative flex justify-center text-xs uppercase font-black tracking-[0.3em]"><span className="bg-slate-950 px-4 text-slate-700">Or with email</span></div>
                     </div>
 
-                    <form className="space-y-6">
+                    <form onSubmit={onSubmit} className="space-y-6">
                         <div className="grid grid-cols-2 gap-4">
-                            <InputField icon={User} label="Full Name" placeholder="Alex Rivera" />
-                            <InputField icon={Mail} label="Work Email" placeholder="alex@company.com" />
+                            <InputField
+                                icon={User}
+                                label="Full Name"
+                                placeholder="Alex Rivera"
+                                value={fullName}
+                                onChange={(e: any) => setFullName(e.target.value)}
+                            />
+                            <InputField
+                                icon={Mail}
+                                label="Work Email"
+                                placeholder="alex@company.com"
+                                type="email"
+                                value={email}
+                                onChange={(e: any) => setEmail(e.target.value)}
+                            />
                         </div>
-                        <InputField icon={Building2} label="Company Name" placeholder="Acme Inc." />
-                        <InputField icon={Lock} label="Password" placeholder="••••••••" type="password" />
+                        <InputField
+                            icon={Building2}
+                            label="Company Name"
+                            placeholder="Acme Inc."
+                            value={companyName}
+                            onChange={(e: any) => setCompanyName(e.target.value)}
+                        />
+                        <InputField
+                            icon={Lock}
+                            label="Password"
+                            placeholder="••••••••"
+                            type="password"
+                            value={password}
+                            onChange={(e: any) => setPassword(e.target.value)}
+                        />
 
                         <div className="flex items-center space-x-3 p-4 bg-blue-600/5 border border-blue-500/10 rounded-2xl">
                             <ShieldCheck className="w-5 h-5 text-blue-500" />
                             <p className="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Auto-KYC enabled. Verification takes 3-5 mins.</p>
                         </div>
 
-                        <Link
-                            href="/dashboard"
-                            className="flex w-full justify-center items-center space-x-3 bg-white text-black py-5 rounded-2xl font-black text-lg hover:bg-slate-200 transition-all active:scale-95 shadow-xl shadow-white/5 mt-8"
+                        <button
+                            type="submit"
+                            disabled={isPending}
+                            className="flex w-full justify-center items-center space-x-3 bg-white text-black py-5 rounded-2xl font-black text-lg hover:bg-slate-200 transition-all active:scale-95 shadow-xl shadow-white/5 mt-8 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
-                            <span>Initialize My Console</span>
-                            <ArrowRight className="w-5 h-5" />
-                        </Link>
+                            {isPending ? (
+                                <Loader2 className="w-5 h-5 animate-spin" />
+                            ) : (
+                                <>
+                                    <span>Initialize My Console</span>
+                                    <ArrowRight className="w-5 h-5" />
+                                </>
+                            )}
+                        </button>
                     </form>
 
                     <p className="text-center text-sm font-bold text-slate-500">
@@ -123,23 +211,26 @@ export default function RegisterPage() {
 
 function SocialButton({ icon: Icon, label }: any) {
     return (
-        <button className="flex items-center justify-center space-x-3 bg-white/5 border border-white/10 p-4 rounded-2xl hover:bg-white/10 transition-all group">
+        <button type="button" className="flex items-center justify-center space-x-3 bg-white/5 border border-white/10 p-4 rounded-2xl hover:bg-white/10 transition-all group">
             <Icon className="w-5 h-5 text-slate-400 group-hover:text-white transition-colors" />
             <span className="text-sm font-bold text-white">{label}</span>
         </button>
     )
 }
 
-function InputField({ icon: Icon, label, placeholder, type = "text" }: any) {
+function InputField({ icon: Icon, label, placeholder, type = "text", value, onChange }: any) {
     return (
         <div className="space-y-3">
             <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">{label}</label>
             <div className="relative">
                 <Icon className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-600" />
                 <input
                     type={type}
+                    value={value}
+                    onChange={onChange}
                     className="w-full bg-slate-900 border border-white/5 rounded-2xl p-4 pl-12 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-600/50 transition-all placeholder:text-slate-700"
                     placeholder={placeholder}
+                    required
                 />
             </div>
         </div>
diff --git a/frontend/app/dashboard/admin/reconciliation/page.tsx b/frontend/app/dashboard/admin/reconciliation/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -72,7 +72,7 @@ export default function ReconciliationPage() {
 
             // Send to Backend with Idempotency Key
             const idempotencyKey = crypto.randomUUID();
-            const response = await api.post('/admin/reconcile/run', {
+            const response = await api.post<{ data: any }>('/admin/reconcile/run', {
                 date,
                 records
             }, {
diff --git a/frontend/app/dashboard/business/bulk-issuance/page.tsx b/frontend/app/dashboard/business/bulk-issuance/page.tsx
@@ -182,7 +182,7 @@ export default function BulkIssuancePage() {
                         </CardHeader>
                         <CardContent className="space-y-4 text-sm text-slate-600">
                             <p>1. Download the CSV template.</p>
-                            <p>2. Fill in the employee details. Setting a role of 'manager' gives admin access.</p>
+                            <p>2. Fill in the employee details. Setting a role of &apos;manager&apos; gives admin access.</p>
                             <p>3. Upload the file to provision accounts.</p>
                             <div className="bg-amber-50 text-amber-800 p-3 rounded border border-amber-200 text-xs">
                                 <strong>Note:</strong> Employees will need to reset their password via email (simulated) to access their new dashboard.
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
@@ -36,7 +36,7 @@ export default function DashboardPage() {
                             </div>
                             <h4 className="text-xl font-bold mb-3 tracking-tight text-white">AI Insights</h4>
                             <p className="text-sm text-slate-400 font-medium leading-relaxed mb-6">
-                                Your spending on "Cloud Infrastructure" is up <span className="text-blue-400 font-bold">12%</span> this month. We recommend reviewing your reserved instances.
+                                Your spending on &quot;Cloud Infrastructure&quot; is up <span className="text-blue-400 font-bold">12%</span> this month. We recommend reviewing your reserved instances.
                             </p>
                             <button className="text-sm font-bold text-blue-500 hover:text-white flex items-center space-x-2 transition-all">
                                 <span>View Recommendations</span>
diff --git a/frontend/app/dashboard/profile/page.tsx b/frontend/app/dashboard/profile/page.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { DashboardShell } from '@/components/layout/DashboardShell';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
-    User, Mail, Phone, Building, Calendar,
-    CreditCard, Camera, Save, X, Edit2, AlertCircle
+    User, Building, Calendar,
+    Camera, Save, X, Edit2, AlertCircle, Shield
 } from 'lucide-react';
 import { ProfileSkeleton } from '@/components/ui/skeleton';
 import { ErrorDisplay } from '@/components/ui/error';
@@ -97,7 +97,7 @@ export default function ProfilePage() {
         }
 
         setIsSaving(true);
-        const loadingToast = toast.loading('Saving profile changes...');
+        toast.loading('Saving profile changes...');
 
         try {
             const token = localStorage.getItem('token');
diff --git a/frontend/app/dashboard/settings/page.tsx b/frontend/app/dashboard/settings/page.tsx
@@ -762,7 +762,7 @@ export default function SettingsPage() {
                                             <h3 className="font-bold">Important: Secure Your Key</h3>
                                         </div>
                                         <p className="text-xs text-amber-300/80">
-                                            For security reasons, we can only show this key once. If you lose it, you'll need to generate a new one.
+                                            For security reasons, we can only show this key once. If you lose it, you&apos;ll need to generate a new one.
                                         </p>
                                         <div className="flex gap-2">
                                             <input
diff --git a/frontend/app/dashboard/transactions/page.tsx b/frontend/app/dashboard/transactions/page.tsx
@@ -11,10 +11,9 @@ import {
     ArrowUpRight,
     Calendar,
     ChevronLeft,
-    ChevronRight,
-    Loader2
+    ChevronRight
 } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
 
 interface Transaction {
@@ -29,7 +28,6 @@ interface Transaction {
 
 export default function TransactionsPage() {
     const [transactions, setTransactions] = useState<Transaction[]>([]);
-    const [loading, setLoading] = useState(true);
     const [searchTerm, setSearchTerm] = useState('');
 
     useEffect(() => {
@@ -38,7 +36,6 @@ export default function TransactionsPage() {
 
     const fetchTransactions = async () => {
         try {
-            setLoading(true);
             const res = await api.get<any>('/transactions');
             if (res.success && res.history) {
                 // Map backend response to frontend interface if needed
@@ -48,8 +45,6 @@ export default function TransactionsPage() {
             }
         } catch (error) {
             console.error(error);
-        } finally {
-            setLoading(false);
         }
     };
 
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { api } from '@/lib/api';
 import { useAuth } from '@/contexts/AuthContext';
 import { Loader2 } from 'lucide-react';
@@ -125,8 +125,8 @@ export default function LoginPage() {
                     </button>
                 </form>
 
-                <p className="text-center text-sm text-slate-500">
-                    Don't have an account? <Link href="/register" className="text-blue-400 hover:underline">Apply now</Link>
+                <p className="mt-2 text-center text-sm text-gray-600">
+                    Don&apos;t have an account?{' '}<Link href="/register" className="text-blue-400 hover:underline">Apply now</Link>
                 </p>
             </div>
         </div>
diff --git a/frontend/components/funding/FundingWizard.tsx b/frontend/components/funding/FundingWizard.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { ArrowRight, Building2, CheckCircle, Globe, Loader2, ShieldCheck, Wallet } from "lucide-react";
+import { ArrowRight, Building2, CheckCircle, Globe, Loader2, ShieldCheck } from "lucide-react";
 import { toast } from "sonner";
-import api from "@/lib/api"; // Assuming default export is axios instance or similar wrapper
+import { api } from "@/lib/api"; // Assuming default export is axios instance or similar wrapper
 
 interface FundingSession {
     type: string;
@@ -115,7 +115,7 @@ export function FundingWizard() {
                     </div>
 
                     <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-sm text-blue-300">
-                        <p>ℹ️ Since this is a specialized demo environment, clicking "Connect" will simulate the successful OAuth/SDK flow for {sessionData.provider}.</p>
+                        <p>ℹ️ Since this is a specialized demo environment, clicking &quot;Connect&quot; will simulate the successful OAuth/SDK flow for {sessionData.provider}.</p>
                     </div>
 
                     <button
@@ -142,7 +142,7 @@ export function FundingWizard() {
                             <CheckCircle className="w-8 h-8 text-white" />
                         </div>
                         <h2 className="text-2xl font-bold text-white">Account Connected!</h2>
-                        <p className="text-slate-400">Your funding source is active.</p>
+                        <p className="text-sm text-yellow-800">You are in Sandbox Mode. Use &quot;plaid_sandbox&quot; credentials.</p>
                     </div>
 
                     <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-6 space-y-4">
diff --git a/frontend/components/kyc/KYCWizard.tsx b/frontend/components/kyc/KYCWizard.tsx
@@ -3,13 +3,7 @@
 import { useState } from "react";
 import { ArrowRight, CheckCircle, Fingerprint, Loader2, ScanFace, Shield, UploadCloud } from "lucide-react";
 import { toast } from "sonner";
-import api from "@/lib/api";
-
-interface VerificationSession {
-    success: boolean;
-    verification: any;
-    sdkToken?: string;
-}
+import { api } from "@/lib/api";
 
 export function KYCWizard() {
     const [step, setStep] = useState<"intro" | "tier" | "processing" | "success">("intro");
@@ -56,7 +50,7 @@ export function KYCWizard() {
             setStep("success");
             toast.success("Identity Verified Successfully!");
 
-        } catch (err) {
+        } catch {
             toast.error("Verification processing failed");
         } finally {
             setLoading(false);
diff --git a/frontend/components/landing/CardShowcase.tsx b/frontend/components/landing/CardShowcase.tsx
@@ -3,10 +3,8 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import {
-    Cpu,
     Wifi,
     Zap,
-    ShieldCheck,
     Smartphone,
     History,
     ArrowRight
diff --git a/frontend/components/landing/CookieConsent.tsx b/frontend/components/landing/CookieConsent.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Cookie } from 'lucide-react';
+import { Cookie } from 'lucide-react';
 import Link from 'next/link';
 
 export function CookieConsent() {
diff --git a/frontend/components/landing/EnterpriseSections.tsx b/frontend/components/landing/EnterpriseSections.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from 'react';
-import { motion } from 'framer-motion';
+// Removed unused import
 import { Check, ArrowRight, Star, Quote } from 'lucide-react';
 import Link from 'next/link';
 
@@ -143,7 +143,7 @@ export function Testimonials() {
                         {testimonials.map((t, i) => (
                             <div key={i} className="glass-card p-8 rounded-[2rem] border border-white/5 hover:border-white/10 transition-all cursor-default">
                                 <Quote className="w-10 h-10 text-blue-500/20 mb-4" />
-                                <p className="text-lg font-medium text-slate-300 leading-relaxed mb-6 italic">"{t.quote}"</p>
+                                <p className="text-lg font-medium text-slate-300 leading-relaxed mb-6 italic">&quot;{t.quote}&quot;</p>
                                 <div className="flex items-center space-x-4">
                                     <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-purple-500 flex items-center justify-center font-bold">{t.avatar}</div>
                                     <div>
diff --git a/frontend/components/landing/IssuanceSpecs.tsx b/frontend/components/landing/IssuanceSpecs.tsx
diff --git a/frontend/components/landing/ModernLayout.tsx b/frontend/components/landing/ModernLayout.tsx
diff --git a/frontend/components/landing/ProductSpotlight.tsx b/frontend/components/landing/ProductSpotlight.tsx
diff --git a/frontend/components/layout/DashboardShell.tsx b/frontend/components/layout/DashboardShell.tsx
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
diff --git a/frontend/lint_output.txt b/frontend/lint_output.txt
