feat: redesign view surgery page and update sheet components

- Redesign view surgery with card-based layout matching other pages
- Add emerald-themed header with clickable patient link
- Organize surgery details, team, notes into visual cards
- Update follow-up sheet with cyan-themed header and wider width
- Update add doctor sheet with blue-themed header
- Add gradient buttons and better visual hierarchy to all sheets

Author: kasvith

src/renderer/src/components/doctor/DoctorAutoComplete.tsx

@@ -5,14 +5,13 @@ import { queryOptions, useQueries, useQuery } from '@tanstack/react-query'
 import { queries } from '../../lib/queries'
 import { useCallback, useRef, useState } from 'react'
 import { Badge } from '../ui/badge'
-import { X } from 'lucide-react'
+import { X, UserPlus, Save } from 'lucide-react'
 import {
   Sheet,
-  SheetClose,
   SheetContent,
-  SheetDescription,
   SheetFooter,
-  SheetHeader
+  SheetHeader,
+  SheetTitle
 } from '../ui/sheet'
 import { Button } from '../ui/button'
 import { AddOrEditDoctor, AddOrEditDoctorRef } from './AddOrEditDoctor'
@@ -53,7 +52,7 @@ const SelectedDoctorChips = ({
 
   return (
     <div className="flex flex-wrap">
-      {results.map((result, _i) => {
+      {results.map((result) => {
         const doctor = result.data
         if (!doctor) return null
         return (
@@ -127,25 +126,36 @@ export const DoctorAutoComplete = ({ onSelected, selectedDoctorIds }: DoctorAuto
           <SelectedDoctorChips selectedDoctorIds={selected} onDelete={handleDelete} />
         </div>
       </div>
-      <Sheet open={addNewSheetOpen} onOpenChange={() => setAddNewSheetOpen(false)}>
-        <SheetContent>
-          <SheetHeader>Add New Doctor</SheetHeader>
-          <SheetDescription> Add a new doctor to the system</SheetDescription>
+      <Sheet open={addNewSheetOpen} onOpenChange={setAddNewSheetOpen}>
+        <SheetContent className="sm:max-w-none w-[480px] flex flex-col">
+          <SheetHeader className="pb-4 border-b">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-xl bg-blue-500/10 flex items-center justify-center">
+                <UserPlus className="h-5 w-5 text-blue-500" />
+              </div>
+              <div>
+                <SheetTitle className="text-lg">Add New Doctor</SheetTitle>
+                <p className="text-sm text-muted-foreground mt-0.5">
+                  Add a new doctor to the system
+                </p>
+              </div>
+            </div>
+          </SheetHeader>
 
-          <div className="my-2">
+          <div className="flex-1 py-4">
             <AddOrEditDoctor ref={addDoctorFormRef} onUpdated={handleNewDoctor} />
           </div>
 
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button
-                onClick={() => {
-                  addDoctorFormRef.current?.submit()
-                }}
-              >
-                Save
-              </Button>
-            </SheetClose>
+          <SheetFooter className="pt-4 border-t">
+            <Button
+              variant="gradient"
+              onClick={() => {
+                addDoctorFormRef.current?.submit()
+              }}
+            >
+              <Save className="h-4 w-4 mr-2" />
+              Save Doctor
+            </Button>
           </SheetFooter>
         </SheetContent>
       </Sheet>

src/renderer/src/components/surgery/AddOrEditFollowup.tsx

@@ -2,7 +2,6 @@ import { Followup } from 'src/shared/types/db'
 import {
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -18,6 +17,7 @@ import { unwrapResult } from '@renderer/lib/utils'
 import toast from 'react-hot-toast'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { queries } from '@renderer/lib/queries'
+import { ChevronRight, Save } from 'lucide-react'
 
 export interface AddOrEditFollowupProps {
   surgeryId?: number
@@ -27,13 +27,13 @@ export interface AddOrEditFollowupProps {
   trigger?: React.ReactNode
 }
 
-const followupSchema = z.object({
+const _followupSchema = z.object({
   notes: z.string().min(1, {
     message: 'Note is required'
   })
 })
 
-type FollowupSchema = z.infer<typeof followupSchema>
+type FollowupSchema = z.infer<typeof _followupSchema>
 
 export const AddOrEditFollowup = ({
   trigger,
@@ -111,7 +111,7 @@ export const AddOrEditFollowup = ({
       } else {
         await createNewFollowup(values)
       }
-    } catch (error) {
+    } catch {
       toast.error('Failed to save followup')
     }
   }
@@ -121,23 +121,32 @@ export const AddOrEditFollowup = ({
   return (
     <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
       <SheetTrigger asChild>{trigger}</SheetTrigger>
-      <SheetContent className="sm:max-w-none w-[600px]">
+      <SheetContent className="sm:max-w-none w-[720px] flex flex-col">
         <Form {...form}>
-          <SheetHeader>
-            <SheetTitle>{!isUpdate ? <>Add Followup</> : <>Edit Followup</>}</SheetTitle>
-            <SheetDescription>
-              {!isUpdate ? (
-                <>Add a new followup for this surgery</>
-              ) : (
-                <>Edit the followup for this surgery</>
-              )}
-            </SheetDescription>
+          <SheetHeader className="pb-4 border-b">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-xl bg-cyan-500/10 flex items-center justify-center">
+                <ChevronRight className="h-5 w-5 text-cyan-500" />
+              </div>
+              <div>
+                <SheetTitle className="text-lg">
+                  {!isUpdate ? 'Add Follow-up' : 'Edit Follow-up'}
+                </SheetTitle>
+                <p className="text-sm text-muted-foreground mt-0.5">
+                  {!isUpdate
+                    ? 'Record a new follow-up note for this surgery'
+                    : 'Update the follow-up details'}
+                </p>
+              </div>
+            </div>
+          </SheetHeader>
 
+          <div className="flex-1 py-4 overflow-hidden">
             <FormField
               name="notes"
               control={form.control}
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="h-full">
                   <FormControl>
                     <RichTextEditor
                       initialContent={field.value || undefined}
@@ -148,14 +157,17 @@ export const AddOrEditFollowup = ({
                 </FormItem>
               )}
             />
-          </SheetHeader>
-          <SheetFooter>
+          </div>
+
+          <SheetFooter className="pt-4 border-t">
             <Button
               type="submit"
+              variant="gradient"
               onClick={submitForm}
               isLoading={createNewFollowupMutation.isPending || updateFollowupMutation.isPending}
             >
-              Save changes
+              <Save className="h-4 w-4 mr-2" />
+              {isUpdate ? 'Save Changes' : 'Add Follow-up'}
             </Button>
           </SheetFooter>
         </Form>