Changes in view of Supplier.
This commit is contained in:
parent
aff9a14af1
commit
b4b7173726
@ -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 }) => (
|
||||
<div className="d-flex justify-content-between align-items-center mb-5">
|
||||
{steps.map((step, index) => (
|
||||
<React.Fragment key={step.key}>
|
||||
<div className={`text-center ${index <= activeStep ? 'text-primary' : 'text-muted'}`}>
|
||||
<div
|
||||
className={`rounded-circle d-inline-flex align-items-center justify-content-center border p-2 mb-2 ${index === activeStep
|
||||
? 'bg-primary text-white border-primary'
|
||||
: index < activeStep
|
||||
? 'bg-success text-white border-success'
|
||||
: 'bg-light text-muted border-secondary'
|
||||
}`}
|
||||
style={{ width: '30px', height: '30px', fontSize: '14px' }}
|
||||
>
|
||||
{index < activeStep ? '✓' : index + 1}
|
||||
</div>
|
||||
<small className="d-block fw-bold">{step.label}</small>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className={`flex-grow-1 mx-2 border-top ${index < activeStep ? 'border-primary' : 'border-secondary'}`}
|
||||
style={{ height: '0', marginTop: '-20px' }}
|
||||
></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
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 (
|
||||
<GlobalModel isOpen size="xl" closeModal={onClose}>
|
||||
<div className="p-4">
|
||||
<h5 className="mb-4">Add New Supplier</h5>
|
||||
|
||||
const handleSubmit = () => {
|
||||
// Add your form submission logic here
|
||||
console.log("Form submitted");
|
||||
onClose();
|
||||
};
|
||||
<Stepper steps={steps} activeStep={activeStepIndex} />
|
||||
|
||||
return (
|
||||
<GlobalModel isOpen size="xl" closeModal={onClose}>
|
||||
<div className="p-4">
|
||||
<h5 className="mb-4">Add New Supplier</h5>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
{activeStepKey === "supplierInfo" && <SupplierInfoStep />}
|
||||
{activeStepKey === "bank" && <BankStep />}
|
||||
{activeStepKey === "address" && <AddressStep />}
|
||||
|
||||
{/* ================= Stepper Navigation ================= */}
|
||||
<Stepper steps={steps} activeStep={activeStepIndex} />
|
||||
<div className="d-flex justify-content-between mt-5 border-top pt-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={activeStepIndex > 0 ? handleBack : onClose}
|
||||
>
|
||||
{activeStepIndex > 0 ? "← Back" : "Cancel"}
|
||||
</button>
|
||||
|
||||
{/* ================= Step Content ================= */}
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
{/* ---------- Step 1: Supplier Info ---------- */}
|
||||
{activeStepKey === "supplierInfo" && (
|
||||
<div className="text-start">
|
||||
<h6 className="fw-bold text-primary mb-3">Supplier Information</h6>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter supplier name"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Status</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Status</option>
|
||||
<option>Active</option>
|
||||
<option>In-active</option>
|
||||
<option>Pending Approval</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Group</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Group</option>
|
||||
<option>Domestic</option>
|
||||
<option>International</option>
|
||||
<option>Inter-Company</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Category</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter category"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Website URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter website URL"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------- Step 2: Bank Tab ---------- */}
|
||||
{activeStepKey === "bank" && (
|
||||
<div className="text-start">
|
||||
<h6 className="fw-bold text-primary mb-3">Bank Details</h6>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<Label required>Bank Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter bank name"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Bank Account</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter account number"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>IBAN / IFSC</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter IBAN or IFSC"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>SWIFT / BIC Code</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter SWIFT or BIC"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Payment Terms</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter payment terms"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------- Step 3: Address Tab ---------- */}
|
||||
{activeStepKey === "address" && (
|
||||
<div className="text-start">
|
||||
<h6 className="fw-bold text-primary mb-3">Address Details</h6>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<Label required>Address Type</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Type</option>
|
||||
<option>Billing</option>
|
||||
<option>Shipping</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Street</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter street"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>City</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter city"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Postal Code</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter postal code"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Country</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter country"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Contact Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter contact name"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Contact Email</Label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter email"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Contact Phone</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter phone"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Office Phone</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter office phone"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>GSTIN</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter Tax ID or EIN"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>PAN Number</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-select-sm"
|
||||
placeholder="Enter PAN"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Status</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Status</option>
|
||||
<option>Active</option>
|
||||
<option>In-active</option>
|
||||
<option>Blocked</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------- Buttons ---------- */}
|
||||
<div className="d-flex justify-content-between mt-5 border-top pt-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={activeStepIndex > 0 ? handleBack : onClose}
|
||||
>
|
||||
{activeStepIndex > 0 ? '← Back' : 'Cancel'}
|
||||
</button>
|
||||
|
||||
<div>
|
||||
{activeStepIndex < steps.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={handleNext}
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
{activeStepIndex < steps.length - 1 ? (
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={handleNext}>
|
||||
Next →
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={handleSubmit}>
|
||||
Submit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</GlobalModel>
|
||||
);
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</GlobalModel>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProductModal;
|
||||
export default AddProductModal;
|
||||
|
||||
71
src/components/InventoryManagement/AddressStep.jsx
Normal file
71
src/components/InventoryManagement/AddressStep.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
import Label from "../common/Label";
|
||||
|
||||
const AddressStep = () => {
|
||||
return (
|
||||
<div className="text-start">
|
||||
<h6 className="fw-bold text-primary mb-3">Address Details</h6>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<Label required>Address Type</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Type</option>
|
||||
<option>Billing</option>
|
||||
<option>Shipping</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Street</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter street" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>City</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter city" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Postal Code</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter postal code" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Country</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter country" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Contact</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter contact name" />
|
||||
</div>
|
||||
{/* <div className="col-md-6">
|
||||
<Label>Contact Email</Label>
|
||||
<input type="email" className="form-control form-select-sm" placeholder="Enter email" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Contact Phone</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter phone" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Office Phone</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter office phone" />
|
||||
</div> */}
|
||||
<div className="col-md-6">
|
||||
<Label required>GSTIN</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter Tax ID or EIN" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>PAN Number</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter PAN" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Status</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Status</option>
|
||||
<option>Active</option>
|
||||
<option>In-active</option>
|
||||
<option>Blocked</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressStep;
|
||||
34
src/components/InventoryManagement/BankStep.jsx
Normal file
34
src/components/InventoryManagement/BankStep.jsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from "react";
|
||||
import Label from "../common/Label";
|
||||
|
||||
const BankStep = () => {
|
||||
return (
|
||||
<div className="text-start">
|
||||
<h6 className="fw-bold text-primary mb-3">Bank Details</h6>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<Label required>Bank Name</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter bank name" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Bank Account</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter account number" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>IBAN / IFSC</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter IBAN or IFSC" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>SWIFT / BIC Code</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter SWIFT or BIC" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Payment Terms</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter payment terms" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BankStep;
|
||||
35
src/components/InventoryManagement/Stepper.jsx
Normal file
35
src/components/InventoryManagement/Stepper.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
const Stepper = ({ steps, activeStep }) => (
|
||||
<div className="d-flex justify-content-between align-items-center mb-5">
|
||||
{steps.map((step, index) => (
|
||||
<React.Fragment key={step.key}>
|
||||
<div className={`text-center ${index <= activeStep ? 'text-primary' : 'text-muted'}`}>
|
||||
<div
|
||||
className={`rounded-circle d-inline-flex align-items-center justify-content-center border p-2 mb-2 ${
|
||||
index === activeStep
|
||||
? 'bg-primary text-white border-primary'
|
||||
: index < activeStep
|
||||
? 'bg-success text-white border-success'
|
||||
: 'bg-light text-muted border-secondary'
|
||||
}`}
|
||||
style={{ width: '30px', height: '30px', fontSize: '14px' }}
|
||||
>
|
||||
{index < activeStep ? '✓' : index + 1}
|
||||
</div>
|
||||
<small className="d-block fw-bold">{step.label}</small>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className={`flex-grow-1 mx-2 border-top ${
|
||||
index < activeStep ? 'border-primary' : 'border-secondary'
|
||||
}`}
|
||||
style={{ height: '0', marginTop: '-20px' }}
|
||||
></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Stepper;
|
||||
48
src/components/InventoryManagement/SupplierInfoStep.jsx
Normal file
48
src/components/InventoryManagement/SupplierInfoStep.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
import React from "react";
|
||||
import Label from "../common/Label";
|
||||
|
||||
const SupplierInfoStep = () => {
|
||||
return (
|
||||
<div className="text-start">
|
||||
<h6 className="fw-bold text-primary mb-3">Supplier Information</h6>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Name</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter supplier name" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Status</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Status</option>
|
||||
<option>Active</option>
|
||||
<option>In-active</option>
|
||||
<option>Pending Approval</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Supplier Email</Label>
|
||||
<input type="email" className="form-control form-select-sm" placeholder="Enter email" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Group</Label>
|
||||
<select className="form-select form-select-sm">
|
||||
<option value="">Select Group</option>
|
||||
<option>Domestic</option>
|
||||
<option>International</option>
|
||||
<option>Inter-Company</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label required>Supplier Category</Label>
|
||||
<input type="text" className="form-control form-select-sm" placeholder="Enter category" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label>Website URL</Label>
|
||||
<input type="url" className="form-control form-select-sm" placeholder="Enter website URL" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierInfoStep;
|
||||
76
src/components/InventoryManagement/SupplierListView.jsx
Normal file
76
src/components/InventoryManagement/SupplierListView.jsx
Normal file
@ -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 (
|
||||
<div className="card px-0 px-sm-4">
|
||||
<div className="card-datatable table-responsive">
|
||||
<table className="table border-top text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
{supplierColumns.map((col) => (
|
||||
<th key={col.key} className={col.align}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="sticky-action-column bg-white text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{supplierData.length > 0 ? (
|
||||
supplierData.map((row, index) => (
|
||||
<tr key={index}>
|
||||
{supplierColumns.map((col) => (
|
||||
<td key={col.key} className={col.align}>
|
||||
{row[col.key]}
|
||||
</td>
|
||||
))}
|
||||
<td className="text-center">
|
||||
<i className="bx bx-edit text-secondary cursor-pointer"></i>
|
||||
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={supplierColumns.length + 1} className="text-center py-4 text-muted">
|
||||
No supplier data available.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierListView;
|
||||
@ -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 = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inventory List Placeholder */}
|
||||
<div className="card">
|
||||
<div className="card-body text-center text-muted py-5">
|
||||
<p>No inventory data available yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<SupplierListView/>
|
||||
|
||||
{/* Add Inventory Modal */}
|
||||
<AddProductModal
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user