[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; /* Adding premium wine-themed color palette */ --color-wine-900: #2d1b1b; --color-wine-800: #4a2c2c; --color-wine-700: #6b3d3d; --color-wine-600: #8b4e4e; --color-wine-500: #a96464; --color-champagne-50: #fdfcfb; --color-champagne-100: #faf8f5; --color-champagne-200: #f5f1ea; --color-gold-400: #d4af37; --color-gold-500: #c5a028; --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-champagne-50 text-slate-900; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const geistSans = Geist({ subsets: ["latin"], variable: "--font-sans", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono", }) export const metadata: Metadata = { title: "PRISM - Customer Intelligence Copilot", description: "Premium customer intelligence for luxury wine brands", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/customer-profiles.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Search, MessageCircle, Mail, Phone, TrendingUp, ShoppingBag, Heart, Clock, FileText, Users, } from "lucide-react" import { customers, type Customer } from "@/lib/mock-data" export default function CustomerProfiles() { const [searchQuery, setSearchQuery] = useState("") const [selectedCustomer, setSelectedCustomer] = useState(null) const [filterSegment, setFilterSegment] = useState("all") const filteredCustomers = customers.filter((customer) => { const matchesSearch = customer.name.toLowerCase().includes(searchQuery.toLowerCase()) || customer.email.toLowerCase().includes(searchQuery.toLowerCase()) const matchesSegment = filterSegment === "all" || customer.segment === filterSegment return matchesSearch && matchesSegment }) const getActivityTimeline = (customer: Customer) => [ { id: 1, type: "purchase", title: "Purchased " + customer.favoriteProducts[0], description: customer.lastPurchase, icon: ShoppingBag, }, { id: 2, type: "inquiry", title: customer.recentActivity, description: "5 days ago", icon: MessageCircle, }, { id: 3, type: "email", title: "Opened promotional email", description: "1 week ago", icon: Mail, }, { id: 4, type: "purchase", title: "Purchased " + customer.favoriteProducts[1], description: "2 weeks ago", icon: ShoppingBag, }, ] return (

{/* Customer List */}

Customer Profiles

Detailed intelligence on your clientele

setSearchQuery(e.target.value)} className="border-slate-300 pl-9 text-slate-900 placeholder:text-slate-400" />

{filteredCustomers.map((customer) => ( setSelectedCustomer(customer)} >

{customer.initials}

{customer.name}

{customer.segment}

{customer.preference}

{customer.ltv} {customer.lastPurchase}

))}

{/* Customer Detail */}

