[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Sidebar } from "@/components/sidebar" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Inventory Management System", description: "Smart inventory management with demand prediction and automated replenishment", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, 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")], } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/sidebar.tsx" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { BarChart3, Box, Home, Package, Settings, ShoppingCart, TrendingUp } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ThemeToggle } from "@/components/theme-toggle" const routes = [ { name: "Dashboard", path: "/", icon: Home, }, { name: "Inventory", path: "/inventory", icon: Package, }, { name: "Sales Analysis", path: "/sales", icon: BarChart3, }, { name: "Demand Forecast", path: "/forecast", icon: TrendingUp, }, { name: "Replenishment", path: "/replenishment", icon: ShoppingCart, }, { name: "Settings", path: "/settings", icon: Settings, }, ] export function Sidebar() { const pathname = usePathname() return (

Inventory Manager

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "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="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { ArrowDown, ArrowUp, BarChart3, Package, ShoppingCart, TrendingUp } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" // Sample data for charts const salesData = [ { month: "Jan", sales: 4000, target: 4500 }, { month: "Feb", sales: 3000, target: 3500 }, { month: "Mar", sales: 5000, target: 4500 }, { month: "Apr", sales: 2780, target: 3000 }, { month: "May", sales: 1890, target: 2000 }, { month: "Jun", sales: 2390, target: 2200 }, { month: "Jul", sales: 3490, target: 3000 }, { month: "Aug", sales: 4000, target: 3800 }, { month: "Sep", sales: 2780, target: 3000 }, { month: "Oct", sales: 1890, target: 2000 }, { month: "Nov", sales: 2390, target: 2200 }, { month: "Dec", sales: 3490, target: 3000 }, ] const inventoryData = [ { category: "Electronics", stock: 120, reorderPoint: 30 }, { category: "Mechanical", stock: 80, reorderPoint: 25 }, { category: "Electrical", stock: 40, reorderPoint: 15 }, { category: "Hydraulic", stock: 30, reorderPoint: 10 }, { category: "Pneumatic", stock: 50, reorderPoint: 20 }, ] const topSellingItems = [ { name: "Bearing Assembly", sales: 245, inventory: 120 }, { name: "Control Module", sales: 190, inventory: 85 }, { name: "Hydraulic Pump", sales: 140, inventory: 32 }, { name: "Filter Element", sales: 120, inventory: 78 }, { name: "Sensor Kit", sales: 95, inventory: 45 }, ] export default function Dashboard() { const [timeRange, setTimeRange] = useState("monthly") return (

Dashboard

Weekly Monthly Yearly

Total Inventory Value

$245,670

+2.5% {" "} from last month

Monthly Sales

$34,890

-4.1% {" "} from last month

Stock Turnover Rate

3.2

+0.3 {" "} from last month

Pending Orders

-3 {" "} from last week

Sales vs Target Monthly sales performance compared to targets Inventory Levels Current stock levels vs reorder points by category

Top Selling Items Best performing products by sales volume

{topSellingItems.map((item, index) => ( ))}

