[V0_FILE]typescript:file="tailwind.config.ts" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" // all in fixtures is set to tailwind v3 as interims solutions const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isMerged="true" "use client" import { AlertTriangle, Home, Package, Pause, Truck, BarChart, ListChecks, ShoppingCart } from "lucide-react" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarSeparator, } from "@/components/ui/sidebar" import Link from "next/link" // Menu items for the sidebar const mainMenuItems = [ { title: "Dashboard", url: "/", icon: Home, isActive: true, // Mark dashboard as active }, { title: "OMS Documents", url: "#oms-documents", icon: Package, }, { title: "Transported", url: "#transported", icon: Truck, }, { title: "Abnormal Documents", url: "#abnormal-documents", icon: AlertTriangle, }, { title: "On Hold", url: "#on-hold", icon: Pause, }, { title: "Inventory & Purchase", // Updated menu item title url: "#purchase-forecast", // Links to the combined card icon: ShoppingCart, }, ] const alertMenuItems = [ { title: "Detailed Alerts & Issues", // Consolidated alerts, now tabbed url: "#detailed-alerts", icon: ListChecks, }, { title: "Error Analysis", // New menu item for error analysis chart url: "#error-analysis", icon: BarChart, }, ] export function AppSidebar() { return ( {/* Removed SidebarHeader content as it's now in MainNav */} Overview {mainMenuItems.map((item) => ( {item.title} ))} Alerts & Details {alertMenuItems.map((item) => ( {item.title} ))} ) } [V0_FILE]typescriptreact:file="components/shipping-requirements-card.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" // Import Button import type { LucideIcon } from "lucide-react" interface ShippingRequirementCardProps { platform: string tip: string icon: LucideIcon } export function ShippingRequirementCard({ platform, tip, icon: Icon }: ShippingRequirementCardProps) { return ( {" "} {/* Added flex-col and justify-between */}

{" "} {/* Group icon and title */} {/* Larger, primary-colored icon */} {platform} Requirements {/* Larger title */}

{" "} {/* Allow content to grow */}

{tip}

{" "} {/* Added padding for button */} {" "} {/* Added a "Learn More" button */}

) } [V0_FILE]typescriptreact:file="components/amazon-shipping-alerts-card.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Info, Clock, Package, MapPin, Calendar, RefreshCw, ChevronDown, ArrowDown, Truck } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" // Assuming you have a Progress component interface AmazonAlert { id: string status: "High" | "Medium" | "Low" shipDate: string items: string location: string shippingType: string timeRemaining: string progress: number // 0-100 badges: { label: string; variant: "default" | "secondary" | "destructive" | "outline" }[] } interface AmazonShippingAlertsCardProps { lateShipmentRate: { value: string change: string trend: "up" | "down" } avgProcessingTime: { value: string change: string trend: "up" | "down" } pendingItems: { total: number priority: number standard: number } alerts: AmazonAlert[] } export function AmazonShippingAlertsCard({ lateShipmentRate, avgProcessingTime, pendingItems, alerts, }: AmazonShippingAlertsCardProps) { return (

Amazon Shipping Alerts

2 < 4h 1 < 8h 5 Total

{/* Late Shipment Rate */}

Late Shipment Rate

{lateShipmentRate.value}

{lateShipmentRate.trend === "down" ? : null} {lateShipmentRate.change} vs last week

{/* Avg Processing Time */}

Avg Processing Time

{avgProcessingTime.value}

{avgProcessingTime.trend === "down" ? : null} {avgProcessingTime.change} vs last week

{/* Pending Items */}

Pending Items

{pendingItems.total}

{pendingItems.priority} Priority / {pendingItems.standard} Standard

All < 4h < 8h Time Remaining

{/* Individual Alerts */} {alerts.map((alert) => (

{alert.id} {alert.status}

{alert.timeRemaining}

Must ship before: {alert.shipDate}

{alert.items}

{alert.location}

{alert.shippingType}

{alert.badges.map((badge, idx) => ( {badge.label} ))}

))} ) } [V0_FILE]typescriptreact:file="components/dashboard-charts.tsx" isEdit="true" isMerged="true" "use client" // Removed useEffect and useState as rendering is now controlled by parent import { BarChart, LineChartIcon } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip, // Removed Recharts Legend } from "recharts" import { NivoEcommerceTrendChart } from "./nivo-ecommerce-trend-chart" // Import the new Nivo chart component interface DashboardChartsProps { ecommerceChannelTrendData: Array<{ id: string data: Array<{ x: string; y: number }> }> // Updated type for Nivo data ecommerceChannelColors: Record errorReasonData: Array> } export function DashboardCharts({ ecommerceChannelTrendData, ecommerceChannelColors, errorReasonData, }: DashboardChartsProps) { // Calculate total for percentage in error reason bars const totalErrorReasons = errorReasonData.reduce((sum, entry) => sum + entry.value, 0) return (

{/* E-commerce Channel Distribution Trend Chart (Nivo Line Chart) */} E-commerce Channel Distribution Trend {/* Nivo chart is inherently responsive and handles its own mounting */} {/* Error Reason Analysis Chart (Pie Chart and List) */} Error Reason Analysis {/* Left side: Bar-like list */}

{errorReasonData.map((entry) => (

{entry.name}

{entry.value}

))}

{/* Right side: Pie Chart */}

{/* Recharts Pie Chart - still using isMounted check from parent */}

