export base44 - Nov 18

frontend-web/src/pages/RapidOrder.jsx

@@ -0,0 +1,505 @@
+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>
+  );
+}