Item Name	Sales	Current Inventory	Status
{item.name}	{item.sales}	{item.inventory}	50 ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" : item.inventory > 20 ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200" : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200" }`} > {item.inventory > 50 ? "Healthy" : item.inventory > 20 ? "Warning" : "Low"}

) } [V0_FILE]typescriptreact:file="app/inventory/page.tsx" "use client" import { useState } from "react" import { Download, Package, Plus, Search, SlidersHorizontal } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Badge } from "@/components/ui/badge" // Sample inventory data const inventoryItems = [ { id: "INV001", name: "Bearing Assembly", category: "Mechanical", sku: "BA-2023-001", quantity: 120, reorderPoint: 30, supplier: "BearingTech Inc.", lastOrdered: "2023-12-15", status: "In Stock", }, { id: "INV002", name: "Control Module", category: "Electronics", sku: "CM-2023-045", quantity: 85, reorderPoint: 25, supplier: "ElectroSystems Ltd.", lastOrdered: "2023-11-20", status: "In Stock", }, { id: "INV003", name: "Hydraulic Pump", category: "Hydraulic", sku: "HP-2023-012", quantity: 32, reorderPoint: 20, supplier: "FluidPower Solutions", lastOrdered: "2024-01-05", status: "Low Stock", }, { id: "INV004", name: "Filter Element", category: "Consumables", sku: "FE-2023-078", quantity: 78, reorderPoint: 50, supplier: "FilterPro Inc.", lastOrdered: "2023-10-30", status: "In Stock", }, { id: "INV005", name: "Sensor Kit", category: "Electronics", sku: "SK-2023-034", quantity: 45, reorderPoint: 15, supplier: "SensorTech Systems", lastOrdered: "2023-12-10", status: "In Stock", }, { id: "INV006", name: "Gasket Set", category: "Consumables", sku: "GS-2023-056", quantity: 12, reorderPoint: 25, supplier: "SealMaster Co.", lastOrdered: "2023-11-15", status: "Low Stock", }, { id: "INV007", name: "Drive Belt", category: "Mechanical", sku: "DB-2023-023", quantity: 0, reorderPoint: 10, supplier: "BeltWorks Ltd.", lastOrdered: "2023-09-20", status: "Out of Stock", }, { id: "INV008", name: "Circuit Board", category: "Electronics", sku: "CB-2023-067", quantity: 18, reorderPoint: 10, supplier: "CircuitTech Inc.", lastOrdered: "2024-01-10", status: "In Stock", }, { id: "INV009", name: "Valve Assembly", category: "Hydraulic", sku: "VA-2023-089", quantity: 5, reorderPoint: 8, supplier: "ValvePro Systems", lastOrdered: "2023-12-05", status: "Low Stock", }, { id: "INV010", name: "Motor Controller", category: "Electronics", sku: "MC-2023-012", quantity: 25, reorderPoint: 10, supplier: "MotorTech Solutions", lastOrdered: "2023-11-25", status: "In Stock", }, ] export default function InventoryPage() { const [searchTerm, setSearchTerm] = useState("") const [categoryFilter, setCategoryFilter] = useState("all") const [statusFilter, setStatusFilter] = useState("all") // Filter inventory items based on search term and filters const filteredItems = inventoryItems.filter((item) => { const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.sku.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = categoryFilter === "all" || item.category === categoryFilter const matchesStatus = statusFilter === "all" || item.status === statusFilter return matchesSearch && matchesCategory && matchesStatus }) // Get unique categories for filter dropdown const categories = ["all", ...new Set(inventoryItems.map((item) => item.category))] const statuses = ["all", ...new Set(inventoryItems.map((item) => item.status))] return (

Inventory Management

Total Items

{inventoryItems.length}

Across {categories.length - 1} categories

Low Stock Items

{inventoryItems.filter((item) => item.status === "Low Stock").length}

Items below reorder point

Out of Stock

{inventoryItems.filter((item) => item.status === "Out of Stock").length}

Requires immediate attention

setSearchTerm(e.target.value)} />

Advanced Filters Configure advanced filtering options for inventory items.

Supplier

Stock Level

Last Ordered

Item Name SKU Category Quantity Reorder Point Supplier Last Ordered Status {filteredItems.map((item) => ( {item.name} {item.sku} {item.category} {item.quantity} {item.reorderPoint} {item.supplier} {item.lastOrdered} {item.status} ))}