{errorReasonData.map((entry, index) => ( ))}

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "oms-dashboard", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@nivo/line": "^0.87.0", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "lucide-react": "^0.408.0", "next": "^15.0.0-rc.0", "next-themes": "^0.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.12.7", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "15.0.0-rc.0", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/nivo-ecommerce-trend-chart.tsx" isEdit="true" isMerged="true" "use client" import { ResponsiveLine } from "@nivo/line" import { useTheme } from "next-themes" interface NivoEcommerceTrendChartProps { data: Array<{ id: string data: Array<{ x: string; y: number }> }> colors: Record } export function NivoEcommerceTrendChart({ data, colors }: NivoEcommerceTrendChartProps) { const { theme } = useTheme() const isDarkMode = theme === "dark" // Basic theme colors for Nivo const textColor = isDarkMode ? "hsl(var(--foreground))" : "hsl(var(--foreground))" const gridColor = isDarkMode ? "hsl(var(--muted-foreground) / 0.2)" : "hsl(var(--muted-foreground) / 0.2)" const tooltipBg = isDarkMode ? "hsl(var(--card))" : "hsl(var(--card))" const tooltipText = isDarkMode ? "hsl(var(--foreground))" : "hsl(var(--foreground))" const tooltipBorder = isDarkMode ? "hsl(var(--border))" : "hsl(var(--border))" return ( value.split(" ")[0], // Only show month and day legendTextStyle: { fill: textColor }, tickValues: data[0]?.data.map((d) => d.x), }} axisLeft={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "", legendOffset: -40, legendPosition: "middle", truncateTickAt: 0, legendTextStyle: { fill: textColor }, tickValues: [0, 45, 90, 135, 180], // Match the image's Y-axis ticks }} enableGridX={false} enableGridY={true} gridYValues={[0, 45, 90, 135, 180]} // Match the image's Y-axis grid lines colors={(d) => colors[d.id]} // Use custom colors pointSize={8} pointColor={{ theme: "background" }} pointBorderWidth={2} pointBorderColor={{ from: "serieColor" }} pointLabelYOffset={-12} enableArea={true} // Enable filled area areaOpacity={0.2} // Slightly reduced opacity for a softer look useMesh={true} legends={[ { anchor: "top-right", direction: "row", justify: false, translateX: 0, translateY: -20, itemsSpacing: 10, itemDirection: "left-to-right", itemWidth: 80, itemHeight: 20, itemOpacity: 0.75, symbolSize: 12, symbolShape: "circle", symbolBorderColor: "rgba(0, 0, 0, .5)", effects: [ { on: "hover", style: { itemBackground: "rgba(0, 0, 0, .03)", itemOpacity: 1, }, }, ], itemTextColor: textColor, }, ]} theme={{ axis: { domain: { line: { stroke: textColor, strokeWidth: 1, }, }, ticks: { line: { stroke: textColor, strokeWidth: 1, }, text: { fill: textColor, }, }, }, grid: { line: { stroke: gridColor, strokeWidth: 1, }, }, legends: { text: { fill: textColor, }, }, tooltip: { container: { background: tooltipBg, color: tooltipText, borderRadius: "0.5rem", borderColor: tooltipBorder, borderWidth: 1, }, }, }} /> ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; --primary: 262 83% 58%; /* A vibrant purple */ --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --ring: 262 83% 58%; /* Sidebar specific variables for light theme */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; /* Chart Colors (matching image) */ --chart-shopify: 120 80% 40%; /* Green */ --chart-amazon: 39 100% 50%; /* Orange */ --chart-walmart: 210 80% 50%; /* Blue */ --chart-ebay: 0 80% 50%; /* Red */ --chart-on-hold: 262 83% 58%; /* Purple (primary) */ --chart-allocation: 180 80% 50%; /* Cyan */ --chart-dc-transmission: 39 100% 50%; /* Orange */ --chart-insufficient-stock: 0 80% 50%; /* Red */ --chart-cancelled-allocations: 220 80% 50%; /* Royal Blue */ --chart-unfulfilled-items: 120 80% 40%; /* Green */ --chart-product-not-found: 30 80% 50%; /* Brownish-orange */ } .dark { --background: 240 10% 3.9%; /* Dark background */ --foreground: 210 40% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 217.9 10.6% 64.5%; --popover: 240 10% 3.9%; --popover-foreground: 210 40% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --card: 240 10% 3.9%; --card-foreground: 210 40% 98%; --primary: 262 83% 58%; /* Same vibrant purple */ --primary-foreground: 210 40% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 210 40% 98%; --accent: 240 3.7% 15.9%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --ring: 262 83% 58%; /* Sidebar specific variables for dark theme */ --sidebar-background: 240 5.9% 10%; /* Slightly darker than main background */ --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 0 0% 98%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; /* Chart Colors (matching image) */ --chart-shopify: 120 80% 40%; /* Green */ --chart-amazon: 39 100% 50%; /* Orange */ --chart-walmart: 210 80% 50%; /* Blue */ --chart-ebay: 0 80% 50%; /* Red */ --chart-on-hold: 262 83% 58%; /* Purple (primary) */ --chart-allocation: 180 80% 50%; /* Cyan */ --chart-dc-transmission: 39 100% 50%; /* Orange */ --chart-insufficient-stock: 0 80% 50%; /* Red */ --chart-cancelled-allocations: 220 80% 50%; /* Royal Blue */ --chart-unfulfilled-items: 120 80% 40%; /* Green */ --chart-product-not-found: 30 80% 50%; /* Brownish-orange */ } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/main-nav.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Bell, Search, Globe, User, Package, ChevronDown } from "lucide-react" // Added ChevronDown for dropdown import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ThemeToggle } from "@/components/theme-toggle" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" // Import DropdownMenu components export function MainNav() { const pathname = usePathname() const navItems = [ { name: "Dashboard", href: "/" }, { name: "Sales Orders", href: "/sales-orders" }, { name: "Purchase", href: "/purchase" }, { name: "Logistics", href: "/logistics" }, { name: "Inventory", href: "/inventory" }, { name: "Product", href: "/product" }, { name: "Events", href: "/events" }, { name: "Integration", href: "/integrations" }, // Updated link for Integrations page { name: "Automation", href: "/automation" }, { name: "POM", href: "/pom" }, ] const merchants = [ { id: "1", name: "Acme Corp" }, { id: "2", name: "Global Logistics Inc." }, { id: "3", name: "Fashion Hub" }, ] return (

{/* Logo Section */}

OMS Pro Order Management

{/* Merchant Dropdown */} {merchants.map((merchant) => ( {merchant.name} ))} Manage Merchants {/* Main Navigation Links */} {/* Right-aligned Icons */}

{/* Dark/Light Mode Toggle */}

) } [V0_FILE]typescriptreact:file="components/integration-item.tsx" isMerged="true" "use client" import Image from "next/image" import { CheckCircle, Trash2 } from "lucide-react" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Button } from "@/components/ui/button" interface IntegrationItemProps { id: string name: string type: string iconUrl: string isConnected: boolean onToggle: (id: string, isConnected: boolean) => void onDelete: (id: string) => void } export function IntegrationItem({ id, name, type, iconUrl, isConnected, onToggle, onDelete }: IntegrationItemProps) { return (

{name}

{type}

{isConnected ? ( Connected ) : ( Disconnected )} onToggle(id, checked)} aria-label={`Toggle ${name} connection`} />

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { SidebarProvider } from "@/components/ui/sidebar" import type React from "react" import { cookies } from "next/headers" import { ThemeProvider } from "next-themes" // Import ThemeProvider import { AppSidebar } from "@/components/app-sidebar" import { MainNav } from "@/components/main-nav" // Import MainNav import { SidebarTrigger } from "@/components/ui/sidebar" // Import SidebarTrigger import "./globals.css" // Ensure global styles are imported export default async function Layout({ children }: { children: React.ReactNode }) { const cookieStore = cookies() const defaultOpen = cookieStore.get("sidebar:state")?.value === "true" return ( {/* Removed the explicit whitespace {" "} */} {" "} {/* ThemeProvider wrapper */} {/* New top navigation */}

{/* Mobile sidebar trigger */}

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import dynamic from "next/dynamic" import { useState, useEffect } from "react" import { AlertTriangle, CloudOff, Hand, Package, Pause, Truck, XCircle, Warehouse, PackageX, ListChecks, ShoppingCart, } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AmazonShippingAlertsCard } from "@/components/amazon-shipping-alerts-card" // Dynamically import the charts component with SSR disabled const DashboardCharts = dynamic(() => import("@/components/dashboard-charts").then((mod) => mod.DashboardCharts), { ssr: false, loading: () =>

