add questionry added for admin along with public url for applicant to fill questionarnaire

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}`)} />} />

src/api/API.ts

@@ -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'),

src/components/admin/QuestionnaireBuilder.tsx

@@ -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 { toast } from 'sonner';
-import { Trash2, Plus, Save } from 'lucide-react'; // Assuming lucide-react icons
+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-center p-12">
-            <div className="flex justify-between items-center mb-6">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-600"></div>
-                <h2 className="text-2xl font-bold">Questionnaire Builder</h2>
+            </div>
-                <div className="flex gap-4 items-center">
+        );
+    }
+
+    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"
+                            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"
+                            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 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="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <div className="pt-2.5">
-                            <div className="col-span-2">
+                            <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-semibold text-sm">
-                                <label className="block text-sm font-medium mb-1">Question Text</label>
+                                {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"
+                                    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 question..."
+                                    placeholder="Enter your question here..."
                                 />
                             </div>
 
-                            <div>
+                            <div className="md:col-span-6 lg:col-span-3">
-                                <label className="block text-sm font-medium mb-1">Section</label>
+                                <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>
+                            <div className="md:col-span-4 lg:col-span-2">
-                                <label className="block text-sm font-medium mb-1">Type</label>
+                                <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="text">Text Input</option>
                                     <option value="yesno">Yes / No</option>
-                                    <option value="number">Number</option>
+                                    <option value="number">Numeric</option>
                                     <option value="file">File Upload</option>
                                 </select>
                             </div>
 
-                            <div>
+                            <div className="md:col-span-4 lg:col-span-2">
-                                <label className="block text-sm font-medium mb-1">Weightage</label>
+                                <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">
+                                    {/* <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"
-                                <input
+                                        onClick={() => updateQuestion(index, 'isMandatory', !q.isMandatory)}
-                                    type="checkbox"
+                                    >
-                                    checked={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'}`}>
-                                    onChange={(e) => updateQuestion(index, 'isMandatory', e.target.checked)}
+                                            {q.isMandatory && <div className="w-2 h-2 bg-white rounded-sm" />}
-                                    className="mr-2"
+                                        </div>
-                                />
+                                        <span className="text-xs font-medium text-slate-600 select-none">Req.</span>
-                                <label className="text-sm">Mandatory</label>
+                                    </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>
     );

src/components/admin/QuestionnaireList.tsx

@@ -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;

src/components/dealer/QuestionnaireForm.tsx

@@ -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 QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
-    const [questions, setQuestions] = useState<Question[]>([]);
+    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) {

src/components/layout/Sidebar.tsx

@@ -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) => {

src/lib/mock-data.ts

@@ -191,10 +191,17 @@ export const mockUsers: User[] = [
   {
     id: '16',
     name: 'Yashwin',
-    email: 'yashwin@royalenfield.com',
+    email: 'yashwin@gmail.com',
-    password: 'password',
+    password: 'Admin@123',
     role: 'ZBH',
-  }
+  },
+  {
+    id: '17',
+    name: 'Kenil',
+    email: 'kenil@gmail.com',
+    password: 'Admin@123',
+    role: 'DD Lead',
+  },
 ];
 
 // Mock current user (default)

src/pages/public/PublicQuestionnairePage.tsx

@@ -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;