oyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app/src$ tree.├── App.css├── App.test.tsx├── App.tsx├── components│   ├── ImageUpload.tsx│   ├── Login.tsx│   ├── Navbar.tsx│   ├── NotificationDropdown.tsx│   ├── ProtectedRoute.tsx│   ├── Register.tsx│   └── Sidebar.tsx├── contexts│   └── AuthContext.tsx├── index.css├── index.tsx├── logo.svg├── pages│   ├── Analytics.tsx│   ├── CreateDeal.tsx│   ├── Customers.tsx│   ├── Dashboard.tsx│   ├── Deals.tsx│   ├── EditDeal.tsx│   ├── Financials.tsx│   ├── ForgotPassword.tsx│   ├── Login.tsx│   ├── Profile.tsx│   ├── Register.tsx│   ├── ResetPassword.tsx│   └── VerifyOTP.tsx├── react-app-env.d.ts├── reportWebVitals.ts├── services│   └── api.tsx├── setupTests.ts├── types└── utils7 directories, 31 filesoyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app/src$ cat src/pages/Dashboard.tsxcat: src/pages/Dashboard.tsx: No such file or directoryoyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app/src$ cd ..oyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app$ cat src/pages/Dashboard.tsx"use client"import type React from "react"import { useState, useEffect } from "react"import { Link } from "react-router-dom"import { TrendingUp, Package, DollarSign, Clock, CheckCircle, XCircle, Plus, Eye, Edit, ArrowUpRight,} from "lucide-react"import { api } from "../services/api"import { useAuth } from "../contexts/AuthContext"import toast from "react-hot-toast"interface DashboardStats { total_deals: number active_deals: number pending_deals: number rejected_deals: number total_revenue: number total_sales: number}interface Deal { id: number title: string status: string discount_price: number sold_quantity: number max_quantity: number created_at: string category: { name: string }}const Dashboard: React.FC = () => { const { user } = useAuth() const [stats, setStats] = useState<DashboardStats>({ total_deals: 0, active_deals: 0, pending_deals: 0, rejected_deals: 0, total_revenue: 0, total_sales: 0, }) const [recentDeals, setRecentDeals] = useState<Deal[]>([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchDashboardData() }, []) const fetchDashboardData = async () => { try { const response = await api.get("/merchant/dashboard/stats") setStats( response.data.stats || { total_deals: 0, active_deals: 0, pending_deals: 0, rejected_deals: 0, total_revenue: 0, total_sales: 0, }, ) setRecentDeals(response.data.recent_deals || []) } catch (error: any) { console.error("Failed to fetch dashboard data:", error) toast.error("Failed to load dashboard data") setStats({ total_deals: 0, active_deals: 0, pending_deals: 0, rejected_deals: 0, total_revenue: 0, total_sales: 0, }) setRecentDeals([]) } finally { setLoading(false) } } const formatPrice = (price: number) => { return new Intl.NumberFormat("en-UG", { style: "currency", currency: "UGX", minimumFractionDigits: 0, }).format(price) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-UG", { year: "numeric", month: "short", day: "numeric", }) } const getStatusConfig = (status: string) => { switch (status) { case "approved": return { icon: CheckCircle, color: "var(--primary-green)", bg: "rgba(16, 185, 129, 0.1)", text: "Active", } case "pending": return { icon: Clock, color: "var(--accent-orange)", bg: "rgba(245, 158, 11, 0.1)", text: "Pending", } case "rejected": return { icon: XCircle, color: "var(--accent-red)", bg: "rgba(239, 68, 68, 0.1)", text: "Rejected", } default: return { icon: Clock, color: "var(--text-light)", bg: "var(--background-secondary)", text: "Unknown", } } } if (loading) { return ( <div className="dashboard-loading"> <div className="spinner-large"></div> <p>Loading dashboard...</p> </div> ) } return ( <div className="dashboard-page"> {/* Simple Welcome Header */} <div className="dashboard-header"> <div className="welcome-section"> <h1>Welcome back, {user?.first_name}! 👋</h1> <p>Here's a quick overview of your business performance.</p> </div> <div className="header-actions"> <Link to="/deals/create" className="btn btn-primary"> <Plus size={18} /> Create Deal </Link> </div> </div> {/* Simple Stats Grid */} <div className="stats-grid"> <div className="stat-card"> <div className="stat-header"> <div className="stat-title">Total Deals</div> <div className="stat-icon total"> <Package size={24} /> </div> </div> <div className="stat-value">{stats.total_deals}</div> <div className="stat-change"> <span>All deals created</span> </div> </div> <div className="stat-card"> <div className="stat-header"> <div className="stat-title">Active Deals</div> <div className="stat-icon active"> <CheckCircle size={24} /> </div> </div> <div className="stat-value">{stats.active_deals}</div> <div className="stat-change positive"> <TrendingUp size={14} /> <span>Currently live</span> </div> </div> <div className="stat-card"> <div className="stat-header"> <div className="stat-title">Pending Review</div> <div className="stat-icon pending"> <Clock size={24} /> </div> </div> <div className="stat-value">{stats.pending_deals}</div> <div className="stat-change"> <span>Awaiting approval</span> </div> </div> <div className="stat-card"> <div className="stat-header"> <div className="stat-title">Total Revenue</div> <div className="stat-icon revenue"> <DollarSign size={24} /> </div> </div> <div className="stat-value">{formatPrice(stats.total_revenue)}</div> <div className="stat-change positive"> <TrendingUp size={14} /> <span>Total earnings</span> </div> </div> </div> {/* Main Content */} <div className="dashboard-grid"> {/* Recent Deals */} <div className="dashboard-section"> <div className="card"> <div className="card-header"> <div className="section-title"> <h4>Recent Deals</h4> <p>Your latest deals and their performance</p> </div> <Link to="/deals" className="btn btn-outline btn-small"> <ArrowUpRight size={16} /> View All </Link> </div> <div className="card-body"> {recentDeals.length === 0 ? ( <div className="empty-state"> <div className="empty-icon"> <Package size={48} /> </div> <h5>No deals yet</h5> <p>Create your first deal to start selling</p> <Link to="/deals/create" className="btn btn-primary"> <Plus size={16} /> Create Your First Deal </Link> </div> ) : ( <div className="deals-table"> <table className="table"> <thead> <tr> <th>Deal</th> <th>Status</th> <th>Price</th> <th>Sales</th> <th>Created</th> <th>Actions</th> </tr> </thead> <tbody> {recentDeals.map((deal) => { const statusConfig = getStatusConfig(deal.status) const StatusIcon = statusConfig.icon return ( <tr key={deal.id}> <td> <div className="deal-info"> <div className="deal-title">{deal.title}</div> <div className="deal-category">{deal.category.name}</div> </div> </td> <td> <div className="status-badge" style={{ backgroundColor: statusConfig.bg, color: statusConfig.color, }} > <StatusIcon size={14} /> <span>{statusConfig.text}</span> </div> </td> <td className="price-cell">{formatPrice(deal.discount_price)}</td> <td> <div className="sales-info"> <span className="sales-count"> {deal.sold_quantity}/{deal.max_quantity} </span> <div className="progress-container"> <div className="progress-bar" style={{ width: `${(deal.sold_quantity / deal.max_quantity) * 100}%`, }} ></div> </div> </div> </td> <td className="date-cell">{formatDate(deal.created_at)}</td> <td> <div className="table-actions"> <Link to={`/deals/edit/${deal.id}`} className="action-btn edit" title="Edit Deal"> <Edit size={14} /> </Link> <button className="action-btn view" title="View Deal" onClick={() => window.open(`/deals/${deal.id}`, "_blank")} > <Eye size={14} /> </button> </div> </td> </tr> ) })} </tbody> </table> </div> )} </div> </div> </div> {/* Sidebar */} <div className="dashboard-sidebar"> {/* Tips */} <div className="card"> <div className="card-header"> <h4>💡 Tips for Success</h4> </div> <div className="card-body"> <div className="tips-content"> <div className="tip-item"> <div className="tip-icon">📸</div> <div> <h6>Use Quality Images</h6> <p>High-quality photos increase deal views by 40%</p> </div> </div> <div className="tip-item"> <div className="tip-icon">⏰</div> <div> <h6>Best Times to Post</h6> <p>Launch deals on weekends for better visibility</p> </div> </div> <div className="tip-item"> <div className="tip-icon">💰</div> <div> <h6>Pricing Strategy</h6> <p>30-50% discounts perform best with customers</p> </div> </div> <div className="help-section"> <h6>Need Help?</h6> <p>Contact support for assistance with your deals</p> <button className="btn btn-outline btn-small">Get Help</button> </div> </div> </div> </div> </div> </div> </div> )}export default Dashboardoyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app$ cat src/components/Sidebar.tsx"use client"import type React from "react"import { Link, useLocation } from "react-router-dom"import { LayoutDashboard, Package, Plus, User, Settings, BarChart3, Users, DollarSign } from "lucide-react"const Sidebar: React.FC = () => { const location = useLocation() const navItems = [ { path: "/", icon: LayoutDashboard, label: "Dashboard" }, { path: "/deals", icon: Package, label: "My Deals" }, { path: "/deals/create", icon: Plus, label: "Create Deal" }, { path: "/analytics", icon: BarChart3, label: "Analytics" }, { path: "/customers", icon: Users, label: "Customers" }, { path: "/financials", icon: DollarSign, label: "Financials" }, { path: "/profile", icon: User, label: "Profile" }, { path: "/settings", icon: Settings, label: "Settings" }, ] return ( <div className="sidebar"> <div className="sidebar-header"> <Link to="/" className="sidebar-brand"> <img src="/logo.png" alt="SnapaDeal" className="sidebar-logo" /> <div className="brand-text"> <span className="brand-name">SnapaDeal</span> <span className="brand-subtitle">Merchant Portal</span> </div> </Link> </div> <nav className="sidebar-nav"> {navItems.map((item) => { const Icon = item.icon const isActive = location.pathname === item.path return ( <div key={item.path} className="nav-item"> <Link to={item.path} className={`nav-link ${isActive ? "active" : ""}`}> <Icon size={20} /> {item.label} </Link> </div> ) })} </nav> </div> )}export default Sidebaroyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app$ cat src/components/Navbar.tsx"use client"import type React from "react"import { useState } from "react"import { Search, LogOut, ChevronDown, User, Settings } from "lucide-react"import { useAuth } from "../contexts/AuthContext"import NotificationDropdown from "./NotificationDropdown"const Navbar: React.FC = () => { const { user, logout } = useAuth() const [showUserMenu, setShowUserMenu] = useState(false) return ( <nav className="merchant-navbar"> <div className="navbar-content-merchant"> {/* Left Section - Search */} <div className="navbar-left"> <div className="search-container-merchant"> <Search className="search-icon-merchant" /> <input type="text" placeholder="Search deals, analytics, customers..." className="search-input-merchant" /> </div> </div> {/* Right Section - User Actions */} <div className="navbar-right"> {/* Notifications - Now using the actual NotificationDropdown component */} <div className="navbar-item"> <NotificationDropdown /> </div> {/* User Menu */} <div className="user-menu-merchant"> <button className="user-menu-trigger-merchant" onClick={() => setShowUserMenu(!showUserMenu)}> <div className="user-avatar-merchant"> <User size={16} /> </div> <div className="user-info-merchant"> <span className="user-name-merchant"> {user?.first_name} {user?.last_name} </span> <span className="user-role-merchant">Merchant</span> </div> <ChevronDown size={16} className="chevron-merchant" /> </button> {showUserMenu && ( <div className="user-dropdown-merchant"> <div className="dropdown-header-merchant"> <div className="user-avatar-large-merchant"> {user?.first_name?.charAt(0)} {user?.last_name?.charAt(0)} </div> <div> <div className="dropdown-user-name"> {user?.first_name} {user?.last_name} </div> <div className="dropdown-user-email">{user?.email}</div> </div> </div> <div className="dropdown-divider-merchant"></div> <button className="dropdown-item-merchant"> <User size={16} /> <span>My Profile</span> </button> <button className="dropdown-item-merchant"> <Settings size={16} /> <span>Settings</span> </button> <div className="dropdown-divider-merchant"></div> <button onClick={logout} className="dropdown-item-merchant logout-item-merchant"> <LogOut size={16} /> <span>Sign Out</span> </button> </div> )} </div> </div> </div> </nav> )}export default Navbaroyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app$ cat src/pages/Login.tsx"use client"import type React from "react"import { useState } from "react"import { Link, useNavigate } from "react-router-dom"import { Eye, EyeOff, Mail, Lock, Phone } from "lucide-react"import { useAuth } from "../contexts/AuthContext"import toast from "react-hot-toast"const Login: React.FC = () => { const [formData, setFormData] = useState({ emailOrPhone: "", password: "", }) const [loading, setLoading] = useState(false) const [showPassword, setShowPassword] = useState(false) const { login } = useAuth() const navigate = useNavigate() const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { await login(formData.emailOrPhone, formData.password) toast.success("Welcome back to your merchant dashboard!") navigate("/") } catch (error: any) { if (error.message === "PENDING_VERIFICATION") { toast.error("Please verify your email address first") // Redirect to OTP verification with email const email = formData.emailOrPhone.includes("@") ? formData.emailOrPhone : "" if (email) { navigate(`/verify-otp?email=${encodeURIComponent(email)}`) } else { toast.error("Please use your email address to complete verification") } } else { toast.error(error.message) } } finally { setLoading(false) } } return ( <div className="auth-container"> <div className="auth-background"> <div className="auth-overlay"></div> </div> <div className="auth-content"> <div className="auth-card"> {/* Logo and Header */} <div className="auth-header"> <div className="auth-logo"> <img src="/logo.png" alt="SnapaDeal" className="logo-image" /> <div className="logo-text"> <h1 className="brand-name">SnapaDeal</h1> <p className="brand-tagline">Merchant Portal</p> </div> </div> <div className="auth-title"> <h2>Welcome Back</h2> <p>Sign in to manage your deals and grow your business</p> </div> </div> {/* Login Form */} <form onSubmit={handleSubmit} className="auth-form"> <div className="form-group"> <label className="form-label"> <Mail size={16} /> Email or Phone Number </label> <div className="input-group"> <div className="input-icon"> {formData.emailOrPhone.includes('@') ? <Mail size={18} /> : <Phone size={18} />} </div> <input type="text" name="emailOrPhone" value={formData.emailOrPhone} onChange={handleChange} className="form-control" placeholder="Enter your email or phone number" required /> </div> <small className="form-help">You can use either your email address or phone number</small> </div> <div className="form-group"> <label className="form-label"> <Lock size={16} /> Password </label> <div className="password-input"> <div className="input-icon"> <Lock size={18} /> </div> <input type={showPassword ? "text" : "password"} name="password" value={formData.password} onChange={handleChange} className="form-control" placeholder="Enter your password" required /> <button type="button" className="password-toggle" onClick={() => setShowPassword(!showPassword)} > {showPassword ? <EyeOff size={18} /> : <Eye size={18} />} </button> </div> </div> <button type="submit" className="btn btn-primary btn-auth" disabled={loading} > {loading ? ( <div className="btn-loading"> <div className="spinner"></div> Signing In... </div> ) : ( "Sign In to Dashboard" )} </button> </form> {/* Auth Links */} <div className="auth-links"> <Link to="/forgot-password" className="link-secondary"> Forgot your password? </Link> <div className="auth-divider"> <span>Don't have an account?</span> </div> <Link to="/register" className="btn btn-outline btn-auth"> Create Merchant Account </Link> </div> </div> {/* Features Section */} <div className="auth-features"> <h3>Why Choose SnapaDeal?</h3> <div className="feature-list"> <div className="feature-item"> <div className="feature-icon">📊</div> <div className="feature-text"> <h4>Advanced Analytics</h4> <p>Track your performance with detailed insights and real-time data</p> </div> </div> <div className="feature-item"> <div className="feature-icon">💰</div> <div className="feature-text"> <h4>Maximize Revenue</h4> <p>Increase sales with our proven deal platform and marketing tools</p> </div> </div> <div className="feature-item"> <div className="feature-icon">🎯</div> <div className="feature-text"> <h4>Reach More Customers</h4> <p>Connect with thousands of potential buyers across Uganda</p> </div> </div> <div className="feature-item"> <div className="feature-icon">🚀</div> <div className="feature-text"> <h4>Easy Management</h4> <p>Manage deals, customers, and finances from one dashboard</p> </div> </div> </div> </div> </div> </div> )}export default Loginoyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app$ cat src/App.tsximport { BrowserRouter as Router, Routes, Route } from "react-router-dom"import { AuthProvider } from "./contexts/AuthContext"import { Toaster } from "react-hot-toast"import Navbar from "./components/Navbar"import Sidebar from "./components/Sidebar"import Login from "./pages/Login"import Register from "./pages/Register"import VerifyOTP from "./pages/VerifyOTP"import ForgotPassword from "./pages/ForgotPassword"import ResetPassword from "./pages/ResetPassword"import Dashboard from "./pages/Dashboard"import Deals from "./pages/Deals"import CreateDeal from "./pages/CreateDeal"import EditDeal from "./pages/EditDeal"import Analytics from "./pages/Analytics"import Customers from "./pages/Customers"import Financials from "./pages/Financials"import Profile from "./pages/Profile"import ProtectedRoute from "./components/ProtectedRoute"import "./App.css"function App() { return ( <AuthProvider> <Router basename="/merchant"> <div className="App"> <Toaster position="top-right" /> <Routes> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route path="/verify-otp" element={<VerifyOTP />} /> <Route path="/forgot-password" element={<ForgotPassword />} /> <Route path="/reset-password" element={<ResetPassword />} /> <Route path="/*" element={ <ProtectedRoute> <div className="dashboard-layout"> <Sidebar /> <div className="main-content"> <Navbar /> <div className="content-area"> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/deals" element={<Deals />} /> <Route path="/deals/create" element={<CreateDeal />} /> <Route path="/deals/edit/:id" element={<EditDeal />} /> <Route path="/analytics" element={<Analytics />} /> <Route path="/customers" element={<Customers />} /> <Route path="/financials" element={<Financials />} /> <Route path="/profile" element={<Profile />} /> </Routes> </div> </div> </div> </ProtectedRoute> } /> </Routes> </div> </Router> </AuthProvider> )}export default Appoyokadaniel@192:~/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app$ here is my register page"use client"import type React from "react"import { useState } from "react"import { Link, useNavigate } from "react-router-dom"import { useAuth } from "../contexts/AuthContext"import { Eye, EyeOff, Building, User, Mail, Phone, Lock, CheckCircle } from "lucide-react"import toast from "react-hot-toast"const Register: React.FC = () => { const [formData, setFormData] = useState({ first_name: "", last_name: "", email: "", phone: "", password: "", confirmPassword: "", business_name: "", business_type: "", }) const [loading, setLoading] = useState(false) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const { register } = useAuth() const navigate = useNavigate() const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (formData.password !== formData.confirmPassword) { toast.error("Passwords do not match") return } if (formData.password.length < 6) { toast.error("Password must be at least 6 characters") return } setLoading(true) try { const result = await register({ first_name: formData.first_name, last_name: formData.last_name, email: formData.email, phone: formData.phone, password: formData.password, role: "merchant", }) toast.success("Registration successful! Please check your email for verification code.") // Redirect to OTP verification page navigate(`/verify-otp?email=${encodeURIComponent(result.email)}`) } catch (error: any) { toast.error(error.message) } finally { setLoading(false) } } return ( <div className="auth-container"> <div className="auth-background"> <div className="auth-overlay"></div> </div> <div className="auth-content"> <div className="auth-card"> {/* Header Section */} <div className="auth-header"> <div className="auth-logo"> <img src="/logo.png" alt="SnapaDeal" className="logo-image" /> <div className="logo-text"> <h1 className="brand-name">SnapaDeal</h1> <p className="brand-tagline">Merchant Portal</p> </div> </div> <div className="auth-title"> <h2>Join SnapaDeal</h2> <p>Start selling on Uganda's premier deals platform</p> </div> </div> {/* Main Content */} <form onSubmit={handleSubmit} className="auth-form"> {/* Personal Information */} <div className="form-section"> <h3 className="section-title"> <User size={20} /> Personal Information </h3> <div className="form-row"> <div className="form-group"> <label className="form-label">First Name</label> <input type="text" name="first_name" value={formData.first_name} onChange={handleChange} className="form-control" placeholder="Enter your first name" required /> </div> <div className="form-group"> <label className="form-label">Last Name</label> <input type="text" name="last_name" value={formData.last_name} onChange={handleChange} className="form-control" placeholder="Enter your last name" required /> </div> </div> <div className="form-group"> <label className="form-label"> <Mail size={16} /> Email Address </label> <div className="input-group"> <div className="input-icon"> <Mail size={18} /> </div> <input type="email" name="email" value={formData.email} onChange={handleChange} className="form-control" placeholder="Enter your email address" required /> </div> <small className="form-help">We'll send a verification code to this email</small> </div> <div className="form-group"> <label className="form-label"> <Phone size={16} /> Phone Number </label> <div className="input-group"> <div className="input-icon"> <Phone size={18} /> </div> <input type="tel" name="phone" value={formData.phone} onChange={handleChange} className="form-control" placeholder="+256700000000" required /> </div> </div> </div> {/* Business Information */} <div className="form-section"> <h3 className="section-title"> <Building size={20} /> Business Information </h3> <div className="form-group"> <label className="form-label">Business Name</label> <input type="text" name="business_name" value={formData.business_name} onChange={handleChange} className="form-control" placeholder="Your business or company name" required /> </div> <div className="form-group"> <label className="form-label">Business Category</label> <select name="business_type" value={formData.business_type} onChange={handleChange} className="form-select" required > <option value="">Select your business category</option> <option value="restaurant">Restaurant & Food</option> <option value="beauty">Beauty & Spa</option> <option value="fitness">Fitness & Health</option> <option value="entertainment">Entertainment</option> <option value="retail">Retail & Shopping</option> <option value="services">Professional Services</option> <option value="travel">Travel & Tourism</option> <option value="automotive">Automotive</option> <option value="other">Other</option> </select> </div> </div> {/* Security */} <div className="form-section"> <h3 className="section-title"> <Lock size={20} /> Account Security </h3> <div className="form-row"> <div className="form-group"> <label className="form-label">Password</label> <div className="password-input"> <div className="input-icon"> <Lock size={18} /> </div> <input type={showPassword ? "text" : "password"} name="password" value={formData.password} onChange={handleChange} className="form-control" placeholder="Create a secure password" minLength={6} required /> <button type="button" className="password-toggle" onClick={() => setShowPassword(!showPassword)} > {showPassword ? <EyeOff size={18} /> : <Eye size={18} />} </button> </div> </div> <div className="form-group"> <label className="form-label">Confirm Password</label> <div className="password-input"> <div className="input-icon"> <Lock size={18} /> </div> <input type={showConfirmPassword ? "text" : "password"} name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} className="form-control" placeholder="Confirm your password" required /> <button type="button" className="password-toggle" onClick={() => setShowConfirmPassword(!showConfirmPassword)} > {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />} </button> </div> </div> </div> <div className="password-requirements"> <small>Password must be at least 6 characters long</small> </div> </div> {/* Terms Agreement */} <div className="form-group checkbox-group"> <label className="checkbox-label"> <input type="checkbox" required /> <CheckCircle size={16} /> <span> I agree to the{" "} <Link to="/terms" className="link-primary"> Terms of Service </Link>{" "} and{" "} <Link to="/privacy" className="link-primary"> Privacy Policy </Link> </span> </label> </div> <button type="submit" className="btn btn-primary btn-auth" disabled={loading} > {loading ? ( <div className="btn-loading"> <div className="spinner"></div> Creating Account... </div> ) : ( "Create Merchant Account" )} </button> </form> {/* Auth Links */} <div className="auth-links"> <div className="auth-divider"> <span>Already have an account?</span> </div> <Link to="/login" className="btn btn-outline btn-auth"> Sign In to Dashboard </Link> </div> </div> {/* Benefits Section */} <div className="auth-features"> <h3>Merchant Benefits</h3> <div className="feature-list"> <div className="feature-item"> <div className="feature-icon">🚀</div> <div className="feature-text"> <h4>Quick Setup</h4> <p>Get your deals live in minutes, not days</p> </div> </div> <div className="feature-item"> <div className="feature-icon">👥</div> <div className="feature-text"> <h4>Large Customer Base</h4> <p>Access thousands of deal-seeking customers</p> </div> </div> <div className="feature-item"> <div className="feature-icon">📈</div> <div className="feature-text"> <h4>Analytics & Insights</h4> <p>Track performance and optimize your deals</p> </div> </div> <div className="feature-item"> <div className="feature-icon">💳</div> <div className="feature-text"> <h4>Secure Payments</h4> <p>Fast, reliable payment processing</p> </div> </div> </div> </div> </div> </div> )}export default Register