Loading Charts...

, // Add loading fallback }) // Mock data for demonstration, now structured by time dimension const omsMetricsByTime = { today: { receivedDocuments: 1234, transportedQuantity: 987, abnormalDocuments: 5, onHoldQuantity: 1, }, "7days": { receivedDocuments: 8765, transportedQuantity: 7234, abnormalDocuments: 32, onHoldQuantity: 10, }, "30days": { receivedDocuments: 35432, transportedQuantity: 28901, abnormalDocuments: 150, onHoldQuantity: 45, }, thisYear: { receivedDocuments: 456789, transportedQuantity: 387654, abnormalDocuments: 1234, onHoldQuantity: 567, }, } // Mock data for E-commerce Channel Distribution Trend (Line Chart) - Transformed for Nivo const rawEcommerceChannelTrendData = [ { date: "Jul 22", Shopify: 120, Amazon: 90, Walmart: 40, eBay: 30 }, { date: "Jul 23", Shopify: 135, Amazon: 92, Walmart: 42, eBay: 31 }, { date: "Jul 24", Shopify: 110, Amazon: 88, Walmart: 38, eBay: 29 }, { date: "Jul 25", Shopify: 140, Amazon: 95, Walmart: 45, eBay: 33 }, { date: "Jul 26", Shopify: 95, Amazon: 98, Walmart: 48, eBay: 35 }, { date: "Jul 27", Shopify: 105, Amazon: 100, Walmart: 50, eBay: 36 }, { date: "Jul 28", Shopify: 98, Amazon: 95, Walmart: 47, eBay: 34 }, ] // Transform data for Nivo Line Chart const ecommerceChannelTrendData = [ { id: "Shopify", data: rawEcommerceChannelTrendData.map((d) => ({ x: d.date, y: d.Shopify })), }, { id: "Amazon", data: rawEcommerceChannelTrendData.map((d) => ({ x: d.date, y: d.Amazon })), }, { id: "Walmart", data: rawEcommerceChannelTrendData.map((d) => ({ x: d.date, y: d.Walmart })), }, { id: "eBay", data: rawEcommerceChannelTrendData.map((d) => ({ x: d.date, y: d.eBay })), }, ] // Updated colors to match the image const ecommerceChannelColors = { Shopify: "hsl(var(--chart-shopify))", Amazon: "hsl(var(--chart-amazon))", Walmart: "hsl(var(--chart-walmart))", eBay: "hsl(var(--chart-ebay))", } const onHoldOrders = [ { id: "ORD001", reason: "Customer credit limit exceeded", status: "Pending Review" }, { id: "ORD005", reason: "Payment failed", status: "Awaiting Payment" }, { id: "ORD012", reason: "Address verification failed", status: "Pending Customer Contact" }, { id: "ORD020", reason: "Fraud suspicion", status: "Under Investigation" }, { id: "ORD021", reason: "Item out of stock", status: "Pending Restock" }, { id: "ORD022", reason: "Shipping address invalid", status: "Pending Customer Contact" }, { id: "ORD023", reason: "Large order review", status: "Pending Approval" }, { id: "ORD024", reason: "Payment gateway error", status: "Awaiting Payment" }, ] const allocationFailures = [ { id: "ORD002", reason: "Insufficient stock for SKU ABC-123", sku: "ABC-123" }, { id: "ORD007", reason: "Warehouse capacity exceeded", sku: "DEF-456" }, { id: "ORD015", reason: "Product not found in inventory", sku: "GHI-789" }, { id: "ORD016", reason: "Picking error", sku: "JKL-012" }, { id: "ORD017", reason: "System timeout", sku: "MNO-345" }, { id: "ORD018", reason: "Invalid location", sku: "PQR-678" }, ] const dcTransmissionFailures = [ { id: "ORD003", reason: "Network timeout during transmission", timestamp: "2025-07-28 10:30 AM" }, { id: "ORD010", reason: "Invalid data format received by DC", timestamp: "2025-07-28 09:15 AM" }, { id: "ORD018", reason: "DC system offline", timestamp: "2025-07-27 03:00 PM" }, { id: "ORD019", reason: "Authentication failure", timestamp: "2025-07-27 02:00 PM" }, { id: "ORD020", reason: "File transfer error", timestamp: "2025-07-26 11:00 AM" }, ] // Refined insufficientStockProducts to highlight critical stock const insufficientStockProducts = [ { name: "Wireless Mouse", sku: "WM-001", available: 5, required: 20, status: "Low Stock" }, { name: "Mechanical Keyboard", sku: "MK-005", available: 0, required: 10, status: "Out of Stock" }, { name: "USB-C Hub", sku: "UCH-010", available: 12, required: 15, status: "Low Stock" }, { name: "Gaming Headset", sku: "GH-003", available: 8, required: 8, status: "In Stock" }, { name: "Ergonomic Chair", sku: "EC-001", available: 0, required: 5, status: "Out of Stock" }, { name: "Monitor Stand", sku: "MS-001", available: 2, required: 10, status: "Low Stock" }, { name: "Webcam 1080p", sku: "WC-002", available: 3, required: 15, status: "Low Stock" }, ] // Filter for critical stock alerts (used in combined card) const stockOutageAlerts = insufficientStockProducts.filter( (product) => product.available === 0 || product.available < product.required / 2, ) const cancelledAllocations = [ { orderId: "ORD025", warehouse: "WH-A", reason: "Insufficient space", cancelledItems: ["SKU-X (2 units)", "SKu-Y (1 unit)"], }, { orderId: "ORD030", warehouse: "WH-B", reason: "Damaged goods in picking", cancelledItems: ["SKU-Z (5 units)"] }, { orderId: "ORD033", warehouse: "WH-C", reason: "Picking error", cancelledItems: ["SKU-A (1 unit)", "SKU-B (3 units)"], }, { orderId: "ORD034", warehouse: "WH-A", reason: "Customer cancellation", cancelledItems: ["SKU-D (1 unit)"], }, ] const unfulfilledItems = [ { orderId: "ORD001", item: "Product A", reason: "Out of stock", status: "Pending Restock" }, { orderId: "ORD005", item: "Product B", reason: "Quality check failed", status: "On Hold" }, { orderId: "ORD011", item: "Product C", reason: "Missing from shipment", status: "Investigating" }, { orderId: "ORD019", item: "Product D", reason: "Incorrect item picked", status: "Reshipment Required" }, { orderId: "ORD020", item: "Product E", reason: "Damaged in transit", status: "Refund Issued" }, ] // Data for Error Reason Analysis Chart (Pie Chart) - Updated to be more granular const errorReasonData = [ { name: "On Hold Orders", value: onHoldOrders.length, color: "hsl(var(--chart-on-hold))" }, { name: "DC Transmission Failures", value: dcTransmissionFailures.length, color: "hsl(var(--chart-dc-transmission))", }, { name: "Cancelled Allocations", value: cancelledAllocations.length, color: "hsl(var(--chart-cancelled-allocations))", }, { name: "Unfulfilled Items", value: unfulfilledItems.length, color: "hsl(var(--chart-unfulfilled-items))" }, { name: "商品不存在 (Product Not Found)", value: allocationFailures.filter((f) => f.reason.includes("Product not found")).length, color: "hsl(var(--chart-product-not-found))", // New color }, { name: "库存不足 (Insufficient Stock)", value: allocationFailures.filter((f) => f.reason.includes("Insufficient stock")).length + insufficientStockProducts.filter((p) => p.status === "Out of Stock" || p.status === "Low Stock").length, color: "hsl(var(--chart-insufficient-stock))", }, // Removed generic "Allocation Failures" as it's now broken down ] // New mock data for Purchase Forecast const purchaseForecastData = [ { productName: "Wireless Mouse", sku: "WM-001", predictedDemand30Days: 150, currentStock: 5, recommendedOrderQuantity: 145, }, { productName: "Mechanical Keyboard", sku: "MK-005", predictedDemand30Days: 80, currentStock: 0, recommendedOrderQuantity: 80, }, { productName: "USB-C Hub", sku: "UCH-010", predictedDemand30Days: 60, currentStock: 12, recommendedOrderQuantity: 48, }, { productName: "Gaming Headset", sku: "GH-003", predictedDemand30Days: 100, currentStock: 8, recommendedOrderQuantity: 92, }, { productName: "Ergonomic Chair", sku: "EC-001", predictedDemand30Days: 20, currentStock: 0, recommendedOrderQuantity: 20, }, { productName: "Webcam 1080p", sku: "WC-002", predictedDemand30Days: 40, currentStock: 35, recommendedOrderQuantity: 5, }, ] // Combined data for Inventory & Purchase Planning table const combinedInventoryData = purchaseForecastData.map((forecastItem) => { const stockInfo = insufficientStockProducts.find((stockItem) => stockItem.sku === forecastItem.sku) const stockStatus = stockInfo ? stockInfo.status : "Sufficient Stock" const actionNeeded = forecastItem.recommendedOrderQuantity > 0 ? "Reorder" : "Monitor" return { ...forecastItem, stockStatus, actionNeeded, } }) // Mock data for Amazon Shipping Alerts Card const amazonShippingAlertsData = { lateShipmentRate: { value: "2.8%", change: "0.5%", trend: "down", }, avgProcessingTime: { value: "10.5h", change: "1.2h", trend: "down", }, pendingItems: { total: 156, priority: 45, standard: 111, }, alerts: [ { id: "AMZ-2024-001", status: "High", shipDate: "Jan 29, 6:00 PM", items: "5 items (3 types)", location: "California, US", shippingType: "Prime 2-Day", timeRemaining: "2 hours remaining", progress: 75, badges: [ { label: "Payment Verified", variant: "default" }, { label: "Stock Reserved", variant: "default" }, { label: "Picking In Progress", variant: "default" }, ], }, // Add more mock alerts if needed ], } export default function OMSDashboard() { const [timeDimension, setTimeDimension] = useState<"today" | "7days" | "30days" | "thisYear">("today") const currentMetrics = omsMetricsByTime[timeDimension] const totalRecommendedOrderItems = combinedInventoryData.reduce((sum, item) => sum + item.recommendedOrderQuantity, 0) const productsNeedingReorder = combinedInventoryData.filter((item) => item.recommendedOrderQuantity > 0).length // State for "View All" functionality in tabs const [showAllOnHold, setShowAllOnHold] = useState(false) const [showAllAllocation, setShowAllAllocation] = useState(false) const [showAllDCTransmission, setShowAllDCTransmission] = useState(false) const [showAllCancelled, setShowAllCancelled] = useState(false) const [showAllUnfulfilled, setShowAllUnfulfilled] = useState(false) const displayedOnHold = showAllOnHold ? onHoldOrders : onHoldOrders.slice(0, 5) const displayedAllocation = showAllAllocation ? allocationFailures : allocationFailures.slice(0, 5) const displayedDCTransmission = showAllDCTransmission ? dcTransmissionFailures : dcTransmissionFailures.slice(0, 5) const displayedCancelled = showAllCancelled ? cancelledAllocations : cancelledAllocations.slice(0, 5) const displayedUnfulfilled = showAllUnfulfilled ? unfulfilledItems : unfulfilledItems.slice(0, 5) // New state to control chart rendering (still useful for Nivo in some edge cases) const [renderCharts, setRenderCharts] = useState(false) useEffect(() => { // Set a timeout to render charts after a short delay const timer = setTimeout(() => { setRenderCharts(true) }, 100) // 100ms delay return () => clearTimeout(timer) // Clean up the timer }, []) return (