{selectedCustomer ? (

{/* Detail Header */}

{selectedCustomer.initials}

{selectedCustomer.name}

{selectedCustomer.segment}

{selectedCustomer.preference}

{selectedCustomer.email} {selectedCustomer.phone}

Overview Activity Timeline Preferences Notes {/* Key Metrics */}

Lifetime Value

{selectedCustomer.ltv}

Total Orders

{selectedCustomer.totalOrders}

Avg Order Value

{selectedCustomer.averageOrderValue}

Engagement

{selectedCustomer.engagement}%

{/* Customer Info */} Customer Information

Customer Since

{new Date(selectedCustomer.joinDate).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", })}

Last Purchase

{selectedCustomer.lastPurchase}

{selectedCustomer.birthday && (

Birthday

{new Date(selectedCustomer.birthday).toLocaleDateString("en-US", { month: "long", day: "numeric", })} Upcoming

)}

Segment

{selectedCustomer.segment}

{/* Favorite Products */} Favorite Products

{selectedCustomer.favoriteProducts.map((product, idx) => ( {product} ))}

Activity Timeline

{getActivityTimeline(selectedCustomer).map((activity, idx) => (

{idx < getActivityTimeline(selectedCustomer).length - 1 && (

)}

{activity.title}

{activity.description}

))}

Preferences & Interests

Wine Preferences

{selectedCustomer.preference}

Communication Preference

Email and WhatsApp

Purchase Frequency

Every 2-3 weeks

Notes

{selectedCustomer.notes}

) : (

Select a customer

Choose a customer from the list to view their profile

)}

) } [V0_FILE]typescriptreact:file="lib/mock-data.ts" isEdit="true" isMerged="true" export interface Customer { id: number name: string initials: string segment: "Diamond" | "Platinum" | "Gold" ltv: string lastPurchase: string preference: string engagement: number recentActivity: string birthday?: string email: string phone: string joinDate: string totalOrders: number averageOrderValue: string favoriteProducts: string[] notes: string } export interface Message { id: number type: "ai" | "user" content: string time: string suggestions?: string[] } export interface DailyBriefItem { id: number type: "birthday" | "followup" | "fulfill" | "reengage" customer: string description: string priority: "high" | "medium" | "low" dueDate?: string } export const customers: Customer[] = [ { id: 1, name: "Sophie Lefèvre", initials: "SL", segment: "Diamond", ltv: "$56,400", lastPurchase: "3 days ago", preference: "Bordeaux, Grand Cru", engagement: 95, recentActivity: "Inquired about 2015 Château Margaux", birthday: "2024-11-15", email: "sophie.lefevre@email.com", phone: "+33 6 12 34 56 78", joinDate: "2021-03-15", totalOrders: 47, averageOrderValue: "$1,200", favoriteProducts: ["Château Margaux", "Pétrus", "Romanée-Conti"], notes: "Prefers aged Bordeaux. Birthday coming up - consider special vintage offer.", }, { id: 2, name: "Jean-Pierre Durand", initials: "JD", segment: "Platinum", ltv: "$42,800", lastPurchase: "1 week ago", preference: "Burgundy, Premier Cru", engagement: 88, recentActivity: "Confirmed tasting appointment for today at 2:00 PM", email: "jp.durand@email.com", phone: "+33 6 23 45 67 89", joinDate: "2020-07-22", totalOrders: 38, averageOrderValue: "$1,126", favoriteProducts: ["Domaine de la Romanée-Conti", "Chablis Grand Cru"], notes: "Regular tasting attendee. Interested in vertical tastings.", }, { id: 3, name: "Isabella Rossi", initials: "IR", segment: "Diamond", ltv: "$48,200", lastPurchase: "5 days ago", preference: "Italian Reds, Super Tuscans", engagement: 92, recentActivity: "Requested 2015 Burgundy catalog", email: "i.rossi@email.com", phone: "+39 340 123 4567", joinDate: "2019-11-08", totalOrders: 52, averageOrderValue: "$927", favoriteProducts: ["Sassicaia", "Ornellaia", "Tignanello"], notes: "Expanding collection to French wines. Send Burgundy catalog.", }, { id: 4, name: "Thomas Martin", initials: "TM", segment: "Gold", ltv: "$28,500", lastPurchase: "2 weeks ago", preference: "Scotch Whisky, Single Malt", engagement: 72, recentActivity: "No response to last message about new Scotch", email: "t.martin@email.com", phone: "+44 7700 900123", joinDate: "2022-01-19", totalOrders: 24, averageOrderValue: "$1,187", favoriteProducts: ["Macallan 18", "Lagavulin 16", "Ardbeg Uigeadail"], notes: "Re-engage with personalized Scotch recommendation.", }, { id: 5, name: "Alexandra Chen", initials: "AC", segment: "Diamond", ltv: "$51,200", lastPurchase: "2 days ago", preference: "Champagne, Vintage", engagement: 94, recentActivity: "Purchased Dom Pérignon 2012", birthday: "2024-12-08", email: "a.chen@email.com", phone: "+1 415 555 0123", joinDate: "2020-05-12", totalOrders: 45, averageOrderValue: "$1,138", favoriteProducts: ["Dom Pérignon", "Krug Grande Cuvée", "Cristal"], notes: "VIP client. Birthday next month - prepare special offer.", }, { id: 6, name: "Marcus Williams", initials: "MW", segment: "Platinum", ltv: "$39,600", lastPurchase: "4 days ago", preference: "Napa Valley Cabernet", engagement: 85, recentActivity: "Inquired about Opus One availability", email: "m.williams@email.com", phone: "+1 650 555 0198", joinDate: "2021-09-03", totalOrders: 33, averageOrderValue: "$1,200", favoriteProducts: ["Opus One", "Screaming Eagle", "Harlan Estate"], notes: "Interested in cult Napa wines. High conversion potential.", }, ] export const dailyBriefItems: DailyBriefItem[] = [ { id: 1, type: "birthday", customer: "Sophie Lefèvre", description: "Birthday in 3 days. Consider sending personalized vintage offer.", priority: "high", dueDate: "2024-11-15", }, { id: 2, type: "followup", customer: "Jean-Pierre Durand", description: "Tasting confirmed for today at 2:00 PM at the office.", priority: "high", dueDate: "Today", }, { id: 3, type: "fulfill", customer: "Isabella Rossi", description: "Send the 2015 Burgundy catalog as promised.", priority: "medium", dueDate: "Today", }, { id: 4, type: "reengage", customer: "Thomas Martin", description: "No response to last message about new Scotch. Re-engage with personalized offer.", priority: "medium", dueDate: "This week", }, ] export const chatMessages: Message[] = [ { id: 1, type: "ai", content: "Good morning, Alex! Here's your priority list for today:\n\n🎂 Anticipate: Ms. Lefèvre's birthday is in 3 days.\n☕ Follow-up: Mr. Durand: Tasting confirmed for today at 2:00 PM at the office.\n📦 Fulfill: Promise to send the 2015 Burgundy catalog to Ms. Rossi.\n⏰ Re-engage: Client 'Martin' hasn't responded to your last message about the new Scotch.\n\nWould you like to 'Process My Day'?", time: "9:24 AM", suggestions: ["Process My Day", "Show me high-priority customers", "What about Ms. Lefèvre?"], }, ] [V0_FILE]typescriptreact:file="components/customer-detail-modal.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { X, Mail, Phone, MessageCircle, Heart, Calendar } from "lucide-react" import type { Customer } from "@/lib/mock-data" interface CustomerDetailModalProps { customer: Customer onClose: () => void } export default function CustomerDetailModal({ customer, onClose }: CustomerDetailModalProps) { return (

