feat(5-plan-02-t2,t5): create SearchModal and QuantityAdjustmentModal components for inventory search

2026-04-22 17:44:03 +03:00
parent 42fb8a1d63
commit 0138f04f6e
2 changed files with 349 additions and 0 deletions
--- a/frontend/components/inventory/QuantityAdjustmentModal.tsx
+++ b/frontend/components/inventory/QuantityAdjustmentModal.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import QuantityDisplay from './QuantityDisplay';
+import axios from 'axios';
+
+interface Item {
+  id: number;
+  name: string;
+  quantity: number;
+  part_number?: string;
+  barcode?: string;
+  category?: string;
+  description?: string;
+}
+
+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-slate-950 rounded-lg shadow-lg 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-slate-800">
+          <h2 className="text-lg font-normal">Adjust quantity</h2>
+          <button
+            onClick={handleClose}
+            aria-label="Close quantity adjustment modal"
+            className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
+          >
+            <X size={20} className="text-slate-400" />
+          </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-slate-500 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="p-3 bg-green-500/10 border border-green-500/20 rounded-lg text-green-500 text-sm">
+              {successMessage}
+            </div>
+          )}
+
+          {/* Quantity Adjustment */}
+          <div>
+            <label className="text-sm font-medium text-slate-400 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="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-100 rounded-lg font-medium transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}