add questionry added for admin along with public url for applicant to fill questionarnaire
This commit is contained in:
parent
5bb4b481c2
commit
95a9d57dd2
12
src/App.tsx
12
src/App.tsx
@ -4,6 +4,7 @@ import { RootState } from './store';
|
||||
import { setCredentials, logout as logoutAction, initializeAuth } from './store/slices/authSlice';
|
||||
import { Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { ApplicationFormPage } from './components/public/ApplicationFormPage';
|
||||
import PublicQuestionnairePage from './pages/public/PublicQuestionnairePage';
|
||||
import { LoginPage } from './components/auth/LoginPage';
|
||||
import { Sidebar } from './components/layout/Sidebar';
|
||||
import { Header } from './components/layout/Header';
|
||||
@ -36,6 +37,7 @@ import { DealerResignationPage } from './components/dealer/DealerResignationPage
|
||||
import { DealerConstitutionalChangePage } from './components/dealer/DealerConstitutionalChangePage';
|
||||
import { DealerRelocationPage } from './components/dealer/DealerRelocationPage';
|
||||
import QuestionnaireBuilder from './components/admin/QuestionnaireBuilder';
|
||||
import QuestionnaireList from './components/admin/QuestionnaireList';
|
||||
import { Toaster } from './components/ui/sonner';
|
||||
import { User } from './lib/mock-data';
|
||||
import { toast } from 'sonner';
|
||||
@ -143,12 +145,16 @@ export default function App() {
|
||||
// Public Routes
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<>
|
||||
<Routes>
|
||||
<Route path="/admin-login" element={<LoginPage onLogin={handleLogin} />} />
|
||||
<Route path="/questionnaire/:applicationId" element={<PublicQuestionnairePage />} />
|
||||
<Route path="*" element={showAdminLogin ? <LoginPage onLogin={handleLogin} /> :
|
||||
<><ApplicationFormPage onAdminLogin={() => setShowAdminLogin(true)} /><Toaster /></>}
|
||||
<ApplicationFormPage onAdminLogin={() => setShowAdminLogin(true)} />}
|
||||
/>
|
||||
</Routes>
|
||||
<Toaster />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -182,8 +188,10 @@ export default function App() {
|
||||
{/* Other Modules */}
|
||||
<Route path="/users" element={<UserManagementPage />} />
|
||||
<Route path="/master" element={<MasterPage />} />
|
||||
<Route path="/questions" element={<QuestionnaireBuilder />} />
|
||||
<Route path="/questions" element={<QuestionnaireList />} />
|
||||
<Route path="/questionnaire-builder" element={<QuestionnaireBuilder />} />
|
||||
<Route path="/questionnaire-builder/:id" element={<QuestionnaireBuilder />} />
|
||||
<Route path="/questionnaires" element={<QuestionnaireList />} />
|
||||
|
||||
{/* HR/Finance Modules (Simplified for brevity, following pattern) */}
|
||||
<Route path="/resignation" element={<ResignationPage currentUser={currentUser} onViewDetails={(id) => navigate(`/resignation/${id}`)} />} />
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import client from './client';
|
||||
import axios from 'axios';
|
||||
|
||||
export const API = {
|
||||
// Auth routes
|
||||
@ -30,6 +31,12 @@ export const API = {
|
||||
getLatestQuestionnaire: () => client.get('/questionnaire/latest'),
|
||||
createQuestionnaireVersion: (data: any) => client.post('/questionnaire/version', data),
|
||||
submitQuestionnaireResponse: (data: any) => client.post('/questionnaire/response', data),
|
||||
getAllQuestionnaires: () => client.get('/onboarding/questionnaires'),
|
||||
getQuestionnaireById: (id: string) => client.get(`/onboarding/questionnaires/${id}`),
|
||||
|
||||
// Public Questionnaire
|
||||
getPublicQuestionnaire: (appId: string) => axios.get(`http://localhost:5000/api/questionnaire/public/${appId}`), // Direct axios to bypass interceptors if client has auth
|
||||
submitPublicResponse: (data: any) => axios.post('http://localhost:5000/api/questionnaire/public/submit', data),
|
||||
|
||||
// User management routes
|
||||
getUsers: () => client.get('/admin/users'),
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { API } from '../../api/API';
|
||||
import { toast } from 'sonner'; // Assuming hot-toast is used
|
||||
import { Trash2, Plus, Save } from 'lucide-react'; // Assuming lucide-react icons
|
||||
import { toast } from 'sonner';
|
||||
import { Trash2, Plus, Save, AlertCircle, ArrowLeft } from 'lucide-react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
|
||||
interface Question {
|
||||
courseId?: string; // Legacy?
|
||||
id?: string;
|
||||
sectionName: string;
|
||||
questionText: string;
|
||||
inputType: 'text' | 'yesno' | 'file' | 'number';
|
||||
@ -14,18 +15,66 @@ interface Question {
|
||||
isMandatory: boolean;
|
||||
}
|
||||
|
||||
const SECTIONS = ['General', 'Financial', 'Infrastructure', 'Experience', 'Market Knowledge'];
|
||||
const SECTIONS = [
|
||||
'Personal Information',
|
||||
'Financial Information',
|
||||
'Location & Background',
|
||||
'Motivation',
|
||||
'Business Structure',
|
||||
'Professional Background',
|
||||
'Infrastructure',
|
||||
'Financial Planning',
|
||||
'Growth & Expansion',
|
||||
'Brand Affinity',
|
||||
'Vision & Strategy'
|
||||
];
|
||||
|
||||
const QuestionnaireBuilder: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [version, setVersion] = useState<string>(`v${new Date().toISOString().split('T')[0]}`);
|
||||
const [questions, setQuestions] = useState<Question[]>([
|
||||
{ sectionName: 'General', questionText: '', inputType: 'text', weight: 0, order: 1, isMandatory: true }
|
||||
{ sectionName: 'Personal Information', questionText: '', inputType: 'text', weight: 0, order: 1, isMandatory: true }
|
||||
]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fetching, setFetching] = useState(!!id);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchQuestionnaire(id);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const fetchQuestionnaire = async (questionnaireId: string) => {
|
||||
try {
|
||||
setFetching(true);
|
||||
const response = await API.getQuestionnaireById(questionnaireId) as any;
|
||||
if (response.data?.success) {
|
||||
const data = response.data.data;
|
||||
setVersion(`${data.version} (Copy)`); // Default to making a copy
|
||||
if (data.questions && data.questions.length > 0) {
|
||||
setQuestions(data.questions.map((q: any) => ({
|
||||
...q,
|
||||
weight: parseFloat(q.weight) // Ensure weight is number
|
||||
})));
|
||||
}
|
||||
} else {
|
||||
toast.error('Failed to load questionnaire');
|
||||
navigate('/questionnaires');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error('Error fetching questionnaire');
|
||||
} finally {
|
||||
setFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const totalWeight = questions.reduce((sum, q) => sum + (q.weight || 0), 0);
|
||||
|
||||
const addQuestion = () => {
|
||||
setQuestions([...questions, {
|
||||
sectionName: 'General',
|
||||
sectionName: 'Personal Information',
|
||||
questionText: '',
|
||||
inputType: 'text',
|
||||
weight: 0,
|
||||
@ -53,6 +102,11 @@ const QuestionnaireBuilder: React.FC = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (totalWeight !== 100) {
|
||||
toast.error(`Total weightage must be exactly 100. Current total: ${totalWeight}`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
await API.createQuestionnaireVersion({
|
||||
@ -60,6 +114,7 @@ const QuestionnaireBuilder: React.FC = () => {
|
||||
questions
|
||||
});
|
||||
toast.success('Questionnaire version created successfully');
|
||||
navigate('/questionnaires'); // Redirect to list after save
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error('Failed to create questionnaire');
|
||||
@ -68,95 +123,138 @@ const QuestionnaireBuilder: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (fetching) {
|
||||
return (
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold">Questionnaire Builder</h2>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="flex justify-center p-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 bg-white rounded-lg shadow-md max-w-[1600px] mx-auto">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4 border-b border-gray-100 pb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => navigate('/questionnaires')}
|
||||
className="p-2 hover:bg-slate-100 rounded-full transition-colors text-slate-500"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">
|
||||
{id ? 'Edit Questionnaire Version' : 'Create New Version'}
|
||||
</h2>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
{id ? 'Modify existing template and save as new version' : 'Define questions, logic and weightage'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
|
||||
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${totalWeight === 100 ? 'bg-green-50 border-green-200 text-green-700' : 'bg-amber-50 border-amber-200 text-amber-700'}`}>
|
||||
{totalWeight !== 100 && <AlertCircle size={16} />}
|
||||
<span className="text-sm font-semibold">Total Score: {totalWeight}/100</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-1 md:flex-initial">
|
||||
<input
|
||||
type="text"
|
||||
value={version}
|
||||
onChange={(e) => setVersion(e.target.value)}
|
||||
className="border p-2 rounded"
|
||||
placeholder="Version Name"
|
||||
className="border border-slate-300 p-2 rounded-lg w-full md:w-48 text-sm focus:ring-2 focus:ring-amber-500 outline-none"
|
||||
placeholder="Version Name (e.g. v2.0)"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-blue-700"
|
||||
className="bg-amber-600 text-white px-6 py-2 rounded-lg flex items-center gap-2 hover:bg-amber-700 disabled:bg-slate-300 disabled:cursor-not-allowed transition shadow-sm font-medium whitespace-nowrap"
|
||||
>
|
||||
<Save size={18} /> {loading ? 'Saving...' : 'Publish Version'}
|
||||
<Save size={18} /> {loading ? 'Saving...' : 'Publish'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{questions.map((q, index) => (
|
||||
<div key={index} className="border p-4 rounded-md bg-gray-50 flex gap-4 items-start">
|
||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium mb-1">Question Text</label>
|
||||
<div key={index} className="group border border-slate-200 p-5 rounded-xl bg-slate-50/50 hover:bg-white hover:shadow-md transition-all duration-200 flex gap-4 items-start relative">
|
||||
<div className="pt-2.5">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-semibold text-sm">
|
||||
{index + 1}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-12 gap-5">
|
||||
<div className="md:col-span-6 lg:col-span-5">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Question Text</label>
|
||||
<input
|
||||
type="text"
|
||||
value={q.questionText}
|
||||
onChange={(e) => updateQuestion(index, 'questionText', e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
placeholder="Enter question..."
|
||||
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none transition-shadow"
|
||||
placeholder="Enter your question here..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Section</label>
|
||||
<div className="md:col-span-6 lg:col-span-3">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Section</label>
|
||||
<select
|
||||
value={q.sectionName}
|
||||
onChange={(e) => updateQuestion(index, 'sectionName', e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none bg-white"
|
||||
>
|
||||
{SECTIONS.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Type</label>
|
||||
<div className="md:col-span-4 lg:col-span-2">
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Input Type</label>
|
||||
<select
|
||||
value={q.inputType}
|
||||
onChange={(e) => updateQuestion(index, 'inputType', e.target.value as any)}
|
||||
className="w-full border p-2 rounded"
|
||||
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none bg-white"
|
||||
>
|
||||
<option value="text">Text</option>
|
||||
<option value="yesno">Yes/No</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="text">Text Input</option>
|
||||
<option value="yesno">Yes / No</option>
|
||||
<option value="number">Numeric</option>
|
||||
<option value="file">File Upload</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Weightage</label>
|
||||
<div className="md:col-span-4 lg:col-span-2">
|
||||
<div className="flex items-center gap-3 h-full pt-6">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
value={q.weight}
|
||||
onChange={(e) => updateQuestion(index, 'weight', parseFloat(e.target.value))}
|
||||
className="w-full border p-2 rounded"
|
||||
className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none pl-3 pr-8"
|
||||
title="Weightage"
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-bold">%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center pt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={q.isMandatory}
|
||||
onChange={(e) => updateQuestion(index, 'isMandatory', e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
<label className="text-sm">Mandatory</label>
|
||||
{/* <div className="flex items-center gap-2 px-3 py-2.5 bg-white border border-slate-200 rounded-lg cursor-pointer hover:border-amber-300 transition-colors"
|
||||
onClick={() => updateQuestion(index, 'isMandatory', !q.isMandatory)}
|
||||
>
|
||||
<div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${q.isMandatory ? 'bg-amber-600 border-amber-600' : 'border-slate-300'}`}>
|
||||
{q.isMandatory && <div className="w-2 h-2 bg-white rounded-sm" />}
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-600 select-none">Req.</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => removeQuestion(index)}
|
||||
className="text-red-500 hover:text-red-700 mt-8"
|
||||
className="absolute -right-3 -top-3 md:static md:mt-8 md:mr-2 w-8 h-8 flex items-center justify-center rounded-full bg-white md:bg-transparent text-slate-400 hover:text-red-600 hover:bg-red-50 border border-slate-200 md:border-transparent shadow-sm md:shadow-none transition-all"
|
||||
title="Remove Question"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@ -164,9 +262,9 @@ const QuestionnaireBuilder: React.FC = () => {
|
||||
|
||||
<button
|
||||
onClick={addQuestion}
|
||||
className="mt-6 w-full border-2 border-dashed border-gray-300 p-4 rounded text-gray-500 hover:border-blue-500 hover:text-blue-500 flex justify-center items-center gap-2"
|
||||
className="mt-8 w-full border-2 border-dashed border-slate-300 p-4 rounded-xl text-slate-500 hover:border-amber-500 hover:text-amber-600 hover:bg-amber-50/30 flex justify-center items-center gap-2 transition-all font-medium"
|
||||
>
|
||||
<Plus size={20} /> Add Question
|
||||
<Plus size={20} /> Add Another Question
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
120
src/components/admin/QuestionnaireList.tsx
Normal file
120
src/components/admin/QuestionnaireList.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { API } from '../../api/API';
|
||||
import { toast } from 'sonner';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Plus, Edit2, Calendar, CheckCircle, XCircle } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface QuestionnaireVersion {
|
||||
id: string;
|
||||
version: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
const QuestionnaireList: React.FC = () => {
|
||||
const [versions, setVersions] = useState<QuestionnaireVersion[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
fetchVersions();
|
||||
}, []);
|
||||
|
||||
const fetchVersions = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await API.getAllQuestionnaires() as any;
|
||||
if (response.data?.success) {
|
||||
setVersions(response.data.data);
|
||||
} else {
|
||||
toast.error('Failed to load questionnaire versions');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error('Error fetching versions');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Questionnaire Versions</h2>
|
||||
<p className="text-slate-500">Manage your questionnaire templates and versions</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate('/questionnaire-builder')}
|
||||
className="bg-amber-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-amber-700 transition"
|
||||
>
|
||||
<Plus size={20} /> Create New Version
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center p-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
|
||||
</div>
|
||||
) : versions.length === 0 ? (
|
||||
<div className="text-center p-12 bg-white rounded-lg shadow-sm border border-slate-200">
|
||||
<p className="text-slate-500 mb-4">No questionnaire versions found.</p>
|
||||
<button
|
||||
onClick={() => navigate('/questionnaire-builder')}
|
||||
className="text-amber-600 font-medium hover:underline"
|
||||
>
|
||||
Create your first version
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-slate-50 border-b border-slate-100">
|
||||
<tr>
|
||||
<th className="p-4 font-medium text-slate-600">Version Name</th>
|
||||
<th className="p-4 font-medium text-slate-600">Status</th>
|
||||
<th className="p-4 font-medium text-slate-600">Created At</th>
|
||||
<th className="p-4 font-medium text-slate-600 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{versions.map((v) => (
|
||||
<tr key={v.id} className="hover:bg-slate-50 transition">
|
||||
<td className="p-4 font-medium text-slate-900">{v.version}</td>
|
||||
<td className="p-4">
|
||||
{v.isActive ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 border border-green-200">
|
||||
<CheckCircle size={12} /> Active
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-600 border border-slate-200">
|
||||
<XCircle size={12} /> Inactive
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 text-slate-600 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={14} className="text-slate-400" />
|
||||
{format(new Date(v.createdAt), 'MMM dd, yyyy HH:mm')}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-right">
|
||||
<button
|
||||
onClick={() => navigate(`/questionnaire-builder/${v.id}`)}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium text-slate-600 hover:text-amber-600 hover:bg-amber-50 transition border border-slate-200 hover:border-amber-200"
|
||||
>
|
||||
<Edit2 size={14} /> Edit / Clone
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuestionnaireList;
|
||||
@ -18,16 +18,27 @@ interface QuestionnaireFormProps {
|
||||
onComplete?: () => void;
|
||||
readOnly?: boolean;
|
||||
existingResponses?: any[];
|
||||
publicMode?: boolean; // New prop
|
||||
initialQuestions?: Question[]; // New prop to avoid re-fetching
|
||||
}
|
||||
|
||||
const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({ applicationId, onComplete, readOnly = false, existingResponses }) => {
|
||||
const [questions, setQuestions] = useState<Question[]>([]);
|
||||
const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
|
||||
applicationId,
|
||||
onComplete,
|
||||
readOnly = false,
|
||||
existingResponses,
|
||||
publicMode = false,
|
||||
initialQuestions
|
||||
}) => {
|
||||
const [questions, setQuestions] = useState<Question[]>(initialQuestions || []);
|
||||
const [responses, setResponses] = useState<Record<string, any>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loading, setLoading] = useState(!initialQuestions);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!initialQuestions) {
|
||||
fetchQuestionnaire();
|
||||
}
|
||||
if (existingResponses) {
|
||||
const initialResponses: any = {};
|
||||
existingResponses.forEach(r => {
|
||||
@ -35,10 +46,18 @@ const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({ applicationId, on
|
||||
});
|
||||
setResponses(initialResponses);
|
||||
}
|
||||
}, [existingResponses]);
|
||||
}, [existingResponses, initialQuestions]);
|
||||
|
||||
const fetchQuestionnaire = async () => {
|
||||
try {
|
||||
// In public mode, we shouldn't fetch "latest" as it requires auth.
|
||||
// Public page should provide initialQuestions.
|
||||
// But if we ever needed to fetch, we'd need a public endpoint for just questions or rely on the parent.
|
||||
if (publicMode) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await API.getLatestQuestionnaire();
|
||||
if (res.data && res.data.data && res.data.data.questions) {
|
||||
setQuestions(res.data.data.questions);
|
||||
@ -70,10 +89,18 @@ const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({ applicationId, on
|
||||
value: val
|
||||
}));
|
||||
|
||||
if (publicMode) {
|
||||
await API.submitPublicResponse({
|
||||
applicationId,
|
||||
responses: payload
|
||||
});
|
||||
} else {
|
||||
await API.submitQuestionnaireResponse({
|
||||
applicationId,
|
||||
responses: payload
|
||||
});
|
||||
}
|
||||
|
||||
toast.success('Responses submitted successfully');
|
||||
if (onComplete) onComplete();
|
||||
} catch (error) {
|
||||
|
||||
@ -13,7 +13,8 @@ import {
|
||||
FolderOpen,
|
||||
Settings,
|
||||
RefreshCcw,
|
||||
MapPin
|
||||
MapPin,
|
||||
ClipboardList
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
@ -92,6 +93,7 @@ export function Sidebar({ onLogout }: SidebarProps) {
|
||||
|
||||
if (currentUser?.role === 'Super Admin') {
|
||||
menuItems.push({ id: 'users', label: 'User Management', icon: Users });
|
||||
menuItems.push({ id: 'questionnaires', label: 'Questionnaire Templates', icon: ClipboardList });
|
||||
}
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
|
||||
@ -191,10 +191,17 @@ export const mockUsers: User[] = [
|
||||
{
|
||||
id: '16',
|
||||
name: 'Yashwin',
|
||||
email: 'yashwin@royalenfield.com',
|
||||
password: 'password',
|
||||
email: 'yashwin@gmail.com',
|
||||
password: 'Admin@123',
|
||||
role: 'ZBH',
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
name: 'Kenil',
|
||||
email: 'kenil@gmail.com',
|
||||
password: 'Admin@123',
|
||||
role: 'DD Lead',
|
||||
},
|
||||
];
|
||||
|
||||
// Mock current user (default)
|
||||
|
||||
71
src/pages/public/PublicQuestionnairePage.tsx
Normal file
71
src/pages/public/PublicQuestionnairePage.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import QuestionnaireForm from '../../components/dealer/QuestionnaireForm';
|
||||
import { API } from '../../api/API';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const PublicQuestionnairePage: React.FC = () => {
|
||||
const { applicationId } = useParams<{ applicationId: string }>();
|
||||
const [isValid, setIsValid] = useState<boolean | null>(null);
|
||||
const [appName, setAppName] = useState('');
|
||||
const [questions, setQuestions] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkValidity = async () => {
|
||||
if (!applicationId) return;
|
||||
try {
|
||||
// We use the public fetch to verify existence
|
||||
const res = await API.getPublicQuestionnaire(applicationId);
|
||||
if (res.data.success) {
|
||||
setIsValid(true);
|
||||
setAppName(res.data.data.applicationName);
|
||||
setQuestions(res.data.data.questions || []);
|
||||
} else {
|
||||
setIsValid(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setIsValid(false);
|
||||
}
|
||||
};
|
||||
checkValidity();
|
||||
}, [applicationId]);
|
||||
|
||||
if (isValid === null) return <div className="p-8 text-center">Checking application link...</div>;
|
||||
if (isValid === false) return <div className="p-8 text-center text-red-500 text-xl font-bold">Invalid or Expired Link</div>;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col items-center py-10">
|
||||
<div className="w-full max-w-4xl bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="bg-black text-white p-6">
|
||||
<h1 className="text-2xl font-bold">Dealer Application Assessment</h1>
|
||||
<p className="opacity-80 mt-1">Applicant: {appName}</p>
|
||||
<p className="opacity-60 text-sm">ID: {applicationId}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
|
||||
<div className="flex">
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-yellow-700">
|
||||
Please complete all mandatory fields. You can submit this form only once.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<QuestionnaireForm
|
||||
applicationId={applicationId!}
|
||||
publicMode={true}
|
||||
initialQuestions={questions}
|
||||
onComplete={() => {
|
||||
toast.success("Thank you! Your assessment has been submitted.");
|
||||
setTimeout(() => window.location.reload(), 2000);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PublicQuestionnairePage;
|
||||
Loading…
Reference in New Issue
Block a user