on trying to run the front end i got these errorsFailed to compile.Module not found: Error: Can't resolve 'clsx' in '/home/oyokadaniel/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app/src/lib'ERROR in ./src/lib/utils.ts 3:0-28Module not found: Error: Can't resolve 'clsx' in '/home/oyokadaniel/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app/src/lib'ERROR in ./src/lib/utils.ts 4:0-41Module not found: Error: Can't resolve 'tailwind-merge' in '/home/oyokadaniel/Desktop/SNAP DEAL PROJECT/Snapadeal-Uganda/merchant-app/src/lib'webpack compiled with 2 errorsFiles successfully emitted, waiting for typecheck results...Issues checking in progress...ERROR in src/lib/utils.ts:1:39TS2307: Cannot find module 'clsx' or its corresponding type declarations. > 1 | import { type ClassValue, clsx } from "clsx" | ^^^^^^ 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) {ERROR in src/lib/utils.ts:2:25TS2307: Cannot find module 'tailwind-merge' or its corresponding type declarations. 1 | import { type ClassValue, clsx } from "clsx" > 2 | import { twMerge } from "tailwind-merge" | ^^^^^^^^^^^^^^^^ 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs))here is my current api serviceimport axios from "axios"const API_BASE_URL = process.env.NODE_ENV === "production" ? "/api/v1" : "http://localhost:8080/api/v1"export const api = axios.create({ baseURL: API_BASE_URL, headers: { "Content-Type": "application/json", },})// Add token to requestsapi.interceptors.request.use((config) => { const token = localStorage.getItem("merchant_token") if (token) { config.headers.Authorization = Bearer ${token} } return config})// Handle token expirationapi.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { // Only redirect to login if we're not already on login page if (!window.location.pathname.includes("/login")) { localStorage.removeItem("merchant_token") window.location.href = "/login" } } return Promise.reject(error) },)// Create a separate instance for public API calls (like categories)export const publicApi = axios.create({ baseURL: API_BASE_URL, headers: { "Content-Type": "application/json", },})// Add response interceptor for public API (no auth handling)publicApi.interceptors.response.use( (response) => response, (error) => { console.error("Public API Error:", error) return Promise.reject(error) },)and here is my app.tsximport { BrowserRouter as Router, Routes, Route } from "react-router-dom"import { AuthProvider } from "./contexts/AuthContext"import { Toaster } from "react-hot-toast"import Navbar from "./components/Navbar"import Sidebar from "./components/Sidebar"import Login from "./pages/Login"import Register from "./pages/Register"import VerifyOTP from "./pages/VerifyOTP"import ForgotPassword from "./pages/ForgotPassword"import ResetPassword from "./pages/ResetPassword"import Dashboard from "./pages/Dashboard"import Deals from "./pages/Deals"import CreateDeal from "./pages/CreateDeal"import EditDeal from "./pages/EditDeal"import Analytics from "./pages/Analytics"import Customers from "./pages/Customers"import Financials from "./pages/Financials"import Profile from "./pages/Profile"import ProtectedRoute from "./components/ProtectedRoute"import "./App.css"function App() { return ( <AuthProvider> <Router basename="/merchant"> <div className="App"> <Toaster position="top-right" /> <Routes> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route path="/verify-otp" element={<VerifyOTP />} /> <Route path="/forgot-password" element={<ForgotPassword />} /> <Route path="/reset-password" element={<ResetPassword />} /> <Route path="/*" element={ <ProtectedRoute> <div className="dashboard-layout"> <Sidebar /> <div className="main-content"> <Navbar /> <div className="content-area"> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/deals" element={<Deals />} /> <Route path="/deals/create" element={<CreateDeal />} /> <Route path="/deals/edit/:id" element={<EditDeal />} /> <Route path="/analytics" element={<Analytics />} /> <Route path="/customers" element={<Customers />} /> <Route path="/financials" element={<Financials />} /> <Route path="/profile" element={<Profile />} /> </Routes> </div> </div> </div> </ProtectedRoute> } /> </Routes> </div> </Router> </AuthProvider> )}export default App