OMS Dashboard

{/* Added title for dashboard page */} {/* Time Dimension Selector */}

value && setTimeDimension(value)} className="bg-card rounded-md p-1" > Today 7 Days 30 Days This Year

{/* Overview Metrics */}

OMS Received Documents

{currentMetrics.receivedDocuments.toLocaleString()}

Total documents received

Transported Quantity

{currentMetrics.transportedQuantity.toLocaleString()}

Items shipped successfully

Abnormal Documents

{currentMetrics.abnormalDocuments}

Documents requiring attention

On Hold Quantity

{currentMetrics.onHoldQuantity}

Items currently on hold

{/* Amazon Shipping Alerts Card - New component */} {/* Charts in one row - Conditionally rendered */} {renderCharts ? ( ) : (

Loading Charts...

)} {/* Detailed Alerts & Issues (Tabs) - Placed below charts */} Detailed Alerts & Issues On Hold ({onHoldOrders.length}) Allocation ({allocationFailures.length}) DC Transmission ({dcTransmissionFailures.length}) Cancelled ({cancelledAllocations.length}) Unfulfilled ({unfulfilledItems.length}) {/* On Hold Orders Tab */} Order ID Reason Status {displayedOnHold.map((order, index) => ( {order.id} {order.reason} {order.status} ))}