1 2 3

) } [V0_FILE]typescriptreact:file="app/inventory/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/sales/page.tsx" "use client" import { useState } from "react" import { Calendar, ChevronDown, Download, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Sample sales data const monthlySalesData = [ { month: "Jan", sales: 4000, previousYear: 3500 }, { month: "Feb", sales: 3000, previousYear: 2800 }, { month: "Mar", sales: 5000, previousYear: 4200 }, { month: "Apr", sales: 2780, previousYear: 3000 }, { month: "May", sales: 1890, previousYear: 2100 }, { month: "Jun", sales: 2390, previousYear: 2000 }, { month: "Jul", sales: 3490, previousYear: 3200 }, { month: "Aug", sales: 4000, previousYear: 3800 }, { month: "Sep", sales: 2780, previousYear: 2500 }, { month: "Oct", sales: 1890, previousYear: 2200 }, { month: "Nov", sales: 2390, previousYear: 2100 }, { month: "Dec", sales: 3490, previousYear: 3300 }, ] const categorySalesData = [ { name: "Electronics", value: 35 }, { name: "Mechanical", value: 25 }, { name: "Hydraulic", value: 15 }, { name: "Electrical", value: 10 }, { name: "Pneumatic", value: 15 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"] const recentSalesData = [ { id: "ORD001", customer: "ABC Manufacturing", date: "2024-02-15", items: 12, total: 4580.5, status: "Completed", }, { id: "ORD002", customer: "XYZ Industries", date: "2024-02-14", items: 8, total: 2340.75, status: "Completed", }, { id: "ORD003", customer: "Global Mechanics Ltd.", date: "2024-02-13", items: 15, total: 6780.25, status: "Completed", }, { id: "ORD004", customer: "Precision Engineering", date: "2024-02-12", items: 5, total: 1250.0, status: "Completed", }, { id: "ORD005", customer: "TechSolutions Inc.", date: "2024-02-10", items: 20, total: 8950.75, status: "Completed", }, ] export default function SalesAnalysisPage() { const [timeRange, setTimeRange] = useState("monthly") const [searchTerm, setSearchTerm] = useState("") return (

Sales Analysis

Select date range

From

Weekly Monthly Yearly Weekly Sales Performance Sales data for the current week compared to previous week Monthly Sales Performance Sales data for the current year compared to previous year Yearly Sales Performance Annual sales data for the past 5 years

Sales by Category Distribution of sales across product categories `${name} ${(percent * 100).toFixed(0)}%`} > {categorySalesData.map((entry, index) => ( ))} Top Customers Customers with highest purchase volume

Recent Sales Latest completed sales transactions

setSearchTerm(e.target.value)} />

Order ID Customer Date Items Total Status {recentSalesData .filter( (order) => order.customer.toLowerCase().includes(searchTerm.toLowerCase()) || order.id.toLowerCase().includes(searchTerm.toLowerCase()), ) .map((order) => ( {order.id} {order.customer} {order.date} {order.items} ${order.total.toFixed(2)} {order.status} ))}

) } [V0_FILE]typescriptreact:file="app/sales/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/forecast/page.tsx" "use client" import { useState } from "react" import { Calendar, ChevronDown, Download, LineChartIcon, RefreshCw, Settings, TrendingUp } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" // Sample forecast data const forecastData = [ { month: "Jan", actual: 4000, forecast: 4200, lower: 3800, upper: 4600 }, { month: "Feb", actual: 3000, forecast: 3200, lower: 2800, upper: 3600 }, { month: "Mar", actual: 5000, forecast: 4800, lower: 4400, upper: 5200 }, { month: "Apr", actual: 2780, forecast: 3000, lower: 2600, upper: 3400 }, { month: "May", actual: 1890, forecast: 2100, lower: 1700, upper: 2500 }, { month: "Jun", actual: 2390, forecast: 2500, lower: 2100, upper: 2900 }, { month: "Jul", actual: null, forecast: 3200, lower: 2800, upper: 3600 }, { month: "Aug", actual: null, forecast: 3600, lower: 3200, upper: 4000 }, { month: "Sep", actual: null, forecast: 3000, lower: 2600, upper: 3400 }, { month: "Oct", actual: null, forecast: 2500, lower: 2100, upper: 2900 }, { month: "Nov", actual: null, forecast: 2800, lower: 2400, upper: 3200 }, { month: "Dec", actual: null, forecast: 3500, lower: 3100, upper: 3900 }, ] const topItemsForecast = [ { id: 1, name: "Bearing Assembly", currentStock: 120, forecastDemand: 85, recommendedOrder: 0, confidence: "High", }, { id: 2, name: "Control Module", currentStock: 85, forecastDemand: 95, recommendedOrder: 35, confidence: "Medium", }, { id: 3, name: "Hydraulic Pump", currentStock: 32, forecastDemand: 45, recommendedOrder: 33, confidence: "High", }, { id: 4, name: "Filter Element", currentStock: 78, forecastDemand: 120, recommendedOrder: 92, confidence: "High", }, { id: 5, name: "Sensor Kit", currentStock: 45, forecastDemand: 40, recommendedOrder: 15, confidence: "Medium", }, { id: 6, name: "Gasket Set", currentStock: 12, forecastDemand: 35, recommendedOrder: 48, confidence: "Low", }, ] export default function ForecastPage() { const [forecastPeriod, setForecastPeriod] = useState("6months") const [confidenceInterval, setConfidenceInterval] = useState([85]) return (

Demand Forecast

Select forecast period

{forecastPeriod === "custom" && (

Number of months

)}

Forecast Accuracy

92.4%

Based on last 6 months of predictions

Predicted Growth

+8.2%

Compared to previous period

Confidence Interval

{confidenceInterval}%

Demand Forecast Predicted demand with confidence intervals for the next{" "} {forecastPeriod === "3months" ? "3" : forecastPeriod === "6months" ? "6" : "12"} months

Line Chart Area Chart

