style: standardize header icons and update sidebar navigation labels and icons
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
|||||||
ArrowLeft, TrendingUp, Bike, DollarSign, Calendar,
|
ArrowLeft, TrendingUp, Bike, DollarSign, Calendar,
|
||||||
CreditCard, FileText, Download, Check,
|
CreditCard, FileText, Download, Check,
|
||||||
Printer, BarChart3, Wallet, Clock, Shield, Percent, Activity, AlertTriangle,
|
Printer, BarChart3, Wallet, Clock, Shield, Percent, Activity, AlertTriangle,
|
||||||
Receipt, CreditCardIcon, Zap, Smartphone, ChevronRight
|
Receipt, CreditCardIcon, Zap, Smartphone, ChevronRight, Target
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { investors, bikes, transactions } from '@/data/mockData';
|
import { investors, bikes, transactions } from '@/data/mockData';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
@@ -57,7 +57,8 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
|
|||||||
</button>
|
</button>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">{investment.planName}</h1>
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800 flex items-center gap-2">
|
||||||
|
<Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" />{investment.planName}</h1>
|
||||||
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}>
|
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}>
|
||||||
{investment.planType} Plan
|
{investment.planType} Plan
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -93,7 +93,8 @@ export default function NewInvestmentPage() {
|
|||||||
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
||||||
</button>
|
</button>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800 flex items-center gap-2">
|
||||||
|
<Zap className="w-5 h-5 lg:w-6 lg:h-6 text-investor" />
|
||||||
{step === 'select' ? 'Select Investment Plan' : 'Configure New Investment'}
|
{step === 'select' ? 'Select Investment Plan' : 'Configure New Investment'}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-slate-500">
|
<p className="text-sm text-slate-500">
|
||||||
|
|||||||
@@ -10,12 +10,15 @@ export default function MyInvestmentsPage() {
|
|||||||
const investor = investors[0]; // mock logged-in investor
|
const investor = investors[0]; // mock logged-in investor
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
|
<div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800 mb-2">My Investments</h1>
|
<h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
|
||||||
<p className="text-slate-500">Manage your active portfolios and track your earnings.</p>
|
<Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" /> My Investments
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">Manage your active portfolios and track your earnings.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
href="/investor/plans/new"
|
href="/investor/plans/new"
|
||||||
className="inline-flex items-center gap-2 px-6 py-3 bg-investor text-white rounded-xl font-bold shadow-lg shadow-investor/20 hover:bg-investor-dark transition-all transform hover:-translate-y-0.5 active:scale-95"
|
className="inline-flex items-center gap-2 px-6 py-3 bg-investor text-white rounded-xl font-bold shadow-lg shadow-investor/20 hover:bg-investor-dark transition-all transform hover:-translate-y-0.5 active:scale-95"
|
||||||
@@ -101,9 +104,8 @@ export default function MyInvestmentsPage() {
|
|||||||
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1">+{inv.expectedRoi}% ROI</p>
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1">+{inv.expectedRoi}% ROI</p>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-5">
|
<td className="px-6 py-5">
|
||||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase ${
|
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase ${inv.status === 'active' ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-slate-50 text-slate-600 border border-slate-100'
|
||||||
inv.status === 'active' ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-slate-50 text-slate-600 border border-slate-100'
|
}`}>
|
||||||
}`}>
|
|
||||||
<div className={`w-1.5 h-1.5 rounded-full ${inv.status === 'active' ? 'bg-green-500' : 'bg-slate-400'}`} />
|
<div className={`w-1.5 h-1.5 rounded-full ${inv.status === 'active' ? 'bg-green-500' : 'bg-slate-400'}`} />
|
||||||
{inv.status}
|
{inv.status}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -111,7 +111,9 @@ export default function InvestorWithdrawPage() {
|
|||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
<div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl lg:text-2xl font-bold text-slate-800">Withdraw Funds</h1>
|
<h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
|
||||||
|
<CreditCard className="w-5 h-5 lg:w-6 lg:h-6 text-investor" /> Withdraw Funds
|
||||||
|
</h1>
|
||||||
<p className="text-sm text-slate-500 mt-1">Request withdrawals to your bank or mobile banking accounts</p>
|
<p className="text-sm text-slate-500 mt-1">Request withdrawals to your bank or mobile banking accounts</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ import {
|
|||||||
LogOut,
|
LogOut,
|
||||||
Calculator,
|
Calculator,
|
||||||
Wrench,
|
Wrench,
|
||||||
Target, User
|
Target, User, History
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { getUserName, getUserRole, logout } from '@/lib/auth';
|
import { getUserName, getUserRole, logout } from '@/lib/auth';
|
||||||
|
|
||||||
@@ -65,9 +65,9 @@ const bikerNavItems = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const investorNavItems = [
|
const investorNavItems = [
|
||||||
{ label: 'Dashboard', href: '/investor', icon: BarChart3 },
|
{ label: 'Dashboard', href: '/investor', icon: Bike },
|
||||||
{ label: 'My Investments', href: '/investor/plans', icon: Target },
|
{ label: 'My Investments', href: '/investor/plans', icon: Target },
|
||||||
{ label: 'Rental History', href: '/investor/rental-history', icon: FileText },
|
{ label: 'Rental History', href: '/investor/rental-history', icon: History },
|
||||||
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
||||||
{ label: 'My Profile', href: '/investor/profile', icon: User },
|
{ label: 'My Profile', href: '/investor/profile', icon: User },
|
||||||
];
|
];
|
||||||
@@ -100,14 +100,13 @@ export default function Sidebar() {
|
|||||||
isInvestor ? investorNavItems :
|
isInvestor ? investorNavItems :
|
||||||
isShop ? shopNavItems : bikerNavItems;
|
isShop ? shopNavItems : bikerNavItems;
|
||||||
|
|
||||||
const bottomNavItems = isAdmin ? [
|
const bottomNavItems = isAdmin ? [
|
||||||
{ label: 'Home', href: '/admin', icon: BarChart3 },
|
{ label: 'Home', href: '/admin', icon: BarChart3 },
|
||||||
{ label: 'Fleet', href: '/admin/fleet', icon: Bike },
|
{ label: 'Fleet', href: '/admin/fleet', icon: Bike },
|
||||||
{ label: 'Users', href: '/admin/users', icon: Users },
|
{ label: 'Users', href: '/admin/users', icon: Users },
|
||||||
] : isInvestor ? [
|
] : isInvestor ? [
|
||||||
{ label: 'Home', href: '/investor', icon: BarChart3 },
|
{ label: 'Home', href: '/investor', icon: Bike },
|
||||||
{ label: 'Investments', href: '/investor/plans', icon: Target },
|
{ label: 'History', href: '/investor/rental-history', icon: History },
|
||||||
{ label: 'History', href: '/investor/rental-history', icon: FileText },
|
|
||||||
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
||||||
{ label: 'Profile', href: '/investor/profile', icon: User },
|
{ label: 'Profile', href: '/investor/profile', icon: User },
|
||||||
] : isShop ? [
|
] : isShop ? [
|
||||||
|
|||||||
Reference in New Issue
Block a user