Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/private_html/src/pages/admin/cases/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React, { useState, useEffect, useCallback } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import CaseDetail from '@/components/CaseDetail';

const CaseDetailsPage = () => {
  const { data: session, status } = useSession();
  const router = useRouter();
  const { id } = router.query;
  const [caseData, setCaseData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [retryCount, setRetryCount] = useState(0);

  const fetchCaseDetails = useCallback(async () => {
    if (!id || typeof id !== 'string') {
      setError('Invalid case ID');
      setLoading(false);
      return;
    }

    try {
      setLoading(true);
      setError('');
      
      const response = await fetch(`/api/admin/cases/${id}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) {
        if (response.status === 404) {
          setError('Case not found');
        } else if (response.status === 403) {
          setError('Access denied. You do not have permission to view this case.');
        } else {
          setError(`Failed to fetch case details (${response.status})`);
        }
        return;
      }

      const data = await response.json();
      
      if (!data.case) {
        setError('Invalid case data received');
        return;
      }

      setCaseData(data.case);
    } catch (error) {
      console.error('Error fetching case details:', error);
      setError('Network error. Please check your connection and try again.');
    } finally {
      setLoading(false);
    }
  }, [id]);

  useEffect(() => {
    if (status === 'loading') return;
    
    if (!session) {
      router.push('/auth/login');
      return;
    }
    
    if (!['SUPERADMIN', 'ADMIN'].includes(session.user.role)) {
      router.push('/admin');
      return;
    }
    
    if (id) {
      fetchCaseDetails();
    }
  }, [session, status, router, id, fetchCaseDetails]);

  const handleRetry = () => {
    setRetryCount(prev => prev + 1);
    fetchCaseDetails();
  };

  if (loading) {
    return (
      <LayoutWithSidebar>
        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading case details...</p>
          </div>
        </div>
      </LayoutWithSidebar>
    );
  }

  if (error) {
    return (
      <LayoutWithSidebar>
        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center max-w-md mx-auto">
            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
              <h1 className="text-xl font-bold mb-2">Error Loading Case</h1>
              <p className="text-sm">{error}</p>
            </div>
            
            <div className="space-y-3">
              <button
                onClick={handleRetry}
                disabled={retryCount >= 3}
                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {retryCount >= 3 ? 'Max retries reached' : 'Try Again'}
              </button>
              
              <button
                onClick={() => router.push('/admin/case-management')}
                className="block w-full px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
              >
                Back to Case Management
              </button>
            </div>
            
            {retryCount >= 3 && (
              <p className="text-sm text-gray-500 mt-4">
                If the problem persists, please contact support.
              </p>
            )}
          </div>
        </div>
      </LayoutWithSidebar>
    );
  }

  if (!caseData) {
    return (
      <LayoutWithSidebar>
        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <h1 className="text-4xl font-bold text-gray-900 mb-4">Case Not Found</h1>
            <p className="text-gray-600 mb-8">The requested case could not be found or may have been deleted.</p>
            <button
              onClick={() => router.push('/admin/case-management')}
              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              Back to Case Management
            </button>
          </div>
        </div>
      </LayoutWithSidebar>
    );
  }

  return (
    <LayoutWithSidebar>
      <CaseDetail
        caseData={caseData}
        currentUser={session?.user}
        mode="admin"
        onEdit={() => router.push(`/admin/cases/${caseData.id}/edit`)}
        onManageTeam={() => router.push(`/admin/case-assignments?caseId=${caseData.id}`)}
        onViewApplications={() => router.push(`/admin/registrations?caseId=${caseData.id}`)}
      />
    </LayoutWithSidebar>
  );
};

export default CaseDetailsPage;