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

bug fix for survey screen

Browse Source
This commit is contained in:
Malini 2025-11-04 11:57:41 +05:30
parent e79d6ea298
commit f9c3447704
7 changed files with 1371 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ipi-survey-platform/public/assets/images/Breadcrumb-vector.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.749811 0.483398L4.94336 4.67695L0.749811 8.87049" stroke="#C3C6CB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 248 B

19
ipi-survey-platform/src/App.jsx
View File

@ -13,6 +13,7 @@ import History from '@/pages/History/History';
import ChangePassword from '@/pages/ChangePassword/ChangePassword';
import ForgotPassword from '@/pages/ForgotPassword/ForgotPassword';
import PublicContactForm from '@/pages/PublicContactForm';
import EditCompanyProfile from '@/pages/Admin/configuration/EditCompanyProfile';
const RequireRole = ({ allowedRoles = [], children }) => {
let role
@ -160,6 +161,24 @@ function App() {
</RequireRole>
)}
/>
<Route path="profile">
<Route
index
element={
<RequireRole allowedRoles={['EstablishmentUser']}>
<EditCompanyProfile />
</RequireRole>
}
/>
<Route
path="edit/:id"
element={
<RequireRole allowedRoles={['EstablishmentUser']}>
<EditCompanyProfile />
</RequireRole>
}
/>
</Route>
<Route path="/change-password" element={<ChangePassword />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/reset-password" element={<PublicContactForm />} />

61
ipi-survey-platform/src/components/survey/EstablishmentInfo/EstablishmentInfo.jsx
View File

@ -10,14 +10,16 @@ import { useNavigate } from 'react-router-dom';
const Field = ({ label, placeholder = '', type = 'text', value = '', onChange = () => {}, disabled = true }) => (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
<label className={`block text-sm font-medium ${disabled ? 'text-[#9EA2A9]' : 'text-gray-700'} mb-1`}>
{label}
</label>
<input
type={type}
placeholder={placeholder}
value={value}
disabled={true}
disabled={disabled}
onChange={onChange}
className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 text-sm bg-gray-50 cursor-not-allowed"
className={`block w-full h-10 rounded-md border-2 ${disabled ? 'border-[#E6D7A2] bg-gray-50 text-[#9EA2A9] cursor-not-allowed' : 'border-[#E6D7A2] focus:border-[#92722A] bg-white text-gray-900'} focus:ring-0 px-4 text-sm`}
/>
</div>
);
@ -84,6 +86,12 @@ const EstablishmentInfo = ({
const handleCloseInfo = () => {
setShowInfoCard(false);
};
// Debug log to see what data is being received
React.useEffect(() => {
console.log('EstablishmentInfo data:', data);
console.log('Establishment contact email from data:', data?.establishment_contact_email);
}, [data]);
const info = React.useMemo(
() => ({
quarter: '',
@ -94,6 +102,7 @@ const EstablishmentInfo = ({
licenseNumber: '',
isicCode: '',
emirate: '',
establishment_contact_email: data?.establishment_contact_email || '',
employeeInfo: {
...defaultEmployeeInfo,
...(data.employeeInfo || {}),
@ -129,7 +138,7 @@ const handleEditProfile = (e) => {
sessionStorage.setItem('edit_profile_from', 'EstablishmentUser');
// Navigate to profile edit page
navigate(`/admin/configuration/profile?edit=${establishmentId}`);
navigate(`/profile/edit/${establishmentId}`);
};
const handleEmployeeChange = (field) => (event) => {
@ -274,14 +283,14 @@ const handleEditProfile = (e) => {
<h3 className="text-sm font-semibold text-gray-900 mb-4">Reporting Period</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Quarter</label>
<label className="block text-sm font-medium text-[#9EA2A9] mb-1">Quarter</label>
<div className="relative">
<select
value={info.quarter}
onChange={handleFieldChange('quarter')}
disabled={true}
required
className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-gray-50 appearance-none cursor-not-allowed"
className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-white text-[#9EA2A9] appearance-none cursor-not-allowed"
>
<option value="" disabled>Select quarter</option>
{["Q1", "Q2", "Q3", "Q4"].map(quarter => (
@ -296,13 +305,14 @@ const handleEditProfile = (e) => {
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Year</label>
<label className="block text-sm font-medium text-[#9EA2A9] mb-1">Year</label>
<div className="relative">
<select
value={info.year}
onChange={handleFieldChange('year')}
disabled={true}
className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-gray-50 appearance-none cursor-not-allowed"
className="block w-full h-10 rounded-md border-2 border-[#E6D7A2] focus:border-[#92722A] focus:ring-0 px-4 pr-10 text-sm bg-white text-[#9EA2A9] appearance-none cursor-not-allowed"
>
<option value="" disabled>Select year</option>
{["2022", "2023", "2024", "2025"].map(year => (
@ -329,42 +339,49 @@ const handleEditProfile = (e) => {
placeholder="Enter Establishment Name"
value={info.establishmentName}
onChange={handleFieldChange('establishmentName')}
disabled={loading}
disabled={true}
/>
<Field
label="Permanent Factory Code"
placeholder="Enter Permanent Factory Code"
value={info.permanentFactoryCode}
onChange={handleFieldChange('permanentFactoryCode')}
disabled={loading}
disabled={true}
/>
<Field
label="Industry Code (Business Register)"
label="Business Register Industry Code"
placeholder="Enter Industry Code"
value={info.industryCode}
onChange={handleFieldChange('industryCode')}
disabled={loading}
disabled={true}
/>
<Field
label="License Number"
placeholder="Enter License Number"
value={info.licenseNumber}
onChange={handleFieldChange('licenseNumber')}
disabled={loading}
disabled={true}
/>
{/* Email field is hidden but data remains in form state */}
<Field
label="ISIC Code"
placeholder="Enter ISIC Code"
value={info.isicCode}
onChange={handleFieldChange('isicCode')}
disabled={loading}
disabled={true}
/>
<Field
label="Emirate"
placeholder="Enter Emirate"
value={info.emirate}
onChange={handleFieldChange('emirate')}
disabled={loading}
disabled={true}
/>
</div>
</Card>
@ -372,7 +389,7 @@ const handleEditProfile = (e) => {
<div className="mt-6">
{/* Employee Information */}
<Card>
<h3 className="text-sm font-semibold text-gray-900 mb-4">Employee Information</h3>
<h3 className="text-sm font-semibold text-gray-900 mb-4">Employees (Headcount)</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field
label="Emirati Male"
@ -380,7 +397,7 @@ const handleEditProfile = (e) => {
type="number"
value={info.employeeInfo.emiratiMale}
onChange={handleEmployeeChange('emiratiMale')}
disabled={loading}
disabled={true}
/>
<Field
label="Non-Emirati Male"
@ -388,7 +405,7 @@ const handleEditProfile = (e) => {
type="number"
value={info.employeeInfo.nonEmiratiMale}
onChange={handleEmployeeChange('nonEmiratiMale')}
disabled={loading}
disabled={true}
/>
<Field
label="Emirati Female"
@ -396,7 +413,7 @@ const handleEditProfile = (e) => {
type="number"
value={info.employeeInfo.emiratiFemale}
onChange={handleEmployeeChange('emiratiFemale')}
disabled={loading}
disabled={true}
/>
<Field
label="Non-Emirati Female"
@ -404,7 +421,7 @@ const handleEditProfile = (e) => {
type="number"
value={info.employeeInfo.nonEmiratiFemale}
onChange={handleEmployeeChange('nonEmiratiFemale')}
disabled={loading}
disabled={true}
/>
<Field
label="Total Employees"
@ -412,7 +429,7 @@ const handleEditProfile = (e) => {
type="number"
value={info.employeeInfo.totalEmployees}
onChange={handleEmployeeChange('totalEmployees')}
disabled={loading}
disabled={true}
/>
<Field
label="Total Emirati"
@ -420,7 +437,7 @@ const handleEditProfile = (e) => {
type="number"
value={info.employeeInfo.totalEmirati}
onChange={handleEmployeeChange('totalEmirati')}
disabled={loading}
disabled={true}
/>
</div>
</Card>

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

@ -10,6 +10,7 @@ const caretDownSrc = '/assets/images/CaretDown-black.svg';
const clockIcon = '/assets/images/mingcute_time-line.svg';
const calendarIcon = '/assets/images/Duedate.svg';
const nextIcon = '/assets/images/mdi_page-next-outline.svg';
const trashActiveSrc = '/assets/images/Trash - active.svg';
const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {}, required = false }) => {
const [isFocused, setIsFocused] = React.useState(false);
@ -454,7 +455,7 @@ const ProductData = ({
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h2 className="text-lg font-semibold text-gray-900">Product Data</h2>
<h2 className="text-lg font-semibold text-gray-900">Products</h2>
</div>
<div className="flex items-center gap-3">
<button
@ -483,9 +484,10 @@ const ProductData = ({
<button
type="button"
onClick={() => removeProduct(p.id)}
className="text-[#92722A] text-sm px-3 py-1 rounded hover:bg-[#92722A]/10 cursor-pointer"
className="p-1.5 rounded-md hover:bg-[#92722A]/10"
title="Remove product"
>
Remove
<img src={trashActiveSrc} alt="Delete" className="h-5 w-5" />
</button>
)}
</div>
@ -722,9 +724,9 @@ const ProductData = ({
/>
</div>
</div>
<div className="flex items-end space-x-4">
<div className="flex items-end space-x-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Apr Cost (AED)<span className="text-red-600">*</span></label>
<label className="block text-sm font-medium text-gray-700 w-26 mb-1">Apr Cost (AED)<span className="text-red-600">*</span></label>
<Input
className="w-24"
type="number"
@ -735,7 +737,7 @@ const ProductData = ({
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">May Cost (AED)<span className="text-red-600">*</span></label>
<label className="block text-sm font-medium text-gray-700 w-27 mb-1">May Cost (AED)<span className="text-red-600">*</span></label>
<Input
className="w-24"
type="number"
@ -746,7 +748,7 @@ const ProductData = ({
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Jun Cost (AED)<span className="text-red-600">*</span></label>
<label className="block text-sm font-medium text-gray-700 w-27 mb-1">Jun Cost (AED)<span className="text-red-600">*</span></label>
<Input
className="w-24"
type="number"

2
ipi-survey-platform/src/components/survey/ReviewSubmit/ReviewSubmit.jsx
View File

@ -60,7 +60,7 @@ const buildEstablishmentDetails = (establishment) => {
return [
{ icon: establishmentIconSrc, label: 'Establishment Name', value: establishment.establishmentName },
{ icon: establishmentIdIconSrc, label: 'Establishment ID', value: establishment.licenseNumber },
{ icon: emailIconSrc, label: 'Email', value: establishment.email },
{ icon: emailIconSrc, label: 'Email', value: establishment.establishment_contact_email },
{ icon: emiratesIconSrc, label: 'Emirate', value: establishment.emirate },
];
};

1245
ipi-survey-platform/src/pages/Admin/configuration/EditCompanyProfile.jsx Normal file
View File

File diff suppressed because it is too large Load Diff

57
ipi-survey-platform/src/pages/Survey/Survey.jsx
View File

@ -6,6 +6,7 @@ import EstablishmentInfo from '@/components/survey/EstablishmentInfo/Establishme
import HeaderBar from '@/components/layout/HeaderBar';
import ProductData from '@/components/survey/ProductData/ProductData';
import ReviewSubmit from '@/components/survey/ReviewSubmit/ReviewSubmit';
import BreadcrumbVector from '/assets/images/Breadcrumb-vector.svg';
const checkCircleActiveSrc = '/assets/images/CircleFrame.svg';
@ -154,6 +155,7 @@ const Survey = () => {
licenseNumber: ensureString(detail?.license_number) || prev.licenseNumber,
isicCode: ensureString(detail?.isic_code) || prev.isicCode,
emirate: ensureString(detail?.establishment_emirate?.name) || ensureString(detail?.emirate) || prev.emirate,
establishment_contact_email: ensureString(detail?.establishment_contact_email) || prev.establishment_contact_email || '',
employeeInfo: {
...prev.employeeInfo,
emiratiMale: ensureString(detail?.emirati_male) || prev.employeeInfo.emiratiMale,
@ -470,12 +472,57 @@ const Survey = () => {
<div className="min-h-screen flex flex-col">
<HeaderBar />
{/* Breadcrumb Navigation */}
<div className="bg-white">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-2">
<nav className="flex items-center text-sm text-gray-500 space-x-2">
<a href="/" className="hover:text-[#92722A] transition-colors flex items-center gap-1">
Dashboard
<img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />
</a>
<a href="/survey" className="hover:text-[#92722A] transition-colors flex items-center ml-2">
Survey
<img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />
</a>
{step > 1 && (
<>
<a
href="#"
onClick={(e) => { e.preventDefault(); setStep(1); }}
className="hover:text-[#92722A] transition-colors flex items-center ml-2"
>
Establishment Information
<img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />
</a>
</>
)}
{step > 2 && (
<>
<a
href="#"
onClick={(e) => { e.preventDefault(); setStep(2); }}
className="hover:text-[#92722A] transition-colors flex items-center ml-2"
>
Product Data
{step > 2 && <img src={BreadcrumbVector} alt="" className="h-3 w-3 ml-3" />}
</a>
</>
)}
<span className="text-[#92722A] font-medium">
{step === 1 && 'Establishment Information'}
{step === 2 && 'Product Data'}
{step === 3 && 'Review & Submit'}
</span>
</nav>
</div>
</div>
{/* Step Header Bar */}
<div className="bg-white border-b border-gray-200 sticky top-0 z-10">
<div className="bg-white sticky top-0 z-10">
<div className="mx-auto max-w-7xl px-3 sm:px-6 lg:px-8">
<div className="h-12 flex items-center justify-start">
{/* Stepper container */}
<div className="flex items-center gap-6 sm:gap-10">
<div className="flex items-center gap-2 sm:gap-4">
{/* Step 1 */}
<div
@ -493,6 +540,9 @@ const Survey = () => {
Establishment Information
</span>
</div>
{/* Divider line */}
<div className={`w-[150px] h-[3px] ${step >= 2 ? 'bg-[#B68A35]' : 'bg-[#C3C6CB]'}`}></div>
{/* Step 2 */}
<div
@ -510,6 +560,9 @@ const Survey = () => {
Product Data
</span>
</div>
{/* Divider line after Step 2 */}
<div className={`w-[150px] h-[3px] ${step >= 3 ? 'bg-[#B68A35]' : 'bg-[#C3C6CB]'}`}></div>
{/* Step 3 */}
<div