Item-Level Forecast Detailed demand predictions for top items with recommended order quantities Item Name Current Stock Forecast Demand Recommended Order Confidence {topItemsForecast.map((item) => ( {item.name} {item.currentStock} {item.forecastDemand} {item.recommendedOrder} {item.confidence} ))}

) } [V0_FILE]typescriptreact:file="app/replenishment/page.tsx" "use client" import { useState } from "react" import { AlertCircle, Filter, Plus, Settings, ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Sample replenishment data const replenishmentItems = [ { id: 1, name: "Control Module", sku: "CM-2023-045", currentStock: 85, reorderPoint: 25, forecastDemand: 95, recommendedOrder: 35, supplier: "ElectroSystems Ltd.", leadTime: "2-3 days", status: "Pending", priority: "Medium", }, { id: 2, name: "Hydraulic Pump", sku: "HP-2023-012", currentStock: 32, reorderPoint: 20, forecastDemand: 45, recommendedOrder: 33, supplier: "FluidPower Solutions", leadTime: "5-7 days", status: "Pending", priority: "High", }, { id: 3, name: "Filter Element", sku: "FE-2023-078", currentStock: 78, reorderPoint: 50, forecastDemand: 120, recommendedOrder: 92, supplier: "FilterPro Inc.", leadTime: "1-2 days", status: "Pending", priority: "Medium", }, { id: 4, name: "Gasket Set", sku: "GS-2023-056", currentStock: 12, reorderPoint: 25, forecastDemand: 35, recommendedOrder: 48, supplier: "SealMaster Co.", leadTime: "3-4 days", status: "Pending", priority: "High", }, { id: 5, name: "Drive Belt", sku: "DB-2023-023", currentStock: 0, reorderPoint: 10, forecastDemand: 15, recommendedOrder: 25, supplier: "BeltWorks Ltd.", leadTime: "2-3 days", status: "Ordered", priority: "Critical", }, { id: 6, name: "Circuit Board", sku: "CB-2023-067", currentStock: 18, reorderPoint: 10, forecastDemand: 25, recommendedOrder: 17, supplier: "CircuitTech Inc.", leadTime: "7-10 days", status: "Pending", priority: "Medium", }, ] export default function ReplenishmentPage() { const [autoOrder, setAutoOrder] = useState(true) const [safetyStock, setSafetyStock] = useState([20]) const [selectedItems, setSelectedItems] = useState([]) const [statusFilter, setStatusFilter] = useState("all") const [priorityFilter, setPriorityFilter] = useState("all") const toggleItemSelection = (id) => { if (selectedItems.includes(id)) { setSelectedItems(selectedItems.filter((itemId) => itemId !== id)) } else { setSelectedItems([...selectedItems, id]) } } const selectAllItems = () => { if (selectedItems.length === replenishmentItems.length) { setSelectedItems([]) } else { setSelectedItems(replenishmentItems.map((item) => item.id)) } } // Filter items based on status and priority const filteredItems = replenishmentItems.filter((item) => { const matchesStatus = statusFilter === "all" || item.status === statusFilter const matchesPriority = priorityFilter === "all" || item.priority === priorityFilter return matchesStatus && matchesPriority }) return (

Automated Replenishment

Auto-Order

Automatic Replenishment

System will automatically generate purchase orders

Safety Stock Level

{safetyStock}%

Buffer stock as percentage of forecast demand

Pending Orders

{replenishmentItems.filter((item) => item.status === "Pending").length}

Items requiring replenishment

Replenishment Queue Items that need to be ordered based on current stock and forecast demand

Item Name SKU Current Stock Forecast Demand Recommended Order Supplier Lead Time Status Priority {filteredItems.map((item) => (

toggleItemSelection(item.id)} />

{item.name} {item.sku} {item.currentStock} {item.forecastDemand} {item.recommendedOrder} {item.supplier} {item.leadTime} {item.status} {item.priority} ))}

Replenishment Settings Configure automated replenishment rules and thresholds

Auto-Order

Automatically create purchase orders

Email Notifications

Send email alerts for low stock

Supplier Integration

Connect directly with supplier systems

Reorder Frequency

Order Approval

Order Consolidation

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Bell, Database, Save, Server, Settings, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function SettingsPage() { const [emailNotifications, setEmailNotifications] = useState(true) const [pushNotifications, setPushNotifications] = useState(false) return (

Settings

General Notifications Users & Permissions Integrations System

General Settings Configure basic system settings and preferences

Company Name

Timezone

Date Format

Currency

Dashboard

Inventory Management

Supplier

Stock Level

Last Ordered

Sales Analysis

Select date range

Demand Forecast

Select forecast period

Automated Replenishment

Selected Items

Supplier

Delivery Date

Item

Quantity

Supplier

Delivery Date

Settings