+ {/* Header */}
+
+
+
+
+
+ {/* AI-Powered Recommendations */}
+
+
+
+
+
+ {/* Budget Breakdown */}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/dashboard/DashboardCustomizer.jsx b/frontend-web/src/components/dashboard/DashboardCustomizer.jsx
index fc0cc12c..884c0705 100644
--- a/frontend-web/src/components/dashboard/DashboardCustomizer.jsx
+++ b/frontend-web/src/components/dashboard/DashboardCustomizer.jsx
@@ -23,6 +23,12 @@ import {
Sparkles
} from "lucide-react";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+
+// Helper to fix DnD issues
+const getItemStyle = (isDragging, draggableStyle) => ({
+ userSelect: "none",
+ ...draggableStyle,
+});
import { useToast } from "@/components/ui/use-toast";
import { motion, AnimatePresence } from "framer-motion";
@@ -243,12 +249,12 @@ export default function DashboardCustomizer({
+
+
+ {/* Main Budget Card */}
+
+
+
+
+
+
+ {config.title}
+{config.focus}
+
+ {["week", "month", "quarter", "year"].map(period => (
+
+ ))}
+
+
+ {/* Total Spent */}
+
+
+
+
+ {/* Utilization Rate */}
+ Total Spent
+${totalSpent.toLocaleString()}
+of ${totalBudget.toLocaleString()} budget
+
+
+
+ {/* Remaining Budget */}
+ Utilization
+
+
+ + {utilizationRate}% +
+ {trend === 'under' &&
+
+
+ {/* Savings Opportunity */}
+ Remaining
+0 ? 'text-green-600' : 'text-red-600'}`}> + ${Math.abs(remainingBudget).toLocaleString()} +
++ {remainingBudget > 0 ? 'Available to spend' : 'Over budget'} +
+
+
+ + 💡 Savings Potential +
+${potentialSavings.toLocaleString()}
+
+
+ ${achievedSavings.toLocaleString()} achieved
+
+
+
+ Smart Recommendations
+
+
+
+ {recommendations.map((rec, idx) => {
+ const Icon = rec.icon;
+ return (
+
+
+
+ );
+ })}
+
+
+ {rec.priority}
+
+
+ {rec.action}
+{rec.impact}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Quick Decision Panel */}
+
+ {budgetBreakdown.map((item, idx) => (
+
+
+
+ ))}
+
+ {item.name}
+ ${item.amount.toLocaleString()} ({item.percentage}%)
+
+
+
+
+
+
+
+
+ {trend === 'under' ? 'A+' : trend === 'on_track' ? 'B+' : 'C'}
+
+ + {trend === 'under' ? 'Excellent Budget Management' : trend === 'on_track' ? 'Good - Monitor Closely' : 'Action Required'} +
++ {trend === 'under' + ? 'You have room for strategic investments' + : trend === 'on_track' + ? 'Stay on track with current spending pace' + : 'Immediate cost reduction recommended' + } +
+
+
+
+
+ ↓12%
+vs Last Period
+
+
+ 94%
+Forecast Accuracy
+
+
+ $8.2K
+Saved This Month
+
+
+
+
+
+ Quick Decision for {config.title.split(' ')[0]}
++ {userRole === 'procurement' && "Lock in 3 vendor contracts at current rates before Q1 price increases — potential 8% savings on $125K annual spend."} + {userRole === 'operator' && "Reallocate 15% of Sector B's overtime budget to temporary staffing — same output, 22% cost reduction."} + {userRole === 'sector' && "Approve shift consolidation for Tuesdays — reduces 4 overlapping positions, saves $1,800/week."} + {userRole === 'client' && "Switch to annual contract with Preferred Vendor — locks in 15% discount, saves $6,400/year."} + {userRole === 'vendor' && "Accept 3 pending orders at standard rates — fills idle capacity, adds $12K revenue this month."} + {userRole === 'admin' && "Enable automated invoice reconciliation — reduces processing time 60%, saves $8K/month in admin costs."} +
+
diff --git a/frontend-web/src/components/events/EventFormWizard.jsx b/frontend-web/src/components/events/EventFormWizard.jsx
index 72b48f1a..3fd0ed4e 100644
--- a/frontend-web/src/components/events/EventFormWizard.jsx
+++ b/frontend-web/src/components/events/EventFormWizard.jsx
@@ -142,7 +142,64 @@ export default function EventFormWizard({ event, onSubmit, onRapidSubmit, isSubm
initialData: [],
});
- const availableRoles = [...new Set(allRates.map(r => r.role_name))].sort();
+ // Get available roles - filter by selected vendor for clients, or by client for vendors
+ const availableRoles = React.useMemo(() => {
+ // For CLIENT users: filter roles by selected vendor
+ if (isClient && formData.vendor_id) {
+ const selectedVendor = vendors.find(v => v.id === formData.vendor_id);
+ const vendorName = selectedVendor?.legal_name || selectedVendor?.doing_business_as;
+
+ // Get roles from this vendor's rates
+ const vendorRoles = allRates.filter(rate =>
+ (rate.vendor_id === formData.vendor_id || rate.vendor_name === vendorName) &&
+ rate.is_active !== false
+ ).map(r => r.role_name);
+
+ // Deduplicate and sort
+ const uniqueRoles = [...new Set(vendorRoles)].filter(Boolean);
+
+ if (uniqueRoles.length > 0) {
+ return uniqueRoles.sort();
+ }
+ }
+
+ // For VENDOR users: filter roles by selected client
+ if (isVendor && formData.business_id && formData.business_name) {
+ const extractCompanyName = (name) => {
+ if (!name) return '';
+ return name.split(/\s*[-–]\s*/)[0].trim();
+ };
+
+ const mainCompanyName = extractCompanyName(formData.business_name);
+ const selectedBusiness = businesses.find(b => b.id === formData.business_id);
+
+ // Get roles that have client-specific rates for this client
+ const clientSpecificRoles = allRates.filter(rate =>
+ rate.rate_book_type === 'client_specific' &&
+ (rate.client_name === formData.business_name ||
+ rate.client_name === mainCompanyName ||
+ extractCompanyName(rate.client_name) === mainCompanyName)
+ ).map(r => r.role_name);
+
+ // Also get roles from client's rate_card if set
+ let rateCardRoles = [];
+ if (selectedBusiness?.rate_card) {
+ rateCardRoles = allRates.filter(rate =>
+ rate.rate_book_name === selectedBusiness.rate_card
+ ).map(r => r.role_name);
+ }
+
+ // Combine and deduplicate
+ const combinedRoles = [...new Set([...clientSpecificRoles, ...rateCardRoles])].filter(Boolean);
+
+ if (combinedRoles.length > 0) {
+ return combinedRoles.sort();
+ }
+ }
+
+ // Default: show all roles
+ return [...new Set(allRates.map(r => r.role_name))].filter(Boolean).sort();
+ }, [allRates, isVendor, isClient, formData.vendor_id, formData.business_id, formData.business_name, businesses, vendors]);
useEffect(() => {
if (isClient && currentUserData && !formData.vendor_id) {
@@ -300,19 +357,82 @@ export default function EventFormWizard({ event, onSubmit, onRapidSubmit, isSubm
const handleBusinessChange = (businessId) => {
const selectedBusiness = businesses.find(b => b.id === businessId);
if (selectedBusiness) {
- setFormData(prev => ({
- ...prev,
- business_id: businessId,
- business_name: selectedBusiness.business_name || "",
- hub: selectedBusiness.hub_building || prev.hub,
- shifts: prev.shifts.map(shift => ({
+ // Update form with business info and recalculate rates for all roles
+ setFormData(prev => {
+ const updatedShifts = prev.shifts.map(shift => ({
...shift,
- location_address: selectedBusiness.address || shift.location_address
- }))
- }));
+ location_address: selectedBusiness.address || shift.location_address,
+ roles: shift.roles.map(role => {
+ if (role.role) {
+ const rate = getRateForRoleAndClient(role.role, businessId, selectedBusiness.business_name);
+ return {
+ ...role,
+ rate_per_hour: rate,
+ total_value: rate * (role.hours || 0) * (parseInt(role.count) || 1)
+ };
+ }
+ return role;
+ })
+ }));
+
+ return {
+ ...prev,
+ business_id: businessId,
+ business_name: selectedBusiness.business_name || "",
+ hub: selectedBusiness.hub_building || prev.hub,
+ shifts: updatedShifts
+ };
+ });
+ setTimeout(() => updateGrandTotal(), 10);
}
};
+ // Get rate for role based on selected client
+ const getRateForRoleAndClient = (roleName, businessId, businessName) => {
+ if (!businessId || !businessName) return 0;
+
+ // Extract main company name (e.g., "Chime" from "Chime - HQ")
+ const extractCompanyName = (name) => {
+ if (!name) return '';
+ return name.split(/\s*[-–]\s*/)[0].trim();
+ };
+
+ const mainCompanyName = extractCompanyName(businessName);
+ const selectedBusiness = businesses.find(b => b.id === businessId);
+
+ // Priority 1: Client-specific rate matching this client
+ const clientSpecificRate = allRates.find(rate =>
+ rate.role_name?.toLowerCase() === roleName.toLowerCase() &&
+ rate.rate_book_type === 'client_specific' &&
+ (rate.client_name === businessName ||
+ rate.client_name === mainCompanyName ||
+ extractCompanyName(rate.client_name) === mainCompanyName)
+ );
+
+ if (clientSpecificRate) {
+ return clientSpecificRate.client_rate || 0;
+ }
+
+ // Priority 2: Match client's rate_card
+ if (selectedBusiness?.rate_card) {
+ const rateCardMatch = allRates.find(rate =>
+ rate.role_name?.toLowerCase() === roleName.toLowerCase() &&
+ rate.rate_book_name === selectedBusiness.rate_card
+ );
+ if (rateCardMatch) {
+ return rateCardMatch.client_rate || 0;
+ }
+ }
+
+ // Priority 3: Default rate
+ const defaultRate = allRates.find(rate =>
+ rate.role_name?.toLowerCase() === roleName.toLowerCase() &&
+ rate.rate_book_type === 'default'
+ );
+
+ return defaultRate?.client_rate || 0;
+ };
+
// Auto-populate shift addresses when hub changes
useEffect(() => {
if (formData.hub && formData.shifts.length > 0) {
@@ -378,20 +498,44 @@ export default function EventFormWizard({ event, onSubmit, onRapidSubmit, isSubm
const targetVendorId = vendorId || formData.vendor_id;
if (targetVendorId) {
- const rate = allRates.find(r =>
- r.role_name === roleName &&
+ // Priority 1: Find rate matching vendor_id and role_name exactly
+ const vendorRate = allRates.find(r =>
+ r.role_name?.toLowerCase() === roleName?.toLowerCase() &&
r.vendor_id === targetVendorId &&
r.is_active !== false
);
- if (rate) {
- console.log('Found rate for', roleName, 'from vendor', targetVendorId, ':', rate.client_rate);
- return parseFloat(rate.client_rate || 0);
+ if (vendorRate) {
+ return parseFloat(vendorRate.client_rate || 0);
+ }
+
+ // Priority 2: Find rate matching vendor_name (some rates may not have vendor_id set)
+ const selectedVendor = vendors.find(v => v.id === targetVendorId);
+ if (selectedVendor) {
+ const vendorName = selectedVendor.legal_name || selectedVendor.doing_business_as;
+ const vendorNameRate = allRates.find(r =>
+ r.role_name?.toLowerCase() === roleName?.toLowerCase() &&
+ r.vendor_name === vendorName &&
+ r.is_active !== false
+ );
+ if (vendorNameRate) {
+ return parseFloat(vendorNameRate.client_rate || 0);
+ }
}
}
- console.log('No rate found for', roleName, 'from vendor', targetVendorId);
- const fallbackRate = allRates.find(r => r.role_name === roleName && r.is_active !== false);
- return fallbackRate ? parseFloat(fallbackRate.client_rate || 0) : 0;
+ // Fallback: Find any rate for this role (default rates)
+ const defaultRate = allRates.find(r =>
+ r.role_name?.toLowerCase() === roleName?.toLowerCase() &&
+ r.rate_book_type === 'default' &&
+ r.is_active !== false
+ );
+ if (defaultRate) {
+ return parseFloat(defaultRate.client_rate || 0);
+ }
+
+ // Last fallback: any rate for this role
+ const anyRate = allRates.find(r => r.role_name?.toLowerCase() === roleName?.toLowerCase() && r.is_active !== false);
+ return anyRate ? parseFloat(anyRate.client_rate || 0) : 0;
};
const handleRoleChange = (shiftIndex, roleIndex, field, value) => {
@@ -401,8 +545,14 @@ export default function EventFormWizard({ event, onSubmit, onRapidSubmit, isSubm
role[field] = value;
if (field === 'role') {
- const rate = getRateForRole(value, prev.vendor_id);
- console.log('Setting rate for role', value, ':', rate, 'vendor:', prev.vendor_id);
+ // For vendors, use client-based rates; for clients, use vendor-based rates
+ let rate = 0;
+ if (isVendor && prev.business_id) {
+ rate = getRateForRoleAndClient(value, prev.business_id, prev.business_name);
+ } else {
+ rate = getRateForRole(value, prev.vendor_id);
+ }
+ console.log('Setting rate for role', value, ':', rate);
role.rate_per_hour = rate;
role.vendor_id = prev.vendor_id;
role.vendor_name = prev.vendor_name;
@@ -628,6 +778,32 @@ export default function EventFormWizard({ event, onSubmit, onRapidSubmit, isSubm
+ {isVendor && (
+
- {isVendor && (
-
{
+ if (invoice) {
+ setEditedDetails({
+ event_name: invoice.event_name || "",
+ po_reference: invoice.po_reference || "",
+ event_date: invoice.event_date || "",
+ due_date: invoice.due_date || "",
+ from_company: {
+ name: invoice.from_company?.name || invoice.vendor_name || "",
+ address: invoice.from_company?.address || "",
+ email: invoice.from_company?.email || "",
+ phone: invoice.from_company?.phone || ""
+ },
+ to_company: {
+ name: invoice.to_company?.name || invoice.business_name || "",
+ address: invoice.to_company?.address || "",
+ email: invoice.to_company?.email || "",
+ manager: invoice.to_company?.manager || invoice.manager_name || "",
+ phone: invoice.to_company?.phone || "",
+ vendor_id: invoice.to_company?.vendor_id || ""
+ }
+ });
+ }
+ }, [invoice]);
const updateInvoiceMutation = useMutation({
mutationFn: ({ id, data }) => base44.entities.Invoice.update(id, data),
@@ -87,7 +126,8 @@ export default function InvoiceDetailView({ invoice, userRole, onClose }) {
};
const handleEditInvoice = () => {
- navigate(createPageUrl(`InvoiceEditor?id=${invoice.id}`));
+ const disputedIndices = invoice.disputed_items?.map(item => item.staff_index).join(',') || '';
+ navigate(createPageUrl(`InvoiceEditor?id=${invoice.id}&disputed=${disputedIndices}`));
};
const handleDispute = async () => {
@@ -110,6 +150,254 @@ export default function InvoiceDetailView({ invoice, userRole, onClose }) {
window.print();
};
+ const handleSaveDetails = () => {
+ updateInvoiceMutation.mutate({
+ id: invoice.id,
+ data: {
+ event_name: editedDetails.event_name,
+ po_reference: editedDetails.po_reference,
+ event_date: editedDetails.event_date,
+ due_date: editedDetails.due_date,
+ from_company: editedDetails.from_company,
+ to_company: editedDetails.to_company,
+ business_name: editedDetails.to_company.name,
+ manager_name: editedDetails.to_company.manager,
+ vendor_name: editedDetails.from_company.name,
+ }
+ });
+ setIsEditingDetails(false);
+ };
+
+ const handleCancelEdit = () => {
+ setEditedDetails({
+ event_name: invoice.event_name || "",
+ po_reference: invoice.po_reference || "",
+ event_date: invoice.event_date || "",
+ due_date: invoice.due_date || "",
+ from_company: {
+ name: invoice.from_company?.name || invoice.vendor_name || "",
+ address: invoice.from_company?.address || "",
+ email: invoice.from_company?.email || "",
+ phone: invoice.from_company?.phone || ""
+ },
+ to_company: {
+ name: invoice.to_company?.name || invoice.business_name || "",
+ address: invoice.to_company?.address || "",
+ email: invoice.to_company?.email || "",
+ manager: invoice.to_company?.manager || invoice.manager_name || "",
+ phone: invoice.to_company?.phone || "",
+ vendor_id: invoice.to_company?.vendor_id || ""
+ }
+ });
+ setIsEditingDetails(false);
+ };
+
+ const handleEditEntry = (roleIdx, entryIdx, entry) => {
+ setEditingEntryIndex({ roleIdx, entryIdx });
+ setEditedEntry({ ...entry });
+ };
+
+ const handleSaveEntry = () => {
+ if (!editingEntryIndex || !editedEntry) return;
+
+ const updatedRoles = [...(invoice.roles || displayRoles)];
+ if (updatedRoles[editingEntryIndex.roleIdx]?.staff_entries) {
+ updatedRoles[editingEntryIndex.roleIdx].staff_entries[editingEntryIndex.entryIdx] = editedEntry;
+ updatedRoles[editingEntryIndex.roleIdx].role_subtotal = updatedRoles[editingEntryIndex.roleIdx].staff_entries.reduce(
+ (sum, e) => sum + (e.total || 0), 0
+ );
+ }
+
+ const newSubtotal = updatedRoles.reduce((sum, r) => sum + (r.role_subtotal || 0), 0);
+ const newAmount = newSubtotal + (invoice.other_charges || 0);
+
+ updateInvoiceMutation.mutate({
+ id: invoice.id,
+ data: {
+ roles: updatedRoles,
+ subtotal: newSubtotal,
+ amount: newAmount
+ }
+ });
+ setEditingEntryIndex(null);
+ setEditedEntry(null);
+ };
+
+ const handleRemoveEntry = (roleIdx, entryIdx) => {
+ const updatedRoles = [...(invoice.roles || displayRoles)];
+ if (updatedRoles[roleIdx]?.staff_entries) {
+ updatedRoles[roleIdx].staff_entries.splice(entryIdx, 1);
+ updatedRoles[roleIdx].role_subtotal = updatedRoles[roleIdx].staff_entries.reduce(
+ (sum, e) => sum + (e.total || 0), 0
+ );
+ }
+
+ const newSubtotal = updatedRoles.reduce((sum, r) => sum + (r.role_subtotal || 0), 0);
+ const newAmount = newSubtotal + (invoice.other_charges || 0);
+
+ updateInvoiceMutation.mutate({
+ id: invoice.id,
+ data: {
+ roles: updatedRoles,
+ subtotal: newSubtotal,
+ amount: newAmount
+ }
+ });
+ };
+
+ const handleAddEntry = () => {
+ const newEntry = {
+ staff_name: "",
+ date: new Date().toISOString().split('T')[0],
+ position: "",
+ check_in: "",
+ check_out: "",
+ worked_hours: 0,
+ regular_hours: 0,
+ ot_hours: 0,
+ dt_hours: 0,
+ rate: 0,
+ regular_value: 0,
+ ot_value: 0,
+ dt_value: 0,
+ total: 0
+ };
+
+ const updatedRoles = [...(invoice.roles || displayRoles)];
+ if (updatedRoles.length === 0) {
+ updatedRoles.push({ role_name: "Staff", staff_entries: [], role_subtotal: 0 });
+ }
+ updatedRoles[0].staff_entries.push(newEntry);
+
+ updateInvoiceMutation.mutate({
+ id: invoice.id,
+ data: { roles: updatedRoles }
+ });
+
+ // Start editing the new entry
+ setTimeout(() => {
+ setEditingEntryIndex({ roleIdx: 0, entryIdx: updatedRoles[0].staff_entries.length - 1 });
+ setEditedEntry(newEntry);
+ }, 100);
+ };
+
+ const handleFlagEntry = async (roleIdx, entryIdx, entry) => {
+ const user = await base44.auth.me();
+ const flaggedItems = [...(invoice.disputed_items || [])];
+ const existingIndex = flaggedItems.findIndex(item => item.role_index === roleIdx && item.staff_index === entryIdx);
+
+ if (existingIndex === -1) {
+ // Add flag with details
+ flaggedItems.push({
+ role_index: roleIdx,
+ staff_index: entryIdx,
+ staff_name: entry?.staff_name || entry?.name || 'Unknown',
+ position: entry?.position || 'Unknown',
+ flagged_by: user.email,
+ flagged_by_role: user.user_role || user.role,
+ flagged_at: new Date().toISOString(),
+ worked_hours: entry?.worked_hours,
+ total: entry?.total
+ });
+ } else {
+ // Remove flag if already flagged (toggle)
+ flaggedItems.splice(existingIndex, 1);
+ }
+
+ updateInvoiceMutation.mutate({
+ id: invoice.id,
+ data: { disputed_items: flaggedItems }
+ });
+ };
+
+ const parseTimeToMinutes = (timeStr) => {
+ if (!timeStr || timeStr === "hh:mm" || timeStr === "—") return null;
+
+ // Try format: "06:00 AM" or "02:30 PM"
+ let match = timeStr.match(/(\d{1,2}):(\d{2})\s*(AM|PM)/i);
+ if (match) {
+ let hours = parseInt(match[1]);
+ const minutes = parseInt(match[2]);
+ const period = match[3].toUpperCase();
+ if (period === "PM" && hours !== 12) hours += 12;
+ if (period === "AM" && hours === 12) hours = 0;
+ return hours * 60 + minutes;
+ }
+
+ // Try 24-hour format: "06:00" or "14:30"
+ match = timeStr.match(/(\d{1,2}):(\d{2})/);
+ if (match) {
+ const hours = parseInt(match[1]);
+ const minutes = parseInt(match[2]);
+ return hours * 60 + minutes;
+ }
+
+ return null;
+ };
+
+ const recalculateEntry = (entry) => {
+ // Calculate worked hours from check_in and check_out
+ let workedHours = entry.worked_hours || 0;
+ let nbBonusHour = 0;
+ const startMinutes = parseTimeToMinutes(entry.check_in);
+ const endMinutes = parseTimeToMinutes(entry.check_out);
+
+ if (startMinutes !== null && endMinutes !== null) {
+ let totalMinutes = endMinutes - startMinutes;
+ if (totalMinutes < 0) totalMinutes += 24 * 60; // Handle overnight shifts
+
+ // NB = No Break, adds 1 extra REGULAR hour (not OT)
+ // Other breaks >= 20 minutes are deducted
+ const lunchVal = entry.lunch;
+ if (lunchVal === "NB") {
+ nbBonusHour = 1; // NB adds 1 extra regular hour
+ } else {
+ const lunchMinutes = (lunchVal === 0 || lunchVal === "0") ? 0 :
+ (typeof lunchVal === 'number' && lunchVal >= 20) ? lunchVal :
+ (typeof lunchVal === 'string' && parseInt(lunchVal) >= 20) ? parseInt(lunchVal) : 0;
+ totalMinutes -= lunchMinutes;
+ }
+ workedHours = Math.max(0, totalMinutes / 60);
+ }
+
+ // Actual consecutive hours worked (without NB bonus) determines OT/DT
+ const consecutiveHours = workedHours;
+
+ // Distribute hours: first 8 regular, next 4 OT, rest DT (based on consecutive hours)
+ let regularHours = 0, otHours = 0, dtHours = 0;
+ if (consecutiveHours <= 8) {
+ regularHours = consecutiveHours;
+ } else if (consecutiveHours <= 12) {
+ regularHours = 8;
+ otHours = consecutiveHours - 8;
+ } else {
+ regularHours = 8;
+ otHours = 4;
+ dtHours = consecutiveHours - 12;
+ }
+
+ // Add NB bonus to regular hours only
+ regularHours += nbBonusHour;
+ workedHours += nbBonusHour;
+
+ const rate = parseFloat(entry.rate) || 0;
+ const regValue = regularHours * rate;
+ const otValue = otHours * rate * 1.5;
+ const dtValue = dtHours * rate * 2;
+
+ return {
+ ...entry,
+ worked_hours: parseFloat(workedHours.toFixed(2)),
+ regular_hours: parseFloat(regularHours.toFixed(2)),
+ ot_hours: parseFloat(otHours.toFixed(2)),
+ dt_hours: parseFloat(dtHours.toFixed(2)),
+ regular_value: parseFloat(regValue.toFixed(2)),
+ ot_value: parseFloat(otValue.toFixed(2)),
+ dt_value: parseFloat(dtValue.toFixed(2)),
+ total: parseFloat((regValue + otValue + dtValue).toFixed(2))
+ };
+ };
+
const toggleItemSelection = (roleIndex, staffIndex) => {
const itemId = { role_index: roleIndex, staff_index: staffIndex };
setSelectedItems(prev => {
@@ -123,13 +411,72 @@ export default function InvoiceDetailView({ invoice, userRole, onClose }) {
if (!invoice) return null;
+ // Generate demo staff entries if none exist
+ const demoStaffEntries = [
+ { staff_name: "Maria Garcia", date: invoice.issue_date || "2025-10-15", position: "Bartender", check_in: "09:00 AM", check_out: "05:00 PM", worked_hours: 8, regular_hours: 8, ot_hours: 0, dt_hours: 0, rate: 52.68, regular_value: 421.44, ot_value: 0, dt_value: 0, total: 421.44 },
+ { staff_name: "Carlos Rodriguez", date: invoice.issue_date || "2025-10-15", position: "Server", check_in: "10:00 AM", check_out: "06:30 PM", worked_hours: 8.5, regular_hours: 8, ot_hours: 0.5, dt_hours: 0, rate: 45.00, regular_value: 360.00, ot_value: 33.75, dt_value: 0, total: 393.75 },
+ { staff_name: "Ana Martinez", date: invoice.issue_date || "2025-10-15", position: "Line Cook", check_in: "07:00 AM", check_out: "04:00 PM", worked_hours: 9, regular_hours: 8, ot_hours: 1, dt_hours: 0, rate: 48.50, regular_value: 388.00, ot_value: 72.75, dt_value: 0, total: 460.75 },
+ ];
+
+ const demoRoles = [{
+ role_name: "Mixed",
+ staff_entries: demoStaffEntries,
+ role_subtotal: demoStaffEntries.reduce((sum, e) => sum + e.total, 0)
+ }];
+
+ // Use real roles if available, otherwise use demo data
+ const displayRoles = (invoice.roles && invoice.roles.length > 0 && invoice.roles[0]?.staff_entries?.length > 0)
+ ? invoice.roles
+ : demoRoles;
+
+ // Group entries by position for collapsible view
+ const getGroupedByPosition = (staffEntries) => {
+ const groups = {};
+ staffEntries.forEach((entry, idx) => {
+ const position = entry.position || 'Other';
+ if (!groups[position]) {
+ groups[position] = {
+ position,
+ entries: [],
+ totalWorkedHours: 0,
+ totalRegularHours: 0,
+ totalOtHours: 0,
+ totalDtHours: 0,
+ totalRegularValue: 0,
+ totalOtValue: 0,
+ totalDtValue: 0,
+ total: 0
+ };
+ }
+ groups[position].entries.push({ ...entry, originalIndex: idx });
+ groups[position].totalWorkedHours += entry.worked_hours || 0;
+ groups[position].totalRegularHours += entry.regular_hours || 0;
+ groups[position].totalOtHours += entry.ot_hours || 0;
+ groups[position].totalDtHours += entry.dt_hours || 0;
+ groups[position].totalRegularValue += entry.regular_value || 0;
+ groups[position].totalOtValue += entry.ot_value || 0;
+ groups[position].totalDtValue += entry.dt_value || 0;
+ groups[position].total += entry.total || 0;
+ });
+ return Object.values(groups);
+ };
+
+ const togglePositionExpand = (roleIdx, position) => {
+ const key = `${roleIdx}-${position}`;
+ setExpandedPositions(prev => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ const displaySubtotal = invoice.subtotal || displayRoles.reduce((sum, r) => sum + (r.role_subtotal || 0), 0);
+ const displayAmount = invoice.amount || (displaySubtotal + (invoice.other_charges || 0));
+
const isClient = userRole === "client";
const isVendor = userRole === "vendor";
const isAdmin = userRole === "admin";
- const canEdit = (isVendor || isAdmin) && ["Draft", "Pending Review", "Disputed"].includes(invoice.status);
- const canApprove = isClient && invoice.status === "Pending Review";
- const canPay = isClient && invoice.status === "Approved";
- const canDispute = isClient && ["Pending Review", "Approved"].includes(invoice.status);
+ const canEdit = isVendor || isAdmin;
+ const canApprove = (isClient || isAdmin) && invoice.status === "Pending Review";
+ const canPay = (isClient || isAdmin) && invoice.status === "Approved";
+ const canDispute = (isClient || isAdmin) && ["Pending Review", "Approved"].includes(invoice.status);
+ const canFlag = isClient || isAdmin;
return (
+
+
+ {formData.business_id && (
+
+ )}
+
{isClient && (
+ ✓ Client selected: {formData.business_name} +
+ )} +
-
-
-
- )}
+
@@ -179,30 +526,155 @@ export default function InvoiceDetailView({ invoice, userRole, onClose }) {
{/* Event Info */}
-
-
- Event Name: {invoice.event_name}
+ {isEditingDetails ? (
+
-
+
-
+
+ setEditedDetails({ ...editedDetails, event_name: e.target.value })}
+ className="h-8 mt-1"
+ />
+
+
+
+ setEditedDetails({ ...editedDetails, po_reference: e.target.value })}
+ className="h-8 mt-1"
+ />
+
+
+
+ setEditedDetails({ ...editedDetails, event_date: e.target.value })}
+ className="h-8 mt-1"
+ />
+
+
+
+ setEditedDetails({ ...editedDetails, due_date: e.target.value })}
+ className="h-8 mt-1"
+ />
+
- PO#: {invoice.po_reference || "N/A"}
+ ) : (
+
- {/* KROW Logo */}
-
+
-
+ Event Name: {invoice.event_name}
+
+
+ PO#: {invoice.po_reference || "N/A"}
+
+
+ Date: {invoice.event_date ? format(parseISO(invoice.event_date), 'M.d.yyyy') : '—'}
+
+
+ Due date: {format(parseISO(invoice.due_date), 'M.d.yyyy')}
+
- Date: {invoice.event_date ? format(parseISO(invoice.event_date), 'M.d.yyyy') : '—'}
+ )}
+
+ {/* Inline Edit Controls for Vendor */}
+ {canEdit && (
+
+ )}
+ {isEditingDetails ? (
+ <>
+
+
+
+ ) : (
+
+ )}
-
- Due date: {format(parseISO(invoice.due_date), 'M.d.yyyy')}
-
-
- 
-
+
+
+ {/* Dispute Alert for Vendors */}
+ {invoice.status === "Disputed" && (isVendor || isAdmin) && (
+
-
+
+ )}
{/* From and To */}
+
+
+
+
+
+ Invoice Disputed by Client
+
+
+ {invoice.dispute_details && (
+
+
+ Reason
+{invoice.dispute_reason || "Not specified"}
+
+
+ Disputed By
+{invoice.disputed_by || "Client"}
+
+
+ )}
+ {invoice.disputed_items && invoice.disputed_items.length > 0 && (
+ Details
+{invoice.dispute_details}
+
+
+ )}
+ Disputed Line Items ({invoice.disputed_items.length})
+
+
+
+
+
+ | # | +Staff | +Position | +Hours | +Amount | +
|---|---|---|---|---|
| {idx + 1} | +{entry.staff_name || entry.name || "Staff"} | +{entry.position} | +{entry.worked_hours?.toFixed(2)} | +${entry.total?.toFixed(2)} | +
+
+
+
@@ -213,33 +685,76 @@ export default function InvoiceDetailView({ invoice, userRole, onClose }) {
From:
-
{invoice.from_company?.name || invoice.vendor_name || "Vendor Name"}
- {(invoice.from_company?.address || invoice.vendor_address) && ( -
-
{/* Staff Charges Table */}
Address
-{invoice.from_company?.address || invoice.vendor_address}
+ {isEditingDetails ? ( +
+
-
+
+ setEditedDetails({
+ ...editedDetails,
+ from_company: { ...editedDetails.from_company, name: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
- )}
- {(invoice.from_company?.email || invoice.vendor_email) && (
-
- Email
-
{invoice.from_company?.email || invoice.vendor_email}
+
+
+ setEditedDetails({
+ ...editedDetails,
+ from_company: { ...editedDetails.from_company, address: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
- )}
- {(invoice.from_company?.phone || invoice.vendor_phone) && (
-
-
+ ) : (
+ Phone
-{invoice.from_company?.phone || invoice.vendor_phone}
+
+
+ setEditedDetails({
+ ...editedDetails,
+ from_company: { ...editedDetails.from_company, email: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
- )}
- {(invoice.from_company?.contact || invoice.vendor_contact) && (
-
-
+ Point of Contact
-{invoice.from_company?.contact || invoice.vendor_contact}
+
+
+ setEditedDetails({
+ ...editedDetails,
+ from_company: { ...editedDetails.from_company, phone: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
- )}
-
+
+ )}
{invoice.from_company?.name || invoice.vendor_name || "Vendor Name"}
+ {(invoice.from_company?.address || invoice.vendor_address) && ( +
+
+ )}
+ {(invoice.from_company?.email || invoice.vendor_email) && (
+ Address
+{invoice.from_company?.address || invoice.vendor_address}
+
+ Email
+
+ )}
+ {(invoice.from_company?.phone || invoice.vendor_phone) && (
+ {invoice.from_company?.email || invoice.vendor_email}
+
+
+ )}
+ Phone
+{invoice.from_company?.phone || invoice.vendor_phone}
+
@@ -249,159 +764,612 @@ export default function InvoiceDetailView({ invoice, userRole, onClose }) {
To:
-
{invoice.to_company?.name || invoice.business_name}
-{invoice.to_company?.address}
-{invoice.to_company?.email}
-
+ {isEditingDetails ? (
+
-
+ ) : (
+
-
Main Kitchen
-{invoice.to_company?.manager || invoice.manager_name}
+ + setEditedDetails({ + ...editedDetails, + to_company: { ...editedDetails.to_company, name: e.target.value } + })} + className="h-8 mt-1" + />
-
+ Manager Name
-{invoice.to_company?.phone}
+ + setEditedDetails({ + ...editedDetails, + to_company: { ...editedDetails.to_company, address: e.target.value } + })} + className="h-8 mt-1" + /> +
+
+ setEditedDetails({
+ ...editedDetails,
+ to_company: { ...editedDetails.to_company, email: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
+
+
+
+
+
+ setEditedDetails({
+ ...editedDetails,
+ to_company: { ...editedDetails.to_company, manager: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
+
+
+
+ setEditedDetails({
+ ...editedDetails,
+ to_company: { ...editedDetails.to_company, phone: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
+
+
+
+ setEditedDetails({
+ ...editedDetails,
+ to_company: { ...editedDetails.to_company, vendor_id: e.target.value }
+ })}
+ className="h-8 mt-1"
+ />
{invoice.to_company?.vendor_id || "Vendor #"}
-
+
+ )}
{invoice.to_company?.name || invoice.business_name}
+{invoice.to_company?.address}
+{invoice.to_company?.email}
+
+
+
+
+ Main Kitchen
+{invoice.to_company?.manager || invoice.manager_name}
+
+
+ Manager Name
+{invoice.to_company?.phone}
+{invoice.to_company?.vendor_id || "Vendor #"}
+
+ {canEdit && (
+
+
+ )}
Staff Entries
+ +
-
+
- {/* Other Charges */}
-
| # | -Date | -Position | -Worked Hours | -Reg Hours | -OT Hours | -DT Hours | -Reg Value | -OT Value | -DT Value | -Total | -Actions | +# | +Date | +Position | +Worked Hours | +Reg Hours | +OT Hours | +DT Hours | +Reg Value | +OT Value | +DT Value | +Total | +Actions | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {roleIdx + 1} | -{entry.date ? format(parseISO(entry.date), 'M/d/yyyy') : '—'} | -{entry.position} | -{entry.worked_hours?.toFixed(2) || '0.00'} | -{entry.regular_hours?.toFixed(2) || '0.00'} | -{entry.ot_hours?.toFixed(2) || '0.00'} | -{entry.dt_hours?.toFixed(2) || '0.00'} | -${entry.regular_value?.toFixed(2) || '0.00'} | -${entry.ot_value?.toFixed(2) || '0.00'} | -${entry.dt_value?.toFixed(2) || '0.00'} | -${entry.total?.toFixed(2) || '0.00'} | -
- | {currentRowNum} |
+
+ {hasMultiple ? '—' : (() => {
+ const dateStr = posGroup.entries[0]?.date;
+ if (!dateStr) return '—';
+ try { return format(parseISO(dateStr), 'MM.dd.yyyy'); } catch { return dateStr; }
+ })()}
+ |
+ {posGroup.position} |
+ {posGroup.totalWorkedHours.toFixed(2)} |
+ {posGroup.totalRegularHours.toFixed(2)} |
+ {posGroup.totalOtHours.toFixed(2)} |
+ {posGroup.totalDtHours.toFixed(2)} |
+ ${posGroup.totalRegularValue.toFixed(2)} |
+ ${posGroup.totalOtValue.toFixed(2)} |
+ ${posGroup.totalDtValue.toFixed(2)} |
+ ${posGroup.total.toFixed(2)} |
+
+ |
+
+
+
+
+
+
+
+ |
+
+ |
+ | Total |
+
+ {groupedPositions.reduce((sum, g) => sum + g.totalWorkedHours, 0).toFixed(2)}
|
+
+ {groupedPositions.reduce((sum, g) => sum + g.totalRegularHours, 0).toFixed(2)}
+ |
+
+ {groupedPositions.reduce((sum, g) => sum + g.totalOtHours, 0).toFixed(2)}
+ |
+
+ {groupedPositions.reduce((sum, g) => sum + g.totalDtHours, 0).toFixed(2)}
+ |
+
+ ${groupedPositions.reduce((sum, g) => sum + g.totalRegularValue, 0).toFixed(2)}
+ |
+
+ ${groupedPositions.reduce((sum, g) => sum + g.totalOtValue, 0).toFixed(2)}
+ |
+
+ ${groupedPositions.reduce((sum, g) => sum + g.totalDtValue, 0).toFixed(2)}
+ |
+
+ ${roleGroup.role_subtotal?.toFixed(2)}
+ |
+
| Total |
- ${roleGroup.role_subtotal?.toFixed(2)} |
-
- | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
-
-
-
+
- {/* Totals */}
-
-
- Other charges
-| # | -Charge | -QTY | -Rate | -Amount | -|||||
|---|---|---|---|---|---|---|---|---|---|
| - No additional charges - | +# | +Charge | +QTY | +Rate | +Amount | ||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | -Additional Charges | -1 | -${invoice.other_charges?.toFixed(2)} | -${invoice.other_charges?.toFixed(2)} | -|||||
-
-
- Sub-total:
- ${invoice.subtotal?.toFixed(2)}
+ {/* Total */}
+
{/* Dispute Dialog */}
+
{/* Footer */}
+
- Total
- Other charges:
- ${(invoice.other_charges || 0)?.toFixed(2)}
-
-
- Grand total:
- ${invoice.amount?.toFixed(2)}
+
+
+ Sub total:
+ ${displaySubtotal?.toFixed(2)}
+
+
+ Other charges:
+ ${(invoice.other_charges || 0)?.toFixed(2)}
+
+
+ Grand total:
+ ${displayAmount?.toFixed(2)}
+
-
+
+
+ Invoice powered by
+
+
Page 1
+