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/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import LayoutWithSidebar from './LayoutWithSidebar';
import Loading from './Loading';
import DocumentViewer from './DocumentViewer';

interface RegistrationDetailProps {
  id: string;
}

const RegistrationDetail: React.FC<RegistrationDetailProps> = ({ id }) => {
  const router = useRouter();
  const { data: session, status } = useSession();
  const [loading, setLoading] = React.useState(true);
  const [registration, setRegistration] = React.useState<any>(null);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    const fetchRegistration = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/user/registrations/${id}`);
        if (!response.ok) {
          throw new Error('Failed to fetch registration');
        }
        const data = await response.json();
        setRegistration(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An error occurred');
      } finally {
        setLoading(false);
      }
    };

    if (id) {
      fetchRegistration();
    }
  }, [id]);

  if (status === 'loading' || loading) {
    return (
      <LayoutWithSidebar>
        <Loading />
      </LayoutWithSidebar>
    );
  }

  if (error) {
    return (
      <LayoutWithSidebar>
        <div className="p-8 text-red-600">{error}</div>
      </LayoutWithSidebar>
    );
  }

  if (!registration) {
    return (
      <LayoutWithSidebar>
        <div className="p-8">Registration not found</div>
      </LayoutWithSidebar>
    );
  }

  return (
    <LayoutWithSidebar>
      <div className="max-w-4xl mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-6">Registration Details</h1>
        <div className="bg-white rounded-lg shadow-lg p-6 space-y-6">
          {/* Personal Information */}
          <div>
            <h2 className="text-xl font-semibold mb-4">Personal Information</h2>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="font-medium">Name</p>
                <p>{registration.firstName} {registration.lastName}</p>
              </div>
              <div>
                <p className="font-medium">Email</p>
                <p>{registration.email}</p>
              </div>
              <div>
                <p className="font-medium">Phone</p>
                <p>{registration.phone}</p>
              </div>
              <div>
                <p className="font-medium">Birth Date</p>
                <p>{new Date(registration.birthDate).toLocaleDateString()}</p>
              </div>
            </div>
          </div>

          {/* Address Information */}
          {registration.address && (
            <div>
              <h2 className="text-xl font-semibold mb-4">Address</h2>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="font-medium">Street</p>
                  <p>{registration.address.street}</p>
                </div>
                <div>
                  <p className="font-medium">City</p>
                  <p>{registration.address.city}</p>
                </div>
                <div>
                  <p className="font-medium">State/Province</p>
                  <p>{registration.address.state}</p>
                </div>
                <div>
                  <p className="font-medium">Postal Code</p>
                  <p>{registration.address.postalCode}</p>
                </div>
              </div>
            </div>
          )}

          {/* Detainee Information */}
          {registration.detaineeInfo && (
            <div>
              <h2 className="text-xl font-semibold mb-4">Detainee Information</h2>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="font-medium">Name</p>
                  <p>{registration.detaineeInfo.name}</p>
                </div>
                <div>
                  <p className="font-medium">Facility</p>
                  <p>{registration.detaineeInfo.facility}</p>
                </div>
                <div>
                  <p className="font-medium">Inmate ID</p>
                  <p>{registration.detaineeInfo.inmateId}</p>
                </div>
                <div>
                  <p className="font-medium">Incarceration Date</p>
                  <p>{new Date(registration.detaineeInfo.incarcerationDate).toLocaleDateString()}</p>
                </div>
                {registration.detaineeInfo.expectedReleaseDate && (
                  <div>
                    <p className="font-medium">Expected Release Date</p>
                    <p>{new Date(registration.detaineeInfo.expectedReleaseDate).toLocaleDateString()}</p>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Documents */}
          {registration.documents && registration.documents.length > 0 && (
            <div>
              <h2 className="text-xl font-semibold mb-4">Documents</h2>
              <div className="space-y-6">
                {registration.documents.map((doc: any) => (
                  <DocumentViewer
                    key={doc.id}
                    url={doc.url}
                    type={doc.type}
                    name={doc.name}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </LayoutWithSidebar>
  );
};

export default RegistrationDetail;