SS-FCSC/fcsc_ipi_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added changes in edit profile

Browse Source
This commit is contained in:
Malini 2026-01-06 16:08:06 +05:30
parent 1b48b6019f
commit 8ddfe28897
4 changed files with 242 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx
View File

@ -33,6 +33,19 @@ const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {
borderColor = 'border-[#92722A]'; borderColor = 'border-[#92722A]';
} }
// Handle input change with validation
const handleChange = (e) => {
if (type === 'number') {
// Only allow numbers and empty string
const newValue = e.target.value;
if (newValue === '' || /^\d+$/.test(newValue)) {
onChange(e);
}
} else {
onChange(e);
}
};
// Prevent wheel event from changing the number input value // Prevent wheel event from changing the number input value
const handleWheel = (e) => { const handleWheel = (e) => {
if (type === 'number') { if (type === 'number') {
@ -40,18 +53,28 @@ const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {
} }
}; };
// Prevent typing non-numeric characters in number inputs
const handleKeyPress = (e) => {
if (type === 'number' && !/^\d$/.test(e.key) && e.key !== 'Backspace' && e.key !== 'Delete' && e.key !== 'Tab') {
e.preventDefault();
}
};
return ( return (
<div className="relative"> <div className="relative">
<input <input
type={type} type={type === 'number' ? 'text' : type}
inputMode={type === 'number' ? 'numeric' : undefined}
pattern={type === 'number' ? '[0-9]*' : undefined}
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={onChange} onChange={handleChange}
onKeyPress={handleKeyPress}
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)} onBlur={() => setIsFocused(false)}
onWheel={handleWheel} onWheel={handleWheel}
required={required} required={required}
className={`block w-full h-10 rounded-md border-2 ${borderColor} focus:ring-0 px-4 text-sm ${bgColor} transition-colors [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`} className={`block w-full h-10 rounded-md border-2 ${borderColor} focus:ring-0 px-4 text-sm ${bgColor} transition-colors`}
/> />
</div> </div>
); );

10
ipi-survey-platform/src/pages/Admin/Validations.jsx
View File

@ -67,10 +67,16 @@ const ManageSubmissions = () => {
const [error, setError] = React.useState(null); const [error, setError] = React.useState(null);
const [search, setSearch] = React.useState(''); const [search, setSearch] = React.useState('');
const [year, setYear] = React.useState(''); const [year, setYear] = React.useState('');
const [quarter, setQuarter] = React.useState('All'); // Function to get current quarter (1-4)
const getCurrentQuarter = () => {
const month = new Date().getMonth();
return `Q${Math.floor(month / 3) + 1}`;
};
const [quarter, setQuarter] = React.useState(getCurrentQuarter());
const [emirate, setEmirate] = React.useState('All'); const [emirate, setEmirate] = React.useState('All');
const [status, setStatus] = React.useState('All'); const [status, setStatus] = React.useState('All');
const [selectedQuarter, setSelectedQuarter] = React.useState('All'); const [selectedQuarter, setSelectedQuarter] = React.useState(getCurrentQuarter());
const [selectedYear, setSelectedYear] = React.useState(new Date().getFullYear().toString()); const [selectedYear, setSelectedYear] = React.useState(new Date().getFullYear().toString());
const [currentPage, setCurrentPage] = React.useState(1); const [currentPage, setCurrentPage] = React.useState(1);
const [toast, setToast] = React.useState(null); const [toast, setToast] = React.useState(null);

134
ipi-survey-platform/src/pages/Admin/configuration/CompanyProfile.jsx
View File

@ -657,11 +657,11 @@ const CompanyProfile = () => {
const formSteps = React.useMemo( const formSteps = React.useMemo(
() => [ () => [
{ label: 'User Profile' }, { label: 'Profile' },
{ label: 'Identification Particulars' }, { label: 'Details' },
{ label: 'Establishment Contact Details' }, { label: 'Contact Details' },
{ label: 'Products' }, { label: 'Products' },
{ label: 'Employment in Establishment' }, { label: 'Employment Details' },
], ],
[] []
); );
@ -676,7 +676,7 @@ const CompanyProfile = () => {
{ field: 'permanentFactoryCode', label: 'Permanent Factory Code' }, { field: 'permanentFactoryCode', label: 'Permanent Factory Code' },
{ field: 'uniqueLicenseNumber', label: 'Unique License Number' }, { field: 'uniqueLicenseNumber', label: 'Unique License Number' },
{ field: 'industryCodeBusiness', label: 'Industry Code (Business Register)' }, { field: 'industryCodeBusiness', label: 'Industry Code (Business Register)' },
{ field: 'industryCodeCurrent', label: 'Industry Code (Current Production)' }, { field: 'industryCodeProduction', label: 'Industry Code (Current Production)' },
], ],
2: [ 2: [
{ field: 'contactName', label: 'Name' }, { field: 'contactName', label: 'Name' },
@ -902,7 +902,7 @@ const CompanyProfile = () => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-[16px] font-semibold text-[#232528] mb-2">User Profile</h4> <h4 className="text-[16px] font-semibold text-[#232528] mb-2">Profile</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start">
<TextField <TextField
label="Name" label="Name"
@ -986,7 +986,7 @@ const CompanyProfile = () => {
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-[16px] font-semibold text-[#232528]"> <h4 className="text-[16px] font-semibold text-[#232528]">
Identification Particulars Details
</h4> </h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@ -1017,6 +1017,8 @@ const CompanyProfile = () => {
onChange={handleFormChange('industryCodeBusiness')} onChange={handleFormChange('industryCodeBusiness')}
placeholder="Enter Code" placeholder="Enter Code"
width="100%" width="100%"
required
error={fieldErrors.industryCodeBusiness}
readOnly={modalMode === 'view'} readOnly={modalMode === 'view'}
/> />
@ -1026,6 +1028,8 @@ const CompanyProfile = () => {
onChange={handleFormChange('industryCodeProduction')} onChange={handleFormChange('industryCodeProduction')}
placeholder="Enter Code" placeholder="Enter Code"
width="100%" width="100%"
required
error={fieldErrors.industryCodeProduction}
readOnly={modalMode === 'view'} readOnly={modalMode === 'view'}
/> />
</div> </div>
@ -1077,7 +1081,7 @@ const CompanyProfile = () => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="text-[16px] font-semibold text-[#232528]">Establishment Contact Details</h4> <h4 className="text-[16px] font-semibold text-[#232528]">Contact Details</h4>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<TextField <TextField
@ -1220,7 +1224,7 @@ const CompanyProfile = () => {
case 4: case 4:
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-[16px] font-semibold text-[#232528] mb-4">Employment in Establishment</h4> <h4 className="text-[16px] font-semibold text-[#232528] mb-4">Employment Details</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<TextField <TextField
label="Number of Emirati Male" label="Number of Emirati Male"
@ -1368,47 +1372,79 @@ const CompanyProfile = () => {
</div> </div>
</div> </div>
{/* Selected Products Panel */} {/* Selected Products Panel */}
<div className="bg-white rounded-lg border border-[#E5E7EB] overflow-hidden"> <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"> <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> <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 > 0 && (
{selectedProducts.length} selected <span className="bg-[#FEF3C7] text-[#92400E] text-xs font-medium px-2 py-0.5 rounded-full">
</span> {selectedProducts.length} selected
)} </span>
</div> )}
<div className="p-4"> </div>
{selectedProducts.length > 0 ? (
<ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto"> <div className="p-4">
{selectedProducts.map((product) => (
<li key={product.id} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center"> {selectedProducts.length > 0 ? (
<div> <ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto">
<div className="text-sm font-medium text-[#111827]">
{product.hs_code || product.hsCode || ''} {selectedProducts.map((product) => {
{(product.hs_code || product.hsCode) ? ' - ' : ''} // Extract product name and HS code
{product.product_name || product.productName || product.label || 'Unnamed Product'} let name = product.product_name || product.productName || product.label || '';
</div> let hsCode = product.hs_code || product.hsCode || product.value;
</div>
{modalMode !== 'view' && ( // If name contains a pattern like "59061000 - Product Name", extract the product name and HS code
<button const nameParts = name.split(' - ');
type="button" if (nameParts.length > 1 && /^\d+$/.test(nameParts[0])) {
onClick={() => handleRemoveProduct(product)} hsCode = nameParts[0];
className="text-[#EF4444] hover:text-[#DC2626] text-sm font-medium" name = nameParts.slice(1).join(' - ').trim();
> }
Remove
</button> return (
)} <li
</li> key={hsCode}
))} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center"
</ul> >
) : ( <div>
<div className="p-4 text-center text-sm text-[#6B7280] border border-[#E5E7EB] rounded-md"> {/* Product Name */}
- <div className="text-sm font-medium text-[#111827]">
</div> {name || 'Unnamed Product'}
)}
</div> </div>
{/* HS Code under it */}
{hsCode && (
<div className="text-xs text-[#6B7280] mt-1">
HS Code: {hsCode}
</div>
)}
</div> </div>
{/* Remove button */}
{modalMode !== 'view' && (
<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">
-
</div>
)}
</div>
</div>
</div> </div>
</div> </div>
); );
@ -2385,6 +2421,7 @@ const handleView = async (id) => {
const emptyProfile = createEmptyProfile(); const emptyProfile = createEmptyProfile();
Object.assign(emptyProfile, computeEmploymentTotals(emptyProfile)); Object.assign(emptyProfile, computeEmploymentTotals(emptyProfile));
setModalMode('add'); setModalMode('add');
setIsViewMode(false); // Ensure view mode is false when adding
setForm(emptyProfile); setForm(emptyProfile);
setEditingRow(null); setEditingRow(null);
setActiveStep(0); setActiveStep(0);
@ -2408,6 +2445,7 @@ const handleView = async (id) => {
setForm(emptyProfile); setForm(emptyProfile);
setEditingRow(null); setEditingRow(null);
setModalMode('add'); setModalMode('add');
setIsViewMode(false); // Ensure view mode is false when adding
initialSnapshotRef.current = emptyProfile; initialSnapshotRef.current = emptyProfile;
corporateBackupRef.current = captureCorporateValues(emptyProfile); corporateBackupRef.current = captureCorporateValues(emptyProfile);
setIsDirty(false); setIsDirty(false);

212
ipi-survey-platform/src/pages/Admin/configuration/EditCompanyProfile.jsx
View File

@ -106,11 +106,11 @@ const EditCompanyProfile = () => {
const formSteps = React.useMemo( const formSteps = React.useMemo(
() => [ () => [
{ label: 'User Profile' }, { label: 'Profile' },
{ label: 'Identification Particulars' }, { label: 'Details' },
{ label: 'Establishment Contact Details' }, { label: 'Contact Details' },
{ label: 'Products' }, { label: 'Products' },
{ label: 'Employment in Establishment' }, { label: 'Employment Details' },
], ],
[] []
); );
@ -122,14 +122,14 @@ const EditCompanyProfile = () => {
{ field: 'userProfileEmail', label: 'Email' }, { field: 'userProfileEmail', label: 'Email' },
], ],
1: [ 1: [
{ field: 'permanentFactoryCode', label: 'Permanent Factory Code' }, // { field: 'permanentFactoryCode', label: 'Permanent Factory Code' },
{ field: 'uniqueLicenseNumber', label: 'Unique License Number' }, { field: 'uniqueLicenseNumber', label: 'Unique License Number' },
{ field: 'industryCodeBusiness', label: 'Industry Code (Business Register)' }, { field: 'industryCodeBusiness', label: 'Industry Code (Business Register)' },
{ field: 'industryCodeCurrent', label: 'Industry Code (Current Production)' }, { field: 'industryCodeCurrent', label: 'Industry Code (Current Production)' },
], ],
2: [ 2: [
{ field: 'contactName', label: 'Name' }, { field: 'contactName', label: 'Name' },
{ field: 'contactAddress', label: 'Address' }, // { field: 'contactAddress', label: 'Address' },
{ field: 'contactEmirate', label: 'Emirate' }, { field: 'contactEmirate', label: 'Emirate' },
{ field: 'contactCityTown', label: 'City/Town' }, { field: 'contactCityTown', label: 'City/Town' },
{ field: 'contactEmail', label: 'Email' }, { field: 'contactEmail', label: 'Email' },
@ -636,7 +636,7 @@ const EditCompanyProfile = () => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-[16px] font-semibold text-[#232528] mb-2">User Profile</h4> <h4 className="text-[16px] font-semibold text-[#232528] mb-2">Profile</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start">
<TextField <TextField
label="Name" label="Name"
@ -679,7 +679,7 @@ const EditCompanyProfile = () => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-[16px] font-semibold text-[#232528]">Identification Particulars</h4> <h4 className="text-[16px] font-semibold text-[#232528]">Details</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<TextField <TextField
label="Permanent Factory Code" label="Permanent Factory Code"
@ -687,7 +687,7 @@ const EditCompanyProfile = () => {
onChange={(e) => handleFormChange("permanentFactoryCode", e.target.value)} onChange={(e) => handleFormChange("permanentFactoryCode", e.target.value)}
placeholder="Enter Factory Code" placeholder="Enter Factory Code"
width="100%" width="100%"
required // required
error={fieldErrors.permanentFactoryCode} error={fieldErrors.permanentFactoryCode}
/> />
<TextField <TextField
@ -753,7 +753,7 @@ const EditCompanyProfile = () => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="text-[16px] font-semibold text-[#232528]">Establishment Contact Details</h4> <h4 className="text-[16px] font-semibold text-[#232528]">Contact Details</h4>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<TextField <TextField
@ -771,7 +771,7 @@ const EditCompanyProfile = () => {
onChange={(e) => handleFormChange("contactAddress", e.target.value)} onChange={(e) => handleFormChange("contactAddress", e.target.value)}
placeholder="Enter Address" placeholder="Enter Address"
width="100%" width="100%"
required // required
error={fieldErrors.contactAddress} error={fieldErrors.contactAddress}
/> />
<SelectField <SelectField
@ -878,7 +878,7 @@ const EditCompanyProfile = () => {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side: Products Header */} {/* Left side: Products Header */}
<div className="flex items-baseline"> <div className="flex items-baseline">
<h4 className="text-[16px] font-semibold text-[#232528] whitespace-nowrap">Products</h4> <h4 className="text-[16px] font-semibold text-[#232528] whitespace-nowrap">Products <span className="text-red-500">*</span></h4>
<a <a
href="/assets/images/HS-Code UAE (002).pdf" href="/assets/images/HS-Code UAE (002).pdf"
target="_blank" target="_blank"
@ -891,7 +891,8 @@ const EditCompanyProfile = () => {
{/* Right side: Icons */} {/* Right side: Icons */}
<div className="flex items-center gap-4 text-sm text-medium-600"> <div className="flex items-center gap-4 text-sm text-medium-600">
<div className="flex items-center gap-1"> <span className="font-semibold">Added By:</span>
<div className="flex items-center ml-0 gap-1">
<MdAdminPanelSettings className="text-[#92722A] text-lg" /> <MdAdminPanelSettings className="text-[#92722A] text-lg" />
<span>Admin User</span> <span>Admin User</span>
</div> </div>
@ -948,6 +949,9 @@ const EditCompanyProfile = () => {
<div className="text-sm font-medium text-[#111827]"> <div className="text-sm font-medium text-[#111827]">
{product.label} {product.label}
</div> </div>
{product.hs_code && (
<div className="text-xs text-gray-500">HS Code - {product.hs_code}</div>
)}
</div> </div>
<button <button
type="button" type="button"
@ -974,71 +978,79 @@ const EditCompanyProfile = () => {
</div> </div>
{/* Selected Products Panel */} {/* Selected Products Panel */}
<div className="bg-white rounded-lg border border-[#E5E7EB] overflow-hidden"> <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"> <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> <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 > 0 && (
{selectedProducts.length} selected <span className="bg-[#FEF3C7] text-[#92400E] text-xs font-medium px-2 py-0.5 rounded-full">
</span> {selectedProducts.length} selected
)} </span>
</div> )}
<div className="p-4"> </div>
{selectedProducts.length > 0 ? (
<ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto"> <div className="p-4">
{selectedProducts.map((product) => { {selectedProducts.length > 0 ? (
const isNewlyAdded = newlyAddedProductIds.has(product.value); <ul className="divide-y divide-[#E5E7EB] max-h-96 overflow-y-auto">
return ( {selectedProducts.map((product) => {
<li key={product.value} className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center"> const isNewlyAdded = newlyAddedProductIds.has(product.value);
<div className="flex items-center gap-2">
{/* {product.action_done_by === "admin_users" ? ( // extract hs + name
<MdAdminPanelSettings className="text-[#92722A] text-lg" title="Added by Admin" /> const hsCode = product.label?.split(" - ")[0] ?? "";
) : ( const productName = product.label?.split(" - ")[1] ?? product.label;
<FaBuilding className="text-[#92722A]" title="Added by Establishment" />
)} */} return (
{product.action_done_by === "admin_users" ? ( <li
<MdAdminPanelSettings key={product.value}
className="text-[#92722A] text-lg flex-shrink-0 w-6 h-6" className="p-3 hover:bg-[#F9FAFB] flex justify-between items-center"
title="Added by Admin" >
/> <div className="flex items-center gap-2">
) : (
<FaBuilding {product.action_done_by === "admin_users" ? (
className="text-[#92722A] flex-shrink-0 w-6 h-5" <MdAdminPanelSettings
title="Added by Establishment" className="text-[#92722A] text-lg flex-shrink-0 w-6 h-6"
/> title="Added by Admin"
)} />
<div> ) : (
<div className="text-sm font-medium text-[#111827]"> <FaBuilding
{product.label} className="text-[#92722A] flex-shrink-0 w-6 h-5"
</div> title="Added by Establishment"
{product.hs_code && ( />
<div className="text-xs text-gray-500 mt-1"> )}
HS Code: {product.hs_code}
</div> <div>
)} <div className="text-sm font-medium text-[#111827]">
</div> {productName}
</div> </div>
{isNewlyAdded && (
<button <div className="text-xs text-gray-500 mt-1">
type="button" HS Code: {hsCode}
onClick={() => handleRemoveProduct(product)} </div>
className="text-[#EF4444] hover:text-[#DC2626] text-sm font-medium"
title="Remove product"
>
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>
{isNewlyAdded && (
<button
type="button"
onClick={() => handleRemoveProduct(product)}
className="text-[#EF4444] hover:text-[#DC2626] text-sm font-medium"
title="Remove product"
>
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>
</div> </div>
); );
@ -1046,47 +1058,67 @@ const EditCompanyProfile = () => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="text-[16px] font-semibold text-[#232528]">Employment in Establishment</h4> <h4 className="text-[16px] font-semibold text-[#232528]">Employment Details</h4>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<TextField <TextField
label="Number of Emirati Male" label="Number of Emirati Male"
value={form.employmentEmiratiMale || ""} value={form.employmentEmiratiMale || ""}
onChange={(e) => handleFormChange("employmentEmiratiMale", e.target.value)} onChange={(e) => {
if (e.target.value === '' || /^\d+$/.test(e.target.value)) {
handleFormChange("employmentEmiratiMale", e.target.value);
}
}}
placeholder="Enter Count" placeholder="Enter Count"
width="100%" width="100%"
type="number" type="text"
required inputMode="numeric"
pattern="[0-9]*"
error={fieldErrors.employmentEmiratiMale} error={fieldErrors.employmentEmiratiMale}
/> />
<TextField <TextField
label="Number of Non-Emirati Male" label="Number of Non-Emirati Male"
value={form.employmentNonEmiratiMale || ""} value={form.employmentNonEmiratiMale || ""}
onChange={(e) => handleFormChange("employmentNonEmiratiMale", e.target.value)} onChange={(e) => {
if (e.target.value === '' || /^\d+$/.test(e.target.value)) {
handleFormChange("employmentNonEmiratiMale", e.target.value);
}
}}
placeholder="Enter Count" placeholder="Enter Count"
width="100%" width="100%"
type="number" type="text"
required inputMode="numeric"
pattern="[0-9]*"
error={fieldErrors.employmentNonEmiratiMale} error={fieldErrors.employmentNonEmiratiMale}
/> />
<TextField <TextField
label="Number of Emirati Female" label="Number of Emirati Female"
value={form.employmentEmiratiFemale || ""} value={form.employmentEmiratiFemale || ""}
onChange={(e) => handleFormChange("employmentEmiratiFemale", e.target.value)} onChange={(e) => {
if (e.target.value === '' || /^\d+$/.test(e.target.value)) {
handleFormChange("employmentEmiratiFemale", e.target.value);
}
}}
placeholder="Enter Count" placeholder="Enter Count"
width="100%" width="100%"
type="number" type="text"
required inputMode="numeric"
pattern="[0-9]*"
error={fieldErrors.employmentEmiratiFemale} error={fieldErrors.employmentEmiratiFemale}
/> />
<TextField <TextField
label="Number of Non-Emirati Female" label="Number of Non-Emirati Female"
value={form.employmentNonEmiratiFemale || ""} value={form.employmentNonEmiratiFemale || ""}
onChange={(e) => handleFormChange("employmentNonEmiratiFemale", e.target.value)} onChange={(e) => {
if (e.target.value === '' || /^\d+$/.test(e.target.value)) {
handleFormChange("employmentNonEmiratiFemale", e.target.value);
}
}}
placeholder="Enter Count" placeholder="Enter Count"
width="100%" width="100%"
type="number" type="text"
required inputMode="numeric"
pattern="[0-9]*"
error={fieldErrors.employmentNonEmiratiFemale} error={fieldErrors.employmentNonEmiratiFemale}
/> />
<TextField <TextField
@ -1122,7 +1154,7 @@ const EditCompanyProfile = () => {
{/* Header */} {/* Header */}
<div className="px-6 pt-6 pb-4 border-b border-gray-200"> <div className="px-6 pt-6 pb-4 border-b border-gray-200">
<h2 className="text-xl font-bold text-gray-900">Edit Company Profile</h2> <h2 className="text-xl font-bold text-gray-900">Edit Profile</h2>
</div> </div>
{/* Body */} {/* Body */}