reset password validation done

ipi-survey-platform/src/pages/Admin/ValidationReview.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import AdminHeader from '@/components/admin/AdminHeader';
 import { getSubmissionById } from '@/services/admin/submission';
+import apiClient from '@/services/api/apiClient';
 
 const caretUpSrc = '/assets/images/caret-up.svg';
 const establishmentIconSrc = '/assets/images/Establishment.svg';
@@ -25,10 +26,10 @@ const employmentIcons = {
 const ValidationReview = () => {
   const navigate = useNavigate();
   const { id } = useParams();
-  const [toast, setToast] = React.useState(null);
   const [isRejectOpen, setIsRejectOpen] = React.useState(false);
   const [rejectReason, setRejectReason] = React.useState('');
   const [loading, setLoading] = React.useState(true);
+  const [actionLoading, setActionLoading] = React.useState(false);
   const [error, setError] = React.useState(null);
   const [submissionData, setSubmissionData] = React.useState(null);
 
@@ -71,22 +72,69 @@ const ValidationReview = () => {
     fetchSubmission();
   }, [id]);
 
-  const showApproveToast = () => {
+  const handleApprove = async () => {
-    const establishmentName = submissionData?.establishment?.factory_name || 'Establishment';
+    if (actionLoading) return;
-    setToast({ type: 'success', text: `${establishmentName} has been approved successfully.` });
+    
-    window.clearTimeout(showApproveToast._t);
+    setActionLoading(true);
-    showApproveToast._t = window.setTimeout(() => setToast(null), 4000);
+    try {
+      const response = await apiClient.put(`/approveOrRejectSubmission/${id}`, {
+        status: 'Approved',
+        remarks: ''
+      });
+
+      if (response?.data || response?.status === 'success') {
+        const establishmentName = submissionData?.establishment?.factory_name || 'Establishment';
+        navigate('/admin/validations', {
+          state: {
+            showSuccessToast: true,
+            successMessage: `${establishmentName} has been approved successfully.`
+          }
+        });
+      } else {
+        throw new Error('Failed to approve submission');
+      }
+    } catch (err) {
+      console.error('Approval failed:', err);
+      alert(err.response?.data?.message || err.message || 'Failed to approve submission. Please try again.');
+    } finally {
+      setActionLoading(false);
+    }
   };
 
-  const handleRejectSubmit = () => {
+  const handleRejectSubmit = async () => {
-    setToast({ 
+    if (actionLoading) return;
-      type: 'info', 
+    
-      text: rejectReason ? `Submission rejected. Reason: ${rejectReason}` : 'Submission rejected.' 
+    if (!rejectReason.trim()) {
-    });
+      alert('Please provide a reason for rejection.');
-    window.clearTimeout(showApproveToast._t);
+      return;
-    showApproveToast._t = window.setTimeout(() => setToast(null), 4000);
+    }
-    setIsRejectOpen(false);
+
-    setRejectReason('');
+    setActionLoading(true);
+    try {
+      const response = await apiClient.put(`/approveOrRejectSubmission/${id}`, {
+        status: 'Rejected',
+        remarks: rejectReason.trim()
+      });
+
+      if (response?.data || response?.status === 'success') {
+        const establishmentName = submissionData?.establishment?.factory_name || 'Establishment';
+        navigate('/admin/validations', {
+          state: {
+            showSuccessToast: true,
+            successMessage: `${establishmentName} has been rejected successfully.`
+          }
+        });
+      } else {
+        throw new Error('Failed to reject submission');
+      }
+    } catch (err) {
+      console.error('Rejection failed:', err);
+      alert(err.response?.data?.message || err.message || 'Failed to reject submission. Please try again.');
+    } finally {
+      setActionLoading(false);
+      setIsRejectOpen(false);
+      setRejectReason('');
+    }
   };
 
   if (loading) {
@@ -253,22 +301,6 @@ const ValidationReview = () => {
     <div className="min-h-screen bg-[#F6F5F1]">
       <AdminHeader />
       <div className="max-w-[1280px] mx-auto px-4 py-6 space-y-6">
-        {toast && (
-          <div className="rounded-md bg-[#F3FAF4] text-[#2F663C] flex items-center justify-between px-4 py-2">
-            <div className="flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-                <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 7.28a.75.75 0 0 0-1.06-1.06l-4.72 4.72-1.72-1.72a.75.75 0 1 0-1.06 1.06l2.25 2.25c.293.293.767.293 1.06 0l5.25-5.25Z" clipRule="evenodd" />
-              </svg>
-              <span className="text-sm">{toast.text}</span>
-            </div>
-            <button type="button" aria-label="Close" className="p-1 rounded hover:bg-black/5" onClick={() => setToast(null)}>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-                <path fillRule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
-              </svg>
-            </button>
-          </div>
-        )}
-
         <nav className="flex items-center gap-2 text-sm text-[#8F9299]">
           <Link to="/admin/dashboard" className="flex items-center gap-2 text-[#232528] hover:underline">
             Dashboard
@@ -429,17 +461,19 @@ const ValidationReview = () => {
             <div className="flex flex-col gap-3 md:flex-row md:items-center">
               <button
                 type="button"
-                className="inline-flex h-11 w-full items-center justify-center rounded-[10px] border border-[#B52520] text-sm font-semibold text-[#B52520] transition-colors hover:bg-[#FEE2E2] md:w-[132px]"
+                className="inline-flex h-11 w-full items-center justify-center rounded-[10px] border border-[#B52520] text-sm font-semibold text-[#B52520] transition-colors hover:bg-[#FEE2E2] md:w-[132px] disabled:opacity-50 disabled:cursor-not-allowed"
                 onClick={() => setIsRejectOpen(true)}
+                disabled={actionLoading}
               >
                 Reject
               </button>
               <button
                 type="button"
-                className="inline-flex h-11 w-full items-center justify-center rounded-[10px] bg-[#92722A] text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] md:w-[132px]"
+                className="inline-flex h-11 w-full items-center justify-center rounded-[10px] bg-[#92722A] text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] md:w-[132px] disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={showApproveToast}
+                onClick={handleApprove}
+                disabled={actionLoading}
               >
-                Approve
+                {actionLoading ? 'Processing...' : 'Approve'}
               </button>
             </div>
           </div>
@@ -454,8 +488,12 @@ const ValidationReview = () => {
               <button
                 type="button"
                 className="h-8 w-8 rounded-full text-[#6B7280] transition-colors hover:bg-[#F7F7F7] hover:text-[#232528]"
-                onClick={() => setIsRejectOpen(false)}
+                onClick={() => {
+                  setIsRejectOpen(false);
+                  setRejectReason('');
+                }}
                 aria-label="Close rejection dialog"
+                disabled={actionLoading}
               >
                 ×
               </button>
@@ -469,26 +507,29 @@ const ValidationReview = () => {
                   placeholder="Enter the reason for rejection..."
                   value={rejectReason}
                   onChange={(event) => setRejectReason(event.target.value)}
+                  disabled={actionLoading}
                 />
               </label>
             </div>
             <div className="flex items-center justify-end gap-3 border-t border-[#E5E7EB] px-6 py-4">
               <button
                 type="button"
-                className="inline-flex h-10 items-center justify-center rounded-[10px] border border-[#C3C6CB] bg-white px-4 text-sm font-medium text-[#5F646D] transition-colors hover:bg-[#F7F7F7]"
+                className="inline-flex h-10 items-center justify-center rounded-[10px] border border-[#C3C6CB] bg-white px-4 text-sm font-medium text-[#5F646D] transition-colors hover:bg-[#F7F7F7] disabled:opacity-50 disabled:cursor-not-allowed"
                 onClick={() => {
                   setIsRejectOpen(false);
                   setRejectReason('');
                 }}
+                disabled={actionLoading}
               >
                 Cancel
               </button>
               <button
                 type="button"
-                className="inline-flex h-10 items-center justify-center rounded-[10px] bg-[#92722A] px-5 text-sm font-semibold text-white transition-colors hover:bg-[#B68A35]"
+                className="inline-flex h-10 items-center justify-center rounded-[10px] bg-[#92722A] px-5 text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] disabled:opacity-50 disabled:cursor-not-allowed"
                 onClick={handleRejectSubmit}
+                disabled={actionLoading}
               >
-                Reject
+                {actionLoading ? 'Processing...' : 'Reject'}
               </button>
             </div>
           </div>

ipi-survey-platform/src/pages/Admin/Validations.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import AdminHeader from '@/components/admin/AdminHeader';
 import Table from '@/components/common/Table';
 import { SelectField } from '@/components/common/FormControls';
@@ -51,6 +51,7 @@ const Badge = ({ children, status }) => {
 
 const ManageSubmissions = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const [submissions, setSubmissions] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
@@ -60,8 +61,47 @@ const ManageSubmissions = () => {
   const [emirate, setEmirate] = React.useState('');
   const [status, setStatus] = React.useState('');
   const [currentPage, setCurrentPage] = React.useState(1);
+  const [toast, setToast] = React.useState(null);
   const pageSize = 10;
 
+  const toastTimeoutRef = React.useRef(null);
+
+  const showToast = React.useCallback((type, message) => {
+    if (!message) return;
+    if (toastTimeoutRef.current) {
+      window.clearTimeout(toastTimeoutRef.current);
+      toastTimeoutRef.current = null;
+    }
+    setToast({ type, message });
+    toastTimeoutRef.current = window.setTimeout(() => {
+      setToast(null);
+      toastTimeoutRef.current = null;
+    }, 4000);
+  }, []);
+
+  const closeToast = React.useCallback(() => {
+    if (toastTimeoutRef.current) {
+      window.clearTimeout(toastTimeoutRef.current);
+      toastTimeoutRef.current = null;
+    }
+    setToast(null);
+  }, []);
+
+  React.useEffect(() => {
+    return () => {
+      if (toastTimeoutRef.current) {
+        window.clearTimeout(toastTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (location.state?.showSuccessToast && location.state?.successMessage) {
+      showToast('success', location.state.successMessage);
+      window.history.replaceState({}, document.title);
+    }
+  }, [location.state, showToast]);
+
   React.useEffect(() => {
     const fetchSubmissions = async () => {
       try {
@@ -194,6 +234,30 @@ const ManageSubmissions = () => {
     <>
     <div className="min-h-screen bg-[#F6F5F1]">
       <AdminHeader />
+      
+      {toast && (
+        <div className="fixed top-6 inset-x-0 z-50 flex justify-center px-4">
+          <div
+            className={`text-sm rounded px-3 py-2 border flex items-start justify-between gap-3 shadow ${
+              toast.type === 'success'
+                ? 'bg-[#F3FAF4] border-[#C6E7D8] text-[#2F663C]'
+                : 'bg-[#FEF2F2] border-[#FECACA] text-[#B91C1C]'
+            }`}
+          >
+            <div className="flex items-start gap-2">
+              <span>{toast.message}</span>
+            </div>
+            <button
+              type="button"
+              className="flex h-6 w-6 items-center justify-center rounded hover:bg-black/5"
+              onClick={closeToast}
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="max-w-[1280px] mx-auto px-4 py-6 flex flex-col gap-6">
         <nav className="flex items-center gap-2 text-sm text-[#8F9299]">
           <Link to="/admin/dashboard" className="flex items-center gap-2 text-[#232528] hover:underline">

ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx

@@ -4,10 +4,20 @@ import apiClient from '@/services/api/apiClient';
 
 const logoSrc = '/assets/images/FCSCLogo.svg';
 
-const ToggleableInput = ({ label, type = "password", value, onChange, show, toggleShow, placeholder }) => (
+const ToggleableInput = ({
+  label,
+  type = "password",
+  value,
+  onChange,
+  show,
+  toggleShow,
+  placeholder,
+  required = false,
+}) => (
   <div>
     <label className="block text-sm font-medium text-gray-700 mb-1">
       {label}
+      {required && <span className="text-red-500 ml-0.5">*</span>}
     </label>
     <div className="relative">
       <input
@@ -15,8 +25,8 @@ const ToggleableInput = ({ label, type = "password", value, onChange, show, togg
         value={value}
         onChange={onChange}
         placeholder={placeholder}
+        required={required}
         className="block w-full h-10 rounded-md border-2 border-[#92722A] focus:border-[#92722A] focus:ring-0 px-4 pr-11 text-sm bg-white"
-        required
       />
       <button
         type="button"
@@ -32,12 +42,7 @@ const ToggleableInput = ({ label, type = "password", value, onChange, show, togg
               strokeWidth="2"
               d="M13.875 18.825A10.05 10.05 0 0 1 12 19c-5.523 0-10-4.477-10-10a9.96 9.96 0 0 1 2.122-6.21m3.086-1.955A9.953 9.953 0 0 1 12 3c5.523 0 10 4.477 10 10 0 1.591-.372 3.093-1.034 4.432M9.88 9.88a3 3 0 1 0 4.24 4.24"
             />
-            <path
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m3 3 18 18" />
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="m3 3 18 18"
-            />
           </svg>
         ) : (
           <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#92722A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -50,6 +55,7 @@ const ToggleableInput = ({ label, type = "password", value, onChange, show, togg
   </div>
 );
 
+
 const ChangePassword = () => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -66,6 +72,27 @@ const ChangePassword = () => {
   const [error, setError] = React.useState("");
   const [success, setSuccess] = React.useState("");
 
+  const validatePassword = (password) => {
+    const minLength = /.{8,}/;
+    const uppercase = /[A-Z]/;
+    const lowercase = /[a-z]/;
+    const number = /[0-9]/;
+    const specialChar = /[!@#$%^&*(),.?":{}|<>]/;
+
+    if (!minLength.test(password))
+      return "Password must be at least 8 characters long.";
+    if (!uppercase.test(password))
+      return "Password must contain at least one uppercase letter.";
+    if (!lowercase.test(password))
+      return "Password must contain at least one lowercase letter.";
+    if (!number.test(password))
+      return "Password must contain at least one number.";
+    if (!specialChar.test(password))
+      return "Password must contain at least one special character.";
+
+    return ""; 
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError("");
@@ -81,6 +108,12 @@ const ChangePassword = () => {
       return;
     }
 
+    const passwordError = validatePassword(newPassword);
+    if (passwordError) {
+      setError(passwordError);
+      return;
+    }
+
     if (newPassword !== confirmPassword) {
       setError("Passwords do not match.");
       return;
@@ -158,32 +191,54 @@ const ChangePassword = () => {
             </div>
 
             <ToggleableInput
-              label="Verification Code"
+  label="Verification Code"
-              type="password"
+  required
-              value={otp}
+  type="password"
-              onChange={(e) => setOtp(e.target.value)}
+  value={otp}
-              show={showOtp}
+  onChange={(e) => setOtp(e.target.value)}
-              toggleShow={() => setShowOtp((v) => !v)}
+  show={showOtp}
-              placeholder="Enter 6-digit code"
+  toggleShow={() => setShowOtp((v) => !v)}
-            />
+  placeholder="Enter 6-digit code"
+/>
 
-            <ToggleableInput
+<ToggleableInput
-              label="New Password"
+  label="New Password"
-              value={newPassword}
+  required
-              onChange={(e) => setNewPassword(e.target.value)}
+  value={newPassword}
-              show={showNewPassword}
+  onChange={(e) => setNewPassword(e.target.value)}
-              toggleShow={() => setShowNewPassword((v) => !v)}
+  show={showNewPassword}
-              placeholder="Enter new password"
+  toggleShow={() => setShowNewPassword((v) => !v)}
-            />
+  placeholder="Enter new password"
+/>
 
-            <ToggleableInput
+<ToggleableInput
-              label="Confirm New Password"
+  label="Confirm New Password"
-              value={confirmPassword}
+  required
-              onChange={(e) => setConfirmPassword(e.target.value)}
+  value={confirmPassword}
-              show={showConfirmPassword}
+  onChange={(e) => setConfirmPassword(e.target.value)}
-              toggleShow={() => setShowConfirmPassword((v) => !v)}
+  show={showConfirmPassword}
-              placeholder="Re-enter new password"
+  toggleShow={() => setShowConfirmPassword((v) => !v)}
-            />
+  placeholder="Re-enter new password"
+/>
+            {newPassword && (
+              <ul className="text-xs text-gray-600 list-disc pl-5 space-y-1">
+                <li className={/.{8,}/.test(newPassword) ? "text-green-600" : ""}>
+                  At least 8 characters
+                </li>
+                <li className={/[A-Z]/.test(newPassword) ? "text-green-600" : ""}>
+                  At least one uppercase letter
+                </li>
+                <li className={/[a-z]/.test(newPassword) ? "text-green-600" : ""}>
+                  At least one lowercase letter
+                </li>
+                <li className={/[0-9]/.test(newPassword) ? "text-green-600" : ""}>
+                  At least one number
+                </li>
+                <li className={/[!@#$%^&*(),.?":{}|<>]/.test(newPassword) ? "text-green-600" : ""}>
+                  At least one special character
+                </li>
+              </ul>
+            )}
 
             <button
               type="submit"