505 lines
22 KiB
JavaScript
505 lines
22 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { base44 } from "@/api/base44Client";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { createPageUrl } from "@/utils";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Zap, Send, Check, Edit3, MapPin, Clock, Users, AlertCircle, Sparkles, Mic, X, Calendar as CalendarIcon, ArrowLeft } from "lucide-react";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { format } from "date-fns";
|
|
|
|
// Helper function to convert 24-hour time to 12-hour format
|
|
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 RapidOrder() {
|
|
const navigate = useNavigate();
|
|
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 [isListening, setIsListening] = useState(false);
|
|
const [submissionTime, setSubmissionTime] = useState(null);
|
|
|
|
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'] });
|
|
queryClient.invalidateQueries({ queryKey: ['client-events'] });
|
|
|
|
const now = new Date();
|
|
setSubmissionTime(now);
|
|
|
|
toast({
|
|
title: "✅ RAPID Order Created",
|
|
description: "Order sent to preferred vendor with priority notification",
|
|
});
|
|
|
|
// Show success message in chat
|
|
setConversation(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: `🚀 **Order Submitted Successfully!**\n\nOrder Number: **${data.id?.slice(-8) || 'RAPID-001'}**\nSubmitted: **${format(now, 'h:mm:ss a')}**\n\nYour preferred vendor has been notified and will assign staff shortly.`,
|
|
isSuccess: true
|
|
}]);
|
|
|
|
// Reset after delay
|
|
setTimeout(() => {
|
|
navigate(createPageUrl("ClientDashboard"));
|
|
}, 3000);
|
|
},
|
|
});
|
|
|
|
const analyzeMessage = async (msg) => {
|
|
setIsProcessing(true);
|
|
|
|
setConversation(prev => [...prev, { role: 'user', content: msg }]);
|
|
|
|
try {
|
|
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, parse the number correctly - e.g., "5 cooks" = 5, "need 3 servers" = 3)
|
|
4. End time (if mentioned, extract the time - e.g., "until 5am" = "05:00", "until 11pm" = "23:00", "until midnight" = "00:00")
|
|
5. Location (if mentioned, otherwise use first available location)
|
|
|
|
IMPORTANT:
|
|
- Make sure to correctly extract the number of staff from phrases like "need 5 cooks" or "I need 3 bartenders"
|
|
- If end time is mentioned (e.g., "until 5am", "till 11pm"), extract it in 24-hour format (e.g., "05:00", "23:00")
|
|
- If no end time is mentioned, leave it as null
|
|
|
|
Return a concise summary.`,
|
|
response_json_schema: {
|
|
type: "object",
|
|
properties: {
|
|
is_urgent: { type: "boolean" },
|
|
role: { type: "string" },
|
|
count: { type: "number" },
|
|
location: { type: "string" },
|
|
end_time: { type: "string" }
|
|
}
|
|
}
|
|
});
|
|
|
|
const parsed = response;
|
|
const primaryLocation = businesses[0]?.business_name || "Primary Location";
|
|
|
|
// Ensure count is properly set - default to 1 if not detected
|
|
const staffCount = parsed.count && parsed.count > 0 ? parsed.count : 1;
|
|
|
|
// Get current time for start_time (when ASAP)
|
|
const now = new Date();
|
|
const currentTime = format(now, 'HH:mm');
|
|
|
|
// Handle end_time - use parsed end time or current time as confirmation time
|
|
const endTime = parsed.end_time || currentTime;
|
|
|
|
const order = {
|
|
is_rapid: parsed.is_urgent || true,
|
|
role: parsed.role || "Staff Member",
|
|
count: staffCount,
|
|
location: parsed.location || primaryLocation,
|
|
start_time: currentTime, // Always use current time for ASAP orders (24-hour format for storage)
|
|
end_time: endTime, // Use parsed end time or current time (24-hour format for storage)
|
|
start_time_display: convertTo12Hour(currentTime), // For display
|
|
end_time_display: convertTo12Hour(endTime), // For display
|
|
business_name: primaryLocation,
|
|
hub: businesses[0]?.hub_building || "Main Hub",
|
|
submission_time: now // Store the actual submission time
|
|
};
|
|
|
|
setDetectedOrder(order);
|
|
|
|
const aiMessage = `Is this a RAPID ORDER for **${order.count} ${order.role}${order.count > 1 ? 's' : ''}** at **${order.location}**?\n\nStart Time: ${order.start_time_display}\nEnd Time: ${order.end_time_display}`;
|
|
|
|
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 handleVoiceInput = () => {
|
|
if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
|
|
toast({
|
|
title: "Voice not supported",
|
|
description: "Your browser doesn't support voice input",
|
|
variant: "destructive",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
const recognition = new SpeechRecognition();
|
|
|
|
recognition.onstart = () => setIsListening(true);
|
|
recognition.onend = () => setIsListening(false);
|
|
|
|
recognition.onresult = (event) => {
|
|
const transcript = event.results[0][0].transcript;
|
|
setMessage(transcript);
|
|
analyzeMessage(transcript);
|
|
};
|
|
|
|
recognition.onerror = () => {
|
|
setIsListening(false);
|
|
toast({
|
|
title: "Voice input failed",
|
|
description: "Please try typing instead",
|
|
variant: "destructive",
|
|
});
|
|
};
|
|
|
|
recognition.start();
|
|
};
|
|
|
|
const handleConfirmOrder = () => {
|
|
if (!detectedOrder) return;
|
|
|
|
const now = new Date();
|
|
const confirmTime = format(now, 'HH:mm');
|
|
const confirmTime12Hour = convertTo12Hour(confirmTime);
|
|
|
|
// Create comprehensive order data with proper requested field and actual times
|
|
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: Number(detectedOrder.count), // Ensure it's a number
|
|
client_name: user?.full_name,
|
|
client_email: user?.email,
|
|
notes: `RAPID ORDER - Submitted at ${detectedOrder.start_time_display} - Confirmed at ${confirmTime12Hour}\nStart: ${detectedOrder.start_time_display} | End: ${detectedOrder.end_time_display}`,
|
|
shifts: [{
|
|
shift_name: "Emergency Shift",
|
|
location: detectedOrder.location,
|
|
roles: [{
|
|
role: detectedOrder.role,
|
|
count: Number(detectedOrder.count), // Ensure it's a number
|
|
start_time: detectedOrder.start_time, // Store in 24-hour format
|
|
end_time: detectedOrder.end_time // Store in 24-hour format
|
|
}]
|
|
}]
|
|
};
|
|
|
|
console.log('Creating RAPID order with data:', orderData); // Debug log
|
|
|
|
createRapidOrderMutation.mutate(orderData);
|
|
};
|
|
|
|
const handleEditOrder = () => {
|
|
setConversation(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: "Please describe what you'd like to change."
|
|
}]);
|
|
setDetectedOrder(null);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 p-6">
|
|
<div className="max-w-5xl mx-auto space-y-6">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => navigate(createPageUrl("ClientDashboard"))}
|
|
className="hover:bg-white/50"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</Button>
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-500 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
|
|
<Zap className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-red-700 flex items-center gap-2">
|
|
<Sparkles className="w-6 h-6" />
|
|
RAPID Order
|
|
</h1>
|
|
<p className="text-sm text-red-600 mt-1">Emergency staffing in minutes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
<div className="flex items-center gap-2 text-sm text-slate-600 mb-1">
|
|
<CalendarIcon className="w-4 h-4" />
|
|
<span>{format(new Date(), 'EEEE, MMMM d, yyyy')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-slate-600">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{format(new Date(), 'h:mm a')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="bg-white border-2 border-red-300 shadow-2xl">
|
|
<CardHeader className="border-b border-red-200 bg-gradient-to-r from-red-50 to-orange-50">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-lg font-bold text-red-700">
|
|
Tell us what you need
|
|
</CardTitle>
|
|
<Badge className="bg-red-600 text-white font-bold text-sm px-4 py-2 shadow-md animate-pulse">
|
|
URGENT
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="p-6">
|
|
{/* Chat Messages */}
|
|
<div className="space-y-4 mb-6 max-h-[500px] overflow-y-auto">
|
|
{conversation.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-red-500 to-orange-500 rounded-2xl flex items-center justify-center shadow-2xl">
|
|
<Zap className="w-10 h-10 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-2xl text-slate-900 mb-3">Need staff urgently?</h3>
|
|
<p className="text-base text-slate-600 mb-6">Type or speak what you need, I'll handle the rest</p>
|
|
<div className="text-left max-w-lg mx-auto space-y-3">
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl border-2 border-blue-200 text-sm">
|
|
<strong className="text-blue-900">Example:</strong> <span className="text-slate-700">"We had a call out. Need 2 cooks ASAP"</span>
|
|
</div>
|
|
<div className="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border-2 border-purple-200 text-sm">
|
|
<strong className="text-purple-900">Example:</strong> <span className="text-slate-700">"Need 5 bartenders ASAP until 5am"</span>
|
|
</div>
|
|
<div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl border-2 border-green-200 text-sm">
|
|
<strong className="text-green-900">Example:</strong> <span className="text-slate-700">"Emergency! Need 3 servers right now till midnight"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<AnimatePresence>
|
|
{conversation.map((msg, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
|
>
|
|
<div className={`max-w-[85%] ${
|
|
msg.role === 'user'
|
|
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white'
|
|
: msg.isSuccess
|
|
? 'bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300'
|
|
: 'bg-white border-2 border-red-200'
|
|
} rounded-2xl p-5 shadow-lg`}>
|
|
{msg.role === 'assistant' && !msg.isSuccess && (
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="w-7 h-7 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center">
|
|
<Sparkles className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span className="text-xs font-bold text-red-600">AI Assistant</span>
|
|
</div>
|
|
)}
|
|
<p className={`text-base whitespace-pre-line ${
|
|
msg.role === 'user' ? 'text-white' :
|
|
msg.isSuccess ? 'text-green-900' :
|
|
'text-slate-900'
|
|
}`}>
|
|
{msg.content}
|
|
</p>
|
|
|
|
{msg.showConfirm && detectedOrder && (
|
|
<div className="mt-5 space-y-4">
|
|
<div className="grid grid-cols-2 gap-4 p-4 bg-gradient-to-br from-slate-50 to-blue-50 rounded-xl border-2 border-blue-300">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<Users className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-slate-500 font-semibold">Staff Needed</p>
|
|
<p className="font-bold text-base text-slate-900">{detectedOrder.count} {detectedOrder.role}{detectedOrder.count > 1 ? 's' : ''}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<MapPin className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-slate-500 font-semibold">Location</p>
|
|
<p className="font-bold text-base text-slate-900">{detectedOrder.location}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 col-span-2">
|
|
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<Clock className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-slate-500 font-semibold">Time</p>
|
|
<p className="font-bold text-base text-slate-900">
|
|
Start: {detectedOrder.start_time_display} | End: {detectedOrder.end_time_display}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Button
|
|
onClick={handleConfirmOrder}
|
|
disabled={createRapidOrderMutation.isPending}
|
|
className="flex-1 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 text-white font-bold shadow-xl text-base py-6"
|
|
>
|
|
<Check className="w-5 h-5 mr-2" />
|
|
{createRapidOrderMutation.isPending ? "Creating..." : "CONFIRM & SEND"}
|
|
</Button>
|
|
<Button
|
|
onClick={handleEditOrder}
|
|
variant="outline"
|
|
className="border-2 border-red-300 hover:bg-red-50 text-base py-6"
|
|
>
|
|
<Edit3 className="w-5 h-5 mr-2" />
|
|
EDIT
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
|
|
{isProcessing && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="flex justify-start"
|
|
>
|
|
<div className="bg-white border-2 border-red-200 rounded-2xl p-5 shadow-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-7 h-7 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center animate-pulse">
|
|
<Sparkles className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span className="text-base text-slate-600">Processing your request...</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Input */}
|
|
<div className="space-y-4">
|
|
<div className="flex gap-2">
|
|
<Textarea
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSendMessage();
|
|
}
|
|
}}
|
|
placeholder="Type or speak... (e.g., 'Need 5 cooks ASAP until 5am')"
|
|
className="flex-1 border-2 border-red-300 focus:border-red-500 text-base resize-none"
|
|
rows={3}
|
|
disabled={isProcessing}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleVoiceInput}
|
|
disabled={isProcessing || isListening}
|
|
variant="outline"
|
|
className={`border-2 ${isListening ? 'border-red-500 bg-red-50' : 'border-red-300'} hover:bg-red-50 text-base py-6 px-6`}
|
|
>
|
|
<Mic className={`w-5 h-5 mr-2 ${isListening ? 'animate-pulse text-red-600' : ''}`} />
|
|
{isListening ? 'Listening...' : 'Speak'}
|
|
</Button>
|
|
<Button
|
|
onClick={handleSendMessage}
|
|
disabled={!message.trim() || isProcessing}
|
|
className="flex-1 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 text-white font-bold shadow-xl text-base py-6"
|
|
>
|
|
<Send className="w-5 h-5 mr-2" />
|
|
Send Message
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Helper Text */}
|
|
<div className="mt-4 p-4 bg-blue-50 border-2 border-blue-200 rounded-xl">
|
|
<div className="flex items-start gap-3">
|
|
<AlertCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<div className="text-sm text-blue-800">
|
|
<strong>Tip:</strong> Include role, quantity, and urgency for fastest processing.
|
|
Optionally add end time like "until 5am" or "till midnight".
|
|
AI will auto-detect your location and send to your preferred vendor with priority notification.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |