feat: Initialize monorepo structure and comprehensive documentation
This commit establishes the new monorepo architecture for the KROW Workforce platform. Key changes include: - Reorganized project into `frontend-web`, `mobile-apps`, `firebase`, `scripts`, and `secrets` directories. - Updated `Makefile` to support the new monorepo layout and automate Base44 export integration. - Fixed `scripts/prepare-export.js` for ES module compatibility and global component import resolution. - Created and updated `CONTRIBUTING.md` for developer onboarding. - Restructured, renamed, and translated all `docs/` files for clarity and consistency. - Implemented an interactive internal launchpad with diagram viewing capabilities. - Configured base Firebase project files (`firebase.json`, security rules). - Updated `README.md` to reflect the new project structure and documentation overview.
This commit is contained in:
bwnyasse
748
frontend-web/src/pages/ClientDashboard.jsx
Normal file
748
frontend-web/src/pages/ClientDashboard.jsx
Normal file
@@ -0,0 +1,748 @@
|
||||
import React, { useState } from "react";
|
||||
import { base44 } from "@/api/base44Client";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { createPageUrl } from "@/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Calendar, Plus, Clock, DollarSign, MessageSquare, RefreshCw, ArrowRight, Users, CloudOff, MapPin, AlertTriangle, Package, Download, TrendingUp, TrendingDown, BarChart3, Sparkles } from "lucide-react";
|
||||
import { format, parseISO, differenceInDays, startOfMonth, endOfMonth, subMonths } from "date-fns";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
|
||||
export default function ClientDashboard() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { toast } = useToast();
|
||||
const [reorderingId, setReorderingId] = useState(null);
|
||||
|
||||
const { data: user } = useQuery({
|
||||
queryKey: ['current-user'],
|
||||
queryFn: () => base44.auth.me(),
|
||||
});
|
||||
|
||||
const { data: events } = useQuery({
|
||||
queryKey: ['client-events'],
|
||||
queryFn: async () => {
|
||||
const allEvents = await base44.entities.Event.list('-date');
|
||||
const clientEvents = allEvents.filter(e =>
|
||||
e.client_email === user?.email ||
|
||||
e.business_name === user?.company_name ||
|
||||
e.created_by === user?.email
|
||||
);
|
||||
|
||||
if (clientEvents.length === 0) {
|
||||
return allEvents.filter(e => e.status === "Completed");
|
||||
}
|
||||
|
||||
return clientEvents;
|
||||
},
|
||||
initialData: [],
|
||||
enabled: !!user
|
||||
});
|
||||
|
||||
const createEventMutation = useMutation({
|
||||
mutationFn: (eventData) => base44.entities.Event.create(eventData),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['client-events'] });
|
||||
toast({
|
||||
title: "✅ Order Created",
|
||||
description: "Your reorder has been created successfully",
|
||||
});
|
||||
setReorderingId(null);
|
||||
},
|
||||
onError: () => {
|
||||
toast({
|
||||
title: "❌ Failed to Create Order",
|
||||
description: "Please try again",
|
||||
variant: "destructive",
|
||||
});
|
||||
setReorderingId(null);
|
||||
},
|
||||
});
|
||||
|
||||
// Enhanced Analytics Calculations
|
||||
const todayOrders = events.filter(e => {
|
||||
const eventDate = new Date(e.date);
|
||||
const today = new Date();
|
||||
return eventDate.toDateString() === today.toDateString();
|
||||
});
|
||||
|
||||
const activeOrders = events.filter(e => e.status === "Active" || e.status === "Confirmed").length;
|
||||
const completedOrders = events.filter(e => e.status === "Completed");
|
||||
const totalSpending = completedOrders.reduce((sum, e) => sum + (e.total || 0), 0);
|
||||
const needsAttention = events.filter(e => e.status === "Pending" || e.status === "Draft").length;
|
||||
|
||||
// Monthly spending trend (last 6 months)
|
||||
const last6Months = Array.from({ length: 6 }, (_, i) => {
|
||||
const date = subMonths(new Date(), 5 - i);
|
||||
return {
|
||||
month: format(date, 'MMM'),
|
||||
fullDate: date
|
||||
};
|
||||
});
|
||||
|
||||
const spendingTrend = last6Months.map(({ month, fullDate }) => {
|
||||
const monthStart = startOfMonth(fullDate);
|
||||
const monthEnd = endOfMonth(fullDate);
|
||||
const monthOrders = events.filter(e => {
|
||||
const eventDate = new Date(e.date);
|
||||
return eventDate >= monthStart && eventDate <= monthEnd && e.status === "Completed";
|
||||
});
|
||||
const spend = monthOrders.reduce((sum, e) => sum + (e.total || 0), 0);
|
||||
const orderCount = monthOrders.length;
|
||||
const staffCount = monthOrders.reduce((sum, e) => sum + (e.requested || 0), 0);
|
||||
return { month, spend, orderCount, staffCount };
|
||||
});
|
||||
|
||||
// Cost breakdown by category
|
||||
const currentMonth = new Date().getMonth();
|
||||
const currentYear = new Date().getFullYear();
|
||||
const thisMonthOrders = events.filter(e => {
|
||||
const eventDate = new Date(e.date);
|
||||
return eventDate.getMonth() === currentMonth &&
|
||||
eventDate.getFullYear() === currentYear &&
|
||||
e.status === "Completed";
|
||||
});
|
||||
|
||||
const lastMonthOrders = events.filter(e => {
|
||||
const eventDate = new Date(e.date);
|
||||
const lastMonth = subMonths(new Date(), 1);
|
||||
return eventDate.getMonth() === lastMonth.getMonth() &&
|
||||
eventDate.getFullYear() === lastMonth.getFullYear() &&
|
||||
e.status === "Completed";
|
||||
});
|
||||
|
||||
const thisMonthSpend = thisMonthOrders.reduce((sum, e) => sum + (e.total || 0), 0);
|
||||
const lastMonthSpend = lastMonthOrders.reduce((sum, e) => sum + (e.total || 0), 0);
|
||||
const spendChange = lastMonthSpend > 0 ? ((thisMonthSpend - lastMonthSpend) / lastMonthSpend) * 100 : 0;
|
||||
|
||||
// Labor analytics
|
||||
const totalStaffHired = completedOrders.reduce((sum, e) => sum + (e.requested || 0), 0);
|
||||
const thisMonthStaff = thisMonthOrders.reduce((sum, e) => sum + (e.requested || 0), 0);
|
||||
const lastMonthStaff = lastMonthOrders.reduce((sum, e) => sum + (e.requested || 0), 0);
|
||||
const staffChange = lastMonthStaff > 0 ? ((thisMonthStaff - lastMonthStaff) / lastMonthStaff) * 100 : 0;
|
||||
|
||||
const avgStaffPerOrder = completedOrders.length > 0 ? totalStaffHired / completedOrders.length : 0;
|
||||
const costPerStaff = totalStaffHired > 0 ? totalSpending / totalStaffHired : 0;
|
||||
|
||||
// Sales analytics
|
||||
const avgOrderValue = completedOrders.length > 0 ? totalSpending / completedOrders.length : 0;
|
||||
|
||||
// Upcoming
|
||||
const upcomingEvents = events
|
||||
.filter(e => {
|
||||
const eventDate = new Date(e.date);
|
||||
const today = new Date();
|
||||
return eventDate > today && e.status !== "Canceled";
|
||||
})
|
||||
.sort((a, b) => new Date(a.date) - new Date(b.date))
|
||||
.slice(0, 5);
|
||||
|
||||
// Frequent orders
|
||||
const pastOrders = events.filter(e => e.status === "Completed");
|
||||
const orderFrequency = pastOrders.reduce((acc, event) => {
|
||||
const key = event.event_name;
|
||||
if (!acc[key]) {
|
||||
acc[key] = {
|
||||
event,
|
||||
count: 0,
|
||||
lastOrdered: event.date,
|
||||
totalSpent: 0,
|
||||
avgCost: 0,
|
||||
totalStaff: 0
|
||||
};
|
||||
}
|
||||
acc[key].count++;
|
||||
acc[key].totalSpent += (event.total || 0);
|
||||
acc[key].totalStaff += (event.requested || 0);
|
||||
if (new Date(event.date) > new Date(acc[key].lastOrdered)) {
|
||||
acc[key].lastOrdered = event.date;
|
||||
acc[key].event = event;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
Object.values(orderFrequency).forEach(item => {
|
||||
item.avgCost = item.count > 0 ? item.totalSpent / item.count : 0;
|
||||
});
|
||||
|
||||
const frequentOrders = Object.values(orderFrequency)
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, 3);
|
||||
|
||||
const totalReorders = frequentOrders.reduce((sum, item) => sum + item.count, 0);
|
||||
const timeSavedMinutes = totalReorders * 15;
|
||||
const timeSavedHours = Math.floor(timeSavedMinutes / 60);
|
||||
const remainingMinutes = timeSavedMinutes % 60;
|
||||
|
||||
const handleQuickReorder = (event) => {
|
||||
setReorderingId(event.id);
|
||||
|
||||
const reorderData = {
|
||||
event_name: event.event_name,
|
||||
business_id: event.business_id,
|
||||
business_name: event.business_name,
|
||||
hub: event.hub,
|
||||
status: "Draft",
|
||||
requested: event.requested,
|
||||
shifts: event.shifts,
|
||||
notes: `Reorder of: ${event.event_name}`,
|
||||
};
|
||||
|
||||
createEventMutation.mutate(reorderData);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const hour = new Date().getHours();
|
||||
const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50">
|
||||
<div className="max-w-[1600px] mx-auto p-6 space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-[#1C323E] mb-1">
|
||||
{greeting}, {user?.full_name?.split(' ')[0] || 'Client'}
|
||||
</h1>
|
||||
<p className="text-slate-600">Here's what's happening with your orders</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline" onClick={handleRefresh}>
|
||||
<CloudOff className="w-4 h-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Stats - 4 Cards */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Link to={createPageUrl("CreateEvent")}>
|
||||
<Card className="bg-gradient-to-br from-[#0A39DF] to-[#1C323E] border-0 shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<Plus className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<ArrowRight className="w-5 h-5 text-white/60 group-hover:text-white group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
<p className="text-white/80 text-sm mb-2">Create New</p>
|
||||
<p className="text-2xl font-bold text-white">Order Now</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-all">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<Badge className="bg-blue-50 text-blue-700">{todayOrders.length > 0 ? 'Active' : 'None'}</Badge>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-2">Today's Orders</p>
|
||||
<p className="text-3xl font-bold text-[#1C323E]">{todayOrders.length}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-all">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center">
|
||||
<Package className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<Badge className="bg-green-50 text-green-700">Active</Badge>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-2">In Progress</p>
|
||||
<p className="text-3xl font-bold text-[#1C323E]">{activeOrders}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{needsAttention > 0 ? (
|
||||
<Link to={createPageUrl("ClientOrders")}>
|
||||
<Card className="bg-gradient-to-br from-amber-500 to-orange-600 border-0 shadow-lg hover:shadow-xl transition-all cursor-pointer group">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<AlertTriangle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<ArrowRight className="w-5 h-5 text-white/60 group-hover:text-white group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
<p className="text-white/90 text-sm mb-2">Needs Attention</p>
|
||||
<p className="text-3xl font-bold text-white">{needsAttention}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
) : (
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center">
|
||||
<Sparkles className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<Badge className="bg-green-50 text-green-700">All Clear</Badge>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-2">Status</p>
|
||||
<p className="text-2xl font-bold text-[#1C323E]">All Good!</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
|
||||
{/* Left Column - Analytics (2 cols) */}
|
||||
<div className="col-span-2 space-y-6">
|
||||
|
||||
{/* Big Analytics Cards */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* Cost Analysis */}
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<DollarSign className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-wide">Cost</p>
|
||||
<p className="font-bold text-[#1C323E]">Analysis</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">This Month</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-3xl font-bold text-[#1C323E]">
|
||||
${(thisMonthSpend / 1000).toFixed(1)}k
|
||||
</p>
|
||||
{spendChange !== 0 && (
|
||||
<div className={`flex items-center gap-1 mb-1 ${spendChange > 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{spendChange > 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||
<span className="text-sm font-semibold">{Math.abs(spendChange).toFixed(0)}%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-100 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600">Avg Order</span>
|
||||
<span className="font-bold text-[#1C323E]">${Math.round(avgOrderValue).toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600">Cost/Staff</span>
|
||||
<span className="font-bold text-[#1C323E]">${Math.round(costPerStaff)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<ResponsiveContainer width="100%" height={60}>
|
||||
<LineChart data={spendingTrend.slice(-6)}>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="spend"
|
||||
stroke="#10b981"
|
||||
strokeWidth={3}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Labor Summary */}
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<Users className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-wide">Labor</p>
|
||||
<p className="font-bold text-[#1C323E]">Summary</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">This Month</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-3xl font-bold text-[#1C323E]">{thisMonthStaff}</p>
|
||||
{staffChange !== 0 && (
|
||||
<div className={`flex items-center gap-1 mb-1 ${staffChange > 0 ? 'text-blue-600' : 'text-red-600'}`}>
|
||||
{staffChange > 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||
<span className="text-sm font-semibold">{Math.abs(staffChange).toFixed(0)}%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-100 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600">Total Staff</span>
|
||||
<span className="font-bold text-[#1C323E]">{totalStaffHired}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600">Avg/Order</span>
|
||||
<span className="font-bold text-[#1C323E]">{Math.round(avgStaffPerOrder)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<ResponsiveContainer width="100%" height={60}>
|
||||
<BarChart data={spendingTrend.slice(-6)}>
|
||||
<Bar dataKey="staffCount" fill="#3b82f6" radius={[6, 6, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Sales Analytics */}
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-wide">Sales</p>
|
||||
<p className="font-bold text-[#1C323E]">Analytics</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">This Month</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<p className="text-3xl font-bold text-[#1C323E]">{thisMonthOrders.length}</p>
|
||||
<span className="text-sm text-slate-500 mb-1">orders</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-100 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600">Total Orders</span>
|
||||
<span className="font-bold text-[#1C323E]">{events.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-600">Completed</span>
|
||||
<span className="font-bold text-[#1C323E]">{completedOrders.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<ResponsiveContainer width="100%" height={60}>
|
||||
<LineChart data={spendingTrend.slice(-6)}>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="orderCount"
|
||||
stroke="#a855f7"
|
||||
strokeWidth={3}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 6-Month Trend */}
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="font-bold text-[#1C323E] mb-1">Spending Trend</h3>
|
||||
<p className="text-sm text-slate-600">Last 6 months overview</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">6 Months</Badge>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<LineChart data={spendingTrend}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
tick={{ fontSize: 12 }}
|
||||
stroke="#94a3b8"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12 }}
|
||||
stroke="#94a3b8"
|
||||
tickFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
fontSize: '14px',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #e2e8f0',
|
||||
borderRadius: '12px',
|
||||
padding: '12px'
|
||||
}}
|
||||
formatter={(value) => [`$${Math.round(value).toLocaleString()}`, 'Spend']}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="spend"
|
||||
stroke="#0A39DF"
|
||||
strokeWidth={4}
|
||||
dot={{ fill: '#0A39DF', r: 5 }}
|
||||
activeDot={{ r: 7 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Quick Reorder */}
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="font-bold text-[#1C323E] mb-1 flex items-center gap-2">
|
||||
<RefreshCw className="w-5 h-5 text-[#0A39DF]" />
|
||||
Order it again
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
One tap to reorder • Saved {timeSavedHours}h {remainingMinutes}m
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="outline">Top 3</Badge>
|
||||
</div>
|
||||
|
||||
{frequentOrders.length > 0 ? (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{frequentOrders.map((item, index) => {
|
||||
const { event, count, avgCost, totalStaff, lastOrdered } = item;
|
||||
const isReordering = reorderingId === event.id;
|
||||
const medals = [
|
||||
{ icon: "🥇", color: "from-yellow-400 to-amber-500" },
|
||||
{ icon: "🥈", color: "from-slate-400 to-slate-500" },
|
||||
{ icon: "🥉", color: "from-amber-600 to-orange-700" }
|
||||
];
|
||||
const medal = medals[index];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
className="relative p-5 rounded-2xl bg-gradient-to-br from-slate-50 to-white border-2 border-slate-200 hover:border-[#0A39DF] hover:shadow-lg transition-all"
|
||||
>
|
||||
<div className="absolute -top-3 -left-3">
|
||||
<div className={`w-12 h-12 bg-gradient-to-br ${medal.color} rounded-xl flex items-center justify-center text-2xl shadow-lg`}>
|
||||
{medal.icon}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Badge variant="outline" className="mb-3 text-xs font-semibold">
|
||||
Ordered {count}x
|
||||
</Badge>
|
||||
|
||||
<h4 className="font-bold text-sm text-[#1C323E] mb-3 line-clamp-2 min-h-[2.5rem]">
|
||||
{event.event_name}
|
||||
</h4>
|
||||
|
||||
{event.hub && (
|
||||
<div className="flex items-center gap-1.5 mb-4 text-xs text-slate-600">
|
||||
<MapPin className="w-3.5 h-3.5 text-slate-400" />
|
||||
<span className="truncate">{event.hub}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 mb-4 p-3 bg-white rounded-xl border border-slate-100">
|
||||
<div>
|
||||
<p className="text-[10px] text-slate-500 mb-1">Avg Cost</p>
|
||||
<p className="text-lg font-bold text-[#1C323E]">
|
||||
${(avgCost / 1000).toFixed(1)}k
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] text-slate-500 mb-1">Staff</p>
|
||||
<p className="text-lg font-bold text-[#1C323E]">
|
||||
{Math.round(totalStaff / count)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 mb-4 text-xs text-slate-500">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
<span>Last ordered {format(parseISO(lastOrdered), "MMM d")}</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
className="w-full bg-gradient-to-r from-[#0A39DF] to-[#1C323E] hover:opacity-90 text-white rounded-xl shadow-md"
|
||||
disabled={isReordering}
|
||||
onClick={() => handleQuickReorder(event)}
|
||||
>
|
||||
{isReordering ? (
|
||||
<>
|
||||
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
|
||||
Reordering...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Reorder Now
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-20 h-20 mx-auto mb-4 bg-slate-100 rounded-full flex items-center justify-center">
|
||||
<RefreshCw className="w-10 h-10 text-slate-300" />
|
||||
</div>
|
||||
<p className="text-slate-600 font-medium mb-2">No previous orders yet</p>
|
||||
<p className="text-sm text-slate-500">Complete your first order to see recommendations</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Quick Access (1 col) */}
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Financial Card */}
|
||||
<Card className="bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 border-0 shadow-xl">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-white/80 text-sm">Total Spending</p>
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-2 h-2 bg-white/50 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-white/50 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-5xl font-bold text-white mb-2">
|
||||
${Math.round(totalSpending / 1000)}k
|
||||
</p>
|
||||
<p className="text-white/70 text-sm">Lifetime value • {completedOrders.length} orders</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Link to={createPageUrl("ClientOrders")}>
|
||||
<Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-all cursor-pointer">
|
||||
<CardContent className="p-5 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl flex items-center justify-center">
|
||||
<Package className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<p className="text-[#1C323E] font-semibold text-sm">All Orders</p>
|
||||
<p className="text-slate-500 text-xs mt-1">{events.length} total</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Link to={createPageUrl("Messages")}>
|
||||
<Card className="bg-white border-slate-200 shadow-sm hover:shadow-md transition-all cursor-pointer">
|
||||
<CardContent className="p-5 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl flex items-center justify-center">
|
||||
<MessageSquare className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<p className="text-[#1C323E] font-semibold text-sm">Messages</p>
|
||||
<p className="text-slate-500 text-xs mt-1">Get support</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Coming Up */}
|
||||
<Card className="bg-white border-slate-200 shadow-sm">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-bold text-[#1C323E] flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-[#0A39DF]" />
|
||||
Coming Up
|
||||
</h3>
|
||||
<Link to={createPageUrl("ClientOrders")}>
|
||||
<Button variant="ghost" size="sm" className="h-7 text-xs">
|
||||
View All
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{upcomingEvents.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{upcomingEvents.map((event) => {
|
||||
const daysUntil = differenceInDays(new Date(event.date), new Date());
|
||||
const isUrgent = daysUntil <= 3;
|
||||
const isToday = daysUntil === 0;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={event.id}
|
||||
to={createPageUrl(`EventDetail?id=${event.id}`)}
|
||||
className={`block p-3 rounded-xl transition-all border-2 ${
|
||||
isToday
|
||||
? 'bg-red-50 border-red-200 hover:bg-red-100'
|
||||
: isUrgent
|
||||
? 'bg-amber-50 border-amber-200 hover:bg-amber-100'
|
||||
: 'bg-slate-50 border-slate-200 hover:border-[#0A39DF] hover:bg-white'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<p className={`font-semibold text-sm ${
|
||||
isToday ? 'text-red-700' : isUrgent ? 'text-amber-700' : 'text-[#1C323E]'
|
||||
}`}>
|
||||
{event.event_name}
|
||||
</p>
|
||||
{(isToday || isUrgent) && (
|
||||
<Badge className={`text-[10px] ${
|
||||
isToday
|
||||
? 'bg-red-100 text-red-700'
|
||||
: 'bg-amber-100 text-amber-700'
|
||||
}`}>
|
||||
{isToday ? "Today" : `${daysUntil}d`}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-600">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>{format(new Date(event.date), "MMM d, h:mm a")}</span>
|
||||
<span>•</span>
|
||||
<Users className="w-3 h-3" />
|
||||
<span>{event.requested || 0} staff</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 mx-auto mb-3 bg-slate-100 rounded-full flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-slate-300" />
|
||||
</div>
|
||||
<p className="text-sm text-slate-500">No upcoming orders</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user