984 lines
42 KiB
TypeScript
984 lines
42 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { db, Item } from '@/lib/db';
|
|
import { inventoryApi } from '@/lib/api';
|
|
import { fetchAndCacheItems, syncOfflineOperations } from '@/lib/sync';
|
|
import Scanner from '@/components/Scanner';
|
|
import AIOnboarding from '@/components/AIOnboarding';
|
|
import PageShell from '@/components/PageShell';
|
|
import ItemComparisonModal from '@/components/ItemComparisonModal';
|
|
import { toast } from 'react-hot-toast';
|
|
import {
|
|
Package,
|
|
Camera,
|
|
Plus,
|
|
Minus,
|
|
Trash2,
|
|
AlertTriangle,
|
|
X,
|
|
ChevronRight,
|
|
Edit2,
|
|
RefreshCw,
|
|
Sparkles,
|
|
Smartphone,
|
|
ArrowDownCircle,
|
|
ArrowUpCircle,
|
|
Search
|
|
} from 'lucide-react';
|
|
import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
import axios from 'axios';
|
|
import versionData from '../VERSION.json';
|
|
|
|
interface User {
|
|
id: number;
|
|
username: string;
|
|
role: string;
|
|
}
|
|
|
|
function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
// Fuzzy string matching with Levenshtein distance
|
|
// Returns true if strings are similar enough (allowing 1-2 character differences)
|
|
function fuzzyMatch(str1: string, str2: string, maxDistance: number = 2): boolean {
|
|
const s1 = str1.toLowerCase().replace(/\s+/g, '');
|
|
const s2 = str2.toLowerCase().replace(/\s+/g, '');
|
|
|
|
if (s1 === s2) return true;
|
|
if (Math.abs(s1.length - s2.length) > maxDistance) return false;
|
|
|
|
// Levenshtein distance
|
|
const matrix: number[][] = Array(s2.length + 1).fill(null).map(() => Array(s1.length + 1).fill(0));
|
|
for (let i = 0; i <= s1.length; i++) matrix[0][i] = i;
|
|
for (let j = 0; j <= s2.length; j++) matrix[j][0] = j;
|
|
|
|
for (let j = 1; j <= s2.length; j++) {
|
|
for (let i = 1; i <= s1.length; i++) {
|
|
const indicator = s1[i - 1] === s2[j - 1] ? 0 : 1;
|
|
matrix[j][i] = Math.min(
|
|
matrix[j][i - 1] + 1,
|
|
matrix[j - 1][i] + 1,
|
|
matrix[j - 1][i - 1] + indicator
|
|
);
|
|
}
|
|
}
|
|
|
|
return matrix[s2.length][s1.length] <= maxDistance;
|
|
}
|
|
|
|
export default function Home() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [isOnline, setIsOnline] = useState(true);
|
|
const [mode, setMode] = useState<'CHECK_IN' | 'CHECK_OUT' | 'TRASH'>('CHECK_OUT');
|
|
const [showScanner, setShowScanner] = useState(false);
|
|
const [showOnboarding, setShowOnboarding] = useState(false);
|
|
const [selectedBoxLabel, setSelectedBoxLabel] = useState<string | null>(null);
|
|
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
|
|
const [boxMatches, setBoxMatches] = useState<Item[]>([]);
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [isScannerReady, setIsScannerReady] = useState(false);
|
|
const [editedItem, setEditedItem] = useState<Partial<Item>>({});
|
|
const [adjustQty, setAdjustQty] = useState<number>(1);
|
|
const [adjustType, setAdjustType] = useState<'ADD' | 'REMOVE' | 'TRASH'>('ADD');
|
|
const [trashReason, setTrashReason] = useState('Damaged');
|
|
const [lastScanned, setLastScanned] = useState<string | null>(null);
|
|
const [inventory, setInventory] = useState<Item[]>([]);
|
|
const [syncing, setSyncing] = useState(false);
|
|
const [currentUser, setCurrentUser] = useState<any | null>(null);
|
|
const [categories, setCategories] = useState<any[]>([]);
|
|
const [fieldScanning, setFieldScanning] = useState<{ active: boolean, field: string } | null>(null);
|
|
const [comparisonModal, setComparisonModal] = useState<{ show: boolean, newItem: any, existingItem: any, existingId: number | null }>({ show: false, newItem: null, existingItem: null, existingId: null });
|
|
const [comparisonLoading, setComparisonLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!localStorage.getItem('inventory_token')) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
setMounted(true);
|
|
setIsOnline(navigator.onLine);
|
|
|
|
const savedUser = localStorage.getItem('inventory_user');
|
|
if (savedUser) {
|
|
setCurrentUser(JSON.parse(savedUser));
|
|
}
|
|
|
|
// Initial data fetch
|
|
inventoryApi.getCategories().then(c => setCategories(c)).catch(() => { });
|
|
loadInventory();
|
|
preloadOCR();
|
|
|
|
const handleOnline = () => {
|
|
setIsOnline(true);
|
|
handleSync(); // Auto-sync pending ops when back online
|
|
};
|
|
const handleOffline = () => setIsOnline(false);
|
|
|
|
window.addEventListener('online', handleOnline);
|
|
window.addEventListener('offline', handleOffline);
|
|
|
|
// Active polling for network status AND periodic background refresh (30s)
|
|
const interval = setInterval(() => {
|
|
setIsOnline(navigator.onLine);
|
|
if (navigator.onLine) {
|
|
loadInventory(); // Keep other devices in sync
|
|
}
|
|
}, 30000);
|
|
|
|
return () => {
|
|
window.removeEventListener('online', handleOnline);
|
|
window.removeEventListener('offline', handleOffline);
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
const loadInventory = async () => {
|
|
const cached = await db.items.toArray();
|
|
setInventory(cached);
|
|
|
|
if (navigator.onLine) {
|
|
const fresh = await fetchAndCacheItems();
|
|
setInventory(fresh);
|
|
}
|
|
};
|
|
|
|
const preloadOCR = async () => {
|
|
try {
|
|
// Import the library only when needed to keep bundle small
|
|
const { createWorker } = await import('tesseract.js');
|
|
const worker = await createWorker('eng');
|
|
await worker.terminate();
|
|
setIsScannerReady(true);
|
|
} catch (e) {
|
|
console.warn("OCR Preload failed - will retry on demand", e);
|
|
}
|
|
};
|
|
|
|
const handleOnboardingComplete = async (itemData: any) => {
|
|
try {
|
|
if (itemData.part_number) {
|
|
itemData.part_number = itemData.part_number.toLowerCase();
|
|
}
|
|
// 1. Add to local DB cache
|
|
await db.items.add(itemData);
|
|
|
|
// 2. If online, try to push to backend immediately
|
|
if (isOnline && currentUser) {
|
|
try {
|
|
await inventoryApi.createItem(currentUser.id, itemData);
|
|
toast.success("Item saved to cloud catalog!");
|
|
setShowOnboarding(false);
|
|
await loadInventory();
|
|
} catch (err: any) {
|
|
const status = err.response?.status;
|
|
const responseData = err.response?.data;
|
|
|
|
if (status === 409 && responseData?.detail) {
|
|
// Show comparison modal for duplicate part number
|
|
const detail = responseData.detail;
|
|
setComparisonModal({
|
|
show: true,
|
|
newItem: itemData,
|
|
existingItem: detail.existing_item,
|
|
existingId: detail.existing_id
|
|
});
|
|
return; // Don't close onboarding, user will decide
|
|
} else {
|
|
console.error("Cloud sync failed:", err.message);
|
|
toast.error("Item saved locally. Cloud sync failed.");
|
|
setShowOnboarding(false);
|
|
await loadInventory();
|
|
}
|
|
}
|
|
} else if (!isOnline) {
|
|
toast.success("Item saved locally. Will sync when online.");
|
|
setShowOnboarding(false);
|
|
await loadInventory();
|
|
} else {
|
|
toast("Please log in to save to cloud.", { icon: '⚠️' });
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Failed to save item");
|
|
}
|
|
};
|
|
|
|
const handleComparisonUpdate = async () => {
|
|
if (!comparisonModal.existingId) return;
|
|
setComparisonLoading(true);
|
|
try {
|
|
// Update existing item
|
|
await inventoryApi.updateItem(comparisonModal.existingId, comparisonModal.newItem);
|
|
toast.success("Item updated successfully!");
|
|
setComparisonModal({ show: false, newItem: null, existingItem: null, existingId: null });
|
|
setShowOnboarding(false);
|
|
await loadInventory();
|
|
} catch (err: any) {
|
|
console.error("Update failed:", err.message);
|
|
toast.error("Failed to update item");
|
|
} finally {
|
|
setComparisonLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleComparisonSkip = () => {
|
|
// Item was already added to local DB, just close modal and onboarding
|
|
setComparisonModal({ show: false, newItem: null, existingItem: null, existingId: null });
|
|
setShowOnboarding(false);
|
|
toast("Local copy saved. Not synced to cloud.", { icon: '💾' });
|
|
loadInventory();
|
|
};
|
|
|
|
const handleSync = useCallback(async () => {
|
|
if (!isOnline || !currentUser) return;
|
|
setSyncing(true);
|
|
try {
|
|
const result = await syncOfflineOperations(currentUser.id);
|
|
if (result.success > 0) {
|
|
toast.success(`Synced ${result.success} operations!`);
|
|
}
|
|
await loadInventory();
|
|
} catch (error) {
|
|
console.error("Sync failed", error);
|
|
} finally {
|
|
setSyncing(false);
|
|
}
|
|
}, [isOnline, currentUser]);
|
|
|
|
const onScanSuccess = useCallback(async (barcode: string) => {
|
|
setLastScanned(barcode);
|
|
setShowScanner(false);
|
|
|
|
const normalizedBarcode = barcode.toLowerCase();
|
|
const item = await db.items.where('barcode').equals(barcode)
|
|
.or('part_number').equals(normalizedBarcode).first();
|
|
|
|
if (!item) {
|
|
toast.error(`Item ${barcode} not found in catalog.`);
|
|
return;
|
|
}
|
|
|
|
await db.pendingOperations.add({
|
|
type: mode,
|
|
barcode: item.barcode,
|
|
quantity: 1,
|
|
timestamp: Date.now(),
|
|
synced: 0,
|
|
uuid: crypto.randomUUID()
|
|
});
|
|
|
|
const newQty = mode === 'CHECK_IN' ? item.quantity + 1 : item.quantity - 1;
|
|
await db.items.update(item.id!, { quantity: newQty });
|
|
|
|
setInventory(prev => prev.map(i => i.id === item.id ? { ...i, quantity: newQty } : i));
|
|
|
|
toast.success(`${mode === 'CHECK_IN' ? 'Checked in' : 'Checked out'} ${item.name}`);
|
|
|
|
if (isOnline) {
|
|
handleSync();
|
|
}
|
|
}, [mode, isOnline, handleSync]);
|
|
|
|
const onOCRMatch = useCallback(async (text: string) => {
|
|
// 1. Clean and normalize
|
|
const cleanText = text.toLowerCase().replace(/[^a-z0-9\s/+-]/g, ' ');
|
|
|
|
// Garbage Filter: Ignore noisy strings (measurements like 0.11, dates like 2024-07-25)
|
|
// We only keep tokens that are at least 3 chars AND not just decimals
|
|
const tokens = cleanText.split(/[\s\n,]+/)
|
|
.filter(t => t.length >= 3)
|
|
.filter(t => !/^\d+\.\d+$/.test(t)) // Filter out decimals like 0.11 or 0.12
|
|
.filter(t => !/^\d{2,4}-\d{2}-\d{2}$/.test(t)); // Filter out dates
|
|
|
|
if (tokens.length === 0) return;
|
|
|
|
// [NEW] Targeted Field Scan Logic
|
|
if (fieldScanning?.active) {
|
|
if (fieldScanning.field === 'box_label') {
|
|
const potentialLabel = tokens[0] || cleanText;
|
|
setEditedItem(prev => ({ ...prev, box_label: potentialLabel }));
|
|
setFieldScanning(null);
|
|
toast.success(`Captured: ${potentialLabel}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Toast only potentially useful scans
|
|
toast(`Scanning: ${cleanText.substring(0, 30)}...`, { icon: '🔍', duration: 1500, id: 'ocr-scan' });
|
|
|
|
// [BOX SCANNING LOGIC] Prioritize checking if this is a known box
|
|
const possibleBoxItems = inventory.filter(item => {
|
|
if (!item.box_label) return false;
|
|
const boxText = item.box_label.toLowerCase().replace(/[^a-z0-9\s/+-]/g, ' ');
|
|
// Exact or Partial include match for box label
|
|
if (cleanText.includes(boxText)) return true;
|
|
// Strong token matching (for words >= 4 chars)
|
|
const boxTokens = boxText.split(/[\s/+-]/).filter(t => t.length >= 4);
|
|
const matchedTokens = boxTokens.filter(bt => tokens.includes(bt));
|
|
return matchedTokens.length >= 2 || (boxTokens.length === 1 && matchedTokens.length === 1);
|
|
});
|
|
|
|
if (possibleBoxItems.length === 1) {
|
|
toast.success(`Box identified: 1 item found`, { duration: 3000, id: 'ocr-success' });
|
|
setSelectedItem(possibleBoxItems[0]);
|
|
setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
|
|
setShowScanner(false);
|
|
return;
|
|
} else if (possibleBoxItems.length > 1) {
|
|
toast.success(`Box identified: ${possibleBoxItems.length} items found`, { duration: 3000, id: 'ocr-success' });
|
|
setBoxMatches(possibleBoxItems);
|
|
setShowScanner(false);
|
|
return;
|
|
}
|
|
|
|
// [INDIVIDUAL ITEM MATCHING] Fallback to classic specific identification
|
|
let bestMatch = null;
|
|
let maxMatchScore = 0;
|
|
|
|
for (const item of inventory) {
|
|
let score = 0;
|
|
const pn = (item.part_number || '').toLowerCase();
|
|
const sn = (item.serial_number || '').toLowerCase();
|
|
const name = item.name.toLowerCase();
|
|
const category = item.category.toLowerCase();
|
|
const ocrKey = (item.ocr_text || '').toLowerCase().replace(/[^a-z0-9\s/+-]/g, ' ');
|
|
|
|
// Priority 0: OCR Key match (Heuristic provided by AI) with fuzzy tolerance
|
|
if (ocrKey) {
|
|
if (cleanText.includes(ocrKey)) {
|
|
score += 1000; // Exact match
|
|
} else {
|
|
// Fuzzy match for OCR keys (allows 2-char differences for robustness)
|
|
const ocrTokens = ocrKey.split(/[\s/+-]+/).filter(t => t.length >= 2);
|
|
const matchedTokens = ocrTokens.filter(token => {
|
|
return tokens.some(t => fuzzyMatch(t, token, 2));
|
|
});
|
|
if (matchedTokens.length >= Math.ceil(ocrTokens.length * 0.7)) {
|
|
score += 800; // Fuzzy match (70%+ token coverage)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Priority 1: Serial Number (Absolute match)
|
|
if (sn && cleanText.includes(sn)) score += 500;
|
|
|
|
// Priority 2: Part Number (High confidence, with fuzzy tolerance)
|
|
if (pn) {
|
|
if (cleanText.includes(pn)) {
|
|
score += 200; // Exact match
|
|
} else {
|
|
// Fuzzy match for part numbers (allows 1-char differences)
|
|
const pnTokens = pn.split(/[\s/+-]/).filter(t => t.length >= 2);
|
|
const matchedPnTokens = pnTokens.filter(pnToken =>
|
|
tokens.some(t => fuzzyMatch(t, pnToken, 1))
|
|
);
|
|
if (matchedPnTokens.length >= Math.max(2, Math.ceil(pnTokens.length * 0.6))) {
|
|
score += 150; // Fuzzy match (60%+ token coverage)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Priority 3: Token based matching for PN (LC/UPC etc)
|
|
if (pn) {
|
|
const pnTokens = pn.split(/[\s/+-]/).filter(t => t.length >= 3);
|
|
pnTokens.forEach(t => {
|
|
if (cleanText.includes(t)) {
|
|
score += 50;
|
|
} else if (tokens.some(scanToken => fuzzyMatch(scanToken, t, 1))) {
|
|
score += 30; // Fuzzy token match
|
|
}
|
|
});
|
|
}
|
|
|
|
// Priority 4: Name & Category
|
|
const nameTokens = name.split(/[\s/+-]/).filter(t => t.length >= 3);
|
|
nameTokens.forEach(t => { if (cleanText.includes(t)) score += 10; });
|
|
|
|
if (category && cleanText.includes(category)) score += 20;
|
|
|
|
if (score > maxMatchScore) {
|
|
maxMatchScore = score;
|
|
bestMatch = item;
|
|
}
|
|
}
|
|
|
|
// Threshold: Need a significant score to match automatically
|
|
if (bestMatch && maxMatchScore >= 40) {
|
|
toast.success(`Matched: ${bestMatch.name}`, { duration: 3000, id: 'ocr-success' });
|
|
setSelectedItem(bestMatch);
|
|
setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
|
|
setShowScanner(false);
|
|
}
|
|
}, [mode, inventory]);
|
|
|
|
const handleUpdateItem = async () => {
|
|
if (!selectedItem) return;
|
|
try {
|
|
const updated = { ...selectedItem, ...editedItem };
|
|
// Normalize PN
|
|
if (updated.part_number) updated.part_number = updated.part_number.toLowerCase();
|
|
|
|
await db.items.update(selectedItem.id!, updated);
|
|
|
|
if (isOnline) {
|
|
await inventoryApi.updateItem(selectedItem.id!, updated);
|
|
}
|
|
|
|
toast.success("Item updated successfully");
|
|
setIsEditing(false);
|
|
setSelectedItem(updated as Item);
|
|
await loadInventory();
|
|
} catch (err: any) {
|
|
console.error(err);
|
|
toast.error("Failed to update item");
|
|
}
|
|
};
|
|
|
|
const handleDeleteItem = async () => {
|
|
if (!selectedItem || !selectedItem.id) return;
|
|
if (!window.confirm(`Are you sure you want to delete "${selectedItem.name}" completely from the catalog?`)) return;
|
|
|
|
try {
|
|
await db.items.delete(selectedItem.id);
|
|
if (isOnline) {
|
|
await inventoryApi.deleteItem(selectedItem.id);
|
|
}
|
|
toast.success("Item deleted from catalog");
|
|
setSelectedItem(null);
|
|
await loadInventory();
|
|
} catch (err: any) {
|
|
console.error(err);
|
|
toast.error("Failed to delete item");
|
|
}
|
|
};
|
|
|
|
const handleAdjustStock = async () => {
|
|
if (!selectedItem) return;
|
|
|
|
const toastId = toast.loading("Processing...");
|
|
|
|
try {
|
|
const finalAdjustQty = adjustQty;
|
|
const newQty = selectedItem.quantity + (adjustType === 'ADD' ? adjustQty : -adjustQty);
|
|
|
|
// 1. Create a unique ID for this operation to prevent double-counting on server
|
|
const operationId = crypto.randomUUID();
|
|
|
|
// 2. Queue local operation
|
|
const opType = adjustType === 'ADD' ? 'CHECK_IN' : (adjustType === 'TRASH' ? 'TRASH' : 'CHECK_OUT');
|
|
|
|
await db.pendingOperations.add({
|
|
type: opType as any,
|
|
barcode: selectedItem.barcode,
|
|
quantity: finalAdjustQty,
|
|
timestamp: Date.now(),
|
|
synced: 0,
|
|
// We add this to our DB even if it doesn't have it yet, Dexie handles it
|
|
uuid: operationId
|
|
} as any);
|
|
|
|
// 3. Update local UI & DB
|
|
await db.items.update(selectedItem.id!, { quantity: newQty });
|
|
setInventory(prev => prev.map(i => i.id === selectedItem.id ? { ...i, quantity: newQty } : i));
|
|
|
|
// 4. Trigger Sync
|
|
if (isOnline) {
|
|
await handleSync();
|
|
toast.success("Inventory updated & synced", { id: toastId });
|
|
} else {
|
|
toast.success("Saved locally (Offline)", { id: toastId });
|
|
}
|
|
|
|
setSelectedItem(null);
|
|
setAdjustQty(1);
|
|
} catch (error: any) {
|
|
console.error("Adjustment failure:", error);
|
|
toast.error("Error saving operation", { id: toastId });
|
|
}
|
|
};
|
|
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
const filteredInventory = inventory.filter(item => {
|
|
const query = searchQuery.toLowerCase();
|
|
return (
|
|
item.name.toLowerCase().includes(query) ||
|
|
item.category.toLowerCase().includes(query) ||
|
|
(item.description?.toLowerCase().includes(query) ?? false) ||
|
|
(item.connector?.toLowerCase().includes(query) ?? false) ||
|
|
(item.size?.toLowerCase().includes(query) ?? false) ||
|
|
(item.part_number?.toLowerCase().includes(query) ?? false) ||
|
|
(item.color?.toLowerCase().includes(query) ?? false) ||
|
|
(item.box_label?.toLowerCase().includes(query) ?? false) ||
|
|
(item.ocr_text?.toLowerCase().includes(query) ?? false)
|
|
);
|
|
});
|
|
|
|
// Extract unique item types and box labels for suggestions
|
|
const existingTypes = Array.from(new Set(inventory.map(i => i.type).filter(Boolean))).sort() as string[];
|
|
const existingBoxes = Array.from(new Set(inventory.map(i => i.box_label).filter(Boolean))).sort() as string[];
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<PageShell>
|
|
<div className="p-3 md:p-8 overflow-x-hidden w-full max-w-7xl mx-auto">
|
|
{/* Search datalists for autocomplete */}
|
|
<datalist id="existing-types">
|
|
{existingTypes.map(t => <option key={t} value={t} />)}
|
|
</datalist>
|
|
<datalist id="existing-boxes">
|
|
{existingBoxes.map(b => <option key={b} value={b} />)}
|
|
</datalist>
|
|
|
|
{/* Header */}
|
|
<header className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-6 w-full px-1">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-1">
|
|
<img
|
|
src="/logo.png"
|
|
alt="TFM aInventory"
|
|
className="h-8 md:h-10 object-contain drop-shadow-xl rounded-lg"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">TFM aInventory</h1>
|
|
<p className="text-xs md:text-sm text-secondary font-bold tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-between sm:justify-end gap-3 sm:gap-6 bg-surface/50 sm:bg-transparent px-4 py-2 sm:p-0 rounded-2xl border border-slate-800/50 sm:border-none">
|
|
<div className="flex flex-wrap items-center gap-4 sm:gap-6">
|
|
{isScannerReady && (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
|
|
<span className="text-xs font-black text-green-500/90 whitespace-nowrap">
|
|
Scanner: OK
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2" data-testid={!isOnline ? "offline-indicator" : undefined}>
|
|
<div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
|
|
<span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}>
|
|
Sync: {isOnline ? 'Active' : 'Offline'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleSync}
|
|
disabled={syncing}
|
|
data-testid="manual-sync-button"
|
|
className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-white transition-all active:scale-95 disabled:opacity-50"
|
|
>
|
|
<RefreshCw size={18} className={syncing ? "animate-spin text-primary" : ""} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="w-full px-1 space-y-6">
|
|
{/* Mode Switcher */}
|
|
<div className="flex p-1.5 bg-surface rounded-2xl shadow-inner w-full gap-1">
|
|
{[
|
|
{ id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
|
|
{ id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
|
|
{ id: 'TRASH', label: 'Trash', icon: Trash2 }
|
|
].map((m) => (
|
|
<button
|
|
key={m.id}
|
|
data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
|
|
onClick={() => setMode(m.id as any)}
|
|
className={cn(
|
|
"flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3",
|
|
mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-slate-300"
|
|
)}
|
|
>
|
|
<m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
|
|
<span className="truncate">{m.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Scanner Section */}
|
|
<section className="glass-card rounded-3xl p-6">
|
|
{showScanner ? (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-lg font-semibold">scanning...</h2>
|
|
<button
|
|
onClick={() => setShowScanner(false)}
|
|
className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-rose-500 transition-all active:scale-95"
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center py-8 text-center gap-6">
|
|
<button
|
|
onClick={() => setShowScanner(true)}
|
|
className="w-24 h-24 rounded-full bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
|
|
>
|
|
<Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
|
|
</button>
|
|
|
|
<div className="w-full flex justify-center mt-4">
|
|
<button
|
|
onClick={() => setShowOnboarding(true)}
|
|
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
|
|
>
|
|
<div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
|
|
<Sparkles size={32} />
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-lg leading-tight">Add New Item</p>
|
|
<p className="text-xs opacity-60 font-mono mt-1">AI Smart Discovery</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
|
|
{/* Onboarding Overlay */}
|
|
{showOnboarding && (
|
|
<AIOnboarding
|
|
categories={categories}
|
|
inventory={inventory}
|
|
onCancel={() => setShowOnboarding(false)}
|
|
onComplete={handleOnboardingComplete}
|
|
/>
|
|
)}
|
|
|
|
{/* Item Comparison Modal (for duplicate Part Numbers) */}
|
|
<ItemComparisonModal
|
|
show={comparisonModal.show}
|
|
existingItem={comparisonModal.existingItem}
|
|
newItem={comparisonModal.newItem}
|
|
onUpdate={handleComparisonUpdate}
|
|
onSkip={handleComparisonSkip}
|
|
loading={comparisonLoading}
|
|
/>
|
|
|
|
{/* Stock Adjustment Overlay */}
|
|
{selectedItem && (
|
|
<div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
|
|
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
|
<span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span>
|
|
{!isEditing && (
|
|
<span data-testid="current-quantity" className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50">
|
|
In Stock: {selectedItem.quantity}
|
|
</span>
|
|
)}
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
{!isEditing && (
|
|
<button
|
|
onClick={() => {
|
|
setEditedItem(selectedItem);
|
|
setIsEditing(true);
|
|
}}
|
|
className="p-2 hover:bg-slate-800 rounded-full text-secondary"
|
|
>
|
|
<Edit2 size={20} />
|
|
</button>
|
|
)}
|
|
{isEditing && (
|
|
<button
|
|
onClick={handleDeleteItem}
|
|
className="p-2 hover:bg-red-500/20 rounded-full text-red-500"
|
|
>
|
|
<Trash2 size={20} />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => {
|
|
setSelectedItem(null);
|
|
setIsEditing(false);
|
|
}}
|
|
data-testid="adjustment-cancel"
|
|
className="p-2 hover:bg-slate-800 rounded-full"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isEditing ? (
|
|
<div className="space-y-4 mb-8">
|
|
<div>
|
|
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
|
<label className="text-xs text-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
|
|
<textarea
|
|
value={editedItem.name || ''}
|
|
onChange={(e) => setEditedItem({ ...editedItem, name: e.target.value })}
|
|
className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0"
|
|
placeholder="SSD, SFP, Cable..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.part_number || ''}
|
|
onChange={e => setEditedItem({ ...editedItem, part_number: e.target.value })}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-slate-100"
|
|
placeholder="e.g. PN-12345"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category Group</label>
|
|
<input
|
|
type="text"
|
|
list="existing-categories"
|
|
value={editedItem.category || ''}
|
|
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder:text-slate-700"
|
|
placeholder="e.g. storage"
|
|
/>
|
|
<datalist id="existing-categories">
|
|
{categories.map(c => (
|
|
<option key={c.id} value={c.name} />
|
|
))}
|
|
</datalist>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label>
|
|
<input
|
|
type="text"
|
|
list="existing-types"
|
|
value={editedItem.type || ''}
|
|
onChange={e => setEditedItem({...editedItem, type: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
|
placeholder="e.g. spare parts"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-sm font-bold text-secondary ml-1">Box / Container Label</label>
|
|
<div className="relative flex items-center">
|
|
<input
|
|
type="text"
|
|
list="existing-boxes"
|
|
value={editedItem.box_label || ''}
|
|
onChange={e => setEditedItem({...editedItem, box_label: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm outline-none text-slate-100 placeholder:text-slate-700 focus:border-primary transition-colors"
|
|
placeholder="e.g. SFPs 40G Cisco"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFieldScanning({ active: true, field: 'box_label' });
|
|
setShowScanner(true);
|
|
toast.success("Scanning for BOX label...");
|
|
}}
|
|
className={cn(
|
|
"absolute right-2 p-2 rounded-lg transition-all",
|
|
fieldScanning?.active ? "bg-primary text-white animate-pulse" : "text-muted hover:bg-slate-800"
|
|
)}
|
|
>
|
|
<Camera size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.connector || ''}
|
|
onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
|
placeholder="e.g. LC/UPC"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.size || ''}
|
|
onChange={e => setEditedItem({...editedItem, size: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
|
placeholder="e.g. 5m / 1600GB"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.color || ''}
|
|
onChange={e => setEditedItem({...editedItem, color: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
|
placeholder="e.g. Black"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-sm font-bold text-secondary ml-1">Description</label>
|
|
<textarea
|
|
value={editedItem.description || ''}
|
|
onChange={e => setEditedItem({ ...editedItem, description: e.target.value })}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 resize-none h-20"
|
|
placeholder="Item description..."
|
|
/>
|
|
</div>
|
|
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
|
<label className="text-xs text-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item ID or Code</label>
|
|
<textarea
|
|
value={editedItem.ocr_text || ''}
|
|
onChange={e => setEditedItem({ ...editedItem, ocr_text: e.target.value })}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary resize-none h-12"
|
|
placeholder="e.g., SKU-12345 or barcode text..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
|
|
<div className="flex p-1 bg-background rounded-2xl mb-8">
|
|
{[
|
|
{ id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
|
|
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
|
|
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
|
|
].map((t) => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => setAdjustType(t.id as any)}
|
|
className={cn(
|
|
"flex-1 flex flex-col items-center py-3 rounded-xl transition-all",
|
|
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-muted"
|
|
)}
|
|
>
|
|
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
|
<span className="text-xs font-black mt-1">{t.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-6 mb-8">
|
|
<div className="flex items-center gap-8">
|
|
<button
|
|
onClick={() => setAdjustQty(Math.max(1, adjustQty - 1))}
|
|
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"
|
|
>
|
|
<Minus size={24} />
|
|
</button>
|
|
<div className="text-center" data-testid="adjustment-quantity-input">
|
|
<span className="text-xs font-black tabular-nums">{adjustQty}</span>
|
|
<span className="text-[10px] text-primary/80 font-bold tracking-tight">Units</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setAdjustQty(adjustQty + 1)}
|
|
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"
|
|
>
|
|
<Plus size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{adjustType === 'TRASH' && (
|
|
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<AlertTriangle size={16} className="text-red-500" />
|
|
<span className="text-sm font-bold text-red-400">Waste Declaration</span>
|
|
</div>
|
|
<select
|
|
value={trashReason}
|
|
onChange={(e) => setTrashReason(e.target.value)}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-300"
|
|
>
|
|
<option>Damaged</option>
|
|
<option>Expired</option>
|
|
<option>Lost</option>
|
|
<option>Technical Failure</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<button
|
|
onClick={isEditing ? handleUpdateItem : handleAdjustStock}
|
|
data-testid="adjustment-submit"
|
|
className={cn(
|
|
"w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-2xl",
|
|
isEditing ? "bg-slate-100 text-slate-900" : (
|
|
adjustType === 'ADD' ? "bg-primary shadow-primary/20 text-white" :
|
|
adjustType === 'REMOVE' ? "bg-amber-600 shadow-amber-500/20 text-white" :
|
|
"bg-red-600 shadow-red-500/20 text-white"
|
|
)
|
|
)}
|
|
>
|
|
{isEditing ? "Save Changes" : (
|
|
adjustType === 'ADD' ? `Add ${adjustQty} to Stock` :
|
|
adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` :
|
|
`Discard ${adjustQty} items`
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
|
|
{/* Box Contents Selection Modal */}
|
|
{boxMatches.length > 0 && !selectedItem && (
|
|
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
|
|
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
|
|
<div className="flex justify-between items-center mb-6 shrink-0">
|
|
<div>
|
|
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
|
<Package className="text-primary" />
|
|
Box Contents
|
|
</h3>
|
|
<p className="text-xs text-secondary font-bold mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</p>
|
|
</div>
|
|
<button onClick={() => setBoxMatches([])} className="p-2 hover:bg-slate-800 rounded-full">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
<div className="overflow-y-auto w-full pr-2 space-y-3 pb-4">
|
|
{boxMatches.map(item => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
setSelectedItem(item);
|
|
setBoxMatches([]);
|
|
setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
|
|
}}
|
|
className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-black text-white">{item.name}</p>
|
|
<p className="text-xs text-secondary font-bold mt-1">Part #: {item.part_number || 'N/A'}</p>
|
|
</div>
|
|
<ChevronRight size={18} className="text-secondary group-hover:text-primary" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
|
|
{/* Footer Branding */}
|
|
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-70">
|
|
<p className="text-sm font-bold text-secondary">Powered by TFM Group Software</p>
|
|
<div className="h-px w-16 bg-slate-700/60" />
|
|
<p className="text-xs font-mono text-secondary">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p>
|
|
</footer>
|
|
</div>
|
|
</PageShell>
|
|
);
|
|
}
|