From b4b71737267a3ae6ec87095fdb0c6109adf7e01b Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Wed, 29 Oct 2025 11:05:07 +0530 Subject: [PATCH] Changes in view of Supplier. --- .../InventoryManagement/AddProductModal.jsx | 364 +++--------------- .../InventoryManagement/AddressStep.jsx | 71 ++++ .../InventoryManagement/BankStep.jsx | 34 ++ .../InventoryManagement/Stepper.jsx | 35 ++ .../InventoryManagement/SupplierInfoStep.jsx | 48 +++ .../InventoryManagement/SupplierListView.jsx | 76 ++++ src/pages/InventoryManagement/ProductPage.jsx | 8 +- 7 files changed, 323 insertions(+), 313 deletions(-) create mode 100644 src/components/InventoryManagement/AddressStep.jsx create mode 100644 src/components/InventoryManagement/BankStep.jsx create mode 100644 src/components/InventoryManagement/Stepper.jsx create mode 100644 src/components/InventoryManagement/SupplierInfoStep.jsx create mode 100644 src/components/InventoryManagement/SupplierListView.jsx diff --git a/src/components/InventoryManagement/AddProductModal.jsx b/src/components/InventoryManagement/AddProductModal.jsx index 08101214..d368dc5d 100644 --- a/src/components/InventoryManagement/AddProductModal.jsx +++ b/src/components/InventoryManagement/AddProductModal.jsx @@ -1,323 +1,73 @@ import React, { useState } from "react"; import GlobalModel from "../../components/common/GlobalModel"; -import Label from "../common/Label"; +import Stepper from "./Stepper"; +import SupplierInfoStep from "./SupplierInfoStep"; +import BankStep from "./BankStep"; +import AddressStep from "./AddressStep"; -// A simple Stepper component for visual guidance -const Stepper = ({ steps, activeStep }) => ( -
- {steps.map((step, index) => ( - -
-
- {index < activeStep ? '✓' : index + 1} -
- {step.label} -
- {index < steps.length - 1 && ( -
- )} - - ))} -
-); +const AddProductModal = ({ isOpen, onClose }) => { + const steps = [ + { key: "supplierInfo", label: "Supplier Info" }, + { key: "bank", label: "Bank" }, + { key: "address", label: "Address" }, + ]; + const [activeStepIndex, setActiveStepIndex] = useState(0); + const activeStepKey = steps[activeStepIndex].key; -const AddProductModal = ({ isOpen, onClose }) => { // Renamed from AddProductModal - const steps = [ - { key: "supplierInfo", label: "Supplier Info" }, - { key: "bank", label: "Bank" }, - { key: "address", label: "Address" }, - ]; + if (!isOpen) return null; - // Use index for active step to make navigation easier - const [activeStepIndex, setActiveStepIndex] = useState(0); - const activeStepKey = steps[activeStepIndex].key; + const handleNext = () => { + if (activeStepIndex < steps.length - 1) setActiveStepIndex(activeStepIndex + 1); + else handleSubmit(); + }; - if (!isOpen) return null; + const handleBack = () => { + if (activeStepIndex > 0) setActiveStepIndex(activeStepIndex - 1); + }; - const handleNext = () => { - if (activeStepIndex < steps.length - 1) { - setActiveStepIndex(activeStepIndex + 1); - } else { - // Last step, submit the form - handleSubmit(); - } - }; + const handleSubmit = () => { + console.log("Form submitted"); + onClose(); + }; - const handleBack = () => { - if (activeStepIndex > 0) { - setActiveStepIndex(activeStepIndex - 1); - } - }; + return ( + +
+
Add New Supplier
- const handleSubmit = () => { - // Add your form submission logic here - console.log("Form submitted"); - onClose(); - }; + - return ( - -
-
Add New Supplier
+
e.preventDefault()}> + {activeStepKey === "supplierInfo" && } + {activeStepKey === "bank" && } + {activeStepKey === "address" && } - {/* ================= Stepper Navigation ================= */} - +
+ - {/* ================= Step Content ================= */} - e.preventDefault()}> - {/* ---------- Step 1: Supplier Info ---------- */} - {activeStepKey === "supplierInfo" && ( -
-
Supplier Information
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- )} - - {/* ---------- Step 2: Bank Tab ---------- */} - {activeStepKey === "bank" && ( -
-
Bank Details
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
- )} - - {/* ---------- Step 3: Address Tab ---------- */} - {activeStepKey === "address" && ( -
-
Address Details
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- )} - - {/* ---------- Buttons ---------- */} -
- - -
- {activeStepIndex < steps.length - 1 ? ( - - ) : ( - - )} -
-
- +
+ {activeStepIndex < steps.length - 1 ? ( + + ) : ( + + )}
- - ); +
+ +
+ + ); }; -export default AddProductModal; \ No newline at end of file +export default AddProductModal; diff --git a/src/components/InventoryManagement/AddressStep.jsx b/src/components/InventoryManagement/AddressStep.jsx new file mode 100644 index 00000000..cafd2b88 --- /dev/null +++ b/src/components/InventoryManagement/AddressStep.jsx @@ -0,0 +1,71 @@ +import React from "react"; +import Label from "../common/Label"; + +const AddressStep = () => { + return ( +
+
Address Details
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {/*
+ + +
+
+ + +
+
+ + +
*/} +
+ + +
+
+ + +
+
+ + +
+
+
+ ); +}; + +export default AddressStep; diff --git a/src/components/InventoryManagement/BankStep.jsx b/src/components/InventoryManagement/BankStep.jsx new file mode 100644 index 00000000..17d2d52f --- /dev/null +++ b/src/components/InventoryManagement/BankStep.jsx @@ -0,0 +1,34 @@ +import React from "react"; +import Label from "../common/Label"; + +const BankStep = () => { + return ( +
+
Bank Details
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); +}; + +export default BankStep; diff --git a/src/components/InventoryManagement/Stepper.jsx b/src/components/InventoryManagement/Stepper.jsx new file mode 100644 index 00000000..66f7368e --- /dev/null +++ b/src/components/InventoryManagement/Stepper.jsx @@ -0,0 +1,35 @@ +import React from "react"; + +const Stepper = ({ steps, activeStep }) => ( +
+ {steps.map((step, index) => ( + +
+
+ {index < activeStep ? '✓' : index + 1} +
+ {step.label} +
+ {index < steps.length - 1 && ( +
+ )} + + ))} +
+); + +export default Stepper; diff --git a/src/components/InventoryManagement/SupplierInfoStep.jsx b/src/components/InventoryManagement/SupplierInfoStep.jsx new file mode 100644 index 00000000..d476f39e --- /dev/null +++ b/src/components/InventoryManagement/SupplierInfoStep.jsx @@ -0,0 +1,48 @@ +import React from "react"; +import Label from "../common/Label"; + +const SupplierInfoStep = () => { + return ( +
+
Supplier Information
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); +}; + +export default SupplierInfoStep; diff --git a/src/components/InventoryManagement/SupplierListView.jsx b/src/components/InventoryManagement/SupplierListView.jsx new file mode 100644 index 00000000..0ef90015 --- /dev/null +++ b/src/components/InventoryManagement/SupplierListView.jsx @@ -0,0 +1,76 @@ +import React from "react"; + +const SupplierListView = () => { + const supplierColumns = [ + { key: "supplierName", label: "Supplier Name", align: "text-start" }, + { key: "contactPerson", label: "Contact Person", align: "text-start" }, + { key: "email", label: "Email", align: "text-start" }, + { key: "phone", label: "Phone", align: "text-start" }, + { key: "address", label: "Address", align: "text-start" }, + { key: "gstNumber", label: "GST No.", align: "text-start" }, + ]; + + // Temporary static data (can be replaced with API data later) + const supplierData = [ + { + supplierName: "Techno Supplies Pvt. Ltd.", + contactPerson: "Rohit Sharma", + email: "rohit@techno.com", + phone: "9876543210", + address: "Sector 15, Noida, UP", + gstNumber: "29ABCDE1234F1Z5", + }, + { + supplierName: "FireSafe Traders", + contactPerson: "Aman Verma", + email: "aman@firesafe.com", + phone: "9911223344", + address: "MG Road, Gurgaon, HR", + gstNumber: "07XYZAB7890P2Q6", + }, + ]; + + return ( +
+
+ + + + {supplierColumns.map((col) => ( + + ))} + + + + + {supplierData.length > 0 ? ( + supplierData.map((row, index) => ( + + {supplierColumns.map((col) => ( + + ))} + + + )) + ) : ( + + + + )} + +
+ {col.label} + Action
+ {row[col.key]} + + + +
+ No supplier data available. +
+
+
+ ); +}; + +export default SupplierListView; diff --git a/src/pages/InventoryManagement/ProductPage.jsx b/src/pages/InventoryManagement/ProductPage.jsx index fefe0cb5..541e4d33 100644 --- a/src/pages/InventoryManagement/ProductPage.jsx +++ b/src/pages/InventoryManagement/ProductPage.jsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import Breadcrumb from "../../components/common/Breadcrumb"; import AddProductModal from "../../components/InventoryManagement/AddProductModal"; +import SupplierListView from "../../components/InventoryManagement/SupplierListView"; const ProductPage = () => { const [isAddInventoryOpen, setIsAddInventoryOpen] = useState(false); @@ -38,12 +39,7 @@ const ProductPage = () => {
- {/* Inventory List Placeholder */} -
-
-

No inventory data available yet.

-
-
+ {/* Add Inventory Modal */}