{onHoldOrders.length > 5 && (

)} {/* Allocation Failures Tab */} Order ID SKU Reason {displayedAllocation.map((failure, index) => ( {failure.id} {failure.sku} {failure.reason} ))}

{allocationFailures.length > 5 && (

)} {/* DC Transmission Failures Tab */} Order ID Reason Timestamp {displayedDCTransmission.map((failure, index) => ( {failure.id} {failure.reason} {failure.timestamp} ))}

{dcTransmissionFailures.length > 5 && (

)} {/* Allocated Orders Cancelled by Warehouse Tab */} Order ID Warehouse Reason Cancelled Items {displayedCancelled.map((cancellation, index) => ( {cancellation.orderId} {cancellation.warehouse} {cancellation.reason} {cancellation.cancelledItems.join(", ")} ))}

{cancelledAllocations.length > 5 && (

)} {/* Unfulfilled Items Tab */} Order ID Item Reason Status {displayedUnfulfilled.map((item, index) => ( {item.orderId} {item.item} {item.reason} {item.status} ))}

{unfulfilledItems.length > 5 && (

)} {/* Combined Inventory & Purchase Planning - Moved to bottom */} Inventory & Purchase Planning

{totalRecommendedOrderItems.toLocaleString()}

Total Recommended Order Items (30 Days)

{productsNeedingReorder}

Products Needing Reorder

Detailed Recommendations:

Product Name SKU Predicted Demand (30 Days) Current Stock Stock Status Recommended Order Quantity Action {combinedInventoryData.map((item, index) => ( {item.productName} {item.sku} {item.predictedDemand30Days} {item.currentStock} {item.stockStatus} 0 ? "text-green-500 font-bold" : ""}> {item.recommendedOrderQuantity} {item.actionNeeded} ))}

) } [V0_FILE]typescriptreact:file="app/integrations/add/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/integration-connection-details-tab.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function IntegrationConnectionDetailsTab() { return ( Connection Details View and manage the technical details of your integration connection.

Connection details will be displayed here.

{/* Add actual connection details like API keys, endpoints, etc. */} ) } [V0_FILE]typescriptreact:file="components/integration-settings-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { Button } from "@/components/ui/button" import { Edit } from "lucide-react" interface IntegrationSettingsTabProps { integrationId: string } export function IntegrationSettingsTab({ integrationId }: IntegrationSettingsTabProps) { // Mock state for settings const [ordersFlow, setOrdersFlow] = useState("pull") // "disabled", "pull", "push", "pull-push" const [productsFlow, setProductsFlow] = useState("disabled") const [inventoryFlow, setInventoryFlow] = useState("pull") const [fulfillmentsFlow, setFulfillmentsFlow] = useState("pull-push") return ( Settings Configure the data flow for this integration. {/* Orders Section */}

Orders

Disabled

Pull orders from Shopify

Push orders to Shopify

Push and pull orders

Last run: Feb 27, 2023 8:20 AM. Next in Progress

{/* Products Section */}

Products

Disabled

Pull products from Shopify to Pipe17

Push products from Pipe17 to Shopify

Last run: 2/22/2023 1:00 PM. Next in Progress

{/* Inventory Section */}

Inventory

Disabled

Pull inventory information from Shopify to Pipe17

Push inventory information from Pipe17 to Shopify

{/* Fulfillments Section */}

Fulfillments

Disabled

Pull fulfillments from Shopify

Push fulfillments to Shopify

Push and pull fulfillments

) } [V0_FILE]typescriptreact:file="components/mapping-row.tsx" isMerged="true" "use client" import { ChevronDown, Trash2, Settings, ArrowRight } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" interface MappingRowProps { id: string fromField: string toField: string type: "Baseline" | "Custom" disabled?: boolean } export function MappingRow({ id, fromField, toField, type, disabled }: MappingRowProps) { return (

{type} {fromField}

{toField} {/* Placeholder for dropdown */}

Set advanced options {/* Placeholder for advanced options content */}

