125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { X } from 'lucide-react';
|
|
import QuantityDisplay from './QuantityDisplay';
|
|
import axios from 'axios';
|
|
import { Item } from '@/lib/db';
|
|
|
|
interface QuantityAdjustmentModalProps {
|
|
item: Item | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function QuantityAdjustmentModal({
|
|
item,
|
|
isOpen,
|
|
onClose,
|
|
}: QuantityAdjustmentModalProps) {
|
|
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
|
|
// Handle closing
|
|
const handleClose = () => {
|
|
setIsClosing(true);
|
|
setTimeout(() => {
|
|
onClose();
|
|
setIsClosing(false);
|
|
setSuccessMessage(null);
|
|
}, 300);
|
|
};
|
|
|
|
// Handle quantity change via QuantityDisplay
|
|
const handleQuantityChange = async (newQuantity: number) => {
|
|
if (!item) return;
|
|
|
|
try {
|
|
const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8906';
|
|
await axios.patch(`${backendUrl}/items/${item.id}`, {
|
|
quantity: newQuantity,
|
|
});
|
|
|
|
setSuccessMessage(`Quantity updated to ${newQuantity}`);
|
|
setTimeout(() => {
|
|
setSuccessMessage(null);
|
|
handleClose();
|
|
}, 1500);
|
|
} catch (error) {
|
|
const errorMsg = error instanceof Error ? error.message : 'Failed to update quantity';
|
|
console.error('Quantity update error:', errorMsg);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
if (!isOpen || !item) return null;
|
|
|
|
return (
|
|
<div className={`fixed inset-0 z-50 bg-black/50 flex items-center justify-center transition-opacity ${isClosing ? 'opacity-0' : 'opacity-100'}`}>
|
|
<div className={`bg-surface border border-border w-full max-w-md mx-4 transition-transform ${isClosing ? 'scale-95' : 'scale-100'}`}>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
|
<h2 className="text-lg font-normal">Adjust Quantity</h2>
|
|
<button
|
|
onClick={handleClose}
|
|
aria-label="Close quantity adjustment modal"
|
|
className="p-2 hover:bg-black border border-transparent hover:border-border transition-colors"
|
|
>
|
|
<X size={20} className="text-secondary" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 space-y-6">
|
|
{/* Item Details */}
|
|
<div>
|
|
<h3 className="text-2xl font-normal text-slate-100 mb-2">
|
|
{item.name}
|
|
</h3>
|
|
<div className="text-sm text-secondary space-y-1">
|
|
{item.part_number && (
|
|
<div>Part Number: {item.part_number}</div>
|
|
)}
|
|
{item.barcode && (
|
|
<div>Barcode: {item.barcode}</div>
|
|
)}
|
|
{item.category && (
|
|
<div>Category: {item.category}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Success Message */}
|
|
{successMessage && (
|
|
<div className="status-success text-sm">
|
|
{successMessage}
|
|
</div>
|
|
)}
|
|
|
|
{/* Quantity Adjustment */}
|
|
<div>
|
|
<label className="text-sm font-normal text-secondary mb-3 block">
|
|
Current Quantity
|
|
</label>
|
|
<QuantityDisplay
|
|
itemId={String(item.id)}
|
|
currentQuantity={item.quantity}
|
|
onQuantityChange={handleQuantityChange}
|
|
/>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-2 pt-2">
|
|
<button
|
|
onClick={handleClose}
|
|
className="btn-secondary flex-1"
|
|
>
|
|
Keep Current Quantity
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|