improve patient header buttons

src/components/NavigationButtons.tsx

@@ -8,24 +8,29 @@ export function VitalsButton({
   setIsHovered = () => {},
   labelOverwrite,
   visitId,
+  className,
 }: {
   patient: Patient;
   setIsHovered?: Dispatch<SetStateAction<boolean>>;
   labelOverwrite?: string;
   visitId?: string;
+  className?: string;
 }) {
-  console.log(visitId)
   return (
     <Link
-      href={`/records/patient-vitals?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}`}
+      href={`/records/patient-vitals?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}&${visitId && 'specificVisit=true'}`}
       onClick={e => e.stopPropagation()}
       onMouseEnter={e => {
         e.stopPropagation();
         setIsHovered(false);
       }}
       onMouseLeave={() => setIsHovered(true)}
     >
-      <Button text={labelOverwrite ?? 'Vitals'} colour="red" />
+      <Button
+        text={labelOverwrite ?? 'Vitals'}
+        colour="red"
+        className={className}
+      />
     </Link>
   );
 }
@@ -35,24 +40,29 @@ export function ConsultationButton({
   setIsHovered = () => {},
   labelOverwrite,
   visitId,
+  className,
 }: {
   patient: Patient;
   setIsHovered?: Dispatch<SetStateAction<boolean>>;
   labelOverwrite?: string;
   visitId?: string;
+  className?: string;
 }) {
-  console.log(visitId)
   return (
     <Link
-      href={`/records/patient-consultation?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}`}
+      href={`/records/patient-consultation?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}&${visitId && 'specificVisit=true'}`}
       onClick={e => e.stopPropagation()}
       onMouseEnter={e => {
         e.stopPropagation();
         setIsHovered(false);
       }}
       onMouseLeave={() => setIsHovered(true)}
     >
-      <Button text={labelOverwrite ?? 'Consultation'} colour="indigo" />
+      <Button
+        text={labelOverwrite ?? 'Consultation'}
+        colour="indigo"
+        className={className}
+      />
     </Link>
   );
 }

src/components/VisitDropdown.tsx

@@ -46,8 +46,10 @@ export function VisitDropdown({
     searchParams.get('visit') ?? ''
   );
 
+  // automatically select the latest visit unless viewing a specific visit
   useEffect(() => {
-    setVisitId(items[0].value)
+    const viewingSpecificVisit = searchParams.get("specificVisit") === "true"
+    if (!viewingSpecificVisit) setVisitId(items[0].value)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

src/components/records/PatientRecordTable.tsx

@@ -139,7 +139,7 @@ function PatientRecordRow({ patient }: { patient: Patient }) {
             />
             <div className="flex flex-col items-center gap-2 rounded-md border p-2 sm:flex-row">
               <div className="w-[115px]">
-                <p>Last visit:</p>
+                <p>Latest visit:</p>
                 <p>{lastVisitLabel}</p>
               </div>
               <VitalsButton patient={patient} setIsHovered={setIsHovered} />
@@ -171,14 +171,15 @@ function getLastVisitLabel(lastVisitDate: string): string {
   if (!lastVisitDate) {
     return 'Missing last visit date';
   }
+  // lastVisitDate = "2025-12-11T15:30:56.296898Z"
   const lastVisitDateLuxon = DateTime.fromISO(lastVisitDate);
   // Positive duration since last visit
   const timeSinceLastVisit = Duration.fromMillis(
     DateTime.now().diff(lastVisitDateLuxon).toMillis()
   );
   return timeSinceLastVisit < Duration.fromObject({ seconds: 5 })
     ? 'Just now'
-    : timeSinceLastVisit < Duration.fromObject({ minutes: 10 })
+    : timeSinceLastVisit < Duration.fromObject({ hours: 2 })
       ? lastVisitDateLuxon.toRelative() || 'Missing relative time?'
       : formatDate(lastVisitDate, 'datetime');
 }

src/components/records/document/UploadDocument.tsx

@@ -28,12 +28,12 @@ export function UploadDocument({
   const { isLoading, withLoading } = useLoadingState(false);
 
   return (
-    <>
+    <div>
       <Button
         text="Upload Document"
         colour="green"
         onClick={() => setIsOpen(true)}
-        className='w-24 h-16'
+        className="w-44 sm:w-28"
       />
       <Modal
         isOpen={isOpen}
@@ -127,6 +127,6 @@ export function UploadDocument({
           </form>
         </FormProvider>
       </Modal>
-    </>
+    </div>
   );
 }

src/components/records/document/ViewDocument.tsx

@@ -109,12 +109,12 @@ export function ViewDocument({
   };
 
   return (
-    <>
+    <div>
       <Button
         text="View Documents"
         onClick={() => setIsOpen(true)}
         colour="blue"
-        className='w-24 h-16'
+        className='w-44 sm:w-28'
       />
       <Modal
         isOpen={isOpen}
@@ -155,6 +155,6 @@ export function ViewDocument({
           </table>
         )}
       </Modal>
-    </>
+    </div>
   );
 }

src/components/records/patient/EditPatient.tsx

@@ -24,12 +24,12 @@ export function EditPatient({ patient }: { patient: Patient }) {
   });
   const router = useRouter();
   return (
-    <>
+    <div>
       <Button
         text="Edit Patient Details"
         colour="orange"
         onClick={() => setIsOpen(true)}
-        className='w-28 h-16'
+        className='w-44 sm:w-28'
       />
       <Modal
         isOpen={isOpen}
@@ -84,6 +84,6 @@ export function EditPatient({ patient }: { patient: Patient }) {
           />
         </FormProvider>
       </Modal>
-    </>
+    </div>
   );
 }

src/components/records/patient/PatientForm.tsx

@@ -154,6 +154,8 @@ export function PatientForm({
               />
             </div>
             <ChildPubertySection
+              // curVital passed in here doesn't really matter in the current state of the codebase as they are just used to set the default values;
+              // the only place where this is used is the registration modal, but curVitals are passed straight into the useForm values
               curVital={EMPTY_VITAL}
               pubertyFields={allPubertyFields.filter(
                 field =>

src/components/records/patient/PatientInfoHeaderSection.tsx

@@ -63,7 +63,7 @@ export function PatientInfoHeaderSection({
           </span>
           <span>, {patient.name}</span>
         </h1>
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-2 justify-center">
         {/* <div className="flex flex-col gap-2 sm:grid sm:grid-cols-3"> */}
           <UploadDocument patient={patient} onUploadSuccess={fetchDocuments} />
           <ViewDocument
@@ -78,13 +78,15 @@ export function PatientInfoHeaderSection({
               patient={patient}
               labelOverwrite="Go to vitals"
               visitId={visitId}
+              className='w-44 sm:w-28 sm:h-14'
             />
           )}
           {showConsultationButton && (
             <ConsultationButton
               patient={patient}
               labelOverwrite="Go to consultation"
               visitId={visitId}
+              className='w-44 sm:w-28'
             />
           )}
         </div>