Advanced options for {fromField} to {toField} mapping.

) } [V0_FILE]typescriptreact:file="components/integration-mappings-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { ChevronDown, Plus, TestTube } from "lucide-react" import { MappingRow } from "@/components/mapping-row" // Import the new component interface IntegrationMappingsTabProps { integrationId: string } interface Mapping { id: string fromField: string toField: string type: "Baseline" | "Custom" disabled?: boolean } export function IntegrationMappingsTab({ integrationId }: IntegrationMappingsTabProps) { const [mappings, setMappings] = useState([ { id: "1", fromField: "shipmentId", toField: "Shipment Id", type: "Baseline" }, { id: "2", fromField: "self-fulfillmentId", toField: "External Fulfillment Id", type: "Baseline" }, { id: "3", fromField: "Shipment Tracking Numbers", toField: "Tracking Number", type: "Baseline" }, { id: "4", fromField: "Shipment Tracking URLs", toField: "Tracking URL", type: "Baseline" }, { id: "5", fromField: "created_at", toField: "Actual Ship Date", type: "Baseline" }, { id: "6", fromField: "tracking_company_name", toField: "Shipping Carrier", type: "Baseline" }, { id: "7", fromField: "custom_field_1", toField: "Pipe17 Custom Field A", type: "Custom", disabled: true }, ]) const [filterMappingType, setFilterMappingType] = useState<"All" | "Baseline" | "Custom">("All") const [includeDisabled, setIncludeDisabled] = useState(false) const filteredMappings = mappings.filter((mapping) => { const typeMatch = filterMappingType === "All" || mapping.type === filterMappingType const disabledMatch = includeDisabled || !mapping.disabled return typeMatch && disabledMatch }) const handleAddMapping = () => { // Simulate adding a new mapping const newId = (mappings.length + 1).toString() setMappings([ ...mappings, { id: newId, fromField: `New Field ${newId}`, toField: `Pipe17 New Field ${newId}`, type: "Custom", disabled: false, }, ]) } return ( Entity Mappings

Configure how data fields are mapped between Shopify and Pipe17.

setFilterMappingType("All")}>All mappings setFilterMappingType("Baseline")}>Baseline mappings setFilterMappingType("Custom")}>Custom mappings

setIncludeDisabled(!!checked)} /> Include disabled

{/* From Shopify / To Pipe17 labels */}

From Shopify To Pipe17

{filteredMappings.map((mapping) => ( ))}

) } [V0_FILE]typescriptreact:file="components/integration-actions-tab.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" export function IntegrationActionsTab() { return ( Integration Actions Perform actions related to this integration.

More actions will be available here.

) } [V0_FILE]typescriptreact:file="components/integration-details-tabs.tsx" isMerged="true" "use client" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { IntegrationConnectionDetailsTab } from "./integration-connection-details-tab" import { IntegrationSettingsTab } from "./integration-settings-tab" import { IntegrationMappingsTab } from "./integration-mappings-tab" import { IntegrationActionsTab } from "./integration-actions-tab" interface IntegrationDetailsTabsProps { integrationId: string } export function IntegrationDetailsTabs({ integrationId }: IntegrationDetailsTabsProps) { return ( Connection Details Settings Mappings Integration Actions ) } [V0_FILE]typescriptreact:file="app/integrations/[id]/page.tsx" isMerged="true" "use client" import { useParams } from "next/navigation" import Image from "next/image" import { CheckCircle, MoreHorizontal } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { IntegrationDetailsTabs } from "@/components/integration-details-tabs" interface IntegrationDetail { id: string name: string platform: string version: string iconUrl: string isConnected: boolean } // Mock data for a specific integration const mockIntegrationDetails: Record = { shopify: { id: "shopify", name: "teser-eddie", platform: "Shopify", version: "3.6.7", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: true, }, amazon: { id: "amazon", name: "Amazon Seller Central", platform: "Amazon", version: "1.2.0", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: true, }, unis: { id: "unis", name: "Joliet Logistics", platform: "Unis", version: "2.0.1", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: false, }, } export default function IntegrationDetailPage() { const params = useParams() const integrationId = params.id as string const integration = mockIntegrationDetails[integrationId] || { id: integrationId, name: "Unknown Integration", platform: "N/A", version: "N/A", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: false, } return (

{/* Header Section */}

{integration.name} {integration.isConnected && ( Connected )}

{integration.platform}, version {integration.version}

Edit Integration Disconnect Delete

Learn about this integration

{/* Tabs for Connection Details, Settings, Mappings, Actions */}

) } [V0_FILE]typescriptreact:file="app/integrations/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { HelpCircle, ChevronDown, ArrowUpDown, Filter } from "lucide-react" import Link from "next/link" // Import Link import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { IntegrationItem } from "@/components/integration-item" // Import the new component interface Integration { id: string name: string type: string iconUrl: string isConnected: boolean createdAt: string // Added for sorting } export default function IntegrationsPage() { const [integrations, setIntegrations] = useState([ { id: "shopify", // Changed ID to match mockIntegrationDetails name: "teser-eddie", type: "Ecommerce", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: true, createdAt: "2023-01-15T10:00:00Z", }, { id: "unis", // Changed ID to match mockIntegrationDetails name: "Joliet", type: "Logistics", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: true, createdAt: "2023-02-20T11:30:00Z", }, { id: "fontana", // New ID name: "Fontana", type: "Logistics", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: true, createdAt: "2023-03-01T14:00:00Z", }, { id: "valley-view", // New ID name: "Valley View", type: "Logistics", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: true, createdAt: "2023-04-10T09:00:00Z", }, { id: "new-retailer", name: "New Retailer", type: "Ecommerce", iconUrl: "/placeholder.svg?height=40&width=40", isConnected: false, createdAt: "2023-05-05T16:00:00Z", }, ]) const [filterType, setFilterType] = useState("All") const [filterStatus, setFilterStatus] = useState("All") const [sortBy, setSortBy] = useState<"createdAt" | "name">("createdAt") const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc") // Default to desc for "Created At" const filteredAndSortedIntegrations = integrations .filter((integration) => { const typeMatch = filterType === "All" || integration.type === filterType const statusMatch = filterStatus === "All" || (filterStatus === "Connected" && integration.isConnected) || (filterStatus === "Disconnected" && !integration.isConnected) return typeMatch && statusMatch }) .sort((a, b) => { if (sortBy === "createdAt") { return sortOrder === "asc" ? new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() : new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() } else { return sortOrder === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name) } }) const handleToggleConnection = (id: string, isConnected: boolean) => { setIntegrations((prev) => prev.map((integration) => (integration.id === id ? { ...integration, isConnected } : integration)), ) } const handleDeleteIntegration = (id: string) => { setIntegrations((prev) => prev.filter((integration) => integration.id !== id)) } const toggleSortOrder = () => { setSortOrder((prev) => (prev === "asc" ? "desc" : "asc")) } return (

