How to Build Inventory tracking platform with V0

1// Paste this prompt into V0's AI chat:
2// Build a multi-location inventory tracking system. Create a Supabase schema:
3// 1. locations: id (uuid PK), name (text), type (text CHECK IN 'warehouse','retail','fulfillment'), address (text)
4// 2. items: id (uuid PK), sku (text UNIQUE), name (text), category (text), weight_grams (int), image_url (text)
5// 3. stock_levels: id (uuid PK), item_id (uuid FK to items), location_id (uuid FK to locations), quantity (int), reserved (int DEFAULT 0), available (int GENERATED ALWAYS AS quantity - reserved STORED)
6// 4. transfers: id (uuid PK), from_location (uuid FK to locations), to_location (uuid FK to locations), status (text DEFAULT 'pending'), created_by (uuid FK to auth.users), created_at (timestamptz)
7// 5. transfer_items: id (uuid PK), transfer_id (uuid FK to transfers), item_id (uuid FK to items), quantity (int)
8// Add RLS policies and a unique constraint on (item_id, location_id) in stock_levels.
9// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Create an inventory tracking page at app/tracking/page.tsx.
3// Requirements:
4// - Fetch all items with stock_levels joined by location
5// - Display as a shadcn/ui DataTable matrix: first columns are SKU, Item Name, Category
6// - Then for each location, show three sub-columns: Qty, Reserved, Available
7// - Color the Available cell: green if > 10, yellow if 1-10, red if 0
8// - Add a Progress bar in each location column showing stock health (available / max quantity)
9// - Add a Command palette (Cmd+K) for fast item search by SKU or name
10// - Add filter Select dropdowns for category and location type
11// - Summary Cards at top: Total Items, Total Locations, Items Below Threshold, Pending Transfers

1// Paste this prompt into V0's AI chat:
2// Create a transfer workflow at app/tracking/transfers/new/page.tsx.
3// Requirements:
4// - Step 1: Select 'From Location' and 'To Location' using shadcn/ui Select dropdowns. Show location type Badge next to each option.
5// - Step 2: Search items with Command, add them to a transfer list with quantity Input for each. Show available stock at the source location next to each item. Validate quantity <= available.
6// - Step 3: Review summary in a Card showing all items, quantities, source, and destination. Confirm Button and Back Button.
7// - Use a Progress bar or step indicators showing Step 1/2/3.
8// - On confirm, POST to /api/transfers with the transfer data.
9// - Show a success Toast with the transfer ID and redirect to the transfers queue.

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(
10  req: NextRequest,
11  { params }: { params: Promise<{ id: string }> }
12) {
13  const { id } = await params
14
15  const { data, error } = await supabase.rpc('complete_transfer', {
16    p_transfer_id: id,
17  })
18
19  if (error) {
20    const status = error.message.includes('Insufficient') ? 409 : 500
21    return NextResponse.json({ error: error.message }, { status })
22  }
23
24  return NextResponse.json({ success: true, data })
25}

1'use client'
2
3import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
5import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
6
7interface StockDataPoint {
8  date: string
9  quantity: number
10  reserved: number
11  available: number
12}
13
14export function StockTrendChart({ data }: { data: StockDataPoint[] }) {
15  return (
16    <Card>
17      <CardHeader>
18        <CardTitle>Stock Trend</CardTitle>
19      </CardHeader>
20      <CardContent>
21        <Tabs defaultValue="7d">
22          <TabsList>
23            <TabsTrigger value="7d">7 Days</TabsTrigger>
24            <TabsTrigger value="30d">30 Days</TabsTrigger>
25            <TabsTrigger value="90d">90 Days</TabsTrigger>
26          </TabsList>
27          <TabsContent value="7d">
28            <ResponsiveContainer width="100%" height={300}>
29              <AreaChart data={data}>
30                <CartesianGrid strokeDasharray="3 3" />
31                <XAxis dataKey="date" />
32                <YAxis />
33                <Tooltip />
34                <Area type="monotone" dataKey="available" stroke="#22c55e" fill="#22c55e" fillOpacity={0.2} />
35                <Area type="monotone" dataKey="reserved" stroke="#eab308" fill="#eab308" fillOpacity={0.2} />
36              </AreaChart>
37            </ResponsiveContainer>
38          </TabsContent>
39        </Tabs>
40      </CardContent>
41    </Card>
42  )
43}

1-- Run this in Supabase SQL Editor
2-- Add organization_id to all tables for multi-tenant isolation
3ALTER TABLE locations ADD COLUMN org_id uuid NOT NULL;
4ALTER TABLE items ADD COLUMN org_id uuid NOT NULL;
5ALTER TABLE stock_levels ADD COLUMN org_id uuid NOT NULL;
6ALTER TABLE transfers ADD COLUMN org_id uuid NOT NULL;
7
8-- RLS policy: users can only access data in their organization
9CREATE POLICY "Users see own org locations" ON locations
10  FOR SELECT USING (
11    org_id IN (
12      SELECT org_id FROM user_orgs WHERE user_id = auth.uid()
13    )
14  );
15
16CREATE POLICY "Users see own org items" ON items
17  FOR SELECT USING (
18    org_id IN (
19      SELECT org_id FROM user_orgs WHERE user_id = auth.uid()
20    )
21  );