{customer.initials}

{customer.name} {customer.segment}

{customer.preference}

{/* Contact Info */}

{customer.email}

{customer.phone}

{customer.birthday && (

Birthday:{" "} {new Date(customer.birthday).toLocaleDateString("en-US", { month: "long", day: "numeric", })}

)}

{/* Key Metrics */}

Lifetime Value

{customer.ltv}

Total Orders

{customer.totalOrders}

Engagement

{customer.engagement}%

{/* Favorite Products */}

Favorite Products

{customer.favoriteProducts.map((product, idx) => ( {product} ))}

{/* Notes */}

Notes

{customer.notes}

{/* Actions */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Wine, MessageCircle, LayoutDashboard, Users } from "lucide-react" import WhatsAppChat from "@/components/whatsapp-chat" import Dashboard from "@/components/dashboard" import CustomerProfiles from "@/components/customer-profiles" export default function PrismApp() { const [activeView, setActiveView] = useState<"whatsapp" | "dashboard" | "customers">("whatsapp") return (

{/* Sidebar */} {/* Main Content */}

{activeView === "whatsapp" && } {activeView === "dashboard" && } {activeView === "customers" && }

) } [V0_FILE]typescriptreact:file="components/whatsapp-chat.tsx" isEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Send, Sparkles, CheckCheck } from "lucide-react" import { chatMessages } from "@/lib/mock-data" export default function WhatsAppChat() { const [messages, setMessages] = useState(chatMessages) const [inputMessage, setInputMessage] = useState("") const [isTyping, setIsTyping] = useState(false) const handleSendMessage = () => { if (!inputMessage.trim()) return const newUserMessage = { id: messages.length + 1, type: "user" as const, content: inputMessage, time: new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }), } setMessages([...messages, newUserMessage]) setInputMessage("") setIsTyping(true) // Simulate AI response setTimeout(() => { const aiResponse = { id: messages.length + 2, type: "ai" as const, content: generateAIResponse(inputMessage), time: new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }), } setMessages((prev) => [...prev, aiResponse]) setIsTyping(false) }, 1500) } const generateAIResponse = (userMessage: string): string => { const lowerMessage = userMessage.toLowerCase() if (lowerMessage.includes("process my day") || lowerMessage.includes("process")) { return "Perfect! I've organized your day:\n\n1. PRIORITY: Prepare for Mr. Durand's tasting at 2 PM. I've pulled his purchase history and preferences.\n\n2. QUICK WIN: Send Ms. Rossi the Burgundy catalog - I've drafted an email with personalized recommendations.\n\n3. BIRTHDAY PREP: Ms. Lefèvre's birthday is in 3 days. I suggest a curated collection of 2015 Bordeaux with a handwritten note.\n\n4. RE-ENGAGE: Mr. Martin needs a follow-up. I've identified 3 new Scotch releases that match his taste profile.\n\nShall I help you with any of these?" } if (lowerMessage.includes("lefèvre") || lowerMessage.includes("lefevre") || lowerMessage.includes("birthday")) { return "Ms. Sophie Lefèvre is one of your Diamond clients with a $56,400 lifetime value. Her birthday is November 15th (3 days away).\n\nBased on her purchase history, she loves aged Bordeaux, especially Château Margaux. She recently inquired about the 2015 vintage.\n\nRECOMMENDATION: Create a birthday collection featuring:\n- 2015 Château Margaux (her favorite)\n- Vertical tasting set: 2010-2015 Bordeaux Grand Crus\n- Personalized tasting notes\n\nConversion probability: 94%. Would you like me to draft the message?" } if (lowerMessage.includes("durand") || lowerMessage.includes("tasting")) { return "Mr. Jean-Pierre Durand's tasting is confirmed for today at 2:00 PM at your office.\n\nHis profile:\n- Platinum client, $42,800 LTV\n- Prefers Burgundy Premier Cru\n- Regular tasting attendee\n- Interested in vertical tastings\n\nI've prepared:\n✓ His complete purchase history\n✓ Tasting notes for today's selection\n✓ 3 upsell opportunities based on his preferences\n✓ Follow-up email template\n\nAnything specific you'd like to prepare?" } if (lowerMessage.includes("rossi") || lowerMessage.includes("catalog")) { return "Ms. Isabella Rossi requested the 2015 Burgundy catalog 5 days ago.\n\nI've drafted a personalized email featuring:\n- 2015 Burgundy Grand Crus matching her taste profile\n- Special note about her interest in expanding from Italian to French wines\n- Exclusive tasting invitation\n\nThe email is ready to send. Should I send it now or would you like to review it first?" } if (lowerMessage.includes("martin") || lowerMessage.includes("scotch") || lowerMessage.includes("re-engage")) { return "Mr. Thomas Martin hasn't responded to your message about new Scotch releases (sent 2 weeks ago).\n\nHis profile suggests:\n- Gold client, $28,500 LTV\n- Loves single malt Scotch (Macallan, Lagavulin, Ardbeg)\n- 72% engagement score (lower than usual)\n\nRE-ENGAGEMENT STRATEGY:\n1. Personalized message about 3 new releases matching his taste\n2. Exclusive preview invitation\n3. Limited-time offer on his favorite: Macallan 18\n\nShall I draft this message?" } if (lowerMessage.includes("draft") || lowerMessage.includes("message") || lowerMessage.includes("yes")) { return "I've drafted a personalized message for you:\n\n---\n\nDear [Customer],\n\nI hope this message finds you well. I wanted to personally reach out because [personalized reason based on their history].\n\n[Specific recommendation with details]\n\nI'd love to arrange a private tasting for you. Would [suggested time] work for your schedule?\n\nWarm regards,\nAlex\n\n---\n\nWould you like me to send this, or shall we refine it?" } return "I'm here to help you manage your customer relationships. I can assist with:\n\n• Daily briefings and priority lists\n• Customer insights and recommendations\n• Drafting personalized messages\n• Scheduling and follow-ups\n• Purchase history analysis\n\nWhat would you like to know?" } const handleSuggestionClick = (suggestion: string) => { const newUserMessage = { id: messages.length + 1, type: "user" as const, content: suggestion, time: new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }), } setMessages([...messages, newUserMessage]) setIsTyping(true) setTimeout(() => { const aiResponse = { id: messages.length + 2, type: "ai" as const, content: generateAIResponse(suggestion), time: new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }), } setMessages((prev) => [...prev, aiResponse]) setIsTyping(false) }, 1500) } return (