Integrations

{/* Type Filter */} setFilterType("All")}>All setFilterType("Ecommerce")}>Ecommerce setFilterType("Logistics")}>Logistics {/* Status Filter */} setFilterStatus("All")}>All setFilterStatus("Connected")}>Connected setFilterStatus("Disconnected")}>Disconnected

{/* Sort By */}

setSortBy("createdAt")}>Created At setSortBy("name")}>Name

{filteredAndSortedIntegrations.map((integration) => ( ))}

) } [V0_FILE]typescriptreact:file="components/connect-integration-dialog.tsx" "use client" import Image from "next/image" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" interface ConnectIntegrationDialogProps { isOpen: boolean onClose: () => void platformName: string iconUrl: string connectionInstructions: string[] onConnect: () => void onAddWithoutCredentials?: () => void } export function ConnectIntegrationDialog({ isOpen, onClose, platformName, iconUrl, connectionInstructions, onConnect, onAddWithoutCredentials, }: ConnectIntegrationDialogProps) { return ( ) } [V0_FILE]typescriptreact:file="components/integration-card.tsx" isEdit="true" "use client" import Image from "next/image" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" interface IntegrationCardProps { id: string name: string description: string iconUrl: string // Changed onConnect to accept the full platform object onConnect: (platform: { id: string; name: string; iconUrl: string; type: string }) => void type: string // Added type to pass to dialog } export function IntegrationCard({ id, name, description, iconUrl, onConnect, type }: IntegrationCardProps) { return (

{name} {description}

) } [V0_FILE]typescriptreact:file="app/integrations/add/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Search, ChevronDown } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { IntegrationCard } from "@/components/integration-card" import { useRouter } from "next/navigation" import { ConnectIntegrationDialog } from "@/components/connect-integration-dialog" // Import the new dialog interface IntegrationPlatform { id: string name: string description: string iconUrl: string type: string // e.g., "Ecommerce", "Logistics", "Warehouse" connectionInstructions?: string[] // Optional instructions for the dialog } const allPlatforms: IntegrationPlatform[] = [ { id: "shopify", name: "Shopify", description: "Sync Shopify Orders, Products, Inventory, Fulfillments, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Log in to your Shopify account.", "Navigate to 'Apps' and search for 'Pipe17'.", "Install the Pipe17 app and follow the on-screen prompts to authorize.", ], }, { id: "amazon-mcf", name: "Amazon MCF", description: "Sync Shipping Requests, Products, Inventory, Transfer Orders and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Logistics", connectionInstructions: [ "If you have access to multiple Seller Central accounts, make sure you are logged into the correct one. Click the 'Connect' button, and if prompted, log into the Amazon Seller Central account you want to connect.", "A Seller Central window will open in your browser, prompting you to Authorize Pipe17. Click 'Confirm' to give Pipe17 the requested Amazon Seller Central Account permissions.", ], }, { id: "amazon-seller-central", name: "Amazon Seller Central", description: "Pull orders and listings, send back inventory and fulfillments", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Log in to your Amazon Seller Central account.", "Go to 'Partner Network' -> 'Manage Your Apps'.", "Search for 'Pipe17' and authorize the connection.", ], }, { id: "bigcommerce", name: "BigCommerce", description: "Sync BigCommerce Orders, Inventory, Products, Fulfillments, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Log in to your BigCommerce store.", "Go to 'Apps' -> 'Marketplace' and search for 'Pipe17'.", "Install the app and grant the necessary permissions.", ], }, { id: "extensiv", name: "Extensiv (formerly 3PL Central)", description: "Sync Extensiv Products, Inventory, Shipping Requests, Fulfillments, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Warehouse", connectionInstructions: [ "Contact your Extensiv account manager to enable API access for Pipe17.", "Provide the API credentials (API Key, Secret) in the next step.", ], }, { id: "ebay", name: "eBay", description: "Sync eBay Orders, Products, Inventory, Fulfillments and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Log in to your eBay account.", "Go to 'Account settings' -> 'Site preferences' -> 'Third-party authorizations'.", "Click 'Grant account access' and follow the instructions for Pipe17.", ], }, { id: "woocommerce", name: "WooCommerce", description: "Sync WooCommerce Orders, Products and Fulfillments via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Ensure your WooCommerce store has the REST API enabled.", "Generate API keys (Consumer Key and Consumer Secret) in WooCommerce settings.", "Enter these keys in the next step to connect.", ], }, { id: "wayfair", name: "Wayfair", description: "Sync Wayfair Orders, Products, Shipping Requests, Inventory, and Fulfillments via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Contact your Wayfair account representative to enable API access.", "Obtain the necessary API credentials from Wayfair.", "Enter the credentials in the Pipe17 connection form.", ], }, { id: "walmart-marketplace", name: "Walmart Marketplace", description: "Sync Walmart Orders, Products, Inventory and Fulfillments via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Log in to your Walmart Seller Center account.", "Go to 'API' -> 'Consumer IDs & Private Keys'.", "Generate new API keys and copy them for Pipe17 integration.", ], }, { id: "acumatica", name: "Acumatica", description: "Sync Acumatica Orders, Inventory, Products, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "ERP", connectionInstructions: [ "Ensure your Acumatica instance is accessible via API.", "Create a dedicated API user in Acumatica with appropriate permissions.", "Provide the Acumatica URL, Company, Username, and Password.", ], }, { id: "barrett", name: "Barrett", description: "Sync Barrett Shipping Requests, Inventory, Fulfillments, Arrivals, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Logistics", connectionInstructions: [ "Contact Barrett support to request API credentials for Pipe17.", "Once received, enter the API Key and Secret in the connection form.", ], }, { id: "boxc", name: "BoxC", description: "Sync BoxC Products, Inventory, Fulfillments, Shipping Requests, Arrivals, and Receipts via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Logistics", connectionInstructions: [ "Obtain your BoxC API Key and Secret from your BoxC account dashboard.", "Enter these credentials in the Pipe17 connection setup.", ], }, { id: "brandboom", name: "Brandboom", description: "Sync Brandboom Orders, Inventory, Products, and Fulfillments via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Log in to Brandboom and go to 'Settings' -> 'Integrations'.", "Find Pipe17 and follow the authorization steps.", ], }, { id: "chord", name: "Chord", description: "Easily connect Chord's headless commerce platform to ERPs and Fulfillments, with rich Order and Inventory Management capabilities.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Generate an API token from your Chord dashboard.", "Provide the API token and your Chord store URL.", ], }, { id: "cin7-omni", name: "Cin7 Omni", description: "Cin7 connector", iconUrl: "/placeholder.svg?height=48&width=48", type: "ERP", connectionInstructions: [ "In Cin7 Omni, go to 'Settings' -> 'API'.", "Generate a new API Key and API Username.", "Enter these details in Pipe17 to establish the connection.", ], }, { id: "fabric", name: "Fabric", description: "Sync Fabric Orders, Products, Inventory, and Fulfillments via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "Obtain your Fabric API credentials from your Fabric account.", "Input the API Key and Secret into the Pipe17 connection form.", ], }, { id: "katana", name: "Katana", description: "Sync Katana Orders, Products, and Inventory via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Manufacturing", connectionInstructions: [ "In Katana, go to 'Settings' -> 'Integrations'.", "Find Pipe17 and authorize the connection.", ], }, { id: "lightspped", name: "Lightspeed", description: "Lightspeed connector", iconUrl: "/placeholder.svg?height=48&width=48", type: "POS", connectionInstructions: [ "Log in to your Lightspeed Retail account.", "Go to 'Settings' -> 'API Applications'.", "Create a new API application for Pipe17 and copy the API Key and Secret.", ], }, { id: "magento", name: "Magento", description: "Sync Magento Orders, Products, Inventory, and Fulfillments via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Ecommerce", connectionInstructions: [ "In Magento, create a new integration user with API access.", "Generate OAuth credentials (Consumer Key, Consumer Secret, Access Token, Access Token Secret).", "Provide these credentials and your Magento store URL.", ], }, { id: "shiphero", name: "ShipHero", description: "Sync ShipHero Products, Shipping Requests, Inventory, Fulfillments, Arrivals, Receipts, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Warehouse", connectionInstructions: [ "Log in to your ShipHero account.", "Go to 'Integrations' -> 'API'.", "Generate an API token and enter it in Pipe17.", ], }, { id: "skubana", name: "Extensiv Order Manager (formerly Skubana)", description: "Sync Extensiv Order Manager Products, Inventory, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "OMS", connectionInstructions: [ "In Extensiv Order Manager, go to 'Settings' -> 'API'.", "Generate your API Key and Secret.", "Enter these credentials in Pipe17.", ], }, { id: "square", name: "Square", description: "Sync Square Orders, Products, Inventory, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "POS", connectionInstructions: [ "Log in to your Square Developer Dashboard.", "Create a new application and obtain your Application ID and Access Token.", "Provide these details to Pipe17.", ], }, { id: "vend", name: "Vend", description: "Sync Vend Orders, Products, Inventory, Arrivals, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "POS", connectionInstructions: [ "In Vend, go to 'Setup' -> 'Add-ons'.", "Find Pipe17 and click 'Add to Vend'.", "Follow the prompts to authorize the connection.", ], }, { id: "veracore", name: "VeraCore", description: "Sync VeraCore Products, Shipping Requests, Inventory, Fulfillments, Arrivals, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Warehouse", connectionInstructions: [ "Contact VeraCore support to enable API access for Pipe17.", "Obtain the necessary API credentials (Client ID, Client Secret).", "Enter these credentials in Pipe17.", ], }, { id: "ware2go", name: "Ware2Go", description: "Sync Ware2Go Products, Inventory, Fulfillments, Shipping Requests, Arrivals, and Locations via Pipe17.", iconUrl: "/placeholder.svg?height=48&width=48", type: "Warehouse", connectionInstructions: [ "Log in to your Ware2Go portal.", "Go to 'Integrations' and generate an API Key.", "Provide this API Key to Pipe17 for connection.", ], }, ] export default function AddIntegrationPage() { const router = useRouter() const [searchTerm, setSearchTerm] = useState("") const [connectorType, setConnectorType] = useState("All") const [compactView, setCompactView] = useState(false) // Not implemented visually, but kept for future const [isDialogOpen, setIsDialogOpen] = useState(false) const [selectedPlatform, setSelectedPlatform] = useState(null) const filteredPlatforms = allPlatforms.filter((platform) => { const matchesSearch = platform.name.toLowerCase().includes(searchTerm.toLowerCase()) || platform.description.toLowerCase().includes(searchTerm.toLowerCase()) const matchesType = connectorType === "All" || platform.type === connectorType return matchesSearch && matchesType }) const handleConnectClick = (platform: { id: string; name: string; iconUrl: string; type: string }) => { const fullPlatform = allPlatforms.find((p) => p.id === platform.id) || platform setSelectedPlatform(fullPlatform as IntegrationPlatform) setIsDialogOpen(true) } const handleDialogConnect = () => { if (selectedPlatform) { router.push(`/integrations/${selectedPlatform.id}`) setIsDialogOpen(false) } } const handleAddWithoutCredentials = () => { console.log("Adding without credentials for:", selectedPlatform?.name) setIsDialogOpen(false) // Optionally navigate or show a different message } const uniqueConnectorTypes = ["All", ...Array.from(new Set(allPlatforms.map((p) => p.type)))].sort() return (

Add Integration

setSearchTerm(e.target.value)} />

{uniqueConnectorTypes.map((type) => ( setConnectorType(type)}> {type} ))} {/* Compact View Toggle - Placeholder for future implementation */} {/* */}

{filteredPlatforms.map((platform) => ( ))}

{selectedPlatform && ( setIsDialogOpen(false)} platformName={selectedPlatform.name} iconUrl={selectedPlatform.iconUrl} connectionInstructions={ selectedPlatform.connectionInstructions || ["Follow the instructions to connect this platform."] } onConnect={handleDialogConnect} onAddWithoutCredentials={handleAddWithoutCredentials} /> )}

) }