feat: add back navigation buttons to detail, edit, and add screens

Improves UX by providing consistent back navigation across all pages.

Author: kasvith

src/renderer/src/routes/doctors/add-doctor.tsx

@@ -5,7 +5,7 @@ import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { useKeyboardEvent } from '@renderer/hooks/useKeyboardEvent'
 import { queries } from '@renderer/lib/queries'
 import { useQueryClient } from '@tanstack/react-query'
-import { Save, UserPlus, UserCog, Briefcase, Award, Lightbulb } from 'lucide-react'
+import { ArrowLeft, Save, UserPlus, UserCog, Briefcase, Award, Lightbulb } from 'lucide-react'
 import { useEffect, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { DoctorModel } from 'src/shared/models/DoctorModel'
@@ -37,6 +37,9 @@ export const AddNewDoctor = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6 animate-fade-in-up">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-violet-500/10 flex items-center justify-center">
             <UserPlus className="h-6 w-6 text-violet-500" />
           </div>

src/renderer/src/routes/doctors/edit-doctor.tsx

@@ -6,7 +6,7 @@ import { useKeyboardEvent } from '@renderer/hooks/useKeyboardEvent'
 import { queries } from '@renderer/lib/queries'
 import { cn } from '@renderer/lib/utils'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Save, UserCog, Briefcase, Award, Calendar, Eye } from 'lucide-react'
+import { ArrowLeft, Save, UserCog, Briefcase, Award, Calendar, Eye } from 'lucide-react'
 import { useEffect, useRef } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { DoctorModel } from 'src/shared/models/DoctorModel'
@@ -44,6 +44,9 @@ export const EditDoctor = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6 animate-fade-in-up">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-violet-500/10 flex items-center justify-center">
             <UserCog className="h-6 w-6 text-violet-500" />
           </div>

src/renderer/src/routes/doctors/view-doctor.tsx

@@ -2,6 +2,7 @@ import { Button } from '@renderer/components/ui/button'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { QueryClient, queryOptions, useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import {
+  ArrowLeft,
   EditIcon,
   MoreHorizontal,
   Search,
@@ -419,6 +420,9 @@ export const ViewDoctor = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6 animate-fade-in-up">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-violet-500/10 flex items-center justify-center">
             <UserCog className="h-6 w-6 text-violet-500" />
           </div>

src/renderer/src/routes/patients/add-new-patient.tsx

@@ -3,7 +3,7 @@ import { Button } from '@renderer/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@renderer/components/ui/card'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { useKeyboardEvent } from '@renderer/hooks/useKeyboardEvent'
-import { Save, UserPlus, Hash, Cake, Building2, Lightbulb } from 'lucide-react'
+import { ArrowLeft, Save, UserPlus, Hash, Cake, Building2, Lightbulb } from 'lucide-react'
 import { useEffect, useRef } from 'react'
 import { toast } from '@renderer/components/ui/sonner'
 import { useNavigate } from 'react-router-dom'
@@ -36,6 +36,9 @@ export const AddNewPatient = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6 animate-fade-in-up">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-emerald-500/10 flex items-center justify-center">
             <UserPlus className="h-6 w-6 text-emerald-500" />
           </div>

src/renderer/src/routes/patients/edit-patient.tsx

@@ -7,10 +7,10 @@ import { queries } from '@renderer/lib/queries'
 import { cn } from '@renderer/lib/utils'
 import { queryOptions, useQuery, useQueryClient } from '@tanstack/react-query'
 import { format } from 'date-fns'
-import { Save, UserCog, Hash, Cake, User, Building2, Calendar, Eye } from 'lucide-react'
+import { ArrowLeft, Save, UserCog, Hash, Cake, User, Building2, Calendar, Eye } from 'lucide-react'
 import { useEffect, useRef } from 'react'
 import { toast } from '@renderer/components/ui/sonner'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import { Patient } from 'src/shared/types/db'
 import womenIcon from '../../../../../resources/woman.png?asset'
 import manIcon from '../../../../../resources/man.png?asset'
@@ -22,6 +22,7 @@ export const getPatientByIdQuery = (id: number) =>
 
 export const EditPatient = () => {
   const { id } = useParams()
+  const navigate = useNavigate()
   const ref = useRef<NewPatientFormRef>(null)
   const queryClient = useQueryClient()
   const { setBreadcrumbs } = useBreadcrumbs()
@@ -51,6 +52,9 @@ export const EditPatient = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6 animate-fade-in-up">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-emerald-500/10 flex items-center justify-center">
             <UserCog className="h-6 w-6 text-emerald-500" />
           </div>

src/renderer/src/routes/patients/view-patient.tsx

@@ -2,6 +2,7 @@ import { Button } from '@renderer/components/ui/button'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { QueryClient, queryOptions, useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import {
+  ArrowLeft,
   EditIcon,
   MoreHorizontal,
   PlusSquare,
@@ -558,6 +559,9 @@ export const ViewPatient = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6 animate-fade-in-up">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-emerald-500/10 flex items-center justify-center">
             <User className="h-6 w-6 text-emerald-500" />
           </div>

src/renderer/src/routes/surgeries/add-surgery.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@renderer/components/ui/button'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Save, Stethoscope } from 'lucide-react'
+import { ArrowLeft, Save, Stethoscope } from 'lucide-react'
 import { useEffect, useMemo, useRef } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { getPatientByIdQuery } from '../patients/edit-patient'
@@ -45,6 +45,9 @@ export const AddNewSurgery = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-emerald-500/10 flex items-center justify-center">
             <Stethoscope className="h-6 w-6 text-emerald-500" />
           </div>

src/renderer/src/routes/surgeries/edit-surgery.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@renderer/components/ui/button'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Save, Stethoscope } from 'lucide-react'
+import { ArrowLeft, Save, Stethoscope } from 'lucide-react'
 import { useEffect, useMemo, useRef } from 'react'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import { getPatientByIdQuery } from '../patients/edit-patient'
 import {
   AddOrEditSurgery,
@@ -15,6 +15,7 @@ import { useKeyboardEvent } from '@renderer/hooks/useKeyboardEvent'
 const getSurgeryByIdQuery = (id: number) => queries.surgeries.get(id)
 
 export const EditSurgery = () => {
+  const navigate = useNavigate()
   const queryClient = useQueryClient()
   const formRef = useRef<AddOrEditSurgeryRef>(null)
   const { patientId, surgeryId } = useParams()
@@ -54,6 +55,9 @@ export const EditSurgery = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-emerald-500/10 flex items-center justify-center">
             <Stethoscope className="h-6 w-6 text-emerald-500" />
           </div>

src/renderer/src/routes/surgeries/view-surgery.tsx

@@ -2,6 +2,7 @@ import { Button } from '@renderer/components/ui/button'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
+  ArrowLeft,
   Edit,
   PlusIcon,
   Printer,
@@ -282,6 +283,9 @@ export const ViewSurgery = () => {
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
           <div className="h-12 w-12 rounded-xl bg-emerald-500/10 flex items-center justify-center">
             <Stethoscope className="h-6 w-6 text-emerald-500" />
           </div>