{/* WhatsApp-style Header */}

PRISM Assistant

online

{/* Messages Area */}

{messages.map((msg) => (

{msg.content}

{msg.time} {msg.type === "user" && }

{msg.suggestions && msg.suggestions.length > 0 && (

{msg.suggestions.map((suggestion, idx) => ( ))}

)}

))} {isTyping && (

)}

{/* Input Area */}

setInputMessage(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } }} className="flex-1 border-slate-300 bg-white text-slate-900 placeholder:text-slate-500" />

PRISM analyzes customer behavior and provides intelligent recommendations

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Sparkles, TrendingUp, Users, Star, Calendar, MessageCircle, ChevronRight, Gift, Clock, Package, RefreshCw, ArrowUpRight, ArrowDownRight, CheckCircle2, Lightbulb, Target, Mail, } from "lucide-react" import { customers, dailyBriefItems } from "@/lib/mock-data" const aiInsights = { birthday: { title: "AI-Powered Birthday Strategy", icon: Gift, insights: [ { label: "Recommended Offer", value: "Curated birthday collection with 2015 Château Margaux + vertical tasting set", }, { label: "Conversion Probability", value: "94% (based on purchase history and engagement patterns)", }, { label: "Optimal Timing", value: "Send 3 days before birthday for maximum impact", }, { label: "Personalization Tip", value: "Reference her recent inquiry about 2015 vintage in the message", }, ], draftMessage: `Dear Ms. Lefèvre, As your birthday approaches, I wanted to personally curate something special for you. Knowing your love for aged Bordeaux, especially Château Margaux, I've assembled an exclusive collection: 🍷 2015 Château Margaux (the vintage you inquired about) 🍷 Vertical Tasting Set: 2010-2015 Bordeaux Grand Crus 📝 Personalized tasting notes from our sommelier This collection is reserved exclusively for you. Would you like to schedule a private preview? Warmest birthday wishes, Alex`, }, followup: { title: "AI-Generated Follow-up Strategy", icon: Calendar, insights: [ { label: "Customer Status", value: "Platinum client, highly engaged, regular tasting attendee", }, { label: "Recommended Action", value: "Confirm tasting details and prepare upsell opportunities", }, { label: "Upsell Potential", value: "$2,400 (3 identified opportunities based on preferences)", }, { label: "Preparation Checklist", value: "Purchase history ✓ Tasting notes ✓ Follow-up template ✓", }, ], draftMessage: `Dear Mr. Durand, Looking forward to our tasting session today at 2:00 PM. I've prepared a selection of Burgundy Premier Crus that I think you'll find exceptional. Based on your interest in vertical tastings, I've also set aside some rare vintages that might interest you for your collection. See you this afternoon! Best regards, Alex`, }, fulfill: { title: "AI Catalog Recommendation", icon: Package, insights: [ { label: "Customer Interest", value: "Expanding from Italian to French wines - high conversion potential", }, { label: "Personalized Selection", value: "2015 Burgundy Grand Crus matching her established taste profile", }, { label: "Engagement Opportunity", value: "Include exclusive tasting invitation to deepen relationship", }, { label: "Expected Response Time", value: "Within 24 hours (based on her typical response patterns)", }, ], draftMessage: `Dear Ms. Rossi, Thank you for your interest in our 2015 Burgundy collection. I've personally selected several Grand Crus that beautifully complement your appreciation for Italian wines: • Domaine de la Romanée-Conti • Domaine Leroy Chambertin • Domaine Armand Rousseau Each offers the complexity and elegance you love, with that distinctive Burgundian terroir. I'd love to invite you to an exclusive tasting to explore these together. Shall we schedule a time? Warm regards, Alex`, }, reengage: { title: "AI Re-engagement Strategy", icon: RefreshCw, insights: [ { label: "Engagement Status", value: "72% score (down from usual 85%) - requires attention", }, { label: "Last Interaction", value: "2 weeks ago - optimal time for re-engagement", }, { label: "Recommended Approach", value: "Exclusive preview of 3 new Scotch releases + limited-time offer", }, { label: "Success Probability", value: "78% (personalized approach with scarcity element)", }, ], draftMessage: `Dear Mr. Martin, I hope this finds you well. I wanted to reach out personally because we've just received three exceptional single malt releases that immediately made me think of you: 🥃 Macallan 18 Year (limited allocation) 🥃 Lagavulin Distillers Edition 🥃 Ardbeg Uigeadail Cask Strength As one of our valued collectors, I'm offering you first access before they're released to our general clientele. The Macallan 18 is particularly special - only 12 bottles available. Would you like to reserve your selection? Best regards, Alex`, }, } export default function Dashboard() { const [selectedCustomer, setSelectedCustomer] = useState(null) const [completedActions, setCompletedActions] = useState([]) const [selectedAction, setSelectedAction] = useState<{ type: keyof typeof aiInsights customer: string } | null>(null) const priorityIcons = { birthday: Gift, followup: Calendar, fulfill: Package, reengage: RefreshCw, } const priorityColors = { high: "border-l-4 border-l-wine-700 bg-wine-50", medium: "border-l-4 border-l-gold-500 bg-gold-50", low: "border-l-4 border-l-slate-400 bg-slate-50", } const topCustomers = customers.slice(0, 3) const handleTakeAction = (action: { id: number; type: keyof typeof aiInsights; customer: string }) => { setSelectedAction({ type: action.type, customer: action.customer }) } const handleCompleteAction = (actionId: number) => { setCompletedActions([...completedActions, actionId]) setSelectedAction(null) } return (

{/* Header */}

Dashboard

Your daily intelligence brief

All systems active

{/* Daily Brief Section */}

Daily Brief

Updated 5 minutes ago

{dailyBriefItems.length - completedActions.length}

Priority Actions

Require attention today

High-Intent Customers

Showing purchase signals

VIP Milestones

Birthdays & anniversaries

{/* Priority Actions */}

Priority Actions

{dailyBriefItems.map((item) => { const Icon = priorityIcons[item.type] const isCompleted = completedActions.includes(item.id) return (

{isCompleted ? ( ) : ( )}

{item.customer}

{item.description}

{!isCompleted && ( {item.priority} )}

{item.dueDate} {!isCompleted && ( )} {isCompleted && ( Completed )}

) })}

{/* Top Customers */}

High-Value Customers

{topCustomers.map((customer) => ( setSelectedCustomer(customer.id)} >

{customer.initials}

{customer.name}

{customer.lastPurchase}

{customer.segment}

Lifetime Value {customer.ltv}

Engagement

{customer.engagement}%

Recent Activity

{customer.recentActivity}

))}

{/* Analytics Overview */}

Performance Insights

Avg Response Time

2.3h

12%

Conversion Rate

87%

Customer Satisfaction

4.9

0.2

Active Customers

156

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This