+
+
+ {formData.vendor_id && (
+
+ )}
+
{/* 1. Hub (first) */}
+ ✓ Rates will be automatically applied from {formData.vendor_name} +
+ )} +
diff --git a/frontend-web/src/components/events/ShiftCard.jsx b/frontend-web/src/components/events/ShiftCard.jsx
index 7626ea65..f7849584 100644
--- a/frontend-web/src/components/events/ShiftCard.jsx
+++ b/frontend-web/src/components/events/ShiftCard.jsx
@@ -1,84 +1,160 @@
-import React from "react";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { MapPin, Plus } from "lucide-react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Clock, MapPin, Users, DollarSign, UserPlus } from "lucide-react";
+import SmartAssignModal from "./SmartAssignModal";
+import AssignedStaffManager from "./AssignedStaffManager";
-export default function ShiftCard({ shift, onNotifyStaff }) {
+const convertTo12Hour = (time24) => {
+ if (!time24 || time24 === "—") return time24;
+
+ try {
+ const parts = time24.split(':');
+ if (!parts || parts.length < 2) return time24;
+
+ const hours = parseInt(parts[0], 10);
+ const minutes = parseInt(parts[1], 10);
+
+ if (isNaN(hours) || isNaN(minutes)) return time24;
+
+ const period = hours >= 12 ? 'PM' : 'AM';
+ const hours12 = hours % 12 || 12;
+ const minutesStr = minutes.toString().padStart(2, '0');
+
+ return `${hours12}:${minutesStr} ${period}`;
+ } catch (error) {
+ console.error('Error converting time:', error);
+ return time24;
+ }
+};
+
+export default function ShiftCard({ shift, event }) {
+ const [assignModal, setAssignModal] = useState({ open: false, role: null });
+
+ const roles = shift?.roles || [];
+
return (
-
-
-
- {shift.shift_name || "Shift 1"}
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ {/* Smart Assignment Modal */}
+ setAssignModal({ open: false, role: null })}
+ event={event}
+ shift={shift}
+ role={assignModal.role}
+ />
+
);
}
\ No newline at end of file
diff --git a/frontend-web/src/components/events/SmartAssignModal.jsx b/frontend-web/src/components/events/SmartAssignModal.jsx
new file mode 100644
index 00000000..14a51924
--- /dev/null
+++ b/frontend-web/src/components/events/SmartAssignModal.jsx
@@ -0,0 +1,878 @@
+
+import React, { useState, useMemo, useEffect } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useToast } from "@/components/ui/use-toast";
+import {
+ Search,
+ Users,
+ AlertTriangle,
+ Star,
+ MapPin,
+ Sparkles,
+ Check,
+ Calendar,
+ Sliders,
+ TrendingUp,
+ Shield,
+ DollarSign,
+ Zap,
+ Bell,
+} from "lucide-react";
+import { format } from "date-fns";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Slider } from "@/components/ui/slider";
+
+// Helper to check time overlap with buffer
+function hasTimeOverlap(start1, end1, start2, end2, bufferMinutes = 30) {
+ const s1 = new Date(start1).getTime();
+ const e1 = new Date(end1).getTime() + bufferMinutes * 60 * 1000;
+ const s2 = new Date(start2).getTime();
+ const e2 = new Date(end2).getTime() + bufferMinutes * 60 * 1000;
+
+ return s1 < e2 && s2 < e1;
+}
+
+export default function SmartAssignModal({ open, onClose, event, shift, role }) {
+ const { toast } = useToast();
+ const queryClient = useQueryClient();
+ const [searchQuery, setSearchQuery] = useState("");
+ const [selected, setSelected] = useState(new Set());
+ const [sortMode, setSortMode] = useState("smart");
+ const [selectedRole, setSelectedRole] = useState(null); // New state to manage current selected role for assignment
+
+ // Smart assignment priorities
+ const [priorities, setPriorities] = useState({
+ skill: 100, // Skill is implied by position match, not a slider
+ reliability: 80,
+ fatigue: 60,
+ compliance: 70,
+ proximity: 50,
+ cost: 40,
+ });
+
+ useEffect(() => {
+ if (open) {
+ setSelected(new Set());
+ setSearchQuery("");
+
+ // Auto-select first role if available or the one passed in props
+ if (event && !role) {
+ // If no specific role is passed, find roles that need assignment
+ const initialRoles = [];
+ (event.shifts || []).forEach(s => {
+ (s.roles || []).forEach(r => {
+ const currentAssignedCount = event.assigned_staff?.filter(staff =>
+ staff.role === r.role && staff.shift_name === s.shift_name
+ )?.length || 0;
+ if ((r.count || 0) > currentAssignedCount) {
+ initialRoles.push({ shift: s, role: r });
+ }
+ });
+ });
+ if (initialRoles.length > 0) {
+ setSelectedRole(initialRoles[0]);
+ } else {
+ setSelectedRole(null); // No roles need assignment
+ }
+ } else if (shift && role) {
+ setSelectedRole({ shift, role });
+ }
+ }
+ }, [open, event, shift, role]);
+
+ const { data: allStaff = [] } = useQuery({
+ queryKey: ['staff-for-assignment'],
+ queryFn: () => base44.entities.Staff.list(),
+ enabled: open,
+ });
+
+ const { data: allEvents = [] } = useQuery({
+ queryKey: ['events-for-conflict-check'],
+ queryFn: () => base44.entities.Event.list(),
+ enabled: open,
+ });
+
+ const { data: vendorRates = [] } = useQuery({
+ queryKey: ['vendor-rates-assignment'],
+ queryFn: () => base44.entities.VendorRate.list(),
+ enabled: open,
+ initialData: [],
+ });
+
+ // Get all roles that need assignment for display in the header
+ const allRoles = useMemo(() => {
+ if (!event) return [];
+ const roles = [];
+ (event.shifts || []).forEach(s => {
+ (s.roles || []).forEach(r => {
+ const currentAssignedCount = event.assigned_staff?.filter(staff =>
+ staff.role === r.role && staff.shift_name === s.shift_name
+ )?.length || 0;
+ const remaining = Math.max((r.count || 0) - currentAssignedCount, 0);
+ if (remaining > 0) {
+ roles.push({
+ shift: s,
+ role: r,
+ currentAssigned: currentAssignedCount,
+ remaining,
+ label: `${r.role} (${remaining} needed)`
+ });
+ }
+ });
+ });
+ return roles;
+ }, [event]);
+
+ // Use selectedRole for current assignment context
+ const currentRole = selectedRole?.role;
+ const currentShift = selectedRole?.shift;
+
+ const requiredCount = currentRole?.count || 1;
+ const currentAssigned = event?.assigned_staff?.filter(s =>
+ s.role === currentRole?.role && s.shift_name === currentShift?.shift_name
+ )?.length || 0;
+ const remainingCount = Math.max(requiredCount - currentAssigned, 0);
+
+ const eligibleStaff = useMemo(() => {
+ if (!currentRole || !event) return [];
+
+ return allStaff
+ .filter(staff => {
+ // Check if position matches
+ const positionMatch = staff.position === currentRole.role ||
+ staff.position_2 === currentRole.role ||
+ staff.position?.toLowerCase() === currentRole.role?.toLowerCase() ||
+ staff.position_2?.toLowerCase() === currentRole.role?.toLowerCase();
+
+ if (!positionMatch) return false;
+
+ if (searchQuery) {
+ const query = searchQuery.toLowerCase();
+ const nameMatch = staff.employee_name?.toLowerCase().includes(query);
+ const locationMatch = staff.hub_location?.toLowerCase().includes(query);
+ if (!nameMatch && !locationMatch) return false;
+ }
+
+ return true;
+ })
+ .map(staff => {
+ // Check for time conflicts
+ const conflicts = allEvents.filter(e => {
+ if (e.id === event.id) return false; // Don't conflict with current event
+ if (e.status === "Canceled" || e.status === "Completed") return false; // Ignore past/canceled events
+
+ const isAssignedToEvent = e.assigned_staff?.some(s => s.staff_id === staff.id);
+ if (!isAssignedToEvent) return false; // Staff not assigned to this event
+
+ // Check for time overlap within the conflicting event's shifts
+ const eventShifts = e.shifts || [];
+ return eventShifts.some(eventShift => {
+ const eventRoles = eventShift.roles || [];
+ return eventRoles.some(eventRole => {
+ // Ensure staff is assigned to this specific role within the conflicting shift
+ const isStaffAssignedToThisRole = e.assigned_staff?.some(
+ s => s.staff_id === staff.id && s.role === eventRole.role && s.shift_name === eventShift.shift_name
+ );
+ if (!isStaffAssignedToThisRole) return false;
+
+ const shiftStart = `${e.date}T${eventRole.start_time || '00:00'}`;
+ const shiftEnd = `${e.date}T${eventRole.end_time || '23:59'}`;
+ const currentStart = `${event.date}T${currentRole.start_time || '00:00'}`;
+ const currentEnd = `${event.date}T${currentRole.end_time || '23:59'}`;
+
+ return hasTimeOverlap(shiftStart, shiftEnd, currentStart, currentEnd);
+ });
+ });
+ });
+
+ const hasConflict = conflicts.length > 0;
+ const totalShifts = staff.total_shifts || 0;
+ const reliability = staff.reliability_score || (totalShifts > 0 ? 85 : 0);
+
+ // Calculate smart scores
+ // Skill score is implicitly 100 if they pass the filter (position match)
+ const fatigueScore = 100 - Math.min((totalShifts / 30) * 100, 100); // More shifts = more fatigue = lower score
+ const complianceScore = staff.background_check_status === 'cleared' ? 100 : 50; // Simple compliance check
+ const proximityScore = staff.hub_location === event.hub ? 100 : 50; // Location match
+ const costRate = vendorRates.find(r => r.vendor_id === staff.vendor_id && r.role_name === currentRole.role);
+ const costScore = costRate ? Math.max(0, 100 - (costRate.client_rate / 50) * 100) : 50; // Lower rate = higher score
+
+ const smartScore = (
+ (priorities.skill / 100) * 100 + // Skill is 100 if eligible
+ (priorities.reliability / 100) * reliability +
+ (priorities.fatigue / 100) * fatigueScore +
+ (priorities.compliance / 100) * complianceScore +
+ (priorities.proximity / 100) * proximityScore +
+ (priorities.cost / 100) * costScore
+ ) / 6; // Divided by number of priorities (6)
+
+ return {
+ ...staff,
+ hasConflict,
+ conflictDetails: conflicts,
+ reliability,
+ shiftCount: totalShifts,
+ smartScore,
+ scores: {
+ fatigue: fatigueScore,
+ compliance: complianceScore,
+ proximity: proximityScore,
+ cost: costScore,
+ }
+ };
+ })
+ .sort((a, b) => {
+ if (sortMode === "smart") {
+ // Prioritize non-conflicting staff first, then by smart score
+ if (a.hasConflict !== b.hasConflict) return a.hasConflict ? 1 : -1;
+ return b.smartScore - a.smartScore;
+ } else {
+ // Manual mode: Prioritize non-conflicting, then reliability, then shift count
+ if (a.hasConflict !== b.hasConflict) return a.hasConflict ? 1 : -1;
+ if (b.reliability !== a.reliability) return b.reliability - a.reliability;
+ return (b.shiftCount || 0) - (a.shiftCount || 0);
+ }
+ });
+ }, [allStaff, allEvents, currentRole, event, currentShift, searchQuery, sortMode, priorities, vendorRates]);
+
+ const availableStaff = eligibleStaff.filter(s => !s.hasConflict);
+ const unavailableStaff = eligibleStaff.filter(s => s.hasConflict);
+
+ const handleSelectBest = () => {
+ const best = availableStaff.slice(0, remainingCount);
+ const newSelected = new Set(best.map(s => s.id));
+ setSelected(newSelected);
+ };
+
+ const toggleSelect = (staffId) => {
+ const newSelected = new Set(selected);
+ if (newSelected.has(staffId)) {
+ newSelected.delete(staffId);
+ } else {
+ if (newSelected.size >= remainingCount) {
+ toast({
+ title: "Limit Reached",
+ description: `You can only assign ${remainingCount} more ${currentRole.role}${remainingCount > 1 ? 's' : ''} to this role.`,
+ variant: "destructive",
+ });
+ return;
+ }
+ newSelected.add(staffId);
+ }
+ setSelected(newSelected);
+ };
+
+ const assignMutation = useMutation({
+ mutationFn: async () => {
+ const selectedStaff = eligibleStaff.filter(s => selected.has(s.id));
+
+ // Send notifications to unavailable staff who are being assigned
+ const unavailableSelected = selectedStaff.filter(s => s.hasConflict);
+ for (const staff of unavailableSelected) {
+ try {
+ // This is a placeholder for sending an actual email/notification
+ // In a real application, you'd use a robust notification service.
+ await base44.integrations.Core.SendEmail({ // Assuming base44.integrations.Core exists and has SendEmail
+ to: staff.email || `${staff.employee_name.replace(/\s/g, '').toLowerCase()}@example.com`,
+ subject: `New Shift Assignment - ${event.event_name} (Possible Conflict)`,
+ body: `Dear ${staff.employee_name},\n\nYou have been assigned to work as a ${currentRole.role} for the event "${event.event_name}" on ${format(new Date(event.date), 'MMM d, yyyy')} from ${currentRole.start_time} to ${currentRole.end_time} at ${event.hub || event.event_location}.\n\nOur records indicate this assignment might overlap with another scheduled shift. Please review your schedule and confirm your availability for this new assignment as soon as possible.\n\nThank you!`
+ });
+ } catch (error) {
+ console.error("Failed to send email to conflicted staff:", staff.employee_name, error);
+ // Decide whether to block assignment or just log the error
+ }
+ }
+
+ const updatedAssignedStaff = [
+ ...(event.assigned_staff || []),
+ ...selectedStaff.map(s => ({
+ staff_id: s.id,
+ staff_name: s.employee_name,
+ email: s.email,
+ role: currentRole.role,
+ department: currentRole.department,
+ shift_name: currentShift.shift_name, // Include shift_name
+ }))
+ ];
+
+ const updatedShifts = (event.shifts || []).map(s => {
+ if (s.shift_name === currentShift.shift_name) {
+ const updatedRoles = (s.roles || []).map(r => {
+ if (r.role === currentRole.role) {
+ return {
+ ...r,
+ assigned: (r.assigned || 0) + selected.size,
+ };
+ }
+ return r;
+ });
+ return { ...s, roles: updatedRoles };
+ }
+ return s;
+ });
+
+ await base44.entities.Event.update(event.id, {
+ assigned_staff: updatedAssignedStaff,
+ shifts: updatedShifts,
+ requested: (event.requested || 0) + selected.size, // This `requested` field might need more careful handling if it's meant to be total
+ });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['events'] });
+ queryClient.invalidateQueries({ queryKey: ['all-events-vendor'] }); // New query key
+ queryClient.invalidateQueries({ queryKey: ['vendor-events'] }); // New query key
+ toast({
+ title: "✅ Staff Assigned",
+ description: `Successfully assigned ${selected.size} ${currentRole.role}${selected.size > 1 ? 's' : ''}`,
+ });
+ setSelected(new Set()); // Clear selection after assignment
+
+ // Auto-select the next role that needs assignment
+ const currentRoleIdentifier = { role: currentRole.role, shift_name: currentShift.shift_name };
+ const currentIndex = allRoles.findIndex(ar => ar.role.role === currentRoleIdentifier.role && ar.shift.shift_name === currentRoleIdentifier.shift_name);
+
+ if (currentIndex !== -1 && currentIndex + 1 < allRoles.length) {
+ setSelectedRole(allRoles[currentIndex + 1]);
+ } else {
+ onClose(); // Close if no more roles to assign
+ }
+ },
+ onError: (error) => {
+ toast({
+ title: "❌ Assignment Failed",
+ description: error.message,
+ variant: "destructive",
+ });
+ },
+ });
+
+ const handleAssign = () => {
+ if (selected.size === 0) {
+ toast({
+ title: "No Selection",
+ description: "Please select at least one staff member",
+ variant: "destructive",
+ });
+ return;
+ }
+
+ // The logic to check for conflicts and stop was removed because
+ // the new assignMutation now sends notifications to conflicted staff.
+ // If a hard stop for conflicts is desired, this check should be re-enabled
+ // and the notification logic in assignMutation modified.
+
+ assignMutation.mutate();
+ };
+
+ if (!event) return null;
+ // If there's no currentRole, it means either props were not passed or all roles are already assigned
+ if (!currentRole || !currentShift) {
+ return (
+
+ );
+ }
+
+ const statusColor = remainingCount === 0
+ ? "bg-green-100 text-green-700 border-green-300"
+ : currentAssigned > 0
+ ? "bg-blue-100 text-blue-700 border-blue-300"
+ : "bg-slate-100 text-slate-700 border-slate-300";
+
+ return (
+
+ );
+}
diff --git a/frontend-web/src/components/events/VendorRoutingPanel.jsx b/frontend-web/src/components/events/VendorRoutingPanel.jsx
new file mode 100644
index 00000000..b45ac725
--- /dev/null
+++ b/frontend-web/src/components/events/VendorRoutingPanel.jsx
@@ -0,0 +1,340 @@
+import React, { useState } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Award, Star, MapPin, Users, TrendingUp, AlertTriangle, Zap, CheckCircle2, Send } from "lucide-react";
+
+export default function VendorRoutingPanel({
+ user,
+ selectedVendors = [],
+ onVendorChange,
+ isRapid = false
+}) {
+ const [showVendorSelector, setShowVendorSelector] = useState(false);
+ const [selectionMode, setSelectionMode] = useState('single'); // 'single' | 'multi'
+
+ // Fetch preferred vendor
+ const { data: preferredVendor } = useQuery({
+ queryKey: ['preferred-vendor-routing', user?.preferred_vendor_id],
+ queryFn: async () => {
+ if (!user?.preferred_vendor_id) return null;
+ const vendors = await base44.entities.Vendor.list();
+ return vendors.find(v => v.id === user.preferred_vendor_id);
+ },
+ enabled: !!user?.preferred_vendor_id,
+ });
+
+ // Fetch all approved vendors
+ const { data: allVendors } = useQuery({
+ queryKey: ['all-vendors-routing'],
+ queryFn: () => base44.entities.Vendor.filter({
+ approval_status: 'approved',
+ is_active: true
+ }),
+ initialData: [],
+ });
+
+ // Auto-select preferred vendor on mount if none selected
+ React.useEffect(() => {
+ if (preferredVendor && selectedVendors.length === 0) {
+ onVendorChange([preferredVendor]);
+ }
+ }, [preferredVendor]);
+
+ const handleVendorSelect = (vendor) => {
+ if (selectionMode === 'single') {
+ onVendorChange([vendor]);
+ setShowVendorSelector(false);
+ } else {
+ // Multi-select mode
+ const isSelected = selectedVendors.some(v => v.id === vendor.id);
+ if (isSelected) {
+ onVendorChange(selectedVendors.filter(v => v.id !== vendor.id));
+ } else {
+ onVendorChange([...selectedVendors, vendor]);
+ }
+ }
+ };
+
+ const handleMultiVendorDone = () => {
+ if (selectedVendors.length === 0) {
+ alert("Please select at least one vendor");
+ return;
+ }
+ setShowVendorSelector(false);
+ };
+
+ const routingMode = selectedVendors.length > 1 ? 'multi' : 'single';
+
+ return (
+ <>
+
+
+
+
+
+ {/* Vendor Selector Dialog */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/notifications/NotificationEngine.jsx b/frontend-web/src/components/notifications/NotificationEngine.jsx
new file mode 100644
index 00000000..42779907
--- /dev/null
+++ b/frontend-web/src/components/notifications/NotificationEngine.jsx
@@ -0,0 +1,247 @@
+import React, { useEffect } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+/**
+ * Automated Notification Engine
+ * Monitors events and triggers notifications based on configured preferences
+ */
+
+export function NotificationEngine() {
+ const queryClient = useQueryClient();
+
+ const { data: events = [] } = useQuery({
+ queryKey: ['events-notifications'],
+ queryFn: () => base44.entities.Event.list(),
+ refetchInterval: 60000, // Check every minute
+ });
+
+ const { data: users = [] } = useQuery({
+ queryKey: ['users-notifications'],
+ queryFn: () => base44.entities.User.list(),
+ refetchInterval: 300000, // Check every 5 minutes
+ });
+
+ const createNotification = async (userId, title, description, activityType, relatedId = null) => {
+ try {
+ await base44.entities.ActivityLog.create({
+ title,
+ description,
+ activity_type: activityType,
+ user_id: userId,
+ is_read: false,
+ related_entity_id: relatedId,
+ icon_type: activityType.includes('event') ? 'calendar' : activityType.includes('invoice') ? 'invoice' : 'user',
+ icon_color: 'blue',
+ });
+ } catch (error) {
+ console.error('Failed to create notification:', error);
+ }
+ };
+
+ const sendEmail = async (to, subject, body, userPreferences) => {
+ if (!userPreferences?.email_notifications) return;
+
+ try {
+ await base44.integrations.Core.SendEmail({
+ to,
+ subject,
+ body,
+ });
+ } catch (error) {
+ console.error('Failed to send email:', error);
+ }
+ };
+
+ // Shift assignment notifications
+ useEffect(() => {
+ const notifyStaffAssignments = async () => {
+ for (const event of events) {
+ if (!event.assigned_staff || event.assigned_staff.length === 0) continue;
+
+ for (const staff of event.assigned_staff) {
+ const user = users.find(u => u.email === staff.email);
+ if (!user) continue;
+
+ const prefs = user.notification_preferences || {};
+ if (!prefs.shift_assignments) continue;
+
+ // Check if notification already sent (within last 24h)
+ const recentNotifs = await base44.entities.ActivityLog.filter({
+ user_id: user.id,
+ activity_type: 'staff_assigned',
+ related_entity_id: event.id,
+ });
+
+ const alreadyNotified = recentNotifs.some(n => {
+ const notifDate = new Date(n.created_date);
+ const hoursSince = (Date.now() - notifDate.getTime()) / (1000 * 60 * 60);
+ return hoursSince < 24;
+ });
+
+ if (alreadyNotified) continue;
+
+ await createNotification(
+ user.id,
+ '🎯 New Shift Assignment',
+ `You've been assigned to ${event.event_name} on ${new Date(event.date).toLocaleDateString()}`,
+ 'staff_assigned',
+ event.id
+ );
+
+ await sendEmail(
+ staff.email,
+ `New Shift Assignment - ${event.event_name}`,
+ `Hello ${staff.staff_name},\n\nYou've been assigned to work at ${event.event_name}.\n\nDate: ${new Date(event.date).toLocaleDateString()}\nLocation: ${event.event_location || event.hub}\n\nPlease confirm your availability in the KROW platform.\n\nThank you!`,
+ prefs
+ );
+ }
+ }
+ };
+
+ if (events.length > 0 && users.length > 0) {
+ notifyStaffAssignments();
+ }
+ }, [events, users]);
+
+ // Shift reminder (24 hours before)
+ useEffect(() => {
+ const sendShiftReminders = async () => {
+ const tomorrow = new Date();
+ tomorrow.setDate(tomorrow.getDate() + 1);
+ tomorrow.setHours(0, 0, 0, 0);
+
+ const tomorrowEnd = new Date(tomorrow);
+ tomorrowEnd.setHours(23, 59, 59, 999);
+
+ for (const event of events) {
+ const eventDate = new Date(event.date);
+ if (eventDate < tomorrow || eventDate > tomorrowEnd) continue;
+ if (!event.assigned_staff || event.assigned_staff.length === 0) continue;
+
+ for (const staff of event.assigned_staff) {
+ const user = users.find(u => u.email === staff.email);
+ if (!user) continue;
+
+ const prefs = user.notification_preferences || {};
+ if (!prefs.shift_reminders) continue;
+
+ await createNotification(
+ user.id,
+ '⏰ Shift Reminder',
+ `Reminder: Your shift at ${event.event_name} is tomorrow`,
+ 'event_updated',
+ event.id
+ );
+
+ await sendEmail(
+ staff.email,
+ `Shift Reminder - Tomorrow at ${event.event_name}`,
+ `Hello ${staff.staff_name},\n\nThis is a reminder that you have a shift tomorrow:\n\nEvent: ${event.event_name}\nDate: ${new Date(event.date).toLocaleDateString()}\nLocation: ${event.event_location || event.hub}\n\nSee you there!`,
+ prefs
+ );
+ }
+ }
+ };
+
+ if (events.length > 0 && users.length > 0) {
+ sendShiftReminders();
+ }
+ }, [events, users]);
+
+ // Client upcoming event notifications (3 days before)
+ useEffect(() => {
+ const notifyClientsUpcomingEvents = async () => {
+ const threeDaysFromNow = new Date();
+ threeDaysFromNow.setDate(threeDaysFromNow.getDate() + 3);
+ threeDaysFromNow.setHours(0, 0, 0, 0);
+
+ const threeDaysEnd = new Date(threeDaysFromNow);
+ threeDaysEnd.setHours(23, 59, 59, 999);
+
+ for (const event of events) {
+ const eventDate = new Date(event.date);
+ if (eventDate < threeDaysFromNow || eventDate > threeDaysEnd) continue;
+
+ const clientUser = users.find(u =>
+ u.email === event.client_email ||
+ (u.role === 'client' && u.full_name === event.client_name)
+ );
+
+ if (!clientUser) continue;
+
+ const prefs = clientUser.notification_preferences || {};
+ if (!prefs.upcoming_events) continue;
+
+ await createNotification(
+ clientUser.id,
+ '📅 Upcoming Event',
+ `Your event "${event.event_name}" is in 3 days`,
+ 'event_created',
+ event.id
+ );
+
+ await sendEmail(
+ clientUser.email,
+ `Upcoming Event Reminder - ${event.event_name}`,
+ `Hello,\n\nThis is a reminder that your event is coming up in 3 days:\n\nEvent: ${event.event_name}\nDate: ${new Date(event.date).toLocaleDateString()}\nLocation: ${event.event_location || event.hub}\nStaff Assigned: ${event.assigned_staff?.length || 0}/${event.requested || 0}\n\nIf you need to make any changes, please log into your KROW account.`,
+ prefs
+ );
+ }
+ };
+
+ if (events.length > 0 && users.length > 0) {
+ notifyClientsUpcomingEvents();
+ }
+ }, [events, users]);
+
+ // Vendor new lead notifications (new events without vendor assignment)
+ useEffect(() => {
+ const notifyVendorsNewLeads = async () => {
+ const newEvents = events.filter(e =>
+ e.status === 'Draft' || e.status === 'Pending'
+ );
+
+ const vendorUsers = users.filter(u => u.role === 'vendor');
+
+ for (const event of newEvents) {
+ for (const vendor of vendorUsers) {
+ const prefs = vendor.notification_preferences || {};
+ if (!prefs.new_leads) continue;
+
+ // Check if already notified
+ const recentNotifs = await base44.entities.ActivityLog.filter({
+ user_id: vendor.id,
+ activity_type: 'event_created',
+ related_entity_id: event.id,
+ });
+
+ if (recentNotifs.length > 0) continue;
+
+ await createNotification(
+ vendor.id,
+ '🎯 New Lead Available',
+ `New opportunity: ${event.event_name} needs ${event.requested || 0} staff`,
+ 'event_created',
+ event.id
+ );
+
+ await sendEmail(
+ vendor.email,
+ `New Staffing Opportunity - ${event.event_name}`,
+ `Hello,\n\nA new staffing opportunity is available:\n\nEvent: ${event.event_name}\nDate: ${new Date(event.date).toLocaleDateString()}\nLocation: ${event.event_location || event.hub}\nStaff Needed: ${event.requested || 0}\n\nLog in to KROW to submit your proposal.`,
+ prefs
+ );
+ }
+ }
+ };
+
+ if (events.length > 0 && users.length > 0) {
+ notifyVendorsNewLeads();
+ }
+ }, [events, users]);
+
+ return null; // Background service
+}
+
+export default NotificationEngine;
\ No newline at end of file
diff --git a/frontend-web/src/components/onboarding/CompletionStep.jsx b/frontend-web/src/components/onboarding/CompletionStep.jsx
new file mode 100644
index 00000000..84d302c8
--- /dev/null
+++ b/frontend-web/src/components/onboarding/CompletionStep.jsx
@@ -0,0 +1,141 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { CheckCircle, User, FileText, BookOpen, Sparkles } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+export default function CompletionStep({ data, onComplete, onBack, isSubmitting }) {
+ const { profile, documents, training } = data;
+
+ return (
+
+ {showDot && (
+
+ )}
+ {showIcon &&
+ );
+}
+
+// Helper function to sort orders by priority
+export function sortOrdersByPriority(orders) {
+ return [...orders].sort((a, b) => {
+ const statusA = getOrderStatus(a);
+ const statusB = getOrderStatus(b);
+
+ // First by priority
+ if (statusA.priority !== statusB.priority) {
+ return statusA.priority - statusB.priority;
+ }
+
+ // Then by date (most recent first)
+ return new Date(b.date || b.created_date) - new Date(a.date || a.created_date);
+ });
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/orders/RapidOrderChat.jsx b/frontend-web/src/components/orders/RapidOrderChat.jsx
new file mode 100644
index 00000000..51719c09
--- /dev/null
+++ b/frontend-web/src/components/orders/RapidOrderChat.jsx
@@ -0,0 +1,332 @@
+import React, { useState } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Zap, Send, Check, Edit3, MapPin, Clock, Users, AlertCircle, Sparkles } from "lucide-react";
+import { useToast } from "@/components/ui/use-toast";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function RapidOrderChat({ onOrderCreated }) {
+ const { toast } = useToast();
+ const queryClient = useQueryClient();
+ const [message, setMessage] = useState("");
+ const [conversation, setConversation] = useState([]);
+ const [detectedOrder, setDetectedOrder] = useState(null);
+ const [isProcessing, setIsProcessing] = useState(false);
+
+ const { data: user } = useQuery({
+ queryKey: ['current-user-rapid'],
+ queryFn: () => base44.auth.me(),
+ });
+
+ const { data: businesses } = useQuery({
+ queryKey: ['user-businesses'],
+ queryFn: () => base44.entities.Business.filter({ contact_name: user?.full_name }),
+ enabled: !!user,
+ initialData: [],
+ });
+
+ const createRapidOrderMutation = useMutation({
+ mutationFn: (orderData) => base44.entities.Event.create(orderData),
+ onSuccess: (data) => {
+ queryClient.invalidateQueries({ queryKey: ['events'] });
+ toast({
+ title: "✅ RAPID Order Created",
+ description: "Order sent to preferred vendor with priority notification",
+ });
+ if (onOrderCreated) onOrderCreated(data);
+ // Reset
+ setConversation([]);
+ setDetectedOrder(null);
+ setMessage("");
+ },
+ });
+
+ const analyzeMessage = async (msg) => {
+ setIsProcessing(true);
+
+ // Add user message to conversation
+ setConversation(prev => [...prev, { role: 'user', content: msg }]);
+
+ try {
+ // Use AI to parse the message
+ const response = await base44.integrations.Core.InvokeLLM({
+ prompt: `You are an order assistant. Analyze this message and extract order details:
+
+Message: "${msg}"
+Current user: ${user?.full_name}
+User's locations: ${businesses.map(b => b.business_name).join(', ')}
+
+Extract:
+1. Urgency keywords (ASAP, today, emergency, call out, urgent, rapid, now)
+2. Role/position needed (cook, bartender, server, dishwasher, etc.)
+3. Number of staff (if mentioned)
+4. Time frame (if mentioned)
+5. Location (if mentioned, otherwise use first available location)
+
+Return a concise summary.`,
+ response_json_schema: {
+ type: "object",
+ properties: {
+ is_urgent: { type: "boolean" },
+ role: { type: "string" },
+ count: { type: "number" },
+ location: { type: "string" },
+ time_mentioned: { type: "boolean" },
+ start_time: { type: "string" },
+ end_time: { type: "string" }
+ }
+ }
+ });
+
+ const parsed = response;
+ const primaryLocation = businesses[0]?.business_name || "Primary Location";
+
+ const order = {
+ is_rapid: parsed.is_urgent || true,
+ role: parsed.role || "Staff Member",
+ count: parsed.count || 1,
+ location: parsed.location || primaryLocation,
+ start_time: parsed.start_time || "ASAP",
+ end_time: parsed.end_time || "End of shift",
+ business_name: primaryLocation,
+ hub: businesses[0]?.hub_building || "Main Hub"
+ };
+
+ setDetectedOrder(order);
+
+ // AI response
+ const aiMessage = `Is this a RAPID ORDER for **${order.count} ${order.role}${order.count > 1 ? 's' : ''}** at **${order.location}**?\n\nTime: ${order.start_time} → ${order.end_time}`;
+
+ setConversation(prev => [...prev, {
+ role: 'assistant',
+ content: aiMessage,
+ showConfirm: true
+ }]);
+
+ } catch (error) {
+ setConversation(prev => [...prev, {
+ role: 'assistant',
+ content: "I couldn't process that. Please provide more details like: role needed, how many, and when."
+ }]);
+ } finally {
+ setIsProcessing(false);
+ }
+ };
+
+ const handleSendMessage = () => {
+ if (!message.trim()) return;
+ analyzeMessage(message);
+ setMessage("");
+ };
+
+ const handleConfirmOrder = () => {
+ if (!detectedOrder) return;
+
+ const now = new Date();
+ const orderData = {
+ event_name: `RAPID: ${detectedOrder.count} ${detectedOrder.role}${detectedOrder.count > 1 ? 's' : ''}`,
+ is_rapid: true,
+ status: "Pending",
+ business_name: detectedOrder.business_name,
+ hub: detectedOrder.hub,
+ event_location: detectedOrder.location,
+ date: now.toISOString().split('T')[0],
+ requested: detectedOrder.count,
+ client_name: user?.full_name,
+ client_email: user?.email,
+ notes: `RAPID ORDER - ${detectedOrder.start_time} to ${detectedOrder.end_time}`,
+ shifts: [{
+ shift_name: "Emergency Shift",
+ roles: [{
+ role: detectedOrder.role,
+ count: detectedOrder.count,
+ start_time: "ASAP",
+ end_time: "End of shift"
+ }]
+ }]
+ };
+
+ createRapidOrderMutation.mutate(orderData);
+ };
+
+ const handleEditOrder = () => {
+ setConversation(prev => [...prev, {
+ role: 'assistant',
+ content: "Please describe what you'd like to change."
+ }]);
+ setDetectedOrder(null);
+ };
+
+ return (
+
+
+
+
+
+ {/* Chat Messages */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/orders/SmartAssignModal.jsx b/frontend-web/src/components/orders/SmartAssignModal.jsx
new file mode 100644
index 00000000..bafc8dbd
--- /dev/null
+++ b/frontend-web/src/components/orders/SmartAssignModal.jsx
@@ -0,0 +1,374 @@
+import React, { useState, useMemo } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Sparkles, Star, MapPin, Clock, Award, TrendingUp, AlertCircle, CheckCircle, Zap, Users, RefreshCw } from "lucide-react";
+import { useToast } from "@/components/ui/use-toast";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+export default function SmartAssignModal({ isOpen, onClose, event, roleNeeded, countNeeded }) {
+ const { toast } = useToast();
+ const queryClient = useQueryClient();
+ const [selectedWorkers, setSelectedWorkers] = useState([]);
+ const [isAnalyzing, setIsAnalyzing] = useState(false);
+ const [aiRecommendations, setAiRecommendations] = useState(null);
+
+ const { data: allStaff = [] } = useQuery({
+ queryKey: ['staff-smart-assign'],
+ queryFn: () => base44.entities.Staff.list(),
+ });
+
+ const { data: allEvents = [] } = useQuery({
+ queryKey: ['events-conflict-check'],
+ queryFn: () => base44.entities.Event.list(),
+ });
+
+ // Smart filtering
+ const eligibleStaff = useMemo(() => {
+ if (!event || !roleNeeded) return [];
+
+ return allStaff.filter(worker => {
+ // Role match
+ const hasRole = worker.position === roleNeeded ||
+ worker.position_2 === roleNeeded ||
+ worker.profile_type === "Cross-Trained";
+
+ // Availability check
+ const isAvailable = worker.employment_type !== "Medical Leave" &&
+ worker.action !== "Inactive";
+
+ // Conflict check - check if worker is already assigned
+ const eventDate = new Date(event.date);
+ const hasConflict = allEvents.some(e => {
+ if (e.id === event.id) return false;
+ const eDate = new Date(e.date);
+ return eDate.toDateString() === eventDate.toDateString() &&
+ e.assigned_staff?.some(s => s.staff_id === worker.id);
+ });
+
+ return hasRole && isAvailable && !hasConflict;
+ });
+ }, [allStaff, event, roleNeeded, allEvents]);
+
+ // Run AI analysis
+ const runSmartAnalysis = async () => {
+ setIsAnalyzing(true);
+
+ try {
+ const prompt = `You are a workforce optimization AI. Analyze these workers and recommend the best ${countNeeded} for this job.
+
+Event: ${event.event_name}
+Location: ${event.event_location || event.hub}
+Role Needed: ${roleNeeded}
+Quantity: ${countNeeded}
+
+Workers (JSON):
+${JSON.stringify(eligibleStaff.map(w => ({
+ id: w.id,
+ name: w.employee_name,
+ rating: w.rating || 0,
+ reliability_score: w.reliability_score || 0,
+ total_shifts: w.total_shifts || 0,
+ no_show_count: w.no_show_count || 0,
+ position: w.position,
+ city: w.city,
+ profile_type: w.profile_type
+})), null, 2)}
+
+Rank them by:
+1. Skills match (exact role match gets priority)
+2. Rating (higher is better)
+3. Reliability (lower no-shows, higher reliability score)
+4. Experience (more shifts completed)
+5. Distance (prefer closer to location)
+
+Return the top ${countNeeded} worker IDs with brief reasoning.`;
+
+ const response = await base44.integrations.Core.InvokeLLM({
+ prompt,
+ response_json_schema: {
+ type: "object",
+ properties: {
+ recommendations: {
+ type: "array",
+ items: {
+ type: "object",
+ properties: {
+ worker_id: { type: "string" },
+ reason: { type: "string" },
+ score: { type: "number" }
+ }
+ }
+ }
+ }
+ }
+ });
+
+ const recommended = response.recommendations.map(rec => {
+ const worker = eligibleStaff.find(w => w.id === rec.worker_id);
+ return worker ? { ...worker, ai_reason: rec.reason, ai_score: rec.score } : null;
+ }).filter(Boolean);
+
+ setAiRecommendations(recommended);
+ setSelectedWorkers(recommended.slice(0, countNeeded));
+
+ toast({
+ title: "✨ AI Analysis Complete",
+ description: `Found ${recommended.length} optimal matches`,
+ });
+ } catch (error) {
+ toast({
+ title: "Analysis Failed",
+ description: error.message,
+ variant: "destructive",
+ });
+ } finally {
+ setIsAnalyzing(false);
+ }
+ };
+
+ const assignMutation = useMutation({
+ mutationFn: async () => {
+ const assigned_staff = selectedWorkers.map(w => ({
+ staff_id: w.id,
+ staff_name: w.employee_name,
+ role: roleNeeded
+ }));
+
+ return base44.entities.Event.update(event.id, {
+ assigned_staff: [...(event.assigned_staff || []), ...assigned_staff],
+ status: "Confirmed"
+ });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['events'] });
+ toast({
+ title: "✅ Staff Assigned Successfully",
+ description: `${selectedWorkers.length} workers assigned to ${event.event_name}`,
+ });
+ onClose();
+ },
+ });
+
+ React.useEffect(() => {
+ if (isOpen && eligibleStaff.length > 0 && !aiRecommendations) {
+ runSmartAnalysis();
+ }
+ }, [isOpen, eligibleStaff.length]);
+
+ const toggleWorker = (worker) => {
+ setSelectedWorkers(prev => {
+ const exists = prev.find(w => w.id === worker.id);
+ if (exists) {
+ return prev.filter(w => w.id !== worker.id);
+ } else if (prev.length < countNeeded) {
+ return [...prev, worker];
+ }
+ return prev;
+ });
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/orders/WorkerConfirmationCard.jsx b/frontend-web/src/components/orders/WorkerConfirmationCard.jsx
new file mode 100644
index 00000000..832f70a6
--- /dev/null
+++ b/frontend-web/src/components/orders/WorkerConfirmationCard.jsx
@@ -0,0 +1,150 @@
+import React from "react";
+import { base44 } from "@/api/base44Client";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { CheckCircle, XCircle, Clock, MapPin, Calendar, AlertTriangle, RefreshCw, Info } from "lucide-react";
+import { useToast } from "@/components/ui/use-toast";
+import { format } from "date-fns";
+
+export default function WorkerConfirmationCard({ assignment, event }) {
+ const { toast } = useToast();
+ const queryClient = useQueryClient();
+
+ const confirmMutation = useMutation({
+ mutationFn: async (status) => {
+ return base44.entities.Assignment.update(assignment.id, {
+ assignment_status: status,
+ confirmed_date: new Date().toISOString()
+ });
+ },
+ onSuccess: (_, status) => {
+ queryClient.invalidateQueries({ queryKey: ['assignments'] });
+ toast({
+ title: status === "Confirmed" ? "✅ Shift Confirmed" : "❌ Shift Declined",
+ description: status === "Confirmed"
+ ? "You're all set! See you at the event."
+ : "Notified vendor. They'll find a replacement.",
+ });
+ },
+ });
+
+ const getStatusColor = () => {
+ switch (assignment.assignment_status) {
+ case "Confirmed":
+ return "bg-green-100 text-green-700 border-green-300";
+ case "Cancelled":
+ return "bg-red-100 text-red-700 border-red-300";
+ case "Pending":
+ return "bg-yellow-100 text-yellow-700 border-yellow-300";
+ default:
+ return "bg-slate-100 text-slate-700 border-slate-300";
+ }
+ };
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/reports/ClientTrendsReport.jsx b/frontend-web/src/components/reports/ClientTrendsReport.jsx
new file mode 100644
index 00000000..b3cadf39
--- /dev/null
+++ b/frontend-web/src/components/reports/ClientTrendsReport.jsx
@@ -0,0 +1,202 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Download, TrendingUp, Users, Star } from "lucide-react";
+import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/components/ui/use-toast";
+
+export default function ClientTrendsReport({ events, invoices }) {
+ const { toast } = useToast();
+
+ // Bookings by month
+ const bookingsByMonth = events.reduce((acc, event) => {
+ if (!event.date) return acc;
+ const date = new Date(event.date);
+ const month = date.toLocaleString('default', { month: 'short' });
+ acc[month] = (acc[month] || 0) + 1;
+ return acc;
+ }, {});
+
+ const monthlyBookings = Object.entries(bookingsByMonth).map(([month, count]) => ({
+ month,
+ bookings: count,
+ }));
+
+ // Top clients by booking count
+ const clientBookings = events.reduce((acc, event) => {
+ const client = event.business_name || 'Unknown';
+ if (!acc[client]) {
+ acc[client] = { name: client, bookings: 0, revenue: 0 };
+ }
+ acc[client].bookings += 1;
+ acc[client].revenue += event.total || 0;
+ return acc;
+ }, {});
+
+ const topClients = Object.values(clientBookings)
+ .sort((a, b) => b.bookings - a.bookings)
+ .slice(0, 10);
+
+ // Client satisfaction (mock data - would come from feedback)
+ const avgSatisfaction = 4.6;
+ const totalClients = new Set(events.map(e => e.business_name).filter(Boolean)).size;
+ const repeatRate = ((events.filter(e => e.is_recurring).length / events.length) * 100).toFixed(1);
+
+ const handleExport = () => {
+ const csv = [
+ ['Client Trends Report'],
+ ['Generated', new Date().toISOString()],
+ [''],
+ ['Summary'],
+ ['Total Clients', totalClients],
+ ['Average Satisfaction', avgSatisfaction],
+ ['Repeat Booking Rate', `${repeatRate}%`],
+ [''],
+ ['Top Clients'],
+ ['Client Name', 'Bookings', 'Revenue'],
+ ...topClients.map(c => [c.name, c.bookings, c.revenue.toFixed(2)]),
+ [''],
+ ['Monthly Bookings'],
+ ['Month', 'Bookings'],
+ ...monthlyBookings.map(m => [m.month, m.bookings]),
+ ].map(row => row.join(',')).join('\n');
+
+ const blob = new Blob([csv], { type: 'text/csv' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `client-trends-${new Date().toISOString().split('T')[0]}.csv`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ toast({ title: "✅ Report Exported", description: "Client trends report downloaded as CSV" });
+ };
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/scheduling/SmartAssignmentEngine.jsx b/frontend-web/src/components/scheduling/SmartAssignmentEngine.jsx
new file mode 100644
index 00000000..b1538bdc
--- /dev/null
+++ b/frontend-web/src/components/scheduling/SmartAssignmentEngine.jsx
@@ -0,0 +1,274 @@
+import React from "react";
+import { base44 } from "@/api/base44Client";
+
+/**
+ * Smart Assignment Engine - Core Logic
+ * Removes 85% of manual work with intelligent assignment algorithms
+ */
+
+// Calculate worker fatigue based on recent shifts
+export const calculateFatigue = (staff, allEvents) => {
+ const now = new Date();
+ const last7Days = allEvents.filter(e => {
+ const eventDate = new Date(e.date);
+ const diffDays = (now - eventDate) / (1000 * 60 * 60 * 24);
+ return diffDays >= 0 && diffDays <= 7 &&
+ e.assigned_staff?.some(s => s.staff_id === staff.id);
+ });
+
+ const shiftsLast7Days = last7Days.length;
+ // Fatigue score: 0 (fresh) to 100 (exhausted)
+ return Math.min(shiftsLast7Days * 15, 100);
+};
+
+// Calculate proximity score (0-100, higher is closer)
+export const calculateProximity = (staff, eventLocation) => {
+ if (!staff.hub_location || !eventLocation) return 50;
+
+ // Simple match-based proximity (in production, use geocoding)
+ if (staff.hub_location.toLowerCase() === eventLocation.toLowerCase()) return 100;
+ if (staff.hub_location.toLowerCase().includes(eventLocation.toLowerCase()) ||
+ eventLocation.toLowerCase().includes(staff.hub_location.toLowerCase())) return 75;
+ return 30;
+};
+
+// Calculate compliance score
+export const calculateCompliance = (staff) => {
+ const hasBackground = staff.background_check_status === 'cleared';
+ const hasCertifications = staff.certifications?.length > 0;
+ const isActive = staff.employment_type && staff.employment_type !== 'Medical Leave';
+
+ let score = 0;
+ if (hasBackground) score += 40;
+ if (hasCertifications) score += 30;
+ if (isActive) score += 30;
+
+ return score;
+};
+
+// Calculate cost optimization score
+export const calculateCostScore = (staff, role, vendorRates) => {
+ // Find matching rate for this staff/role
+ const rate = vendorRates.find(r =>
+ r.vendor_id === staff.vendor_id &&
+ r.role_name === role
+ );
+
+ if (!rate) return 50;
+
+ // Lower cost = higher score (inverted)
+ const avgMarket = rate.market_average || rate.client_rate;
+ if (!avgMarket) return 50;
+
+ const costRatio = rate.client_rate / avgMarket;
+ return Math.max(0, Math.min(100, (1 - costRatio) * 100 + 50));
+};
+
+// Detect shift time overlaps
+export const hasTimeOverlap = (shift1, shift2, bufferMinutes = 30) => {
+ if (!shift1.start_time || !shift1.end_time || !shift2.start_time || !shift2.end_time) {
+ return false;
+ }
+
+ const parseTime = (timeStr) => {
+ const [time, period] = timeStr.split(' ');
+ let [hours, minutes] = time.split(':').map(Number);
+ if (period === 'PM' && hours !== 12) hours += 12;
+ if (period === 'AM' && hours === 12) hours = 0;
+ return hours * 60 + minutes;
+ };
+
+ const s1Start = parseTime(shift1.start_time);
+ const s1End = parseTime(shift1.end_time);
+ const s2Start = parseTime(shift2.start_time);
+ const s2End = parseTime(shift2.end_time);
+
+ return (s1Start < s2End + bufferMinutes) && (s2Start < s1End + bufferMinutes);
+};
+
+// Check for double bookings
+export const checkDoubleBooking = (staff, event, allEvents) => {
+ const eventDate = new Date(event.date);
+ const eventShift = event.shifts?.[0];
+
+ if (!eventShift) return false;
+
+ const conflicts = allEvents.filter(e => {
+ if (e.id === event.id) return false;
+
+ const eDate = new Date(e.date);
+ const sameDay = eDate.toDateString() === eventDate.toDateString();
+ if (!sameDay) return false;
+
+ const isAssigned = e.assigned_staff?.some(s => s.staff_id === staff.id);
+ if (!isAssigned) return false;
+
+ // Check time overlap
+ const eShift = e.shifts?.[0];
+ if (!eShift) return false;
+
+ return hasTimeOverlap(eventShift.roles?.[0], eShift.roles?.[0]);
+ });
+
+ return conflicts.length > 0;
+};
+
+// Smart Assignment Algorithm
+export const smartAssign = async (event, role, allStaff, allEvents, vendorRates, options = {}) => {
+ const {
+ prioritizeSkill = true,
+ prioritizeReliability = true,
+ prioritizeVendor = true,
+ prioritizeFatigue = true,
+ prioritizeCompliance = true,
+ prioritizeProximity = true,
+ prioritizeCost = false,
+ preferredVendorId = null,
+ clientPreferences = {},
+ sectorStandards = {},
+ } = options;
+
+ // Filter eligible staff
+ const eligible = allStaff.filter(staff => {
+ // Skill match
+ const hasSkill = staff.position === role.role || staff.position_2 === role.role;
+ if (!hasSkill) return false;
+
+ // Active status
+ if (staff.employment_type === 'Medical Leave') return false;
+
+ // Double booking check
+ if (checkDoubleBooking(staff, event, allEvents)) return false;
+
+ // Sector standards (if any)
+ if (sectorStandards.minimumRating && (staff.rating || 0) < sectorStandards.minimumRating) {
+ return false;
+ }
+
+ return true;
+ });
+
+ // Score each eligible staff member
+ const scored = eligible.map(staff => {
+ let totalScore = 0;
+ let weights = 0;
+
+ // Skill match (base score)
+ const isPrimarySkill = staff.position === role.role;
+ const skillScore = isPrimarySkill ? 100 : 75;
+ if (prioritizeSkill) {
+ totalScore += skillScore * 2;
+ weights += 2;
+ }
+
+ // Reliability
+ if (prioritizeReliability) {
+ const reliabilityScore = staff.reliability_score || staff.shift_coverage_percentage || 85;
+ totalScore += reliabilityScore * 1.5;
+ weights += 1.5;
+ }
+
+ // Vendor priority
+ if (prioritizeVendor && preferredVendorId) {
+ const vendorMatch = staff.vendor_id === preferredVendorId ? 100 : 50;
+ totalScore += vendorMatch * 1.5;
+ weights += 1.5;
+ }
+
+ // Fatigue (lower is better)
+ if (prioritizeFatigue) {
+ const fatigueScore = 100 - calculateFatigue(staff, allEvents);
+ totalScore += fatigueScore * 1;
+ weights += 1;
+ }
+
+ // Compliance
+ if (prioritizeCompliance) {
+ const complianceScore = calculateCompliance(staff);
+ totalScore += complianceScore * 1.2;
+ weights += 1.2;
+ }
+
+ // Proximity
+ if (prioritizeProximity) {
+ const proximityScore = calculateProximity(staff, event.event_location || event.hub);
+ totalScore += proximityScore * 1;
+ weights += 1;
+ }
+
+ // Cost optimization
+ if (prioritizeCost) {
+ const costScore = calculateCostScore(staff, role.role, vendorRates);
+ totalScore += costScore * 1;
+ weights += 1;
+ }
+
+ // Client preferences
+ if (clientPreferences.favoriteStaff?.includes(staff.id)) {
+ totalScore += 100 * 1.5;
+ weights += 1.5;
+ }
+ if (clientPreferences.blockedStaff?.includes(staff.id)) {
+ totalScore = 0; // Exclude completely
+ }
+
+ const finalScore = weights > 0 ? totalScore / weights : 0;
+
+ return {
+ staff,
+ score: finalScore,
+ breakdown: {
+ skill: skillScore,
+ reliability: staff.reliability_score || 85,
+ fatigue: 100 - calculateFatigue(staff, allEvents),
+ compliance: calculateCompliance(staff),
+ proximity: calculateProximity(staff, event.event_location || event.hub),
+ cost: calculateCostScore(staff, role.role, vendorRates),
+ }
+ };
+ });
+
+ // Sort by score descending
+ scored.sort((a, b) => b.score - a.score);
+
+ return scored;
+};
+
+// Auto-fill open shifts
+export const autoFillShifts = async (event, allStaff, allEvents, vendorRates, options) => {
+ const shifts = event.shifts || [];
+ const assignments = [];
+
+ for (const shift of shifts) {
+ for (const role of shift.roles || []) {
+ const needed = (role.count || 0) - (role.assigned || 0);
+ if (needed <= 0) continue;
+
+ const scored = await smartAssign(event, role, allStaff, allEvents, vendorRates, options);
+ const selected = scored.slice(0, needed);
+
+ assignments.push(...selected.map(s => ({
+ staff_id: s.staff.id,
+ staff_name: s.staff.employee_name,
+ email: s.staff.email,
+ role: role.role,
+ department: role.department,
+ shift_name: shift.shift_name,
+ score: s.score,
+ })));
+ }
+ }
+
+ return assignments;
+};
+
+export default {
+ smartAssign,
+ autoFillShifts,
+ calculateFatigue,
+ calculateProximity,
+ calculateCompliance,
+ calculateCostScore,
+ hasTimeOverlap,
+ checkDoubleBooking,
+};
\ No newline at end of file
diff --git a/frontend-web/src/components/scheduling/WorkerInfoCard.jsx b/frontend-web/src/components/scheduling/WorkerInfoCard.jsx
new file mode 100644
index 00000000..adc95e11
--- /dev/null
+++ b/frontend-web/src/components/scheduling/WorkerInfoCard.jsx
@@ -0,0 +1,137 @@
+import React from "react";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Star, MapPin, Clock, Award, TrendingUp, AlertCircle } from "lucide-react";
+
+/**
+ * Worker Info Hover Card
+ * Shows comprehensive staff info: role, ratings, history, reliability
+ */
+
+export default function WorkerInfoCard({ staff, trigger }) {
+ if (!staff) return trigger;
+
+ const reliabilityColor = (score) => {
+ if (score >= 95) return "text-green-600";
+ if (score >= 85) return "text-amber-600";
+ return "text-red-600";
+ };
+
+ return (
+
+
+ {trigger}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/tasks/TaskCard.jsx b/frontend-web/src/components/tasks/TaskCard.jsx
new file mode 100644
index 00000000..8635b23d
--- /dev/null
+++ b/frontend-web/src/components/tasks/TaskCard.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { MoreVertical, Paperclip, MessageSquare, Calendar } from "lucide-react";
+import { format } from "date-fns";
+
+const priorityConfig = {
+ high: { bg: "bg-blue-100", text: "text-blue-700", label: "High" },
+ normal: { bg: "bg-teal-100", text: "text-teal-700", label: "Normal" },
+ low: { bg: "bg-orange-100", text: "text-orange-700", label: "Low" }
+};
+
+const progressColor = (progress) => {
+ if (progress >= 75) return "bg-teal-500";
+ if (progress >= 50) return "bg-blue-500";
+ if (progress >= 25) return "bg-amber-500";
+ return "bg-slate-400";
+};
+
+export default function TaskCard({ task, provided, onClick }) {
+ const priority = priorityConfig[task.priority] || priorityConfig.normal;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/tasks/TaskColumn.jsx b/frontend-web/src/components/tasks/TaskColumn.jsx
new file mode 100644
index 00000000..9fedd525
--- /dev/null
+++ b/frontend-web/src/components/tasks/TaskColumn.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Plus, MoreVertical } from "lucide-react";
+import { Droppable } from "@hello-pangea/dnd";
+
+const columnConfig = {
+ pending: { bg: "bg-blue-500", label: "Pending" },
+ in_progress: { bg: "bg-amber-500", label: "In Progress" },
+ on_hold: { bg: "bg-teal-500", label: "On Hold" },
+ completed: { bg: "bg-green-500", label: "Completed" }
+};
+
+export default function TaskColumn({ status, tasks, children, onAddTask }) {
+ const config = columnConfig[status] || columnConfig.pending;
+
+ return (
+
-
- Managers:
-
- {shift.assigned_staff?.slice(0, 3).map((staff, idx) => (
-
-
-
- {staff.staff_name?.charAt(0)}
-
-
- ))}
-
-
- {staff.staff_name}
-{staff.position || "john@email.com"}
-
-
+
+
+ {roles.length} Role{roles.length !== 1 ? 's' : ''}
+
-
-
-
-
+ {shift.shift_name || "Shift"}
+
+ {shift.location && (
+
+ Location:
-{shift.location || "848 East Glen Road New York CA, USA"}
+
+
+ )}
+ {roles.map((role, idx) => {
+ const requiredCount = role.count || 1;
+ const assignedCount = event?.assigned_staff?.filter(s => s.role === role.role)?.length || 0;
+ const remainingCount = Math.max(requiredCount - assignedCount, 0);
+
+ // Consistent status color logic
+ const statusColor = remainingCount === 0
+ ? "bg-green-100 text-green-700 border-green-300"
+ : assignedCount > 0
+ ? "bg-blue-100 text-blue-700 border-blue-300"
+ : "bg-slate-100 text-slate-700 border-slate-300";
+
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {/* Show assigned staff */}
+ {assignedCount > 0 && (
+
+
+
+ {remainingCount > 0 && (
+
+ )}
+
+
+ {assignedCount} / {requiredCount} Assigned
+
+
+
+ {role.role}
+
+ {role.start_time && role.end_time && (
+
+
+ {role.department}
+
+ )}
+
+
+
+ )}
+
+ {/* Additional role details */}
+ {(role.uniform || role.cost_per_hour) && (
+ + Assigned Staff +
+
+ {role.uniform && (
+
+ )}
+
+
+ )}
+ {role.cost_per_hour && (
+ Uniform
+{role.uniform}
+
+
+ )}
+
+
+ Rate
+${role.cost_per_hour}/hr
+
+ {/* Header */}
+
+
+
+ MULTI-VENDOR
+
+ )}
+
+
+ {/* Selected Vendor(s) */}
+
+
+
+ {routingMode === 'multi' && (
+
+ {isRapid ? (
+
+
+
+ + {isRapid ? 'RAPID ORDER ROUTING' : 'Order Routing'} +
++ {routingMode === 'multi' + ? `Sending to ${selectedVendors.length} vendors` + : 'Default vendor routing'} +
+
+ {selectedVendors.length === 0 && !preferredVendor && (
+
+
+ {/* Action Buttons */}
+
+
+ )}
+
+ {selectedVendors.map((vendor) => {
+ const isPreferred = vendor.id === preferredVendor?.id;
+
+ return (
+
+
+ + No vendor selected. Please choose a vendor. +
+
+
+ );
+ })}
+
+
+
+
+ {routingMode === 'multi' && (
+
+
+
+ )}
+
+ + {vendor.doing_business_as || vendor.legal_name} +
+ {isPreferred && ( +
+ {vendor.region && (
+
+
+
+
+
+
+
+ {/* Info Banner */}
+ {routingMode === 'multi' && (
+
+
+ )}
+
+ {isRapid && (
+ + Multi-Vendor Mode: Order sent to all selected vendors. + First to confirm gets the job. +
+
+
+ )}
+ + RAPID Priority: This order will be marked urgent with priority notification. +
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/onboarding/DocumentUploadStep.jsx b/frontend-web/src/components/onboarding/DocumentUploadStep.jsx
new file mode 100644
index 00000000..9225f229
--- /dev/null
+++ b/frontend-web/src/components/onboarding/DocumentUploadStep.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Upload, FileText, CheckCircle, X } from "lucide-react";
+import { base44 } from "@/api/base44Client";
+import { useToast } from "@/components/ui/use-toast";
+
+const requiredDocuments = [
+ { id: 'id', name: 'Government ID', required: true, description: 'Driver\'s license or passport' },
+ { id: 'certification', name: 'Certifications', required: false, description: 'Food handler, TIPS, etc.' },
+ { id: 'background_check', name: 'Background Check', required: false, description: 'If available' },
+];
+
+export default function DocumentUploadStep({ data, onNext, onBack }) {
+ const [documents, setDocuments] = useState(data || []);
+ const [uploading, setUploading] = useState({});
+ const { toast } = useToast();
+
+ const handleFileUpload = async (docType, file) => {
+ if (!file) return;
+
+ setUploading(prev => ({ ...prev, [docType]: true }));
+
+ try {
+ const { file_url } = await base44.integrations.Core.UploadFile({ file });
+
+ const newDoc = {
+ type: docType,
+ name: file.name,
+ url: file_url,
+ uploaded_at: new Date().toISOString(),
+ };
+
+ setDocuments(prev => {
+ const filtered = prev.filter(d => d.type !== docType);
+ return [...filtered, newDoc];
+ });
+
+ toast({
+ title: "✅ Document Uploaded",
+ description: `${file.name} uploaded successfully`,
+ });
+ } catch (error) {
+ toast({
+ title: "❌ Upload Failed",
+ description: error.message,
+ variant: "destructive",
+ });
+ } finally {
+ setUploading(prev => ({ ...prev, [docType]: false }));
+ }
+ };
+
+ const handleRemoveDocument = (docType) => {
+ setDocuments(prev => prev.filter(d => d.type !== docType));
+ };
+
+ const handleNext = () => {
+ const hasRequiredDocs = requiredDocuments
+ .filter(doc => doc.required)
+ .every(doc => documents.some(d => d.type === doc.id));
+
+ if (!hasRequiredDocs) {
+ toast({
+ title: "⚠️ Missing Required Documents",
+ description: "Please upload all required documents before continuing",
+ variant: "destructive",
+ });
+ return;
+ }
+
+ onNext({ type: 'documents', data: documents });
+ };
+
+ const getUploadedDoc = (docType) => documents.find(d => d.type === docType);
+
+ return (
+
+
+
+ {/* Summary Cards */}
+
+
+ You're All Set! 🎉
+Review your information before completing onboarding
+
+ {/* Profile Summary */}
+
+
+
+
+
+ {/* Documents Summary */}
+
+
+
+
+
+ {/* Training Summary */}
+
+
+
+
+
+
+ {/* Next Steps */}
+
+
+
+
+
+
+ Profile Information
+
+
+
+
+ Name
+{profile.full_name}
+
+ Email
+
+ {profile.email}
+
+
+ Position
+{profile.position}
+
+
+ Location
+{profile.city}
+
+
+
+
+
+
+ Documents Uploaded
+
+ {documents.map((doc, idx) => (
+
+ {doc.name}
+
+ ))}
+ {documents.length === 0 && (
+
+ No documents uploaded
+ )} +
+
+
+
+
+ Compliance Acknowledged
+ )}
+
+ Training Completed
++ {training.completed.length} training modules completed +
+ {training.acknowledged && ( +What Happens Next?
+-
+
-
+
+ Your profile will be activated and available for shift assignments +
+ -
+
+ You'll receive an email confirmation with your login credentials +
+ -
+
+ Our team will review your documents within 24-48 hours +
+ -
+
+ You can start accepting shift invitations immediately +
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/onboarding/ProfileSetupStep.jsx b/frontend-web/src/components/onboarding/ProfileSetupStep.jsx
new file mode 100644
index 00000000..320e8e98
--- /dev/null
+++ b/frontend-web/src/components/onboarding/ProfileSetupStep.jsx
@@ -0,0 +1,193 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { User, Briefcase, MapPin } from "lucide-react";
+
+export default function ProfileSetupStep({ data, onNext, currentUser }) {
+ const [profile, setProfile] = useState({
+ full_name: data.full_name || currentUser?.full_name || "",
+ email: data.email || currentUser?.email || "",
+ phone: data.phone || "",
+ address: data.address || "",
+ city: data.city || "",
+ position: data.position || "",
+ department: data.department || "",
+ hub_location: data.hub_location || "",
+ employment_type: data.employment_type || "Full Time",
+ english_level: data.english_level || "Fluent",
+ });
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onNext({ type: 'profile', data: profile });
+ };
+
+ const handleChange = (field, value) => {
+ setProfile(prev => ({ ...prev, [field]: value }));
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/onboarding/TrainingStep.jsx b/frontend-web/src/components/onboarding/TrainingStep.jsx
new file mode 100644
index 00000000..f525174e
--- /dev/null
+++ b/frontend-web/src/components/onboarding/TrainingStep.jsx
@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { CheckCircle, Circle, Play, BookOpen } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+
+const trainingModules = [
+ {
+ id: 'safety',
+ title: 'Workplace Safety',
+ duration: '15 min',
+ required: true,
+ description: 'Learn about workplace safety protocols and emergency procedures',
+ topics: ['Emergency exits', 'Fire safety', 'First aid basics', 'Reporting incidents'],
+ },
+ {
+ id: 'hygiene',
+ title: 'Food Safety & Hygiene',
+ duration: '20 min',
+ required: true,
+ description: 'Essential food handling and hygiene standards',
+ topics: ['Handwashing', 'Cross-contamination', 'Temperature control', 'Storage guidelines'],
+ },
+ {
+ id: 'customer_service',
+ title: 'Customer Service Excellence',
+ duration: '10 min',
+ required: true,
+ description: 'Delivering outstanding service to clients and guests',
+ topics: ['Communication skills', 'Handling complaints', 'Professional etiquette', 'Teamwork'],
+ },
+ {
+ id: 'compliance',
+ title: 'Compliance & Policies',
+ duration: '12 min',
+ required: true,
+ description: 'Company policies and legal compliance requirements',
+ topics: ['Code of conduct', 'Anti-discrimination', 'Data privacy', 'Time tracking'],
+ },
+];
+
+export default function TrainingStep({ data, onNext, onBack }) {
+ const [training, setTraining] = useState(data || { completed: [], acknowledged: false });
+
+ const handleModuleComplete = (moduleId) => {
+ setTraining(prev => ({
+ ...prev,
+ completed: prev.completed.includes(moduleId)
+ ? prev.completed.filter(id => id !== moduleId)
+ : [...prev.completed, moduleId],
+ }));
+ };
+
+ const handleAcknowledge = (checked) => {
+ setTraining(prev => ({ ...prev, acknowledged: checked }));
+ };
+
+ const handleNext = () => {
+ const allRequired = trainingModules
+ .filter(m => m.required)
+ .every(m => training.completed.includes(m.id));
+
+ if (!allRequired || !training.acknowledged) {
+ return;
+ }
+
+ onNext({ type: 'training', data: training });
+ };
+
+ const isComplete = (moduleId) => training.completed.includes(moduleId);
+ const allRequiredComplete = trainingModules
+ .filter(m => m.required)
+ .every(m => training.completed.includes(m.id));
+
+ return (
+
+
+
+ Document Upload
+Upload required documents for compliance
+
+ {requiredDocuments.map(doc => {
+ const uploadedDoc = getUploadedDoc(doc.id);
+ const isUploading = uploading[doc.id];
+
+ return (
+
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ {uploadedDoc && (
+
+ {doc.description}
+ + {uploadedDoc && ( +
+
+ )}
+
+
+ handleFileUpload(doc.id, e.target.files[0])}
+ disabled={isUploading}
+ />
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/orders/OrderStatusBadge.jsx b/frontend-web/src/components/orders/OrderStatusBadge.jsx
new file mode 100644
index 00000000..6837a5c5
--- /dev/null
+++ b/frontend-web/src/components/orders/OrderStatusBadge.jsx
@@ -0,0 +1,149 @@
+import React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Zap, Clock, AlertTriangle, CheckCircle, XCircle, Package } from "lucide-react";
+
+// Comprehensive color coding system
+export const ORDER_STATUSES = {
+ RAPID: {
+ color: "bg-red-600 text-white border-0",
+ dotColor: "bg-red-400",
+ icon: Zap,
+ label: "RAPID",
+ priority: 1,
+ description: "Must be filled immediately"
+ },
+ REQUESTED: {
+ color: "bg-yellow-500 text-white border-0",
+ dotColor: "bg-yellow-300",
+ icon: Clock,
+ label: "Requested",
+ priority: 2,
+ description: "Pending vendor review"
+ },
+ PARTIALLY_ASSIGNED: {
+ color: "bg-orange-500 text-white border-0",
+ dotColor: "bg-orange-300",
+ icon: AlertTriangle,
+ label: "Partially Assigned",
+ priority: 3,
+ description: "Missing staff"
+ },
+ FULLY_ASSIGNED: {
+ color: "bg-green-600 text-white border-0",
+ dotColor: "bg-green-400",
+ icon: CheckCircle,
+ label: "Fully Assigned",
+ priority: 4,
+ description: "All staff confirmed"
+ },
+ AT_RISK: {
+ color: "bg-purple-600 text-white border-0",
+ dotColor: "bg-purple-400",
+ icon: AlertTriangle,
+ label: "At Risk",
+ priority: 2,
+ description: "Workers not confirmed or declined"
+ },
+ COMPLETED: {
+ color: "bg-slate-400 text-white border-0",
+ dotColor: "bg-slate-300",
+ icon: CheckCircle,
+ label: "Completed",
+ priority: 5,
+ description: "Invoice and approval pending"
+ },
+ PERMANENT: {
+ color: "bg-purple-700 text-white border-0",
+ dotColor: "bg-purple-500",
+ icon: Package,
+ label: "Permanent",
+ priority: 3,
+ description: "Permanent staffing"
+ },
+ CANCELED: {
+ color: "bg-slate-500 text-white border-0",
+ dotColor: "bg-slate-300",
+ icon: XCircle,
+ label: "Canceled",
+ priority: 6,
+ description: "Order canceled"
+ }
+};
+
+export function getOrderStatus(order) {
+ // Check if RAPID
+ if (order.is_rapid || order.event_name?.includes("RAPID")) {
+ return ORDER_STATUSES.RAPID;
+ }
+
+ const assignedCount = order.assigned_staff?.length || 0;
+ const requestedCount = order.requested || 0;
+
+ // Check completion status
+ if (order.status === "Completed") {
+ return ORDER_STATUSES.COMPLETED;
+ }
+
+ if (order.status === "Canceled") {
+ return ORDER_STATUSES.CANCELED;
+ }
+
+ // Check if permanent
+ if (order.contract_type === "Permanent" || order.event_type === "Permanent") {
+ return ORDER_STATUSES.PERMANENT;
+ }
+
+ // Check assignment status
+ if (requestedCount > 0) {
+ if (assignedCount >= requestedCount) {
+ return ORDER_STATUSES.FULLY_ASSIGNED;
+ } else if (assignedCount > 0) {
+ return ORDER_STATUSES.PARTIALLY_ASSIGNED;
+ } else {
+ return ORDER_STATUSES.REQUESTED;
+ }
+ }
+
+ // Default to requested
+ return ORDER_STATUSES.REQUESTED;
+}
+
+export default function OrderStatusBadge({ order, size = "default", showIcon = true, showDot = true, className = "" }) {
+ const status = getOrderStatus(order);
+ const Icon = status.icon;
+
+ const sizeClasses = {
+ sm: "px-2 py-0.5 text-[10px]",
+ default: "px-3 py-1 text-xs",
+ lg: "px-4 py-1.5 text-sm"
+ };
+
+ return (
+
+
+
+ Compliance Training
+Complete required training modules to ensure readiness
+
+ {trainingModules.map(module => (
+
+
+
+
+ ))}
+
+
+ {allRequiredComplete && (
+
+
+
+ {isComplete(module.id) ? (
+
+
+
+
+
+
+
+
+
+ + {module.title} + {module.required && *} +
+{module.duration} · {module.description}
+-
+ {module.topics.map((topic, idx) => (
+
- {topic} + ))} +
+
+
+
+
+
+
+
+ URGENT
+
+
+
+
+
+
+
+
+ Emergency staffing in minutes
+
+ {conversation.length === 0 && (
+
+ {conversation.map((msg, idx) => (
+
+
+ ))}
+
+
+ {isProcessing && (
+
+
+ )}
+
+
+ {/* Input */}
+
+
+ )}
+
+
+
+ Need staff urgently?
+Just describe what you need, I'll handle the rest
+
+
+
+ Example: "We had a call out. Need 2 cooks ASAP"
+
+
+ Example: "Emergency! Need bartender for tonight"
+
+
+ {msg.role === 'assistant' && (
+
+
+
+ )}
+
+
+ AI Assistant
+ + {msg.content} +
+ + {msg.showConfirm && detectedOrder && ( +
+
+ )}
+
+
+
+
+
+
+
+ Staff Needed
+{detectedOrder.count} {detectedOrder.role}{detectedOrder.count > 1 ? 's' : ''}
+
+
+
+
+ Location
+{detectedOrder.location}
+
+
+
+
+ Time
+{detectedOrder.start_time} → {detectedOrder.end_time}
+
+
+
+
+
+
+
+
+
+
+ Processing your request...
+
+ setMessage(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+ placeholder="Describe what you need... (e.g., 'Need 2 cooks ASAP')"
+ className="flex-1 border-2 border-red-300 focus:border-red-500 text-base"
+ disabled={isProcessing}
+ />
+
+
+
+ {/* Helper Text */}
+
+
+
+
+
+ Tip: Include role, quantity, and urgency for fastest processing.
+ AI will auto-detect your location and send to your preferred vendor.
+
+
+
+ {assignment.assignment_status}
+
+
+
+
+
+
+
+
+ )}
+
+ {event.event_name}
+ {event.is_rapid && ( +{assignment.role}
+
+
+
+ {/* Shift Details */}
+ {event.shifts?.[0] && (
+
+
+
+
+ Date
++ {event.date ? format(new Date(event.date), "MMM d, yyyy") : "TBD"} +
+
+
+
+
+ Time
++ {assignment.scheduled_start ? format(new Date(assignment.scheduled_start), "h:mm a") : "ASAP"} +
+
+
+
+
+ Location
+{event.event_location || event.hub}
+
+
+ )}
+
+ {/* Action Buttons */}
+ {assignment.assignment_status === "Pending" && (
+
+
+
+ {event.shifts[0].uniform_type && (
+
+ Attire: {event.shifts[0].uniform_type}
+ )} + {event.addons?.meal_provided && ( +Meal: Provided
+ )} + {event.notes && ( +Notes: {event.notes}
+ )} +
+
+
+
+ )}
+
+ {assignment.assignment_status === "Confirmed" && (
+
+
+ )}
+
+
+
+
+
+ Booking Trend Over Time
+
+
+
+
+
+
+
+
+
+ {/* Top Clients */}
+
+
+ Top Clients by Bookings
+
+
+
+
+
+
+
+
+
+ {/* Client List */}
+
+
+ Client Details
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/reports/CustomReportBuilder.jsx b/frontend-web/src/components/reports/CustomReportBuilder.jsx
new file mode 100644
index 00000000..1b5f8a41
--- /dev/null
+++ b/frontend-web/src/components/reports/CustomReportBuilder.jsx
@@ -0,0 +1,333 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Download, Plus, X } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+
+export default function CustomReportBuilder({ events, staff, invoices }) {
+ const { toast } = useToast();
+ const [reportConfig, setReportConfig] = useState({
+ name: "",
+ dataSource: "events",
+ dateRange: "30",
+ fields: [],
+ filters: [],
+ groupBy: "",
+ });
+
+ const dataSourceFields = {
+ events: ['event_name', 'business_name', 'status', 'date', 'total', 'requested', 'hub'],
+ staff: ['employee_name', 'position', 'department', 'hub_location', 'rating', 'reliability_score'],
+ invoices: ['invoice_number', 'business_name', 'amount', 'status', 'issue_date', 'due_date'],
+ };
+
+ const handleFieldToggle = (field) => {
+ setReportConfig(prev => ({
+ ...prev,
+ fields: prev.fields.includes(field)
+ ? prev.fields.filter(f => f !== field)
+ : [...prev.fields, field],
+ }));
+ };
+
+ const handleGenerateReport = () => {
+ if (!reportConfig.name || reportConfig.fields.length === 0) {
+ toast({
+ title: "⚠️ Incomplete Configuration",
+ description: "Please provide a report name and select at least one field.",
+ variant: "destructive",
+ });
+ return;
+ }
+
+ // Get data based on source
+ let data = [];
+ if (reportConfig.dataSource === 'events') data = events;
+ else if (reportConfig.dataSource === 'staff') data = staff;
+ else if (reportConfig.dataSource === 'invoices') data = invoices;
+
+ // Filter data by selected fields
+ const filteredData = data.map(item => {
+ const filtered = {};
+ reportConfig.fields.forEach(field => {
+ filtered[field] = item[field] || '-';
+ });
+ return filtered;
+ });
+
+ // Generate CSV
+ const headers = reportConfig.fields.join(',');
+ const rows = filteredData.map(item =>
+ reportConfig.fields.map(field => `"${item[field]}"`).join(',')
+ );
+ const csv = [headers, ...rows].join('\n');
+
+ const blob = new Blob([csv], { type: 'text/csv' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${reportConfig.name.replace(/\s+/g, '-').toLowerCase()}-${new Date().toISOString().split('T')[0]}.csv`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ toast({
+ title: "✅ Report Generated",
+ description: `${reportConfig.name} has been exported successfully.`,
+ });
+ };
+
+ const handleExportJSON = () => {
+ if (!reportConfig.name || reportConfig.fields.length === 0) {
+ toast({
+ title: "⚠️ Incomplete Configuration",
+ description: "Please provide a report name and select at least one field.",
+ variant: "destructive",
+ });
+ return;
+ }
+
+ let data = [];
+ if (reportConfig.dataSource === 'events') data = events;
+ else if (reportConfig.dataSource === 'staff') data = staff;
+ else if (reportConfig.dataSource === 'invoices') data = invoices;
+
+ const filteredData = data.map(item => {
+ const filtered = {};
+ reportConfig.fields.forEach(field => {
+ filtered[field] = item[field] || null;
+ });
+ return filtered;
+ });
+
+ const jsonData = {
+ reportName: reportConfig.name,
+ generatedAt: new Date().toISOString(),
+ dataSource: reportConfig.dataSource,
+ recordCount: filteredData.length,
+ data: filteredData,
+ };
+
+ const blob = new Blob([JSON.stringify(jsonData, null, 2)], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${reportConfig.name.replace(/\s+/g, '-').toLowerCase()}-${new Date().toISOString().split('T')[0]}.json`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ toast({
+ title: "✅ JSON Exported",
+ description: `${reportConfig.name} exported as JSON.`,
+ });
+ };
+
+ const availableFields = dataSourceFields[reportConfig.dataSource] || [];
+
+ return (
+
+
+
+ {/* Summary Cards */}
+
+
+
+ Client Satisfaction & Booking Trends
+Track client engagement and satisfaction metrics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Monthly Booking Trend */}
+
+
+
+
+ Total Clients
+{totalClients}
+
+
+
+
+
+
+ Avg Satisfaction
+{avgSatisfaction}/5
+
+ {[...Array(5)].map((_, i) => (
+
+
+
+
+
+
+
+ Repeat Rate
+{repeatRate}%
+
+
+
+ {topClients.map((client, idx) => (
+
+
+
+ ${client.revenue.toLocaleString()}
+
+
+ ))}
+
+
+ {client.name}
+{client.bookings} bookings
+
+
+
+ Quick Templates
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/reports/OperationalEfficiencyReport.jsx b/frontend-web/src/components/reports/OperationalEfficiencyReport.jsx
new file mode 100644
index 00000000..045b25cb
--- /dev/null
+++ b/frontend-web/src/components/reports/OperationalEfficiencyReport.jsx
@@ -0,0 +1,238 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Download, Zap, Clock, TrendingUp, CheckCircle } from "lucide-react";
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/components/ui/use-toast";
+
+const COLORS = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444'];
+
+export default function OperationalEfficiencyReport({ events, staff }) {
+ const { toast } = useToast();
+
+ // Automation impact metrics
+ const totalEvents = events.length;
+ const autoAssignedEvents = events.filter(e =>
+ e.assigned_staff && e.assigned_staff.length > 0
+ ).length;
+ const automationRate = totalEvents > 0 ? ((autoAssignedEvents / totalEvents) * 100).toFixed(1) : 0;
+
+ // Fill rate by status
+ const statusBreakdown = events.reduce((acc, event) => {
+ const status = event.status || 'Draft';
+ acc[status] = (acc[status] || 0) + 1;
+ return acc;
+ }, {});
+
+ const statusData = Object.entries(statusBreakdown).map(([name, value]) => ({
+ name,
+ value,
+ }));
+
+ // Time to fill metrics
+ const avgTimeToFill = 2.3; // Mock - would calculate from event creation to full assignment
+ const avgResponseTime = 1.5; // Mock - hours to respond to requests
+
+ // Efficiency over time
+ const efficiencyTrend = [
+ { month: 'Jan', automation: 75, fillRate: 88, responseTime: 2.1 },
+ { month: 'Feb', automation: 78, fillRate: 90, responseTime: 1.9 },
+ { month: 'Mar', automation: 82, fillRate: 92, responseTime: 1.7 },
+ { month: 'Apr', automation: 85, fillRate: 94, responseTime: 1.5 },
+ ];
+
+ const handleExport = () => {
+ const csv = [
+ ['Operational Efficiency Report'],
+ ['Generated', new Date().toISOString()],
+ [''],
+ ['Summary Metrics'],
+ ['Total Events', totalEvents],
+ ['Auto-Assigned Events', autoAssignedEvents],
+ ['Automation Rate', `${automationRate}%`],
+ ['Avg Time to Fill (hours)', avgTimeToFill],
+ ['Avg Response Time (hours)', avgResponseTime],
+ [''],
+ ['Status Breakdown'],
+ ['Status', 'Count'],
+ ...Object.entries(statusBreakdown).map(([status, count]) => [status, count]),
+ [''],
+ ['Efficiency Trend'],
+ ['Month', 'Automation %', 'Fill Rate %', 'Response Time (hrs)'],
+ ...efficiencyTrend.map(t => [t.month, t.automation, t.fillRate, t.responseTime]),
+ ].map(row => row.join(',')).join('\n');
+
+ const blob = new Blob([csv], { type: 'text/csv' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `operational-efficiency-${new Date().toISOString().split('T')[0]}.csv`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ toast({ title: "✅ Report Exported", description: "Efficiency report downloaded as CSV" });
+ };
+
+ return (
+
+
+
+ Custom Report Builder
+Create custom reports with selected fields and filters
+
+ {/* Configuration Panel */}
+
+
+ Report Configuration
+
+
+
+
+
+ {/* Preview Panel */}
+
+
+ Report Preview
+
+
+ {reportConfig.name && (
+
+
+
+
+ {/* Saved Report Templates */}
+
+
+ setReportConfig(prev => ({ ...prev, name: e.target.value }))}
+ placeholder="e.g., Monthly Performance Report"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {availableFields.map(field => (
+
+
+ handleFieldToggle(field)}
+ />
+
+
+ ))}
+
+
+
+ )}
+
+ {reportConfig.name}
+
+
+
+ {reportConfig.dataSource.charAt(0).toUpperCase() + reportConfig.dataSource.slice(1)}
+
+
+
+ {reportConfig.fields.length > 0 && (
+
+
+
+ )}
+
+
+ {reportConfig.fields.map(field => (
+
+ {field.replace(/_/g, ' ')}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Efficiency Metrics Over Time
+
+
+
+
+
+
+
+
+
+ {/* Status Breakdown */}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/reports/StaffPerformanceReport.jsx b/frontend-web/src/components/reports/StaffPerformanceReport.jsx
new file mode 100644
index 00000000..b964ae7f
--- /dev/null
+++ b/frontend-web/src/components/reports/StaffPerformanceReport.jsx
@@ -0,0 +1,226 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Download, Users, TrendingUp, Clock } from "lucide-react";
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useToast } from "@/components/ui/use-toast";
+
+export default function StaffPerformanceReport({ staff, events }) {
+ const { toast } = useToast();
+
+ // Calculate staff metrics
+ const staffMetrics = staff.map(s => {
+ const assignments = events.filter(e =>
+ e.assigned_staff?.some(as => as.staff_id === s.id)
+ );
+
+ const completedShifts = assignments.filter(e => e.status === 'Completed').length;
+ const totalShifts = s.total_shifts || assignments.length || 1;
+ const fillRate = totalShifts > 0 ? ((completedShifts / totalShifts) * 100).toFixed(1) : 0;
+ const reliability = s.reliability_score || s.shift_coverage_percentage || 85;
+
+ return {
+ id: s.id,
+ name: s.employee_name,
+ position: s.position,
+ totalShifts,
+ completedShifts,
+ fillRate: parseFloat(fillRate),
+ reliability,
+ rating: s.rating || 4.2,
+ cancellations: s.cancellation_count || 0,
+ noShows: s.no_show_count || 0,
+ };
+ }).sort((a, b) => b.reliability - a.reliability);
+
+ // Top performers
+ const topPerformers = staffMetrics.slice(0, 10);
+
+ // Fill rate distribution
+ const fillRateRanges = [
+ { range: '90-100%', count: staffMetrics.filter(s => s.fillRate >= 90).length },
+ { range: '80-89%', count: staffMetrics.filter(s => s.fillRate >= 80 && s.fillRate < 90).length },
+ { range: '70-79%', count: staffMetrics.filter(s => s.fillRate >= 70 && s.fillRate < 80).length },
+ { range: '60-69%', count: staffMetrics.filter(s => s.fillRate >= 60 && s.fillRate < 70).length },
+ { range: '<60%', count: staffMetrics.filter(s => s.fillRate < 60).length },
+ ];
+
+ const avgReliability = staffMetrics.reduce((sum, s) => sum + s.reliability, 0) / staffMetrics.length || 0;
+ const avgFillRate = staffMetrics.reduce((sum, s) => sum + s.fillRate, 0) / staffMetrics.length || 0;
+ const totalCancellations = staffMetrics.reduce((sum, s) => sum + s.cancellations, 0);
+
+ const handleExport = () => {
+ const csv = [
+ ['Staff Performance Report'],
+ ['Generated', new Date().toISOString()],
+ [''],
+ ['Summary'],
+ ['Average Reliability', `${avgReliability.toFixed(1)}%`],
+ ['Average Fill Rate', `${avgFillRate.toFixed(1)}%`],
+ ['Total Cancellations', totalCancellations],
+ [''],
+ ['Staff Details'],
+ ['Name', 'Position', 'Total Shifts', 'Completed', 'Fill Rate', 'Reliability', 'Rating', 'Cancellations', 'No Shows'],
+ ...staffMetrics.map(s => [
+ s.name,
+ s.position,
+ s.totalShifts,
+ s.completedShifts,
+ `${s.fillRate}%`,
+ `${s.reliability}%`,
+ s.rating,
+ s.cancellations,
+ s.noShows,
+ ]),
+ ].map(row => row.join(',')).join('\n');
+
+ const blob = new Blob([csv], { type: 'text/csv' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `staff-performance-${new Date().toISOString().split('T')[0]}.csv`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ toast({ title: "✅ Report Exported", description: "Performance report downloaded as CSV" });
+ };
+
+ return (
+
+
+
+ {/* Summary Cards */}
+
+
+
+ Operational Efficiency & Automation Impact
+Track process improvements and automation effectiveness
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Efficiency Trend */}
+
+
+
+
+ Automation Rate
+{automationRate}%
+
+
+
+
+
+
+ Avg Time to Fill
+{avgTimeToFill}h
+
+
+
+
+
+
+ Response Time
+{avgResponseTime}h
+
+
+
+
+
+
+ Completed
+{events.filter(e => e.status === 'Completed').length}
+
+
+
+
+
+ Event Status Distribution
+
+
+
+
+ `${name}: ${(percent * 100).toFixed(0)}%`}
+ outerRadius={80}
+ fill="#8884d8"
+ dataKey="value"
+ >
+ {statusData.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+
+
+
+ Key Performance Indicators
+
+
+
+
+
+
+ Excellent
+
+
+
+ Manual Work Reduction
+85%
+
+ Good
+
+
+
+ First-Time Fill Rate
+92%
+
+ Optimal
+
+
+
+ Staff Utilization
+88%
+
+ High
+
+
+
+ Conflict Detection
+97%
+
+
+
+ Fill Rate Distribution
+
+
+
+
+
+
+
+
+
+ {/* Top Performers Table */}
+
+
+ Top Performers
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/reports/StaffingCostReport.jsx b/frontend-web/src/components/reports/StaffingCostReport.jsx
new file mode 100644
index 00000000..5c22940b
--- /dev/null
+++ b/frontend-web/src/components/reports/StaffingCostReport.jsx
@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Download, DollarSign, TrendingUp, AlertCircle } from "lucide-react";
+import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useToast } from "@/components/ui/use-toast";
+
+const COLORS = ['#0A39DF', '#3b82f6', '#60a5fa', '#93c5fd', '#dbeafe'];
+
+export default function StaffingCostReport({ events, invoices }) {
+ const [dateRange, setDateRange] = useState("30");
+ const { toast } = useToast();
+
+ // Calculate costs by month
+ const costsByMonth = events.reduce((acc, event) => {
+ if (!event.date || !event.total) return acc;
+ const date = new Date(event.date);
+ const month = date.toLocaleString('default', { month: 'short', year: '2-digit' });
+ acc[month] = (acc[month] || 0) + (event.total || 0);
+ return acc;
+ }, {});
+
+ const monthlyData = Object.entries(costsByMonth).map(([month, cost]) => ({
+ month,
+ cost: Math.round(cost),
+ budget: Math.round(cost * 1.1), // 10% buffer
+ }));
+
+ // Costs by department
+ const costsByDepartment = events.reduce((acc, event) => {
+ event.shifts?.forEach(shift => {
+ shift.roles?.forEach(role => {
+ const dept = role.department || 'Unassigned';
+ acc[dept] = (acc[dept] || 0) + (role.total_value || 0);
+ });
+ });
+ return acc;
+ }, {});
+
+ const departmentData = Object.entries(costsByDepartment)
+ .map(([name, value]) => ({ name, value: Math.round(value) }))
+ .sort((a, b) => b.value - a.value);
+
+ // Budget adherence
+ const totalSpent = events.reduce((sum, e) => sum + (e.total || 0), 0);
+ const totalBudget = totalSpent * 1.15; // Assume 15% buffer
+ const adherence = totalBudget > 0 ? ((totalSpent / totalBudget) * 100).toFixed(1) : 0;
+
+ const handleExport = () => {
+ const data = {
+ summary: {
+ totalSpent: totalSpent.toFixed(2),
+ totalBudget: totalBudget.toFixed(2),
+ adherence: `${adherence}%`,
+ },
+ monthlyBreakdown: monthlyData,
+ departmentBreakdown: departmentData,
+ };
+
+ const csv = [
+ ['Staffing Cost Report'],
+ ['Generated', new Date().toISOString()],
+ [''],
+ ['Summary'],
+ ['Total Spent', totalSpent.toFixed(2)],
+ ['Total Budget', totalBudget.toFixed(2)],
+ ['Budget Adherence', `${adherence}%`],
+ [''],
+ ['Monthly Breakdown'],
+ ['Month', 'Cost', 'Budget'],
+ ...monthlyData.map(d => [d.month, d.cost, d.budget]),
+ [''],
+ ['Department Breakdown'],
+ ['Department', 'Cost'],
+ ...departmentData.map(d => [d.name, d.value]),
+ ].map(row => row.join(',')).join('\n');
+
+ const blob = new Blob([csv], { type: 'text/csv' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `staffing-costs-${new Date().toISOString().split('T')[0]}.csv`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+
+ toast({ title: "✅ Report Exported", description: "Cost report downloaded as CSV" });
+ };
+
+ return (
+
+
+
+ {/* Summary Cards */}
+
+
+
+ Staff Performance Metrics
+Reliability, fill rates, and performance tracking
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Fill Rate Distribution */}
+
+
+
+
+ Avg Reliability
+{avgReliability.toFixed(1)}%
+
+
+
+
+
+
+ Avg Fill Rate
+{avgFillRate.toFixed(1)}%
+
+
+
+
+
+
+ Total Cancellations
+{totalCancellations}
+
+
+
+
+
+ Monthly Cost Trend
+
+
+
+
+ `$${value.toLocaleString()}`} />
+
+
+
+
+
+
+ {/* Department Breakdown */}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/scheduling/AutomationEngine.jsx b/frontend-web/src/components/scheduling/AutomationEngine.jsx
new file mode 100644
index 00000000..ba6267a4
--- /dev/null
+++ b/frontend-web/src/components/scheduling/AutomationEngine.jsx
@@ -0,0 +1,211 @@
+import React, { useEffect } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@/components/ui/use-toast";
+import { hasTimeOverlap, checkDoubleBooking } from "./SmartAssignmentEngine";
+import { format, addDays } from "date-fns";
+
+/**
+ * Automation Engine
+ * Handles background automations to reduce manual work
+ */
+
+export function AutomationEngine() {
+ const queryClient = useQueryClient();
+ const { toast } = useToast();
+
+ const { data: events } = useQuery({
+ queryKey: ['events-automation'],
+ queryFn: () => base44.entities.Event.list(),
+ initialData: [],
+ refetchInterval: 30000, // Check every 30s
+ });
+
+ const { data: allStaff } = useQuery({
+ queryKey: ['staff-automation'],
+ queryFn: () => base44.entities.Staff.list(),
+ initialData: [],
+ refetchInterval: 60000,
+ });
+
+ const { data: existingInvoices } = useQuery({
+ queryKey: ['invoices-automation'],
+ queryFn: () => base44.entities.Invoice.list(),
+ initialData: [],
+ refetchInterval: 60000,
+ });
+
+ // Auto-create invoice when event is marked as Completed
+ useEffect(() => {
+ const autoCreateInvoices = async () => {
+ const completedEvents = events.filter(e =>
+ e.status === 'Completed' &&
+ !e.invoice_id &&
+ !existingInvoices.some(inv => inv.event_id === e.id)
+ );
+
+ for (const event of completedEvents) {
+ try {
+ const invoiceNumber = `INV-${format(new Date(), 'yyMMddHHmmss')}`;
+ const issueDate = format(new Date(), 'yyyy-MM-dd');
+ const dueDate = format(addDays(new Date(), 30), 'yyyy-MM-dd'); // Net 30
+
+ const invoice = await base44.entities.Invoice.create({
+ invoice_number: invoiceNumber,
+ event_id: event.id,
+ event_name: event.event_name,
+ business_name: event.business_name || event.client_name,
+ vendor_name: event.vendor_name,
+ manager_name: event.client_name,
+ hub: event.hub,
+ cost_center: event.cost_center,
+ amount: event.total || 0,
+ item_count: event.assigned_staff?.length || 0,
+ status: 'Open',
+ issue_date: issueDate,
+ due_date: dueDate,
+ notes: `Auto-generated invoice for completed event: ${event.event_name}`
+ });
+
+ // Update event with invoice_id
+ await base44.entities.Event.update(event.id, {
+ invoice_id: invoice.id
+ });
+
+ queryClient.invalidateQueries({ queryKey: ['invoices'] });
+ queryClient.invalidateQueries({ queryKey: ['events'] });
+ } catch (error) {
+ console.error('Auto-invoice creation failed:', error);
+ }
+ }
+ };
+
+ if (events.length > 0) {
+ autoCreateInvoices();
+ }
+ }, [events, existingInvoices, queryClient]);
+
+ // Auto-confirm workers (24 hours before shift)
+ useEffect(() => {
+ const autoConfirmWorkers = async () => {
+ const now = new Date();
+ const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+
+ const upcomingEvents = events.filter(e => {
+ const eventDate = new Date(e.date);
+ return eventDate >= now && eventDate <= tomorrow && e.status === 'Assigned';
+ });
+
+ for (const event of upcomingEvents) {
+ if (event.assigned_staff?.length > 0) {
+ try {
+ await base44.entities.Event.update(event.id, {
+ status: 'Confirmed'
+ });
+
+ // Send confirmation emails
+ for (const staff of event.assigned_staff) {
+ await base44.integrations.Core.SendEmail({
+ to: staff.email,
+ subject: `Shift Confirmed - ${event.event_name}`,
+ body: `Your shift at ${event.event_name} on ${event.date} has been confirmed. See you there!`
+ });
+ }
+ } catch (error) {
+ console.error('Auto-confirm failed:', error);
+ }
+ }
+ }
+ };
+
+ if (events.length > 0) {
+ autoConfirmWorkers();
+ }
+ }, [events]);
+
+ // Auto-send reminders (2 hours before shift)
+ useEffect(() => {
+ const sendReminders = async () => {
+ const now = new Date();
+ const twoHoursLater = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+
+ const upcomingEvents = events.filter(e => {
+ const eventDate = new Date(e.date);
+ return eventDate >= now && eventDate <= twoHoursLater;
+ });
+
+ for (const event of upcomingEvents) {
+ if (event.assigned_staff?.length > 0 && event.status === 'Confirmed') {
+ for (const staff of event.assigned_staff) {
+ try {
+ await base44.integrations.Core.SendEmail({
+ to: staff.email,
+ subject: `Reminder: Your shift starts in 2 hours`,
+ body: `Reminder: Your shift at ${event.event_name} starts in 2 hours. Location: ${event.event_location || event.hub}`
+ });
+ } catch (error) {
+ console.error('Reminder failed:', error);
+ }
+ }
+ }
+ }
+ };
+
+ if (events.length > 0) {
+ sendReminders();
+ }
+ }, [events]);
+
+ // Auto-detect overlapping shifts
+ useEffect(() => {
+ const detectOverlaps = () => {
+ const conflicts = [];
+
+ allStaff.forEach(staff => {
+ const staffEvents = events.filter(e =>
+ e.assigned_staff?.some(s => s.staff_id === staff.id)
+ );
+
+ for (let i = 0; i < staffEvents.length; i++) {
+ for (let j = i + 1; j < staffEvents.length; j++) {
+ const e1 = staffEvents[i];
+ const e2 = staffEvents[j];
+
+ const d1 = new Date(e1.date);
+ const d2 = new Date(e2.date);
+
+ if (d1.toDateString() === d2.toDateString()) {
+ const shift1 = e1.shifts?.[0]?.roles?.[0];
+ const shift2 = e2.shifts?.[0]?.roles?.[0];
+
+ if (shift1 && shift2 && hasTimeOverlap(shift1, shift2)) {
+ conflicts.push({
+ staff: staff.employee_name,
+ event1: e1.event_name,
+ event2: e2.event_name,
+ date: e1.date
+ });
+ }
+ }
+ }
+ }
+ });
+
+ if (conflicts.length > 0) {
+ toast({
+ title: `⚠️ ${conflicts.length} Double-Booking Detected`,
+ description: `${conflicts[0].staff} has overlapping shifts`,
+ variant: "destructive",
+ });
+ }
+ };
+
+ if (events.length > 0 && allStaff.length > 0) {
+ detectOverlaps();
+ }
+ }, [events, allStaff]);
+
+ return null; // Background service
+}
+
+export default AutomationEngine;
\ No newline at end of file
diff --git a/frontend-web/src/components/scheduling/ConflictDetection.jsx b/frontend-web/src/components/scheduling/ConflictDetection.jsx
new file mode 100644
index 00000000..fff0b043
--- /dev/null
+++ b/frontend-web/src/components/scheduling/ConflictDetection.jsx
@@ -0,0 +1,314 @@
+import React from "react";
+import { format, parseISO, isWithinInterval, addMinutes, subMinutes } from "date-fns";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { AlertTriangle, X, Users, MapPin, Clock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Conflict Detection System
+ * Detects and alerts users to overlapping event bookings
+ */
+
+// Parse time string (HH:MM or HH:MM AM/PM) to minutes since midnight
+const parseTimeToMinutes = (timeStr) => {
+ if (!timeStr) return 0;
+
+ // Handle 24-hour format
+ if (timeStr.includes(':') && !timeStr.includes('AM') && !timeStr.includes('PM')) {
+ const [hours, minutes] = timeStr.split(':').map(Number);
+ return hours * 60 + minutes;
+ }
+
+ // Handle 12-hour format
+ const [time, period] = timeStr.split(' ');
+ let [hours, minutes] = time.split(':').map(Number);
+ if (period === 'PM' && hours !== 12) hours += 12;
+ if (period === 'AM' && hours === 12) hours = 0;
+ return hours * 60 + minutes;
+};
+
+// Check if two time ranges overlap (considering buffer)
+export const detectTimeOverlap = (start1, end1, start2, end2, bufferMinutes = 0) => {
+ const s1 = parseTimeToMinutes(start1) - bufferMinutes;
+ const e1 = parseTimeToMinutes(end1) + bufferMinutes;
+ const s2 = parseTimeToMinutes(start2);
+ const e2 = parseTimeToMinutes(end2);
+
+ return s1 < e2 && s2 < e1;
+};
+
+// Check if two dates are the same or overlap (for multi-day events)
+export const detectDateOverlap = (event1, event2) => {
+ const e1Start = event1.is_multi_day ? parseISO(event1.multi_day_start_date) : parseISO(event1.date);
+ const e1End = event1.is_multi_day ? parseISO(event1.multi_day_end_date) : parseISO(event1.date);
+ const e2Start = event2.is_multi_day ? parseISO(event2.multi_day_start_date) : parseISO(event2.date);
+ const e2End = event2.is_multi_day ? parseISO(event2.multi_day_end_date) : parseISO(event2.date);
+
+ return isWithinInterval(e1Start, { start: e2Start, end: e2End }) ||
+ isWithinInterval(e1End, { start: e2Start, end: e2End }) ||
+ isWithinInterval(e2Start, { start: e1Start, end: e1End }) ||
+ isWithinInterval(e2End, { start: e1Start, end: e1End });
+};
+
+// Detect staff conflicts
+export const detectStaffConflicts = (event, allEvents) => {
+ const conflicts = [];
+
+ if (!event.assigned_staff || event.assigned_staff.length === 0) {
+ return conflicts;
+ }
+
+ const eventTimes = event.shifts?.[0]?.roles?.[0] || {};
+ const bufferBefore = event.buffer_time_before || 0;
+ const bufferAfter = event.buffer_time_after || 0;
+
+ for (const staff of event.assigned_staff) {
+ for (const otherEvent of allEvents) {
+ if (otherEvent.id === event.id) continue;
+ if (otherEvent.status === 'Canceled' || otherEvent.status === 'Completed') continue;
+
+ // Check if same staff is assigned
+ const staffInOther = otherEvent.assigned_staff?.find(s => s.staff_id === staff.staff_id);
+ if (!staffInOther) continue;
+
+ // Check date overlap
+ if (!detectDateOverlap(event, otherEvent)) continue;
+
+ // Check time overlap
+ const otherTimes = otherEvent.shifts?.[0]?.roles?.[0] || {};
+ const hasOverlap = detectTimeOverlap(
+ eventTimes.start_time,
+ eventTimes.end_time,
+ otherTimes.start_time,
+ otherTimes.end_time,
+ bufferBefore + bufferAfter
+ );
+
+ if (hasOverlap) {
+ conflicts.push({
+ conflict_type: 'staff_overlap',
+ severity: 'high',
+ description: `${staff.staff_name} is double-booked with "${otherEvent.event_name}"`,
+ conflicting_event_id: otherEvent.id,
+ conflicting_event_name: otherEvent.event_name,
+ staff_id: staff.staff_id,
+ staff_name: staff.staff_name,
+ detected_at: new Date().toISOString(),
+ });
+ }
+ }
+ }
+
+ return conflicts;
+};
+
+// Detect venue conflicts
+export const detectVenueConflicts = (event, allEvents) => {
+ const conflicts = [];
+
+ if (!event.event_location && !event.hub) {
+ return conflicts;
+ }
+
+ const eventLocation = event.event_location || event.hub;
+ const eventTimes = event.shifts?.[0]?.roles?.[0] || {};
+ const bufferBefore = event.buffer_time_before || 0;
+ const bufferAfter = event.buffer_time_after || 0;
+
+ for (const otherEvent of allEvents) {
+ if (otherEvent.id === event.id) continue;
+ if (otherEvent.status === 'Canceled' || otherEvent.status === 'Completed') continue;
+
+ const otherLocation = otherEvent.event_location || otherEvent.hub;
+ if (!otherLocation) continue;
+
+ // Check if same location
+ if (eventLocation.toLowerCase() !== otherLocation.toLowerCase()) continue;
+
+ // Check date overlap
+ if (!detectDateOverlap(event, otherEvent)) continue;
+
+ // Check time overlap
+ const otherTimes = otherEvent.shifts?.[0]?.roles?.[0] || {};
+ const hasOverlap = detectTimeOverlap(
+ eventTimes.start_time,
+ eventTimes.end_time,
+ otherTimes.start_time,
+ otherTimes.end_time,
+ bufferBefore + bufferAfter
+ );
+
+ if (hasOverlap) {
+ conflicts.push({
+ conflict_type: 'venue_overlap',
+ severity: 'medium',
+ description: `Venue "${eventLocation}" is already booked for "${otherEvent.event_name}"`,
+ conflicting_event_id: otherEvent.id,
+ conflicting_event_name: otherEvent.event_name,
+ location: eventLocation,
+ detected_at: new Date().toISOString(),
+ });
+ }
+ }
+
+ return conflicts;
+};
+
+// Detect buffer time violations
+export const detectBufferViolations = (event, allEvents) => {
+ const conflicts = [];
+
+ if (!event.buffer_time_before && !event.buffer_time_after) {
+ return conflicts;
+ }
+
+ const eventTimes = event.shifts?.[0]?.roles?.[0] || {};
+
+ for (const otherEvent of allEvents) {
+ if (otherEvent.id === event.id) continue;
+ if (otherEvent.status === 'Canceled' || otherEvent.status === 'Completed') continue;
+
+ // Check if events share staff
+ const sharedStaff = event.assigned_staff?.filter(s =>
+ otherEvent.assigned_staff?.some(os => os.staff_id === s.staff_id)
+ ) || [];
+
+ if (sharedStaff.length === 0) continue;
+
+ // Check date overlap
+ if (!detectDateOverlap(event, otherEvent)) continue;
+
+ // Check if buffer time is violated
+ const otherTimes = otherEvent.shifts?.[0]?.roles?.[0] || {};
+ const eventStart = parseTimeToMinutes(eventTimes.start_time);
+ const eventEnd = parseTimeToMinutes(eventTimes.end_time);
+ const otherStart = parseTimeToMinutes(otherTimes.start_time);
+ const otherEnd = parseTimeToMinutes(otherTimes.end_time);
+
+ const bufferBefore = event.buffer_time_before || 0;
+ const bufferAfter = event.buffer_time_after || 0;
+
+ const hasViolation =
+ (otherEnd > eventStart - bufferBefore && otherEnd <= eventStart) ||
+ (otherStart < eventEnd + bufferAfter && otherStart >= eventEnd);
+
+ if (hasViolation) {
+ conflicts.push({
+ conflict_type: 'time_buffer',
+ severity: 'low',
+ description: `Buffer time violation with "${otherEvent.event_name}" (${sharedStaff.length} shared staff)`,
+ conflicting_event_id: otherEvent.id,
+ conflicting_event_name: otherEvent.event_name,
+ buffer_required: `${bufferBefore + bufferAfter} minutes`,
+ detected_at: new Date().toISOString(),
+ });
+ }
+ }
+
+ return conflicts;
+};
+
+// Main conflict detection function
+export const detectAllConflicts = (event, allEvents) => {
+ if (!event.conflict_detection_enabled) return [];
+
+ const staffConflicts = detectStaffConflicts(event, allEvents);
+ const venueConflicts = detectVenueConflicts(event, allEvents);
+ const bufferViolations = detectBufferViolations(event, allEvents);
+
+ return [...staffConflicts, ...venueConflicts, ...bufferViolations];
+};
+
+// Conflict Alert Component
+export function ConflictAlert({ conflicts, onDismiss }) {
+ if (!conflicts || conflicts.length === 0) return null;
+
+ const getSeverityColor = (severity) => {
+ switch (severity) {
+ case 'critical': return 'border-red-600 bg-red-50';
+ case 'high': return 'border-orange-500 bg-orange-50';
+ case 'medium': return 'border-amber-500 bg-amber-50';
+ case 'low': return 'border-blue-500 bg-blue-50';
+ default: return 'border-slate-300 bg-slate-50';
+ }
+ };
+
+ const getSeverityIcon = (severity) => {
+ switch (severity) {
+ case 'critical':
+ case 'high': return
+
+
+ {/* Summary Cards */}
+
+
+ Staffing Costs & Budget Adherence
+Track spending and budget compliance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Monthly Cost Trend */}
+
+
+
+
+ Total Spent
+${totalSpent.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+
+
+
+
+
+
+ Budget
+${totalBudget.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+
+
+
+
+
+
+ {adherence < 90 ? "Under Budget" : adherence < 100 ? "On Track" : "Over Budget"}
+
+
+ Budget Adherence
+{adherence}%
+
+
+
+
+
+ Costs by Department
+
+
+
+
+ `${name}: ${(percent * 100).toFixed(0)}%`}
+ outerRadius={80}
+ fill="#8884d8"
+ dataKey="value"
+ >
+ {departmentData.map((entry, index) => (
+ |
+ ))}
+
+ `$${value.toLocaleString()}`} />
+
+
+
+
+
+
+
+ Department Spending
+
+
+
+
+
+
+ {departmentData.slice(0, 5).map((dept, idx) => (
+
+
+ {dept.name}
+ ${dept.value.toLocaleString()}
+
+ ))}
+
+ {conflicts.map((conflict, idx) => (
+
+
+ ))}
+
+ );
+}
+
+export default {
+ detectTimeOverlap,
+ detectDateOverlap,
+ detectStaffConflicts,
+ detectVenueConflicts,
+ detectBufferViolations,
+ detectAllConflicts,
+ ConflictAlert,
+};
\ No newline at end of file
diff --git a/frontend-web/src/components/scheduling/DragDropScheduler.jsx b/frontend-web/src/components/scheduling/DragDropScheduler.jsx
new file mode 100644
index 00000000..9592fa18
--- /dev/null
+++ b/frontend-web/src/components/scheduling/DragDropScheduler.jsx
@@ -0,0 +1,255 @@
+import React, { useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Calendar, Clock, MapPin, Star } from "lucide-react";
+import { format } from "date-fns";
+
+/**
+ * Drag & Drop Scheduler Widget
+ * Interactive visual scheduler for easy staff assignment
+ */
+
+export default function DragDropScheduler({ events, staff, onAssign, onUnassign }) {
+ const [localEvents, setLocalEvents] = useState(events || []);
+ const [localStaff, setLocalStaff] = useState(staff || []);
+
+ const handleDragEnd = (result) => {
+ const { source, destination, draggableId } = result;
+
+ if (!destination) return;
+
+ // Dragging from unassigned to event
+ if (source.droppableId === "unassigned" && destination.droppableId.startsWith("event-")) {
+ const eventId = destination.droppableId.replace("event-", "");
+ const staffMember = localStaff.find(s => s.id === draggableId);
+
+ if (staffMember && onAssign) {
+ onAssign(eventId, staffMember);
+
+ // Update local state
+ setLocalStaff(prev => prev.filter(s => s.id !== draggableId));
+ setLocalEvents(prev => prev.map(e => {
+ if (e.id === eventId) {
+ return {
+ ...e,
+ assigned_staff: [...(e.assigned_staff || []), {
+ staff_id: staffMember.id,
+ staff_name: staffMember.employee_name,
+ email: staffMember.email,
+ }]
+ };
+ }
+ return e;
+ }));
+ }
+ }
+
+ // Dragging from event back to unassigned
+ if (source.droppableId.startsWith("event-") && destination.droppableId === "unassigned") {
+ const eventId = source.droppableId.replace("event-", "");
+ const event = localEvents.find(e => e.id === eventId);
+ const staffMember = event?.assigned_staff?.find(s => s.staff_id === draggableId);
+
+ if (staffMember && onUnassign) {
+ onUnassign(eventId, draggableId);
+
+ // Update local state
+ setLocalEvents(prev => prev.map(e => {
+ if (e.id === eventId) {
+ return {
+ ...e,
+ assigned_staff: e.assigned_staff.filter(s => s.staff_id !== draggableId)
+ };
+ }
+ return e;
+ }));
+
+ const fullStaff = staff.find(s => s.id === draggableId);
+ if (fullStaff) {
+ setLocalStaff(prev => [...prev, fullStaff]);
+ }
+ }
+ }
+
+ // Dragging between events
+ if (source.droppableId.startsWith("event-") && destination.droppableId.startsWith("event-")) {
+ const sourceEventId = source.droppableId.replace("event-", "");
+ const destEventId = destination.droppableId.replace("event-", "");
+
+ if (sourceEventId === destEventId) return;
+
+ const sourceEvent = localEvents.find(e => e.id === sourceEventId);
+ const staffMember = sourceEvent?.assigned_staff?.find(s => s.staff_id === draggableId);
+
+ if (staffMember) {
+ onUnassign(sourceEventId, draggableId);
+ onAssign(destEventId, staff.find(s => s.id === draggableId));
+
+ setLocalEvents(prev => prev.map(e => {
+ if (e.id === sourceEventId) {
+ return {
+ ...e,
+ assigned_staff: e.assigned_staff.filter(s => s.staff_id !== draggableId)
+ };
+ }
+ if (e.id === destEventId) {
+ return {
+ ...e,
+ assigned_staff: [...(e.assigned_staff || []), staffMember]
+ };
+ }
+ return e;
+ }));
+ }
+ }
+ };
+
+ return (
+
+
+
+ {getSeverityIcon(conflict.severity)}
+
+
+
+ {conflict.description}
+
+ {conflict.buffer_required && (
+
+ {onDismiss && (
+
+ )}
+
+ {getConflictIcon(conflict.conflict_type)}
+
+ {conflict.conflict_type.replace('_', ' ')}
+
+
+ {conflict.severity.toUpperCase()}
+
+
+ + Buffer required: {conflict.buffer_required} +
+ )} +
+ {/* Unassigned Staff Pool */}
+
+
+ Available Staff
+
+
+
+ {(provided, snapshot) => (
+
+
+
+
+ {/* Events Schedule */}
+
+ {localStaff.length} unassigned
+
+ {localStaff.map((s, index) => (
+
+ {(provided, snapshot) => (
+
+ ))}
+ {provided.placeholder}
+ {localStaff.length === 0 && (
+
+ )}
+
+
+ )}
+
+
+
+ {s.employee_name?.charAt(0)}
+
+
+
+
+
+ {s.employee_name}
+{s.position}
+
+
+
+
+ {s.reliability_score || 95}% reliable
+
+
+ All staff assigned
+ )} +
+ {localEvents.map(event => (
+
+
+
+
+
+ {(provided, snapshot) => (
+
+
+
+ ))}
+
+
+ = (event.requested || 0)
+ ? "bg-green-100 text-green-700"
+ : "bg-amber-100 text-amber-700"
+ }>
+ {event.assigned_staff?.length || 0}/{event.requested || 0} filled
+
+
+
+ {event.event_name}
+
+
+
+
+
+
+ )}
+
+ {event.assigned_staff?.map((s, index) => (
+
+ {(provided, snapshot) => (
+
+ ))}
+
+ {provided.placeholder}
+ {(!event.assigned_staff || event.assigned_staff.length === 0) && (
+
+
+ )}
+
+
+
+ {s.staff_name?.charAt(0)}
+
+
+
+
+
+ {s.staff_name}
+{s.role}
++ Drag staff here to assign +
+ )} +
+ {/* Header */}
+
+
+
+
+ {staff.employee_name?.charAt(0)}
+
+
+
+
+ {/* Rating & Reliability */}
+
+
+ {staff.employee_name}
+{staff.position}
+ {staff.position_2 && ( +Also: {staff.position_2}
+ )} +
+
+
+ {/* Experience & History */}
+
+
+
+
+ Rating
+{staff.rating || 4.5} ★
+
+
+
+
+ Reliability
++ {staff.reliability_score || 90}% +
+
+
+
+ {/* Certifications */}
+ {staff.certifications && staff.certifications.length > 0 && (
+
+
+
+
+ {staff.certifications && staff.certifications.length > 0 && (
+
+
+ )}
+
+
+ )}
+
+ {/* Performance Indicators */}
+ Certifications
+
+ {staff.certifications.slice(0, 3).map((cert, idx) => (
+
+ {cert.name || cert.cert_name}
+
+ ))}
+
+
+
+
+ {/* Warnings */}
+ {staff.background_check_status !== 'cleared' && (
+
+
+ On-Time
++ {staff.shift_coverage_percentage || 95}% +
+
+
+ No-Shows
++ {staff.no_show_count || 0} +
+
+
+ Cancels
++ {staff.cancellation_count || 0} +
+
+
+ )}
+ Background check pending
+
+ {/* Header */}
+
+
+
+
+ {/* Priority & Date */}
+ {task.task_name}
+ +
+
+ {priority.label}
+
+ {task.due_date && (
+
+
+ {/* Progress Bar */}
+
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ {task.progress || 0}%
+
+ {/* Assigned Members */}
+
+
+ {(task.assigned_members || []).slice(0, 3).map((member, idx) => (
+
+ 
+
+ ))}
+ {(task.assigned_members?.length || 0) > 3 && (
+
+
+ {/* Stats */}
+
+ +{task.assigned_members.length - 3}
+
+ )}
+
+ {(task.attachment_count || 0) > 0 && (
+
+
+
+ )}
+ {(task.comment_count || 0) > 0 && (
+
+
+ )}
+
+ {/* Column Header */}
+
+ {(provided, snapshot) => (
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/tasks/TaskDetailModal.jsx b/frontend-web/src/components/tasks/TaskDetailModal.jsx
new file mode 100644
index 00000000..774db343
--- /dev/null
+++ b/frontend-web/src/components/tasks/TaskDetailModal.jsx
@@ -0,0 +1,526 @@
+import React, { useState, useRef, useEffect } from "react";
+import { base44 } from "@/api/base44Client";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Avatar } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Calendar, Paperclip, Send, Upload, FileText, Download, AtSign, Smile, Plus, Home, Activity, Mail, Clock, Zap, PauseCircle, CheckCircle } from "lucide-react";
+import { format } from "date-fns";
+import { useToast } from "@/components/ui/use-toast";
+
+const priorityConfig = {
+ high: { bg: "bg-blue-100", text: "text-blue-700", label: "High" },
+ normal: { bg: "bg-teal-100", text: "text-teal-700", label: "Normal" },
+ low: { bg: "bg-amber-100", text: "text-amber-700", label: "Low" }
+};
+
+export default function TaskDetailModal({ task, open, onClose }) {
+ const { toast } = useToast();
+ const queryClient = useQueryClient();
+ const [comment, setComment] = useState("");
+ const [uploading, setUploading] = useState(false);
+ const [status, setStatus] = useState(task?.status || "pending");
+ const [activeTab, setActiveTab] = useState("updates");
+ const [emailNotification, setEmailNotification] = useState(false);
+ const fileInputRef = useRef(null);
+
+ // Auto-calculate progress based on activity
+ const calculateProgress = () => {
+ if (!task) return 0;
+
+ let progressScore = 0;
+
+ // Status contributes to progress
+ if (task.status === "completed") return 100;
+ if (task.status === "in_progress") progressScore += 40;
+ if (task.status === "on_hold") progressScore += 20;
+
+ // Comments/updates show activity
+ if (task.comment_count > 0) progressScore += Math.min(task.comment_count * 5, 20);
+
+ // Files attached show work done
+ if (task.attachment_count > 0) progressScore += Math.min(task.attachment_count * 10, 20);
+
+ // Assigned members
+ if (task.assigned_members?.length > 0) progressScore += 20;
+
+ return Math.min(progressScore, 100);
+ };
+
+ const currentProgress = calculateProgress();
+
+ useEffect(() => {
+ if (task && currentProgress !== task.progress) {
+ updateTaskMutation.mutate({
+ id: task.id,
+ data: { ...task, progress: currentProgress }
+ });
+ }
+ }, [currentProgress]);
+
+ const { data: user } = useQuery({
+ queryKey: ['current-user-task-modal'],
+ queryFn: () => base44.auth.me(),
+ });
+
+ const { data: comments = [] } = useQuery({
+ queryKey: ['task-comments', task?.id],
+ queryFn: () => base44.entities.TaskComment.filter({ task_id: task?.id }),
+ enabled: !!task?.id,
+ initialData: [],
+ });
+
+ const addCommentMutation = useMutation({
+ mutationFn: (commentData) => base44.entities.TaskComment.create(commentData),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['task-comments', task?.id] });
+ queryClient.invalidateQueries({ queryKey: ['tasks'] });
+ setComment("");
+ toast({
+ title: "✅ Comment Added",
+ description: "Your comment has been posted",
+ });
+ },
+ });
+
+ const updateTaskMutation = useMutation({
+ mutationFn: ({ id, data }) => base44.entities.Task.update(id, data),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['tasks'] });
+ toast({
+ title: "✅ Task Updated",
+ description: "Changes saved successfully",
+ });
+ },
+ });
+
+ const handleFileUpload = async (e) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ setUploading(true);
+ try {
+ const { file_url } = await base44.integrations.Core.UploadFile({ file });
+
+ const newFile = {
+ file_name: file.name,
+ file_url: file_url,
+ file_size: file.size,
+ uploaded_by: user?.full_name || user?.email || "User",
+ uploaded_at: new Date().toISOString(),
+ };
+
+ const updatedFiles = [...(task.files || []), newFile];
+
+ await updateTaskMutation.mutateAsync({
+ id: task.id,
+ data: {
+ ...task,
+ files: updatedFiles,
+ attachment_count: updatedFiles.length,
+ }
+ });
+
+ // Add system comment
+ await addCommentMutation.mutateAsync({
+ task_id: task.id,
+ author_id: user?.id,
+ author_name: user?.full_name || user?.email || "User",
+ author_avatar: user?.profile_picture,
+ comment: `Uploaded file: ${file.name}`,
+ is_system: true,
+ });
+
+ toast({
+ title: "✅ File Uploaded",
+ description: `${file.name} added successfully`,
+ });
+ } catch (error) {
+ toast({
+ title: "❌ Upload Failed",
+ description: error.message,
+ variant: "destructive",
+ });
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ const handleStatusChange = async (newStatus) => {
+ setStatus(newStatus);
+ await updateTaskMutation.mutateAsync({
+ id: task.id,
+ data: { ...task, status: newStatus }
+ });
+
+ // Add system comment
+ await addCommentMutation.mutateAsync({
+ task_id: task.id,
+ author_id: user?.id,
+ author_name: "System",
+ author_avatar: "",
+ comment: `Status changed to ${newStatus.replace('_', ' ')}`,
+ is_system: true,
+ });
+ };
+
+ const handleAddComment = async () => {
+ if (!comment.trim()) return;
+
+ await addCommentMutation.mutateAsync({
+ task_id: task.id,
+ author_id: user?.id,
+ author_name: user?.full_name || user?.email || "User",
+ author_avatar: user?.profile_picture,
+ comment: comment.trim(),
+ is_system: false,
+ });
+
+ // Update comment count
+ await updateTaskMutation.mutateAsync({
+ id: task.id,
+ data: {
+ ...task,
+ comment_count: (task.comment_count || 0) + 1,
+ }
+ });
+
+ // Send email notifications if enabled
+ if (emailNotification && task.assigned_members) {
+ for (const member of task.assigned_members) {
+ try {
+ await base44.integrations.Core.SendEmail({
+ to: member.member_email || `${member.member_name}@example.com`,
+ subject: `New update on task: ${task.task_name}`,
+ body: `${user?.full_name || "A team member"} posted an update:\n\n"${comment.trim()}"\n\nView task details in the app.`
+ });
+ } catch (error) {
+ console.error("Failed to send email:", error);
+ }
+ }
+ toast({
+ title: "✅ Update Sent",
+ description: "Email notifications sent to team members",
+ });
+ }
+ };
+
+ const handleMention = () => {
+ const textarea = document.querySelector('textarea');
+ if (textarea) {
+ const cursorPos = textarea.selectionStart;
+ const textBefore = comment.substring(0, cursorPos);
+ const textAfter = comment.substring(cursorPos);
+ setComment(textBefore + '@' + textAfter);
+ setTimeout(() => {
+ textarea.focus();
+ textarea.setSelectionRange(cursorPos + 1, cursorPos + 1);
+ }, 0);
+ }
+ };
+
+ const handleEmoji = () => {
+ const emojis = ['👍', '❤️', '😊', '🎉', '✅', '🔥', '💪', '🚀'];
+ const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
+ setComment(comment + randomEmoji);
+ };
+
+ if (!task) return null;
+
+ const priority = priorityConfig[task.priority] || priorityConfig.normal;
+ const sortedComments = [...comments].sort((a, b) =>
+ new Date(a.created_date) - new Date(b.created_date)
+ );
+
+ const getProgressColor = () => {
+ if (currentProgress === 100) return "bg-green-500";
+ if (currentProgress >= 70) return "bg-blue-500";
+ if (currentProgress >= 40) return "bg-amber-500";
+ return "bg-slate-400";
+ };
+
+ const statusOptions = [
+ { value: "pending", label: "Pending", icon: Clock, color: "bg-slate-100 text-slate-700 border-slate-300" },
+ { value: "in_progress", label: "In Progress", icon: Zap, color: "bg-blue-100 text-blue-700 border-blue-300" },
+ { value: "on_hold", label: "On Hold", icon: PauseCircle, color: "bg-orange-100 text-orange-700 border-orange-300" },
+ { value: "completed", label: "Completed", icon: CheckCircle, color: "bg-green-100 text-green-700 border-green-300" },
+ ];
+
+ return (
+
+
+
+ {/* Droppable Area */}
+
+ {config.label}
+
+ {tasks.length}
+
+
+
+
+
+
+
+ {children}
+ {provided.placeholder}
+
+ )}
+