bug fixed
This commit is contained in:
Malini
parent
346790205a
commit
234f6c4794
@ -279,11 +279,11 @@ function App() {
|
||||
}
|
||||
/>
|
||||
</Route> */}
|
||||
<Route path="/profile/edit/:id" element={
|
||||
{/* <Route path="/profile/edit/:id" element={
|
||||
<RequireRole allowedRoles={['EstablishmentUser']}>
|
||||
<EditCompanyProfile />
|
||||
</RequireRole>
|
||||
} />
|
||||
} /> */}
|
||||
{/* <Route
|
||||
path="/admin/configuration/profile/:id?"
|
||||
element={
|
||||
@ -292,6 +292,14 @@ function App() {
|
||||
</RequireRole>
|
||||
}
|
||||
/> */}
|
||||
<Route
|
||||
path="/edit-profile/:id"
|
||||
element={
|
||||
<RequireRole allowedRoles={['EstablishmentUser']}>
|
||||
<EditCompanyProfile />
|
||||
</RequireRole>
|
||||
}
|
||||
/>
|
||||
<Route path="/change-password" element={<ChangePassword />} />
|
||||
<Route path="/forgot-password" element={<ForgotPassword />} />
|
||||
<Route path="/reset-password" element={<PublicContactForm />} />
|
||||
|
||||
@ -18,6 +18,7 @@ const HeaderBar = () => {
|
||||
const [userOpen, setUserOpen] = React.useState(false);
|
||||
const profileRef = React.useRef(null);
|
||||
const navigate = useNavigate();
|
||||
const establishmentId = sessionStorage.getItem("establishment_id") || "";
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
React.useEffect(() => {
|
||||
@ -131,6 +132,37 @@ const HeaderBar = () => {
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to={`/edit-profile/${establishmentId}`}
|
||||
className={({ isActive }) =>
|
||||
`inline-flex items-center gap-2 pb-1 border-b-2 ${
|
||||
isActive
|
||||
? "text-[#92722A] font-medium border-[#92722A]"
|
||||
: "text-[#232528] hover:text-gray-900 border-transparent"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<svg
|
||||
className={`h-[16px] w-[18px] ${
|
||||
isActive ? "text-[#92722A]" : "text-[#232528]"
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Profile</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
{/* <NavLink
|
||||
to="/history"
|
||||
className={({ isActive }) => `inline-flex items-center gap-2 pb-1 border-b-2 ${isActive ? 'text-[#92722A] font-medium border-[#92722A]' : 'text-[#232528] hover:text-gray-900 border-transparent'}`}
|
||||
|
||||
@ -236,6 +236,19 @@ const EstablishmentInfo = ({
|
||||
});
|
||||
};
|
||||
|
||||
// const handleEditProfile = (e) => {
|
||||
// e.preventDefault();
|
||||
|
||||
// const establishmentId = sessionStorage.getItem('establishment_id');
|
||||
// if (!establishmentId) {
|
||||
// alert('No establishment ID found in session');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// localStorage.setItem('returnTo', window.location.pathname);
|
||||
// sessionStorage.setItem('edit_profile_from', 'EstablishmentUser');
|
||||
// // navigate(`/profile/edit/${establishmentId}`);
|
||||
// };
|
||||
const handleEditProfile = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
@ -247,8 +260,9 @@ const EstablishmentInfo = ({
|
||||
|
||||
localStorage.setItem('returnTo', window.location.pathname);
|
||||
sessionStorage.setItem('edit_profile_from', 'EstablishmentUser');
|
||||
navigate(`/profile/edit/${establishmentId}`);
|
||||
navigate(`/edit-profile/${establishmentId}`);
|
||||
};
|
||||
|
||||
const handleEmployeeChange = (field) => (event) => {
|
||||
onChange({
|
||||
...info,
|
||||
@ -375,7 +389,7 @@ const EstablishmentInfo = ({
|
||||
here
|
||||
</a>.
|
||||
</p> */}
|
||||
<p className="text-sm text-[#043DFF] bg-[#E7F5FF]">
|
||||
{/* <p className="text-sm text-[#043DFF] bg-[#E7F5FF]">
|
||||
<span className="font-medium">Need to update details?</span> Go to Profile →{' '}
|
||||
<a
|
||||
href={`/admin/configuration/profile/edit=${sessionStorage.getItem('establishment_id') || ''}`}
|
||||
@ -386,6 +400,16 @@ const EstablishmentInfo = ({
|
||||
Edit Profile
|
||||
</a>
|
||||
. Changes saved there will appear here.
|
||||
</p> */}
|
||||
<p className="text-sm text-[#043DFF] bg-[#E7F5FF]">
|
||||
<span className="font-medium">Need to update details?</span> Go to Profile →{' '}
|
||||
<a
|
||||
href={`/admin/configuration/edit-profile/${sessionStorage.getItem('establishment_id') || ''}`}
|
||||
className="underline font-medium text-[#043DFF] hover:text-[#063B82]"
|
||||
onClick={handleEditProfile}
|
||||
>
|
||||
Edit Profile
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
|
||||
@ -15,6 +15,8 @@ const AddAdminUsers = ({ isOpen, onClose, onSave }) => {
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState({});
|
||||
const [passwordError, setPasswordError] = useState('');
|
||||
const [passwordTouched, setPasswordTouched] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [toastData, setToastData] = useState(null); // 👈 for custom toast
|
||||
|
||||
@ -41,16 +43,14 @@ const AddAdminUsers = ({ isOpen, onClose, onSave }) => {
|
||||
|
||||
if (!formData.status) newErrors.status = 'Status is required';
|
||||
|
||||
if (!formData.password) {
|
||||
newErrors.password = 'Password is required';
|
||||
} else if (formData.password.length < 8) {
|
||||
newErrors.password = 'Password must be at least 8 characters';
|
||||
} else if (formData.password.length > 12) {
|
||||
newErrors.password = 'Password cannot exceed 12 characters';
|
||||
const passwordValidation = validatePassword(formData.password);
|
||||
if (passwordValidation) {
|
||||
newErrors.password = passwordValidation;
|
||||
}
|
||||
|
||||
if (formData.password !== formData.confirmPassword)
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
newErrors.confirmPassword = 'Passwords do not match';
|
||||
}
|
||||
|
||||
return newErrors;
|
||||
};
|
||||
@ -70,10 +70,38 @@ const AddAdminUsers = ({ isOpen, onClose, onSave }) => {
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const validatePassword = (password) => {
|
||||
if (!password) return 'Password is required';
|
||||
if (password.length < 8) return 'Password must be at least 8 characters';
|
||||
if (!/[A-Z]/.test(password)) return 'Must contain at least one uppercase letter';
|
||||
if (!/[a-z]/.test(password)) return 'Must contain at least one lowercase letter';
|
||||
if (!/\d/.test(password)) return 'Must contain at least one number';
|
||||
if (!/[!@#$%^&*]/.test(password)) return 'Must contain at least one special character (!@#$%^&*)';
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
|
||||
// Clear any existing error for this field
|
||||
if (errors[name]) setErrors((prev) => ({ ...prev, [name]: '' }));
|
||||
|
||||
// Real-time password validation
|
||||
if (name === 'password') {
|
||||
setPasswordTouched(true);
|
||||
const error = validatePassword(value);
|
||||
setPasswordError(error);
|
||||
}
|
||||
|
||||
// Clear confirm password error when either password changes
|
||||
if ((name === 'password' || name === 'confirmPassword') && formData.password && formData.confirmPassword) {
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
setErrors(prev => ({ ...prev, confirmPassword: 'Passwords do not match' }));
|
||||
} else {
|
||||
setErrors(prev => ({ ...prev, confirmPassword: '' }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
@ -156,18 +184,22 @@ const AddAdminUsers = ({ isOpen, onClose, onSave }) => {
|
||||
placeholder="Enter email"
|
||||
/>
|
||||
|
||||
<div className="relative">
|
||||
<TextField
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
error={errors.password}
|
||||
onBlur={() => setPasswordTouched(true)}
|
||||
error={passwordTouched && passwordError ? passwordError : ''}
|
||||
required
|
||||
placeholder="Enter password"
|
||||
showToggle
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<TextField
|
||||
label="Confirm Password"
|
||||
name="confirmPassword"
|
||||
@ -179,6 +211,10 @@ const AddAdminUsers = ({ isOpen, onClose, onSave }) => {
|
||||
placeholder="Confirm password"
|
||||
showToggle
|
||||
/>
|
||||
{formData.confirmPassword && !errors.confirmPassword && (
|
||||
<p className="mt-1 text-xs text-green-600">Passwords match</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
|
||||
@ -3,7 +3,8 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { TextField, SelectField, PhoneField } from "@/components/common/FormControls";
|
||||
import Loader from "@/components/common/Loader";
|
||||
import { fetchEstablishmentDetail, updateEstablishment } from '@/services/establishments/establishmentService';
|
||||
import { fetchEmirates, fetchCityTowns } from '@/services/masters/masterService';
|
||||
import { fetchEmirates, fetchCityTowns, fetchProducts } from '@/services/masters/masterService';
|
||||
import HeaderBar from "@/components/layout/HeaderBar";
|
||||
|
||||
// Helper functions
|
||||
const createEmptyProfile = () => ({
|
||||
@ -26,20 +27,6 @@ const createEmptyProfile = () => ({
|
||||
contactPostalCode: '',
|
||||
contactPoBox: '',
|
||||
contactWebsite: '',
|
||||
corporateName: '',
|
||||
corporateAddress: '',
|
||||
corporateCityTown: '',
|
||||
corporateCityTownId: '',
|
||||
corporateEmirate: '',
|
||||
corporateEmirateId: '',
|
||||
corporateMakaniNumber: '',
|
||||
corporateContactPersonName: '',
|
||||
corporateMobileNumber: '',
|
||||
corporateEmail: '',
|
||||
corporatePostalCode: '',
|
||||
corporatePoBox: '',
|
||||
corporateWebsite: '',
|
||||
corporateSameAs: false,
|
||||
employmentEmiratiMale: 0,
|
||||
employmentEmiratiFemale: 0,
|
||||
employmentNonEmiratiMale: 0,
|
||||
@ -69,20 +56,6 @@ const mapApiEstablishmentToProfile = (apiData) => {
|
||||
contactPostalCode: data.establishment_postal_code || '',
|
||||
contactPoBox: data.establishment_po_box || '',
|
||||
contactWebsite: data.establishment_website || '',
|
||||
corporateName: data.corporate_name || '',
|
||||
corporateAddress: data.corporate_address || '',
|
||||
corporateCityTown: data.corporate_city?.name || '',
|
||||
corporateCityTownId: data.corporate_city?.id || '',
|
||||
corporateEmirate: data.corporate_emirate?.name || '',
|
||||
corporateEmirateId: data.corporate_emirate?.id || '',
|
||||
corporateMakaniNumber: data.corporate_makani_number || '',
|
||||
corporateContactPersonName: data.corporate_contact_person_name || '',
|
||||
corporateMobileNumber: data.corporate_mobile_number || '',
|
||||
corporateEmail: data.corporate_email || '',
|
||||
corporatePostalCode: data.corporate_postal_code || '',
|
||||
corporatePoBox: data.corporate_po_box || '',
|
||||
corporateWebsite: data.corporate_website || '',
|
||||
corporateSameAs: data.corporate_same_as_establishment || false,
|
||||
employmentEmiratiMale: data.emirati_male || 0,
|
||||
employmentEmiratiFemale: data.emirati_female || 0,
|
||||
employmentNonEmiratiMale: data.non_emirati_male || 0,
|
||||
@ -90,22 +63,6 @@ const mapApiEstablishmentToProfile = (apiData) => {
|
||||
};
|
||||
};
|
||||
|
||||
const contactToCorporateMap = {
|
||||
contactName: 'corporateName',
|
||||
contactAddress: 'corporateAddress',
|
||||
contactCityTown: 'corporateCityTown',
|
||||
contactEmirate: 'corporateEmirate',
|
||||
contactCityTownId: 'corporateCityTownId',
|
||||
contactEmirateId: 'corporateEmirateId',
|
||||
contactMakaniNumber: 'corporateMakaniNumber',
|
||||
contactPersonName: 'corporateContactPersonName',
|
||||
contactMobileNumber: 'corporateMobileNumber',
|
||||
contactEmail: 'corporateEmail',
|
||||
contactPostalCode: 'corporatePostalCode',
|
||||
contactPoBox: 'corporatePoBox',
|
||||
contactWebsite: 'corporateWebsite',
|
||||
};
|
||||
|
||||
const computeEmploymentTotals = (data) => {
|
||||
const emiratiMale = parseInt(data.employmentEmiratiMale) || 0;
|
||||
const nonEmiratiMale = parseInt(data.employmentNonEmiratiMale) || 0;
|
||||
@ -121,18 +78,11 @@ const computeEmploymentTotals = (data) => {
|
||||
};
|
||||
};
|
||||
|
||||
const captureCorporateValues = (data) => {
|
||||
const corporateData = {};
|
||||
Object.values(contactToCorporateMap).forEach(key => {
|
||||
corporateData[key] = data[key];
|
||||
});
|
||||
return corporateData;
|
||||
};
|
||||
|
||||
const EditCompanyProfile = ({ onClose: propOnClose }) => {
|
||||
const EditCompanyProfile = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id: establishmentId } = useParams();
|
||||
const onClose = propOnClose || (() => navigate('/survey'));
|
||||
console.log('EditCompanyProfile mounted, establishmentId from params:', establishmentId);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [form, setForm] = useState(createEmptyProfile());
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
@ -144,16 +94,18 @@ const EditCompanyProfile = ({ onClose: propOnClose }) => {
|
||||
const [emirateOptions, setEmirateOptions] = useState([]);
|
||||
const [emirateLookup, setEmirateLookup] = useState({});
|
||||
const [contactCityOptions, setContactCityOptions] = useState([]);
|
||||
const [corporateCityOptions, setCorporateCityOptions] = useState([]);
|
||||
const [availableProducts, setAvailableProducts] = useState([]);
|
||||
const [selectedProducts, setSelectedProducts] = useState([]);
|
||||
const [productSearchTerm, setProductSearchTerm] = useState('');
|
||||
const [isLoadingProducts, setIsLoadingProducts] = useState(false);
|
||||
const initialSnapshotRef = useRef(null);
|
||||
const corporateBackupRef = useRef(null);
|
||||
|
||||
const formSteps = React.useMemo(
|
||||
() => [
|
||||
{ label: 'User Profile' },
|
||||
{ label: 'Identification Particulars' },
|
||||
{ label: 'Establishment Contact Details' },
|
||||
{ label: 'Corporate / Head Office Contact' },
|
||||
{ label: 'Products' },
|
||||
{ label: 'Employment in Establishment' },
|
||||
],
|
||||
[]
|
||||
@ -182,14 +134,7 @@ const EditCompanyProfile = ({ onClose: propOnClose }) => {
|
||||
{ field: 'contactEmail', label: 'Email' },
|
||||
],
|
||||
3: [
|
||||
{ field: 'corporateName', label: 'Name' },
|
||||
{ field: 'corporateAddress', label: 'Address' },
|
||||
{ field: 'corporateCityTown', label: 'City/Town' },
|
||||
{ field: 'corporateEmirate', label: 'Emirate' },
|
||||
{ field: 'corporateMakaniNumber', label: 'Makani Number' },
|
||||
{ field: 'corporateContactPersonName', label: 'Contact Person Name' },
|
||||
{ field: 'corporateMobileNumber', label: 'Mobile Number' },
|
||||
{ field: 'corporateEmail', label: 'Email' },
|
||||
// Products are optional, no required fields
|
||||
],
|
||||
4: [
|
||||
{ field: 'employmentEmiratiMale', label: 'Number of Emirati Male' },
|
||||
@ -231,16 +176,6 @@ const EditCompanyProfile = ({ onClose: propOnClose }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'corporateCityTown') {
|
||||
const foundCity = corporateCityOptions.find(option => option.value === value || option.label === value);
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
corporateCityTown: foundCity?.name || '',
|
||||
corporateCityTownId: foundCity?.id || ''
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
setFieldErrors((prev) => ({ ...prev, [field]: "" }));
|
||||
|
||||
@ -251,7 +186,7 @@ const EditCompanyProfile = ({ onClose: propOnClose }) => {
|
||||
if (field === 'userProfileConfirmPassword') {
|
||||
setConfirmError("");
|
||||
}
|
||||
}, [contactCityOptions, corporateCityOptions]);
|
||||
}, [contactCityOptions]);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
if (validateStepFields(activeStep)) {
|
||||
@ -292,15 +227,108 @@ const EditCompanyProfile = ({ onClose: propOnClose }) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Load products
|
||||
const loadProducts = useCallback(async () => {
|
||||
try {
|
||||
setIsLoadingProducts(true);
|
||||
const response = await fetchProducts();
|
||||
|
||||
let productsData = [];
|
||||
|
||||
if (Array.isArray(response)) {
|
||||
productsData = response;
|
||||
} else if (response?.data) {
|
||||
productsData = Array.isArray(response.data) ? response.data : response.data.products || [];
|
||||
}
|
||||
|
||||
console.log('Processed products data:', productsData);
|
||||
|
||||
// Format products data
|
||||
const formattedProducts = productsData.map(p => ({
|
||||
id: p.id || p.value,
|
||||
product_id: p.id || p.value,
|
||||
hs_code: p.hs_code || p.hsCode || '',
|
||||
hsCode: p.hs_code || p.hsCode || '',
|
||||
product_name: p.product_name || p.productName || p.label || '',
|
||||
productName: p.product_name || p.productName || p.label || '',
|
||||
label: p.product_name || p.productName || p.label || '',
|
||||
value: p.id || p.value
|
||||
}));
|
||||
|
||||
setAvailableProducts(formattedProducts);
|
||||
return formattedProducts;
|
||||
} catch (error) {
|
||||
console.error('Error loading products:', error);
|
||||
return [];
|
||||
} finally {
|
||||
setIsLoadingProducts(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Product search handler
|
||||
const handleProductSearch = (e) => {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
setProductSearchTerm(searchTerm);
|
||||
|
||||
if (!searchTerm) {
|
||||
setAvailableProducts(prev => prev.filter(p =>
|
||||
!selectedProducts.some(sp => sp.id === p.id)
|
||||
));
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = availableProducts.filter(product =>
|
||||
(product.label?.toLowerCase().includes(searchTerm) ||
|
||||
product.hs_code?.toLowerCase().includes(searchTerm)) &&
|
||||
!selectedProducts.some(sp => sp.id === product.id)
|
||||
);
|
||||
|
||||
setAvailableProducts(filtered);
|
||||
};
|
||||
|
||||
// Add product handler
|
||||
const handleAddProduct = (product) => {
|
||||
setSelectedProducts(prev => {
|
||||
const updated = [...prev, product];
|
||||
return updated;
|
||||
});
|
||||
|
||||
// Remove from available products
|
||||
setAvailableProducts(prev => prev.filter(p => p.id !== product.id));
|
||||
};
|
||||
|
||||
// Remove product handler
|
||||
const handleRemoveProduct = (product) => {
|
||||
setSelectedProducts(prev => prev.filter(p => p.id !== product.id));
|
||||
|
||||
// Add back to available products if not already there and matches search
|
||||
if (!productSearchTerm ||
|
||||
(product.hs_code && product.hs_code.toLowerCase().includes(productSearchTerm)) ||
|
||||
(product.product_name && product.product_name.toLowerCase().includes(productSearchTerm))) {
|
||||
setAvailableProducts(prev => {
|
||||
if (!prev.some(p => p.id === product.id)) {
|
||||
return [...prev, product];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('useEffect triggered, establishmentId:', establishmentId);
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!establishmentId) {
|
||||
console.log('No establishmentId found, skipping fetch');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('Starting API call to fetch establishment details for ID:', establishmentId);
|
||||
|
||||
const response = await fetchEstablishmentDetail(establishmentId);
|
||||
console.log('API Response received:', response);
|
||||
|
||||
if (!response) {
|
||||
console.error('Empty response received');
|
||||
@ -308,26 +336,49 @@ useEffect(() => {
|
||||
}
|
||||
|
||||
const mappedProfile = mapApiEstablishmentToProfile(response);
|
||||
console.log('Mapped Profile:', mappedProfile);
|
||||
|
||||
const formData = {
|
||||
...createEmptyProfile(),
|
||||
...mappedProfile,
|
||||
apiId: establishmentId,
|
||||
corporateSameAs: Boolean(mappedProfile.corporateSameAs)
|
||||
apiId: establishmentId
|
||||
};
|
||||
|
||||
if (formData.corporateSameAs) {
|
||||
Object.entries(contactToCorporateMap).forEach(([source, target]) => {
|
||||
formData[target] = formData[source];
|
||||
});
|
||||
}
|
||||
|
||||
const totals = computeEmploymentTotals(formData);
|
||||
Object.assign(formData, totals);
|
||||
|
||||
console.log('Final Form Data:', formData);
|
||||
|
||||
setForm(formData);
|
||||
initialSnapshotRef.current = formData;
|
||||
corporateBackupRef.current = captureCorporateValues(formData);
|
||||
|
||||
// Load products and set selected products
|
||||
const allProducts = await loadProducts();
|
||||
|
||||
// Set selected products from API response
|
||||
const establishmentProducts = response.data?.establishment_products || response.establishment_products || [];
|
||||
if (Array.isArray(establishmentProducts) && establishmentProducts.length > 0) {
|
||||
const formattedSelectedProducts = establishmentProducts.map(ep => {
|
||||
const productData = ep.product || {};
|
||||
return {
|
||||
id: ep.id || 0,
|
||||
product_id: ep.product_id || 0,
|
||||
hs_code: productData.hs_code || ep.hs_code || '',
|
||||
hsCode: productData.hs_code || ep.hs_code || '',
|
||||
product_name: productData.product_name || ep.product_name || 'Unnamed Product',
|
||||
productName: productData.product_name || ep.product_name || 'Unnamed Product',
|
||||
label: `${productData.product_name || ep.product_name || 'Unnamed Product'}${productData.hs_code ? ` (${productData.hs_code})` : ''}`,
|
||||
value: ep.product_id ? String(ep.product_id) : '',
|
||||
...productData
|
||||
};
|
||||
});
|
||||
setSelectedProducts(formattedSelectedProducts);
|
||||
|
||||
// Remove selected products from available products
|
||||
setAvailableProducts(prev =>
|
||||
prev.filter(p => !formattedSelectedProducts.some(sp => sp.id === p.id))
|
||||
);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load establishment details:', error);
|
||||
@ -338,7 +389,7 @@ useEffect(() => {
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [establishmentId]);
|
||||
}, [establishmentId, loadProducts]);
|
||||
|
||||
// Load emirates on component mount
|
||||
useEffect(() => {
|
||||
@ -391,19 +442,6 @@ useEffect(() => {
|
||||
loadContactCities();
|
||||
}, [form.contactEmirateId, loadCities]);
|
||||
|
||||
// Load corporate cities when emirate ID changes
|
||||
useEffect(() => {
|
||||
const loadCorporateCities = async () => {
|
||||
if (form.corporateEmirateId) {
|
||||
await loadCities(form.corporateEmirateId, setCorporateCityOptions);
|
||||
} else {
|
||||
setCorporateCityOptions([]);
|
||||
}
|
||||
};
|
||||
|
||||
loadCorporateCities();
|
||||
}, [form.corporateEmirateId, loadCities]);
|
||||
|
||||
// Calculate totals when employment numbers change
|
||||
useEffect(() => {
|
||||
const totals = computeEmploymentTotals(form);
|
||||
@ -418,34 +456,9 @@ useEffect(() => {
|
||||
form.employmentNonEmiratiFemale
|
||||
]);
|
||||
|
||||
// Handle corporate same as establishment checkbox
|
||||
const handleCorporateSameAsChange = useCallback((checked) => {
|
||||
if (checked) {
|
||||
// Save current corporate values before overwriting
|
||||
corporateBackupRef.current = captureCorporateValues(form);
|
||||
|
||||
// Copy contact details to corporate
|
||||
const corporateUpdates = { corporateSameAs: true };
|
||||
Object.entries(contactToCorporateMap).forEach(([source, target]) => {
|
||||
corporateUpdates[target] = form[source];
|
||||
});
|
||||
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
...corporateUpdates
|
||||
}));
|
||||
} else {
|
||||
// Restore original corporate values
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
corporateSameAs: false,
|
||||
...(corporateBackupRef.current || {})
|
||||
}));
|
||||
corporateBackupRef.current = null;
|
||||
}
|
||||
}, [form]);
|
||||
|
||||
const handleSave = async () => {
|
||||
console.log("Submitted data:", form);
|
||||
console.log("Selected products:", selectedProducts);
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
@ -461,8 +474,6 @@ useEffect(() => {
|
||||
establishment_address: form.contactAddress || "",
|
||||
establishment_city_town_id: form.contactCityTownId ? Number(form.contactCityTownId) : null,
|
||||
establishment_emirate_id: form.contactEmirateId ? Number(form.contactEmirateId) : null,
|
||||
corporate_city_town_id: form.corporateCityTownId ? Number(form.corporateCityTownId) : null,
|
||||
corporate_emirate_id: form.corporateEmirateId ? Number(form.corporateEmirateId) : null,
|
||||
establishment_postal_code: form.contactPostalCode || "",
|
||||
establishment_po_box: form.contactPoBox || "",
|
||||
establishment_makani_number: form.contactMakaniNumber || "",
|
||||
@ -471,17 +482,6 @@ useEffect(() => {
|
||||
establishment_mobile_number: form.contactMobileNumber || "",
|
||||
establishment_contact_email: form.contactEmail || "",
|
||||
establishment_website: form.contactWebsite || "",
|
||||
corporate_same_as_establishment: Boolean(form.corporateSameAs),
|
||||
corporate_name: form.corporateName || "",
|
||||
corporate_address: form.corporateAddress || "",
|
||||
corporate_postal_code: form.corporatePostalCode || "",
|
||||
corporate_po_box: form.corporatePoBox || "",
|
||||
corporate_makani_number: form.corporateMakaniNumber || "",
|
||||
corporate_contact_person_name: form.corporateContactPersonName || "",
|
||||
corporate_contact_person_designation: form.corporateContactPersonDesignation || "",
|
||||
corporate_mobile_number: form.corporateMobileNumber || "",
|
||||
corporate_email: form.corporateEmail || "",
|
||||
corporate_website: form.corporateWebsite || "",
|
||||
emirati_male: Number(form.employmentEmiratiMale) || 0,
|
||||
emirati_female: Number(form.employmentEmiratiFemale) || 0,
|
||||
non_emirati_male: Number(form.employmentNonEmiratiMale) || 0,
|
||||
@ -495,12 +495,20 @@ useEffect(() => {
|
||||
(Number(form.employmentNonEmiratiMale) || 0) +
|
||||
(Number(form.employmentNonEmiratiFemale) || 0),
|
||||
updated_by: 1,
|
||||
establishment_products: Array.isArray(selectedProducts) && selectedProducts.length > 0
|
||||
? selectedProducts.map(p => ({
|
||||
product_id: p.product_id || p.id || 0
|
||||
}))
|
||||
: [],
|
||||
};
|
||||
|
||||
console.log("Payload sent:", establishmentData);
|
||||
|
||||
if (establishmentId) {
|
||||
console.log("Updating establishment with ID:", establishmentId);
|
||||
await updateEstablishment(establishmentId, establishmentData);
|
||||
onClose();
|
||||
console.log("Profile updated successfully!");
|
||||
navigate('/survey');
|
||||
} else {
|
||||
console.error("No establishment ID provided for update");
|
||||
alert("Error: No establishment ID provided for update");
|
||||
@ -760,184 +768,106 @@ useEffect(() => {
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h4 className="text-[16px] font-semibold text-[#232528]">Corporate/Head Office Contact</h4>
|
||||
<div className="space-y-6">
|
||||
<h4 className="text-[16px] font-semibold text-[#232528]">Products</h4>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Available Products Panel */}
|
||||
<div className="bg-white rounded-lg border border-[#E5E7EB] overflow-hidden">
|
||||
<div className="bg-[#F9FAFB] px-4 py-3 border-b border-[#E5E7EB]">
|
||||
<h5 className="text-sm font-medium text-[#111827]">Available Products</h5>
|
||||
</div>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-[#232528]">
|
||||
<div className="p-4">
|
||||
<div className="relative mb-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.corporateSameAs}
|
||||
onChange={(e) => handleCorporateSameAsChange(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-2 border-[#CBA344] text-[#92722A] focus:ring-[#92722A]"
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={productSearchTerm}
|
||||
onChange={handleProductSearch}
|
||||
className="w-full px-3 py-2 border border-[#D1D5DB] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#92722A] focus:border-transparent"
|
||||
/>
|
||||
Same as Establishment Contact
|
||||
</label>
|
||||
<svg
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<TextField
|
||||
label="Name"
|
||||
value={form.corporateName || ""}
|
||||
onChange={(e) => handleFormChange("corporateName", e.target.value)}
|
||||
placeholder="Enter Name"
|
||||
width="100%"
|
||||
required
|
||||
disabled={form.corporateSameAs}
|
||||
error={fieldErrors.corporateName}
|
||||
/>
|
||||
<TextField
|
||||
label="Address"
|
||||
value={form.corporateAddress || ""}
|
||||
onChange={(e) => handleFormChange("corporateAddress", e.target.value)}
|
||||
placeholder="Enter Address"
|
||||
width="100%"
|
||||
required
|
||||
disabled={form.corporateSameAs}
|
||||
error={fieldErrors.corporateAddress}
|
||||
/>
|
||||
{form.corporateSameAs ? (
|
||||
<>
|
||||
<TextField
|
||||
label="Emirate"
|
||||
value={form.contactEmirate || ""}
|
||||
disabled={true}
|
||||
width="100%"
|
||||
/>
|
||||
<TextField
|
||||
label="City/Town"
|
||||
value={form.contactCityTown || ""}
|
||||
disabled={true}
|
||||
width="100%"
|
||||
/>
|
||||
</>
|
||||
<div className="border border-[#E5E7EB] rounded-md overflow-hidden">
|
||||
{isLoadingProducts ? (
|
||||
<div className="flex justify-center items-center p-4">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#92722A]"></div>
|
||||
</div>
|
||||
) : availableProducts.length > 0 ? (
|
||||
<ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto">
|
||||
{availableProducts.map((product) => (
|
||||
<li key={product.id} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[#111827]">
|
||||
{product.hsCode || ''}
|
||||
{product.hsCode && (product.productName || product.label || product.product_name) ? ' - ' : ''}
|
||||
{product.productName || product.label || product.product_name || ''}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAddProduct(product)}
|
||||
className="text-[#92722A] hover:text-[#7A5F1E] text-sm font-medium"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<>
|
||||
<SelectField
|
||||
label="Emirate"
|
||||
name="corporateEmirate"
|
||||
value={form.corporateEmirateId || ""}
|
||||
onChange={async (e) => {
|
||||
const selectedValue = e.target.value;
|
||||
const selectedEmirate = emirateOptions.find(opt => opt.value === selectedValue);
|
||||
|
||||
handleFormChange("corporateEmirate", selectedEmirate?.name || '');
|
||||
handleFormChange("corporateEmirateId", selectedEmirate?.id || '');
|
||||
handleFormChange("corporateCityTown", '');
|
||||
handleFormChange("corporateCityTownId", '');
|
||||
|
||||
if (selectedEmirate?.id) {
|
||||
const cities = await loadCities(selectedEmirate.id, setCorporateCityOptions);
|
||||
setCorporateCityOptions(cities);
|
||||
} else {
|
||||
setCorporateCityOptions([]);
|
||||
}
|
||||
}}
|
||||
options={emirateOptions.map(opt => ({
|
||||
value: opt.value,
|
||||
label: opt.label
|
||||
}))}
|
||||
placeholder="Select Emirate"
|
||||
width="100%"
|
||||
required
|
||||
error={fieldErrors.corporateEmirate}
|
||||
/>
|
||||
<SelectField
|
||||
label="City/Town"
|
||||
name="corporateCityTown"
|
||||
value={form.corporateCityTownId || ''}
|
||||
onChange={(e) => {
|
||||
const selectedValue = e.target.value;
|
||||
const selectedCity = corporateCityOptions.find(opt => opt.value === selectedValue);
|
||||
if (selectedCity) {
|
||||
handleFormChange("corporateCityTown", selectedCity.value);
|
||||
}
|
||||
}}
|
||||
options={corporateCityOptions.map(opt => ({
|
||||
value: opt.value,
|
||||
label: opt.label
|
||||
}))}
|
||||
placeholder={form.corporateEmirateId ? "Select City/Town" : "Select emirate first"}
|
||||
width="100%"
|
||||
required
|
||||
disabled={!form.corporateEmirateId}
|
||||
error={fieldErrors.corporateCityTown}
|
||||
/>
|
||||
</>
|
||||
<div className="p-4 text-center text-sm text-[#6B7280]">
|
||||
{productSearchTerm ? 'No matching products found' : 'No products available'}
|
||||
</div>
|
||||
)}
|
||||
<TextField
|
||||
label="Postal Code"
|
||||
value={form.corporatePostalCode || ""}
|
||||
onChange={(e) => handleFormChange("corporatePostalCode", e.target.value)}
|
||||
placeholder="Enter Postal Code"
|
||||
width="100%"
|
||||
disabled={form.corporateSameAs}
|
||||
/>
|
||||
<TextField
|
||||
label="PO Box"
|
||||
value={form.corporatePoBox || ""}
|
||||
onChange={(e) => handleFormChange("corporatePoBox", e.target.value)}
|
||||
placeholder="Enter P.O. Box"
|
||||
width="100%"
|
||||
disabled={form.corporateSameAs}
|
||||
/>
|
||||
<TextField
|
||||
label="Makani Number"
|
||||
value={form.corporateMakaniNumber || ""}
|
||||
onChange={(e) => handleFormChange("corporateMakaniNumber", e.target.value)}
|
||||
placeholder="Enter Makani Number"
|
||||
width="100%"
|
||||
required
|
||||
disabled={form.corporateSameAs}
|
||||
error={fieldErrors.corporateMakaniNumber}
|
||||
/>
|
||||
<TextField
|
||||
label="Contact Person Name"
|
||||
value={form.corporateContactPersonName || ""}
|
||||
onChange={(e) => handleFormChange("corporateContactPersonName", e.target.value)}
|
||||
placeholder="Enter Contact Person Name"
|
||||
width="100%"
|
||||
required
|
||||
disabled={form.corporateSameAs}
|
||||
error={fieldErrors.corporateContactPersonName}
|
||||
/>
|
||||
<TextField
|
||||
label="Contact Person Designation"
|
||||
value={form.corporateContactPersonDesignation || ""}
|
||||
onChange={(e) => handleFormChange("corporateContactPersonDesignation", e.target.value)}
|
||||
placeholder="Enter contact person designation"
|
||||
width="100%"
|
||||
disabled={form.corporateSameAs}
|
||||
/>
|
||||
<PhoneField
|
||||
label="Mobile Number"
|
||||
value={form.corporateMobileNumber || ""}
|
||||
onChange={(value) => handleFormChange("corporateMobileNumber", value)}
|
||||
placeholder="Enter Mobile Number"
|
||||
width="100%"
|
||||
required
|
||||
disabled={form.corporateSameAs}
|
||||
error={fieldErrors.corporateMobileNumber}
|
||||
/>
|
||||
<TextField
|
||||
label="Email"
|
||||
value={form.corporateEmail || ""}
|
||||
onChange={(e) => handleFormChange("corporateEmail", e.target.value)}
|
||||
placeholder="Enter Email"
|
||||
width="100%"
|
||||
type="email"
|
||||
required
|
||||
disabled={form.corporateSameAs}
|
||||
error={fieldErrors.corporateEmail}
|
||||
/>
|
||||
<TextField
|
||||
label="Website"
|
||||
value={form.corporateWebsite || ""}
|
||||
onChange={(e) => handleFormChange("corporateWebsite", e.target.value)}
|
||||
placeholder="Enter Website"
|
||||
width="100%"
|
||||
disabled={form.corporateSameAs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Products Panel */}
|
||||
<div className="bg-white rounded-lg border border-[#E5E7EB] overflow-hidden">
|
||||
<div className="bg-[#F9FAFB] px-4 py-3 border-b border-[#E5E7EB] flex justify-between items-center">
|
||||
<h5 className="text-sm font-medium text-[#111827]">Selected Products</h5>
|
||||
{selectedProducts.length > 0 && (
|
||||
<span className="bg-[#FEF3C7] text-[#92400E] text-xs font-medium px-2 py-0.5 rounded-full">
|
||||
{selectedProducts.length} selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{selectedProducts.length > 0 ? (
|
||||
<ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto">
|
||||
{selectedProducts.map((product) => (
|
||||
<li key={product.id} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[#111827]">
|
||||
{product.hs_code || product.hsCode || ''}
|
||||
{product.hs_code || product.hsCode ? ' - ' : ''}
|
||||
{product.product_name || product.productName || product.label || 'Unnamed Product'}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveProduct(product)}
|
||||
className="text-[#EF4444] hover:text-[#DC2626] text-sm font-medium"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="p-4 text-center text-sm text-[#6B7280] border border-[#E5E7EB] rounded-md">
|
||||
No products selected
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1013,27 +943,23 @@ useEffect(() => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="bg-white w-full max-w-7xl rounded-xl shadow-2xl overflow-hidden flex flex-col h-[75vh]">
|
||||
<div className="min-h-screen bg-[#F8FAFC]">
|
||||
<HeaderBar />
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
{loading && <Loader />}
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center border-b border-[#F1F2F4] px-8 py-5 bg-white sticky top-0 z-10">
|
||||
<div className="flex justify-between items-center border-b border-[#F1F2F4] px-8 py-5 bg-white">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900">Edit Company Profile</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex h-7 w-7 text-lg items-center justify-center rounded hover:bg-gray-100 hover:bg-opacity-10 text-[#92722A] hover:text-[#92722A] transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<aside className="w-64 bg-[#F9FAFB] border-r border-[#E5E7EB] overflow-y-auto" style={{ maxHeight: 'calc(75vh - 120px)' }}>
|
||||
<div className="flex flex-1">
|
||||
<aside className="w-64 bg-[#F9FAFB] border-r border-[#E5E7EB]">
|
||||
<ol className="py-6 px-4 space-y-2">
|
||||
{formSteps.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
@ -1071,7 +997,7 @@ useEffect(() => {
|
||||
})}
|
||||
</ol>
|
||||
</aside>
|
||||
<div className="flex-1 overflow-y-auto" style={{ maxHeight: 'calc(85vh - 120px)' }}>
|
||||
<div className="flex-1">
|
||||
<div className="px-6 py-6">
|
||||
{renderStepContent()}
|
||||
</div>
|
||||
@ -1098,12 +1024,24 @@ useEffect(() => {
|
||||
<span> </span>
|
||||
)}
|
||||
</div>
|
||||
{activeStep === formSteps.length - 1 ? (
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{activeStep > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-md border border-[#92722A] bg-white px-4 py-2 text-sm font-medium text-[#92722A] shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
onClick={() => onClose && onClose()}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
)}
|
||||
|
||||
{activeStep === formSteps.length - 1 ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-md border border-[#92722A] bg-white px-4 py-2 text-sm font-medium text-[#92722A] shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
onClick={() => navigate('/survey')}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@ -1115,7 +1053,7 @@ useEffect(() => {
|
||||
>
|
||||
{loading ? 'Saving…' : 'Update'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
@ -1129,7 +1067,10 @@ useEffect(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditCompanyProfile;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import Table from '@/components/common/Table';
|
||||
import StatusBadge from '@/components/common/StatusBadge';
|
||||
import { TextField, SelectField } from '@/components/common/FormControls';
|
||||
import { getUnits, createUnit, updateUnit, deleteUnit } from '@/services/configuration/unitService';
|
||||
import { TextField } from '@/components/common/FormControls';
|
||||
import { getUnits, createUnit, updateUnit, deleteUnit, uploadUnitCSV } from '@/services/configuration/unitService';
|
||||
|
||||
const downloadIconSrc = '/assets/images/DownloadSimple.svg';
|
||||
const addIconSrc = '/assets/images/ic_baseline-plus.svg';
|
||||
@ -11,9 +10,7 @@ const pencilInactiveSrc = '/assets/images/pencilsimple-inactive.svg';
|
||||
const trashActiveSrc = '/assets/images/Trash - active.svg';
|
||||
const trashInactiveSrc = '/assets/images/Trash - Inactive.svg';
|
||||
const deleteIconSrc = '/assets/images/delete.svg';
|
||||
const caretDownIconSrc = '/assets/images/caretdown-active.svg';
|
||||
const rectangleIconSrc = '/assets/images/Rectangle.svg';
|
||||
const checkboxIconSrc = '/assets/images/checkbox.svg';
|
||||
const uploadImportIconSrc = '/assets/images/UploadSimple.svg';
|
||||
|
||||
// Custom Toast Component
|
||||
const CustomToast = ({ message, type, onClose }) => {
|
||||
@ -41,13 +38,13 @@ const CustomToast = ({ message, type, onClose }) => {
|
||||
const getIcon = () => {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return '✅';
|
||||
return '';
|
||||
case 'error':
|
||||
return '❌';
|
||||
return '';
|
||||
case 'warning':
|
||||
return '⚠️';
|
||||
return '';
|
||||
default:
|
||||
return 'ℹ️';
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
@ -66,10 +63,8 @@ const CustomToast = ({ message, type, onClose }) => {
|
||||
};
|
||||
|
||||
const createEmptyUnitForm = () => ({
|
||||
unitName: '',
|
||||
uom: '',
|
||||
description: '',
|
||||
productsMapped: [],
|
||||
status: '',
|
||||
});
|
||||
|
||||
const UnitMaster = () => {
|
||||
@ -78,16 +73,23 @@ const UnitMaster = () => {
|
||||
const [editingRow, setEditingRow] = useState(null);
|
||||
const [deletingRow, setDeletingRow] = useState(null);
|
||||
const [modalMode, setModalMode] = useState(null);
|
||||
const [selectedUnit, setSelectedUnit] = useState(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [form, setForm] = useState(createEmptyUnitForm());
|
||||
const [formErrors, setFormErrors] = useState({});
|
||||
const [isProductDropdownOpen, setIsProductDropdownOpen] = useState(false);
|
||||
const productDropdownRef = useRef(null);
|
||||
const pageSize = 10;
|
||||
const [currentUser, setCurrentUser] = useState(null);
|
||||
const [toastData, setToastData] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = React.useState('');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [saveLoading, setSaveLoading] = useState(false);
|
||||
const [selectedUnit, setSelectedUnit] = useState(null);
|
||||
|
||||
// Import CSV state
|
||||
const [importModalOpen, setImportModalOpen] = useState(false);
|
||||
const [file, setFile] = useState(null);
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const [importLoading, setImportLoading] = useState(false);
|
||||
const [importError, setImportError] = useState('');
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const pageSize = 10;
|
||||
|
||||
// Fetch units on component mount
|
||||
useEffect(() => {
|
||||
@ -98,27 +100,45 @@ const UnitMaster = () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getUnits();
|
||||
const unitsData = response.data || [];
|
||||
|
||||
// ✅ Sort by latest created_at date (newest first)
|
||||
// Handle different response formats
|
||||
let unitsData = [];
|
||||
if (Array.isArray(response)) {
|
||||
unitsData = response;
|
||||
} else if (response && Array.isArray(response.data)) {
|
||||
unitsData = response.data;
|
||||
} else if (response && response.data) {
|
||||
// If response.data is an object, convert to array
|
||||
if (typeof response.data === 'object' && !Array.isArray(response.data)) {
|
||||
unitsData = Object.values(response.data);
|
||||
} else {
|
||||
unitsData = response.data;
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by latest created_at date (newest first)
|
||||
const sortedUnits = [...unitsData].sort(
|
||||
(a, b) => new Date(b.created_at) - new Date(a.created_at)
|
||||
(a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0)
|
||||
);
|
||||
|
||||
setUnits(sortedUnits);
|
||||
} catch (error) {
|
||||
console.error('Error fetching units:', error);
|
||||
setToastData({
|
||||
message: 'Failed to load units. Please try again.',
|
||||
type: 'error'
|
||||
});
|
||||
setUnits([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredUnits = React.useMemo(() => {
|
||||
const filteredUnits = useMemo(() => {
|
||||
if (!searchTerm) return units;
|
||||
const term = searchTerm.toLowerCase();
|
||||
return units.filter(unit =>
|
||||
(unit.uom && unit.uom.toLowerCase().includes(term)) ||
|
||||
(unit.uom_short_name && unit.uom_short_name.toLowerCase().includes(term)) ||
|
||||
(unit.description && unit.description.toLowerCase().includes(term))
|
||||
);
|
||||
}, [units, searchTerm]);
|
||||
@ -126,14 +146,20 @@ const UnitMaster = () => {
|
||||
useEffect(() => {
|
||||
const userProfile = sessionStorage.getItem('user_profile');
|
||||
if (userProfile) {
|
||||
try {
|
||||
setCurrentUser(JSON.parse(userProfile));
|
||||
} catch (error) {
|
||||
console.error('Error parsing user profile:', error);
|
||||
setCurrentUser({ name: 'System User', id: 1 });
|
||||
}
|
||||
} else {
|
||||
setCurrentUser({ name: 'System User', id: 1 });
|
||||
}
|
||||
}, []);
|
||||
|
||||
const headers = [
|
||||
'Unit Name',
|
||||
'Description',
|
||||
'Mapped Products',
|
||||
'Created By',
|
||||
'Created On',
|
||||
'Last Updated',
|
||||
@ -141,65 +167,32 @@ const UnitMaster = () => {
|
||||
];
|
||||
|
||||
const rows = useMemo(() => {
|
||||
return units.map((item) => {
|
||||
return filteredUnits.map((item) => {
|
||||
const createdDate = item.created_at
|
||||
? new Date(item.created_at).toLocaleDateString('en-GB')
|
||||
: '-';
|
||||
const updatedDate =
|
||||
item.updated_at && item.updated_at !== item.created_at
|
||||
const updatedDate = item.updated_at
|
||||
? new Date(item.updated_at).toLocaleDateString('en-GB')
|
||||
: '-';
|
||||
const currentUserName = currentUser?.name || '';
|
||||
|
||||
const createdByName = item.created_by_name || currentUser?.name || '-';
|
||||
|
||||
return [
|
||||
item.uom || item.unitName,
|
||||
item.uom_short_name || item.description,
|
||||
item.mapped_products_count !== undefined
|
||||
? item.mapped_products_count
|
||||
: (Array.isArray(item.productsMapped) ? item.productsMapped.length : 0),
|
||||
item.created_by_name || currentUserName || '-',
|
||||
item.uom || '-',
|
||||
item.description || '-',
|
||||
createdByName,
|
||||
createdDate,
|
||||
updatedDate,
|
||||
'actions',
|
||||
];
|
||||
});
|
||||
}, [units, currentUser, filteredUnits]);
|
||||
|
||||
const statusOptions = React.useMemo(
|
||||
() => [
|
||||
{ label: 'Active', value: 'Active' },
|
||||
{ label: 'Inactive', value: 'Inactive' },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const filteredRows = units;
|
||||
|
||||
const validateForm = () => {
|
||||
const errors = {};
|
||||
|
||||
// Unit Name validation
|
||||
if (!form.unitName.trim()) {
|
||||
errors.unitName = 'Unit Name is required';
|
||||
}
|
||||
|
||||
// Description validation - red color validation
|
||||
if (!form.description.trim()) {
|
||||
errors.description = 'Please enter a description.';
|
||||
}
|
||||
|
||||
setFormErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
}, [filteredUnits, currentUser]);
|
||||
|
||||
const openAddModal = () => {
|
||||
setEditingRow(null);
|
||||
setForm(createEmptyUnitForm());
|
||||
setFormErrors({});
|
||||
setModalMode('add');
|
||||
setIsProductDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleView = (index) => {
|
||||
const selected = units[index];
|
||||
if (!selected) return;
|
||||
@ -208,19 +201,15 @@ const UnitMaster = () => {
|
||||
};
|
||||
|
||||
const handleEdit = (index) => {
|
||||
const selected = units[index];
|
||||
const selected = filteredUnits[index];
|
||||
if (!selected) return;
|
||||
setEditingRow(index);
|
||||
setSelectedUnit(selected);
|
||||
setForm({
|
||||
unitName: selected.uom || selected.unitName,
|
||||
description: selected.uom_short_name || selected.description,
|
||||
productsMapped: Array.isArray(selected.productsMapped) ? [...selected.productsMapped] : [],
|
||||
status: selected.is_active ? 'Active' : 'Inactive',
|
||||
uom: selected.uom || '',
|
||||
description: selected.description || '',
|
||||
});
|
||||
setFormErrors({});
|
||||
setModalMode('edit');
|
||||
setIsProductDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
@ -231,108 +220,74 @@ const UnitMaster = () => {
|
||||
setModalMode(null);
|
||||
setSelectedUnit(null);
|
||||
setForm(createEmptyUnitForm());
|
||||
setFormErrors({});
|
||||
setEditingRow(null);
|
||||
setIsProductDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleFormChange = (field) => (event) => {
|
||||
const value = event?.target?.value ?? event;
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (formErrors[field]) {
|
||||
setFormErrors(prev => ({
|
||||
...prev,
|
||||
[field]: ''
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleProductToggle = (value) => {
|
||||
setForm((prev) => {
|
||||
const current = Array.isArray(prev.productsMapped) ? prev.productsMapped : [];
|
||||
const exists = current.includes(value);
|
||||
return {
|
||||
...prev,
|
||||
productsMapped: exists ? current.filter((item) => item !== value) : [...current, value],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (!productDropdownRef.current) return;
|
||||
if (!productDropdownRef.current.contains(event.target)) {
|
||||
setIsProductDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isProductDropdownOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [isProductDropdownOpen]);
|
||||
|
||||
const handleSave = async () => {
|
||||
// Validate form before saving
|
||||
if (!validateForm()) {
|
||||
// Validation checks
|
||||
if (!form.uom?.trim()) {
|
||||
setToastData({
|
||||
message: 'Please enter Unit Name.',
|
||||
type: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!form.description?.trim()) {
|
||||
setToastData({
|
||||
message: 'Please enter Description.',
|
||||
type: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedProducts = Array.isArray(form.productsMapped) ? form.productsMapped : [];
|
||||
|
||||
// Check for duplicate unit name
|
||||
// Check for duplicate unit name (only when adding)
|
||||
if (modalMode !== 'edit') {
|
||||
const nameExists = units.some(
|
||||
unit => unit.uom?.toLowerCase().trim() === form.unitName.toLowerCase().trim()
|
||||
unit => unit.uom?.toLowerCase().trim() === form.uom.toLowerCase().trim()
|
||||
);
|
||||
|
||||
// Only check duplicates when adding (not editing)
|
||||
if (modalMode !== 'edit' && nameExists) {
|
||||
if (nameExists) {
|
||||
setToastData({
|
||||
message: 'Unit name already exists!',
|
||||
type: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare unit data - ensure proper format for backend
|
||||
const unitData = {
|
||||
uom: form.unitName,
|
||||
uom_short_name: form.description,
|
||||
is_active: form.status === 'Active',
|
||||
productsMapped: selectedProducts.length,
|
||||
uom: form.uom.trim(),
|
||||
description: form.description.trim(),
|
||||
};
|
||||
|
||||
// Add user information if available
|
||||
if (currentUser?.id) {
|
||||
unitData.created_by = currentUser.id;
|
||||
unitData.created_by_name = currentUser.name;
|
||||
}
|
||||
|
||||
console.log('Saving unit data:', unitData);
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setSaveLoading(true);
|
||||
|
||||
if (modalMode === 'edit' && editingRow !== null) {
|
||||
const updatedUnitData = {
|
||||
...unitData,
|
||||
updated_at: new Date().toISOString(),
|
||||
updated_by: currentUser?.id || null,
|
||||
};
|
||||
const unitToUpdate = filteredUnits[editingRow];
|
||||
await updateUnit(unitToUpdate.id, unitData);
|
||||
|
||||
await updateUnit(units[editingRow].id, updatedUnitData);
|
||||
|
||||
// ✅ Show success message for edit
|
||||
setToastData({
|
||||
message: 'Unit updated successfully!',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
//Create new record
|
||||
await createUnit({
|
||||
...unitData,
|
||||
created_at: new Date().toISOString(),
|
||||
created_by: currentUser?.id || null,
|
||||
created_by_name: currentUser?.name || '',
|
||||
});
|
||||
await createUnit(unitData);
|
||||
|
||||
// Show success message for add
|
||||
setToastData({
|
||||
message: 'New unit added successfully!',
|
||||
type: 'success'
|
||||
@ -343,23 +298,94 @@ const UnitMaster = () => {
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
console.error('Error saving unit:', error);
|
||||
|
||||
// Get detailed error message with better error handling
|
||||
let errorMessage = 'Failed to save unit. Please check the data and try again.';
|
||||
|
||||
if (error.response?.data) {
|
||||
const errorData = error.response.data;
|
||||
|
||||
console.log('Error response data:', errorData);
|
||||
|
||||
// Handle different error response formats
|
||||
if (typeof errorData === 'string') {
|
||||
errorMessage = errorData;
|
||||
} else if (errorData.message) {
|
||||
errorMessage = errorData.message;
|
||||
} else if (errorData.error) {
|
||||
errorMessage = errorData.error;
|
||||
} else if (Array.isArray(errorData)) {
|
||||
errorMessage = errorData.join(', ');
|
||||
} else if (typeof errorData === 'object') {
|
||||
// Extract error messages from validation object
|
||||
const errorMessages = [];
|
||||
|
||||
// Check for common validation error formats
|
||||
if (errorData.errors) {
|
||||
// Laravel-style validation errors
|
||||
Object.values(errorData.errors).forEach(errArray => {
|
||||
if (Array.isArray(errArray)) {
|
||||
errorMessages.push(...errArray);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Generic object with error messages
|
||||
Object.values(errorData).forEach(value => {
|
||||
if (Array.isArray(value)) {
|
||||
errorMessages.push(...value);
|
||||
} else if (typeof value === 'string') {
|
||||
errorMessages.push(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (errorMessages.length > 0) {
|
||||
errorMessage = errorMessages.join(', ');
|
||||
} else {
|
||||
// If no specific messages found, show the first value
|
||||
const firstError = Object.values(errorData)[0];
|
||||
if (Array.isArray(firstError)) {
|
||||
errorMessage = firstError[0];
|
||||
} else {
|
||||
errorMessage = firstError || errorMessage;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
// Special handling for common backend validation errors
|
||||
if (errorMessage.toLowerCase().includes('uom') || errorMessage.toLowerCase().includes('unit')) {
|
||||
if (errorMessage.toLowerCase().includes('required')) {
|
||||
errorMessage = 'Unit name is required.';
|
||||
} else if (errorMessage.toLowerCase().includes('unique') || errorMessage.toLowerCase().includes('already exists')) {
|
||||
errorMessage = 'Unit name already exists. Please choose a different name.';
|
||||
}
|
||||
}
|
||||
|
||||
if (errorMessage.toLowerCase().includes('description') && errorMessage.toLowerCase().includes('required')) {
|
||||
errorMessage = 'Description is required.';
|
||||
}
|
||||
|
||||
setToastData({
|
||||
message: 'Something went wrong while saving the unit.',
|
||||
message: errorMessage,
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setSaveLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (deletingRow === null) return;
|
||||
try {
|
||||
const unitToDelete = units[deletingRow];
|
||||
const unitToDelete = filteredUnits[deletingRow];
|
||||
await deleteUnit(unitToDelete.id);
|
||||
setUnits(prev => prev.filter((_, index) => index !== deletingRow));
|
||||
|
||||
// ✅ Show success message for delete
|
||||
// Update local state
|
||||
setUnits(prev => prev.filter(unit => unit.id !== unitToDelete.id));
|
||||
|
||||
setToastData({
|
||||
message: 'Unit deleted successfully!',
|
||||
type: 'success'
|
||||
@ -367,8 +393,16 @@ const UnitMaster = () => {
|
||||
setDeletingRow(null);
|
||||
} catch (error) {
|
||||
console.error('Error deleting unit:', error);
|
||||
|
||||
let errorMessage = 'Failed to delete unit. Please try again.';
|
||||
if (error.response?.data?.message) {
|
||||
errorMessage = error.response.data.message;
|
||||
} else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
setToastData({
|
||||
message: 'Failed to delete unit. Please try again.',
|
||||
message: errorMessage,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
@ -378,53 +412,202 @@ const UnitMaster = () => {
|
||||
setDeletingRow(null);
|
||||
};
|
||||
|
||||
const deletingUnit = React.useMemo(() => {
|
||||
if (deletingRow === null || deletingRow < 0 || deletingRow >= units.length) {
|
||||
const deletingUnit = useMemo(() => {
|
||||
if (deletingRow === null || deletingRow < 0 || deletingRow >= filteredUnits.length) {
|
||||
return null;
|
||||
}
|
||||
return units[deletingRow];
|
||||
}, [deletingRow, units]);
|
||||
return filteredUnits[deletingRow];
|
||||
}, [deletingRow, filteredUnits]);
|
||||
|
||||
// Import CSV Functions
|
||||
const openImportModal = () => {
|
||||
setImportModalOpen(true);
|
||||
setFile(null);
|
||||
setImportError('');
|
||||
setDragActive(false);
|
||||
};
|
||||
|
||||
const closeImportModal = () => {
|
||||
setImportModalOpen(false);
|
||||
setFile(null);
|
||||
setImportError('');
|
||||
setDragActive(false);
|
||||
};
|
||||
|
||||
const handleDrag = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.type === "dragenter" || e.type === "dragover") {
|
||||
setDragActive(true);
|
||||
} else if (e.type === "dragleave") {
|
||||
setDragActive(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragActive(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||||
const droppedFile = e.dataTransfer.files[0];
|
||||
if (droppedFile.type === 'text/csv' || droppedFile.name.endsWith('.csv')) {
|
||||
setFile(droppedFile);
|
||||
setImportError('');
|
||||
} else {
|
||||
setImportError('Please upload a CSV file only.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
const selectedFile = e.target.files[0];
|
||||
if (selectedFile.type === 'text/csv' || selectedFile.name.endsWith('.csv')) {
|
||||
setFile(selectedFile);
|
||||
setImportError('');
|
||||
} else {
|
||||
setImportError('Please upload a CSV file only.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const downloadSampleCSV = () => {
|
||||
const sampleData = [
|
||||
['uom', 'description'],
|
||||
['Kilogram', 'Weight measurement in kilograms'],
|
||||
['Gram', 'Weight measurement in grams'],
|
||||
['Liter', 'Volume measurement in liters'],
|
||||
['Meter', 'Length measurement in meters']
|
||||
];
|
||||
|
||||
const csvContent = sampleData.map(row =>
|
||||
row.map(field => `"${field}"`).join(',')
|
||||
).join('\n');
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', 'unit-master-template.csv');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!file) {
|
||||
setImportError('Please select a CSV file to import.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setImportLoading(true);
|
||||
setImportError('');
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Add user info if needed by backend
|
||||
if (currentUser?.id) {
|
||||
formData.append('uploaded_by', currentUser.id);
|
||||
formData.append('uploaded_by_name', currentUser.name);
|
||||
}
|
||||
|
||||
const response = await uploadUnitCSV(formData);
|
||||
|
||||
setToastData({
|
||||
message: response.message || 'Units imported successfully!',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
closeImportModal();
|
||||
await fetchUnits();
|
||||
} catch (error) {
|
||||
console.error('Error importing CSV:', error);
|
||||
|
||||
let errorMessage = 'Failed to import units. Please try again.';
|
||||
|
||||
if (error.response?.status === 404) {
|
||||
errorMessage = 'Unit CSV upload endpoint not found. Please contact administrator.';
|
||||
} else if (error.response?.status === 400) {
|
||||
errorMessage = error.response.data?.message || 'Invalid CSV format. Please check the file.';
|
||||
} else if (error.response?.data?.message) {
|
||||
errorMessage = error.response.data.message;
|
||||
} else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
setImportError(errorMessage);
|
||||
setToastData({
|
||||
message: errorMessage,
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
setImportLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white w-full rounded-lg shadow-sm ring-1 ring-[#E5E7EB]">
|
||||
<div className="px-6 py-3 flex items-center justify-between border-b border-[#E5E7EB]">
|
||||
<h3 className="text-[16px] font-medium text-[#232528]">
|
||||
Unit Master ({units.length}{units.length === 1 ? ' unit' : ''})
|
||||
Unit Master ({units.length} {units.length === 1 ? 'unit' : 'units'})
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Search Input */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search units..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="h-10 px-4 pr-10 rounded-[6px] border border-[#C3C6CB] text-sm focus:outline-none focus:ring-2 focus:ring-[#92722A] focus:border-transparent"
|
||||
/>
|
||||
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
|
||||
<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={openImportModal}
|
||||
className="h-10 px-4 rounded-[6px] border border-[#C3C6CB] text-sm inline-flex items-center gap-2 bg-[#F7F7F7] text-[#232528] hover:bg-gray-50"
|
||||
>
|
||||
<img src={uploadImportIconSrc} alt="Import" className="h-5 w-5" />
|
||||
<span className="font-medium">Import CSV</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!units.length) return;
|
||||
|
||||
const csvHeader = headers.slice(0, headers.length - 1).join(',');
|
||||
const csvHeader = ['Unit Name', 'Description', 'Created By', 'Created On', 'Last Updated'];
|
||||
const csvRows = units.map((item) => {
|
||||
const createdDate = item.created_at
|
||||
? new Date(item.created_at).toLocaleDateString('en-GB')
|
||||
: '-';
|
||||
const updatedDate =
|
||||
item.updated_at && item.updated_at !== item.created_at
|
||||
const updatedDate = item.updated_at
|
||||
? new Date(item.updated_at).toLocaleDateString('en-GB')
|
||||
: '-';
|
||||
const status = item.is_active ? 'Active' : 'Inactive';
|
||||
const mappedProducts = Array.isArray(item.productsMapped)
|
||||
? item.productsMapped.join('; ')
|
||||
: '0';
|
||||
|
||||
return [
|
||||
item.uom || item.unitName || '',
|
||||
item.uom_short_name || item.description || '',
|
||||
mappedProducts,
|
||||
item.uom || '',
|
||||
item.description || '',
|
||||
item.created_by_name || currentUser?.name || '-',
|
||||
createdDate,
|
||||
updatedDate,
|
||||
status,
|
||||
]
|
||||
.map((value) => `"${String(value ?? '').replace(/"/g, '""')}"`)
|
||||
.join(',');
|
||||
});
|
||||
|
||||
const csvContent = csvHeader + '\n' + csvRows.join('\n');
|
||||
const csvContent = csvHeader.join(',') + '\n' + csvRows.join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
@ -437,7 +620,7 @@ const UnitMaster = () => {
|
||||
}}
|
||||
className={`h-10 px-4 rounded-[6px] border text-sm inline-flex items-center gap-2 ${
|
||||
units.length
|
||||
? 'bg-[#F7F7F7] border-[#C3C6CB] text-[#232528]'
|
||||
? 'bg-[#F7F7F7] border-[#C3C6CB] text-[#232528] hover:bg-gray-50'
|
||||
: 'bg-[#F3F4F6] border-[#E5E7EB] text-[#9CA3AF] cursor-not-allowed'
|
||||
}`}
|
||||
disabled={!units.length}
|
||||
@ -448,7 +631,7 @@ const UnitMaster = () => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 px-4 rounded-[6px] bg-[#92722A] text-white text-sm inline-flex items-center gap-2 cursor-pointer"
|
||||
className="h-10 px-4 rounded-[6px] bg-[#92722A] text-white text-sm inline-flex items-center gap-2 cursor-pointer hover:bg-[#7a5f22]"
|
||||
onClick={openAddModal}
|
||||
>
|
||||
<img src={addIconSrc} alt="Add" className="h-5 w-5" />
|
||||
@ -459,7 +642,7 @@ const UnitMaster = () => {
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900"></div>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#92722A]"></div>
|
||||
</div>
|
||||
) : (
|
||||
<Table
|
||||
@ -517,7 +700,7 @@ const UnitMaster = () => {
|
||||
currentPage,
|
||||
onPageChange: setCurrentPage,
|
||||
pageSize,
|
||||
totalItems: filteredRows.length,
|
||||
totalItems: filteredUnits.length,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@ -616,26 +799,17 @@ const UnitMaster = () => {
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<TextField
|
||||
label={
|
||||
<>
|
||||
Unit Name <span className="text-red-500">*</span>
|
||||
</>
|
||||
}
|
||||
value={form.unitName}
|
||||
onChange={handleFormChange('unitName')}
|
||||
value={form.uom}
|
||||
onChange={handleFormChange('uom')}
|
||||
placeholder="Enter Unit Name"
|
||||
error={formErrors.unitName}
|
||||
className={formErrors.unitName ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
|
||||
/>
|
||||
{formErrors.unitName && (
|
||||
<p className="mt-1 text-sm text-red-600"></p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<TextField
|
||||
label={
|
||||
<>
|
||||
@ -645,31 +819,24 @@ const UnitMaster = () => {
|
||||
value={form.description}
|
||||
onChange={handleFormChange('description')}
|
||||
placeholder="Enter Description"
|
||||
width="100%"
|
||||
error={formErrors.description}
|
||||
className={formErrors.description ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
|
||||
/>
|
||||
{formErrors.description && (
|
||||
<p className="mt-1 text-sm text-red-600"></p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 px-6 rounded-md border border-[#92722A] text-sm font-medium text-[#92722A] bg-white"
|
||||
className="h-10 px-6 rounded-md border border-[#92722A] text-sm font-medium text-[#92722A] bg-white hover:bg-gray-50"
|
||||
onClick={closeModal}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 px-4 rounded-[6px] bg-[#92722A] text-white text-sm font-medium disabled:opacity-50"
|
||||
className="h-10 px-6 rounded-[6px] bg-[#92722A] text-white text-sm font-medium hover:bg-[#7a5f22] disabled:opacity-50"
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
disabled={saveLoading}
|
||||
>
|
||||
{loading ? (
|
||||
{saveLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white mr-2"></div>
|
||||
{modalMode === 'edit' ? 'Updating...' : 'Saving...'}
|
||||
@ -708,7 +875,7 @@ const UnitMaster = () => {
|
||||
<p className="mt-1 text-sm leading-5 text-[#4B5563]">
|
||||
Are you sure you want to delete{' '}
|
||||
<span className="font-semibold text-[#232528]">
|
||||
{`${deletingUnit?.unitName || deletingUnit?.uom || 'N/A'} - ${deletingUnit?.description || deletingUnit?.uom_short_name || 'N/A'}`}
|
||||
{`${deletingUnit?.uom || 'N/A'} - ${deletingUnit?.description || 'N/A'}`}
|
||||
</span>
|
||||
?
|
||||
</p>
|
||||
@ -721,14 +888,14 @@ const UnitMaster = () => {
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 px-6 rounded-md border border-[#92722A] text-sm font-medium text-[#92722A] bg-white"
|
||||
className="h-10 px-6 rounded-md border border-[#92722A] text-sm font-medium text-[#92722A] bg-white hover:bg-gray-50"
|
||||
onClick={closeDeleteConfirm}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 px-6 rounded-md bg-[#92722A] text-white text-sm font-semibold cursor-pointer shadow-sm"
|
||||
className="h-10 px-6 rounded-md bg-[#92722A] text-white text-sm font-semibold cursor-pointer shadow-sm hover:bg-[#7a5f22]"
|
||||
onClick={handleDeleteConfirm}
|
||||
>
|
||||
Delete
|
||||
@ -739,6 +906,129 @@ const UnitMaster = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Import CSV Modal */}
|
||||
{importModalOpen && (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="absolute inset-0 bg-black/40" onClick={closeImportModal} />
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[520px] bg-white rounded-lg shadow-xl border border-[#E5E7EB]">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-[#E5E7EB]">
|
||||
<h3 className="text-lg font-semibold text-[#111827]">Import Units</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="text-gray-400 hover:text-gray-500"
|
||||
onClick={closeImportModal}
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
{/* File Upload Area */}
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
|
||||
dragActive
|
||||
? 'border-[#92722A] bg-[#FDF8EA]'
|
||||
: 'border-[#D1D5DB] hover:border-[#92722A] hover:bg-gray-50'
|
||||
}`}
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center space-y-3">
|
||||
<div className="w-12 h-12 bg-[#FDF8EA] rounded-full flex items-center justify-center">
|
||||
<img src={uploadImportIconSrc} alt="Upload" className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{file ? file.name : 'Drop your CSV file here or browse'}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Supports .csv files only (Max 10MB)
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 text-sm font-medium text-[#92722A] bg-white border border-[#92722A] rounded-md hover:bg-[#FDF8EA]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
fileInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
Browse Files
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{importError && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-md">
|
||||
<p className="text-sm text-red-800 flex items-center gap-2">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{importError}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sample CSV Link */}
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={downloadSampleCSV}
|
||||
className="text-sm text-[#92722A] hover:text-[#7a5f22] underline"
|
||||
>
|
||||
Download sample CSV template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end p-6 border-t border-[#E5E7EB] space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeImportModal}
|
||||
className="h-10 px-6 text-sm font-medium text-[#374151] bg-white border border-[#D1D5DB] rounded-md hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleImport}
|
||||
disabled={!file || importLoading}
|
||||
className={`h-10 px-6 text-sm font-medium text-white rounded-md ${
|
||||
!file || importLoading
|
||||
? 'bg-gray-300 cursor-not-allowed'
|
||||
: 'bg-[#92722A] hover:bg-[#7a5f22]'
|
||||
}`}
|
||||
>
|
||||
{importLoading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
Importing...
|
||||
</div>
|
||||
) : (
|
||||
'Import'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Custom Toast Notification */}
|
||||
{toastData && (
|
||||
<div className="fixed inset-0 z-[9999] pointer-events-none flex items-start justify-center pt-20">
|
||||
|
||||
@ -15,20 +15,33 @@ export const getUnits = async () => {
|
||||
|
||||
export const createUnit = async (unitData) => {
|
||||
try {
|
||||
// Log the data being sent for debugging
|
||||
console.log('Creating unit with data:', unitData);
|
||||
|
||||
const response = await postRequest(UNIT_MASTER_ENDPOINT, unitData);
|
||||
console.log('Unit created successfully:', response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error creating unit:', error);
|
||||
console.error('Error details:', {
|
||||
status: error.response?.status,
|
||||
data: error.response?.data,
|
||||
headers: error.response?.headers
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const updateUnit = async (id, unitData) => {
|
||||
try {
|
||||
console.log('Updating unit with data:', unitData);
|
||||
|
||||
const response = await putRequest(`${UNIT_MASTER_ENDPOINT}/${id}`, unitData);
|
||||
console.log('Unit updated successfully:', response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error updating unit:', error);
|
||||
console.error('Error details:', error.response?.data);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@ -36,9 +49,25 @@ export const updateUnit = async (id, unitData) => {
|
||||
export const deleteUnit = async (id) => {
|
||||
try {
|
||||
const response = await deleteRequest(`${UNIT_MASTER_ENDPOINT}/${id}`);
|
||||
console.log('Unit deleted successfully:', response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error deleting unit:', error);
|
||||
console.error('Error details:', error.response?.data);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const uploadUnitCSV = async (formData) => {
|
||||
try {
|
||||
const response = await postRequest(`${UNIT_MASTER_ENDPOINT}/uploadCSV`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error uploading unit CSV:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user