[dyad] Added missing stock list buttons - wrote 1 file(s)
This commit is contained in:
[dyad]
parent
37908e4957
commit
66ea6792a2
1 changed files with 76 additions and 47 deletions
|
|
@ -1,61 +1,90 @@
|
|||
import { useState, useEffect, useCallback } from "react";
|
||||
import { createColumns, StockItem } from "../components/stock/columns"; // Changed from 'columns' to 'createColumns'
|
||||
import { DataTable } from "../components/stock/data-table";
|
||||
import pb from "@/lib/pocketbase"; // Import PocketBase client
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Plus, QrCode } from 'lucide-react'; // Import icons
|
||||
|
||||
const StockList = () => {
|
||||
const [stockItems, setStockItems] = useState<StockItem[]>([]);
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0); // State to trigger data refresh
|
||||
const [filterValue, setFilterValue] = useState(""); // State for filtering
|
||||
// Mock data for demonstration
|
||||
const stockItems = [
|
||||
{ id: '1', name: 'Wireless Mouse', sku: 'WM001', quantity: 150, price: 25.00, location: 'A1' },
|
||||
{ id: '2', name: 'Mechanical Keyboard', sku: 'MK002', quantity: 80, price: 75.00, location: 'A2' },
|
||||
{ id: '3', name: 'USB-C Hub', sku: 'UH003', quantity: 200, price: 30.00, location: 'B1' },
|
||||
{ id: '4', name: 'External SSD 1TB', sku: 'ES004', quantity: 50, price: 120.00, location: 'C3' },
|
||||
{ id: '5', name: 'Monitor Stand', sku: 'MS005', quantity: 100, price: 45.00, location: 'A1' },
|
||||
];
|
||||
|
||||
const fetchStockItems = useCallback(async () => {
|
||||
try {
|
||||
const records = await pb.collection('stock_items').getList(1, 50, {
|
||||
sort: '-created',
|
||||
});
|
||||
const formattedData: StockItem[] = records.items.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
sku: item.sku,
|
||||
category: item.category,
|
||||
quantity: item.quantity,
|
||||
costPrice: item.cost_price,
|
||||
sellingPrice: item.selling_price,
|
||||
}));
|
||||
setStockItems(formattedData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching stock items:", error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStockItems();
|
||||
}, [fetchStockItems, refreshTrigger]); // Re-fetch data when refreshTrigger changes
|
||||
|
||||
const handleRefreshData = () => {
|
||||
setRefreshTrigger(prev => prev + 1); // Increment to trigger useEffect
|
||||
const handleAddStockItem = () => {
|
||||
console.log('Add Stock Item clicked');
|
||||
// Implement navigation or modal for adding a new item
|
||||
};
|
||||
|
||||
// Create columns with the refreshData function
|
||||
const columns = createColumns({ refreshData: handleRefreshData });
|
||||
const handleScanQrCode = () => {
|
||||
console.log('Scan QR Code clicked');
|
||||
// Implement QR code scanning functionality
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Stock List</h1>
|
||||
<p className="text-gray-500">View all your inventory items.</p>
|
||||
<h1 className="text-3xl font-bold">Stock List</h1>
|
||||
<p className="text-muted-foreground">Manage your inventory and stock levels.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleAddStockItem}>
|
||||
<Plus className="mr-2 h-4 w-4" /> Add Stock Item
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleScanQrCode}>
|
||||
<QrCode className="mr-2 h-4 w-4" /> Scan QR Code
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for stock list table or display */}
|
||||
<div className="rounded-md border">
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold mb-4">Current Stock</h3>
|
||||
{stockItems.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
SKU
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Quantity
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Price
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Location
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{stockItems.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{item.name}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.sku}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.quantity}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.price.toFixed(2)}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.location}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">No stock items found. Add a new item to get started!</p>
|
||||
)}
|
||||
</div>
|
||||
{/* No Add New Item button here, as this is a list-only page */}
|
||||
</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={stockItems}
|
||||
filterValue={filterValue} // Pass filterValue
|
||||
onFilterChange={setFilterValue} // Pass onFilterChange
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default StockList;
|
||||
Loading…
Reference in a new issue