changes.patch

diff --git a/src/App.jsx b/src/App.jsx
index 897e3bf..fbbd23a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -89,7 +89,7 @@ function App() {
       case 'reports':
         return <Reports />
       case 'administration':
-        return <Administration />
+        return <Administration userRole={user?.role} />
       default:
         return <Dashboard />
     }
diff --git a/src/components/AddStaffModal.jsx b/src/components/AddStaffModal.jsx
index 835d2fb..cb0973b 100644
--- a/src/components/AddStaffModal.jsx
+++ b/src/components/AddStaffModal.jsx
@@ -146,8 +146,10 @@ function AddStaffModal({ onClose, onSuccess }) {
                   <option value="Doctor">Doctor</option>
                   <option value="Nurse">Nurse</option>
                   <option value="Receptionist">Receptionist</option>
-                  <option value="Manager">Manager</option>
                 </select>
+                <p className="text-xs text-gray-500 mt-1">
+                  Note: Branch managers can only be created by administrators
+                </p>
               </div>
               <div>
                 <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
diff --git a/src/components/Administration.jsx b/src/components/Administration.jsx
index bf42d5c..8ada1a0 100644
--- a/src/components/Administration.jsx
+++ b/src/components/Administration.jsx
@@ -2,21 +2,28 @@ import { useState, useEffect } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
 import AddBranchModal from './AddBranchModal'
 import AddStaffModal from './AddStaffModal'
+import AddBranchManagerModal from './AddBranchManagerModal'
 
-function Administration() {
-  const [activeTab, setActiveTab] = useState('branches-tab')
+function Administration({ userRole = 'manager' }) {
+  // Set initial tab based on role - admin sees branches first, managers see staff first
+  const initialTab = userRole === 'admin' ? 'branches-tab' : 'staff-tab'
+  const [activeTab, setActiveTab] = useState(initialTab)
   const [branches, setBranches] = useState([])
   const [staff, setStaff] = useState([])
+  const [managers, setManagers] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [isAddBranchModalOpen, setIsAddBranchModalOpen] = useState(false)
   const [isAddStaffModalOpen, setIsAddStaffModalOpen] = useState(false)
+  const [isAddManagerModalOpen, setIsAddManagerModalOpen] = useState(false)
 
   useEffect(() => {
     if (activeTab === 'branches-tab') {
       fetchBranches()
     } else if (activeTab === 'staff-tab') {
       fetchStaff()
+    } else if (activeTab === 'managers-tab') {
+      fetchManagers()
     }
   }, [activeTab])
 
@@ -48,6 +55,20 @@ function Administration() {
     }
   }
 
+  const fetchManagers = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await api.get(`${API_ENDPOINTS.STAFF}?role=manager`)
+      setManagers(data)
+    } catch (err) {
+      setError(err.message)
+      console.error('Error fetching managers:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const getStatusBadge = (status) => {
     return (
       <span className="inline-block px-2 py-1 text-[10px] font-semibold uppercase tracking-wider border border-black bg-black text-white">
@@ -62,16 +83,30 @@ function Administration() {
 
       {/* Admin Tabs */}
       <div className="flex border-b border-black mb-6">
-        <div
-          className={`px-6 py-3 cursor-pointer text-xs font-semibold uppercase tracking-wider border-b-[3px] -mb-px transition-all ${
-            activeTab === 'branches-tab'
-              ? 'border-b-black'
-              : 'border-b-transparent hover:bg-gray-bg'
-          }`}
-          onClick={() => setActiveTab('branches-tab')}
-        >
-          Branches
-        </div>
+        {userRole === 'admin' && (
+          <div
+            className={`px-6 py-3 cursor-pointer text-xs font-semibold uppercase tracking-wider border-b-[3px] -mb-px transition-all ${
+              activeTab === 'branches-tab'
+                ? 'border-b-black'
+                : 'border-b-transparent hover:bg-gray-bg'
+            }`}
+            onClick={() => setActiveTab('branches-tab')}
+          >
+            Branches
+          </div>
+        )}
+        {userRole === 'admin' && (
+          <div
+            className={`px-6 py-3 cursor-pointer text-xs font-semibold uppercase tracking-wider border-b-[3px] -mb-px transition-all ${
+              activeTab === 'managers-tab'
+                ? 'border-b-black'
+                : 'border-b-transparent hover:bg-gray-bg'
+            }`}
+            onClick={() => setActiveTab('managers-tab')}
+          >
+            Branch Managers
+          </div>
+        )}
         <div
           className={`px-6 py-3 cursor-pointer text-xs font-semibold uppercase tracking-wider border-b-[3px] -mb-px transition-all ${
             activeTab === 'staff-tab'
@@ -246,6 +281,84 @@ function Administration() {
         </div>
       )}
 
+      {/* Branch Managers Tab (Admin Only) */}
+      {activeTab === 'managers-tab' && userRole === 'admin' && (
+        <div className="border border-black">
+          <div className="px-4 py-4 border-b border-black flex justify-between items-center bg-gray-bg">
+            <h3 className="text-sm font-semibold uppercase tracking-wider">Branch Manager Management</h3>
+            <button 
+              onClick={() => setIsAddManagerModalOpen(true)}
+              className="px-4 py-2 border-2 border-crimson text-crimson text-[10px] font-semibold uppercase tracking-wider hover:bg-crimson hover:text-white transition-all"
+            >
+              Add Branch Manager
+            </button>
+          </div>
+
+          <table className="w-full border-collapse">
+            <thead>
+              <tr>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Manager ID</th>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Name</th>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Branch</th>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Phone</th>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Email</th>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Status</th>
+                <th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td colSpan="7" className="px-4 py-8 text-center text-gray-mid">
+                    Loading branch managers...
+                  </td>
+                </tr>
+              ) : error ? (
+                <tr>
+                  <td colSpan="7" className="px-4 py-4 text-center text-crimson">
+                    {error}
+                  </td>
+                </tr>
+              ) : managers.length === 0 ? (
+                <tr>
+                  <td colSpan="7" className="px-4 py-8 text-center text-gray-mid">
+                    No branch managers found
+                  </td>
+                </tr>
+              ) : (
+                managers.map((manager, index) => (
+                  <tr key={manager.id} className="hover:bg-gray-bg transition-colors">
+                    <td className={`px-4 py-4 text-[13px] ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      MGR-{manager.id.toString().padStart(3, '0')}
+                    </td>
+                    <td className={`px-4 py-4 text-[13px] ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      {manager.first_name} {manager.last_name}
+                    </td>
+                    <td className={`px-4 py-4 text-[13px] ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      {manager.branch_name || '-'}
+                    </td>
+                    <td className={`px-4 py-4 text-[13px] ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      {manager.phone || '-'}
+                    </td>
+                    <td className={`px-4 py-4 text-[13px] ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      {manager.email || '-'}
+                    </td>
+                    <td className={`px-4 py-4 ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      {getStatusBadge(manager.is_active ? 'active' : 'inactive')}
+                    </td>
+                    <td className={`px-4 py-4 ${index !== managers.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                      <button className="px-4 py-2 border-2 border-black bg-white text-black text-[10px] font-semibold uppercase tracking-wider hover:bg-black hover:text-white transition-all">
+                        Edit
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+
       {/* Modals */}
       {isAddBranchModalOpen && (
         <AddBranchModal
@@ -261,6 +374,13 @@ function Administration() {
         />
       )}
 
+      {isAddManagerModalOpen && (
+        <AddBranchManagerModal
+          onClose={() => setIsAddManagerModalOpen(false)}
+          onSuccess={fetchManagers}
+        />
+      )}
+
       {/* Settings Tab */}
       {activeTab === 'settings-tab' && (
         <div className="max-w-[600px]">
diff --git a/src/components/AppointmentDetailModal.jsx b/src/components/AppointmentDetailModal.jsx
index 843517a..9425cae 100644
--- a/src/components/AppointmentDetailModal.jsx
+++ b/src/components/AppointmentDetailModal.jsx
@@ -1,15 +1,26 @@
 import { useState, useEffect } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
+import CancelAppointmentModal from './CancelAppointmentModal'
+import NoShowModal from './NoShowModal'
+import TreatmentRecordModal from './TreatmentRecordModal'
+import CompleteAppointmentModal from './CompleteAppointmentModal'
 
 function AppointmentDetailModal({ appointmentId, onClose, onSuccess }) {
   const [appointment, setAppointment] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [updating, setUpdating] = useState(false)
+  const [treatmentRecords, setTreatmentRecords] = useState([])
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false)
+  const [isNoShowModalOpen, setIsNoShowModalOpen] = useState(false)
+  const [isTreatmentModalOpen, setIsTreatmentModalOpen] = useState(false)
+  const [isCompleteModalOpen, setIsCompleteModalOpen] = useState(false)
+  const [invoice, setInvoice] = useState(null)
 
   useEffect(() => {
     if (appointmentId) {
       fetchAppointmentDetails()
+      fetchTreatmentRecords()
     }
   }, [appointmentId])
 
@@ -17,6 +28,11 @@ function AppointmentDetailModal({ appointmentId, onClose, onSuccess }) {
     try {
       const data = await api.get(API_ENDPOINTS.APPOINTMENT_BY_ID(appointmentId))
       setAppointment(data)
+      
+      // Fetch invoice if appointment is completed
+      if (data.status === 'Completed') {
+        fetchInvoice()
+      }
     } catch (err) {
       setError(err.message)
       console.error('Error fetching appointment details:', err)
@@ -25,6 +41,26 @@ function AppointmentDetailModal({ appointmentId, onClose, onSuccess }) {
     }
   }
 
+  const fetchTreatmentRecords = async () => {
+    try {
+      const data = await api.get(API_ENDPOINTS.APPOINTMENT_TREATMENTS(appointmentId))
+      setTreatmentRecords(data)
+    } catch (err) {
+      console.error('Error fetching treatment records:', err)
+    }
+  }
+
+  const fetchInvoice = async () => {
+    try {
+      const invoices = await api.get(`${API_ENDPOINTS.INVOICES}?appointment_id=${appointmentId}`)
+      if (invoices && invoices.length > 0) {
+        setInvoice(invoices[0])
+      }
+    } catch (err) {
+      console.error('Error fetching invoice:', err)
+    }
+  }
+
   const handleStatusChange = async (newStatus) => {
     setUpdating(true)
     setError(null)
@@ -45,6 +81,86 @@ function AppointmentDetailModal({ appointmentId, onClose, onSuccess }) {
     }
   }
 
+  const handleCancelAppointment = async (cancellationReason) => {
+    setUpdating(true)
+    try {
+      await api.put(API_ENDPOINTS.APPOINTMENT_CANCEL(appointmentId), {
+        cancellation_reason: cancellationReason
+      })
+      await fetchAppointmentDetails()
+      if (onSuccess) onSuccess()
+      setIsCancelModalOpen(false)
+    } catch (err) {
+      setError(err.message)
+      console.error('Error cancelling appointment:', err)
+      throw err
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  const handleMarkNoShow = async (notes) => {
+    setUpdating(true)
+    try {
+      await api.put(API_ENDPOINTS.APPOINTMENT_NO_SHOW(appointmentId), {
+        notes: notes
+      })
+      await fetchAppointmentDetails()
+      if (onSuccess) onSuccess()
+      setIsNoShowModalOpen(false)
+    } catch (err) {
+      setError(err.message)
+      console.error('Error marking no-show:', err)
+      throw err
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  const handleTreatmentSuccess = () => {
+    fetchTreatmentRecords()
+    setIsTreatmentModalOpen(false)
+  }
+
+  const handleCompleteAppointment = async () => {
+    setUpdating(true)
+    try {
+      const response = await api.post(API_ENDPOINTS.APPOINTMENT_COMPLETE(appointmentId))
+      await fetchAppointmentDetails()
+      await fetchTreatmentRecords()
+      setInvoice(response.invoice)
+      if (onSuccess) onSuccess()
+      setIsCompleteModalOpen(false)
+    } catch (err) {
+      setError(err.message)
+      console.error('Error completing appointment:', err)
+      throw err
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  const handleDeleteTreatment = async (treatmentRecordId) => {
+    if (!window.confirm('Are you sure you want to remove this treatment?')) {
+      return
+    }
+
+    try {
+      await api.delete(API_ENDPOINTS.APPOINTMENT_TREATMENT_RECORD(appointmentId, treatmentRecordId))
+      fetchTreatmentRecords()
+    } catch (err) {
+      setError(err.message)
+      console.error('Error deleting treatment:', err)
+    }
+  }
+
+  const handleViewInvoice = () => {
+    if (invoice) {
+      // Open invoice modal or navigate to invoice
+      window.open(`#/invoices/${invoice.id}`, '_blank')
+    }
+  }
+
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose()
@@ -232,40 +348,203 @@ function AppointmentDetailModal({ appointmentId, onClose, onSuccess }) {
             </div>
           )}
 
+          {/* Treatment Records Section */}
+          {appointment.status === 'In Progress' && (
+            <div className="mb-6">
+              <div className="flex justify-between items-center mb-4 border-b border-gray-light pb-2">
+                <h3 className="text-sm font-semibold uppercase tracking-wider">
+                  Recorded Treatments
+                </h3>
+                <button
+                  onClick={() => setIsTreatmentModalOpen(true)}
+                  disabled={updating}
+                  className="px-4 py-2 border-2 border-purple text-purple text-[10px] font-semibold uppercase tracking-wider hover:bg-purple hover:text-white transition-all disabled:opacity-50"
+                >
+                  Record Treatments
+                </button>
+              </div>
+
+              {treatmentRecords.length === 0 ? (
+                <div className="p-4 border border-gray-light bg-gray-bg text-center">
+                  <p className="text-sm text-gray-mid">No treatments recorded yet</p>
+                  <p className="text-xs text-gray-mid mt-1">Click "Record Treatments" to add treatments</p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {treatmentRecords.map(record => (
+                    <div key={record.id} className="p-3 border border-gray-light bg-gray-bg">
+                      <div className="flex justify-between items-start">
+                        <div className="flex-1">
+                          <p className="text-sm font-semibold">{record.treatment_name}</p>
+                          <p className="text-xs text-gray-mid">{record.category_name}</p>
+                          {record.consultation_notes && (
+                            <p className="text-xs text-gray-mid mt-1 italic">
+                              Note: {record.consultation_notes}
+                            </p>
+                          )}
+                        </div>
+                        <div className="text-right ml-3">
+                          <p className="text-xs text-gray-mid">
+                            {record.quantity} × LKR {parseFloat(record.unit_price).toFixed(2)}
+                          </p>
+                          <p className="text-sm font-semibold">
+                            LKR {parseFloat(record.total_price).toFixed(2)}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="mt-2 pt-2 border-t border-gray-light">
+                        <button
+                          onClick={() => handleDeleteTreatment(record.id)}
+                          className="text-xs text-crimson hover:underline font-semibold"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+
+                  {/* Running Total */}
+                  <div className="p-3 border-2 border-black bg-black text-white">
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs font-semibold uppercase tracking-wider">Total</span>
+                      <span className="text-lg font-bold">
+                        LKR {treatmentRecords.reduce((sum, r) => sum + parseFloat(r.total_price), 0).toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Complete Consultation Button */}
+                  <button
+                    onClick={() => setIsCompleteModalOpen(true)}
+                    disabled={updating}
+                    className="w-full px-6 py-3 border-2 border-black bg-black text-white text-xs font-semibold uppercase tracking-wider hover:bg-white hover:text-black transition-all disabled:opacity-50"
+                  >
+                    Complete Consultation
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Completed Appointment - Show Invoice Info */}
+          {appointment.status === 'Completed' && (
+            <div className="mb-6">
+              <h3 className="text-sm font-semibold uppercase tracking-wider mb-4 border-b border-gray-light pb-2">
+                Invoice Information
+              </h3>
+              
+              {invoice ? (
+                <div className="space-y-4">
+                  <div className="p-4 border border-black bg-gray-bg">
+                    <div className="grid grid-cols-2 gap-4 mb-3">
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Invoice Number
+                        </label>
+                        <p className="text-sm font-semibold">{invoice.invoice_number}</p>
+                      </div>
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Total Amount
+                        </label>
+                        <p className="text-sm font-semibold">LKR {parseFloat(invoice.total_amount).toFixed(2)}</p>
+                      </div>
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Status
+                        </label>
+                        <span className="inline-block px-2 py-1 text-[10px] font-semibold uppercase tracking-wider border border-gray-mid text-gray-mid">
+                          {invoice.status}
+                        </span>
+                      </div>
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Created
+                        </label>
+                        <p className="text-sm">{new Date(invoice.created_at).toLocaleDateString()}</p>
+                      </div>
+                    </div>
+                    <button
+                      onClick={handleViewInvoice}
+                      className="w-full px-4 py-2 border-2 border-purple text-purple text-[10px] font-semibold uppercase tracking-wider hover:bg-purple hover:text-white transition-all"
+                    >
+                      View Invoice
+                    </button>
+                  </div>
+
+                  {/* Treatment Summary (Read-only) */}
+                  {treatmentRecords.length > 0 && (
+                    <div>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider mb-3">Treatment Summary</h4>
+                      <div className="space-y-2">
+                        {treatmentRecords.map(record => (
+                          <div key={record.id} className="p-2 border border-gray-light bg-white text-xs">
+                            <div className="flex justify-between">
+                              <span>{record.treatment_name}</span>
+                              <span className="font-semibold">
+                                {record.quantity} × LKR {parseFloat(record.unit_price).toFixed(2)}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <p className="text-sm text-gray-mid">Loading invoice information...</p>
+              )}
+            </div>
+          )}
+
           {/* Status Actions */}
-          {appointment.status !== 'Completed' && appointment.status !== 'Cancelled' && (
+          {appointment.status !== 'Completed' && appointment.status !== 'Cancelled' && appointment.status !== 'No Show' && (
             <div className="mb-6 p-4 border border-gray-light bg-gray-bg">
               <h3 className="text-xs font-semibold uppercase tracking-wider mb-3">
                 Update Status
               </h3>
-              <div className="flex gap-2">
+              <div className="flex gap-2 flex-wrap">
                 {appointment.status === 'Scheduled' && (
-                  <button
-                    onClick={() => handleStatusChange('Confirmed')}
-                    disabled={updating}
-                    className="px-4 py-2 border-2 border-blue-500 text-blue-500 text-[10px] font-semibold uppercase tracking-wider hover:bg-blue-500 hover:text-white transition-all disabled:opacity-50"
-                  >
-                    Confirm
-                  </button>
+                  <>
+                    <button
+                      onClick={() => handleStatusChange('Confirmed')}
+                      disabled={updating}
+                      className="px-4 py-2 border-2 border-blue-500 text-blue-500 text-[10px] font-semibold uppercase tracking-wider hover:bg-blue-500 hover:text-white transition-all disabled:opacity-50"
+                    >
+                      Confirm
+                    </button>
+                    <button
+                      onClick={() => handleStatusChange('In Progress')}
+                      disabled={updating}
+                      className="px-4 py-2 border-2 border-purple text-purple text-[10px] font-semibold uppercase tracking-wider hover:bg-purple hover:text-white transition-all disabled:opacity-50"
+                    >
+                      Start Consultation
+                    </button>
+                  </>
                 )}
-                {(appointment.status === 'Confirmed' || appointment.status === 'In Progress') && (
+                {appointment.status === 'Confirmed' && (
                   <button
-                    onClick={() => handleStatusChange('Completed')}
+                    onClick={() => handleStatusChange('In Progress')}
                     disabled={updating}
-                    className="px-4 py-2 border-2 border-black bg-black text-white text-[10px] font-semibold uppercase tracking-wider hover:bg-white hover:text-black transition-all disabled:opacity-50"
+                    className="px-4 py-2 border-2 border-purple text-purple text-[10px] font-semibold uppercase tracking-wider hover:bg-purple hover:text-white transition-all disabled:opacity-50"
                   >
-                    Mark Complete
-                  </button>
-                )}
-                {appointment.status !== 'In Progress' && (
-                  <button
-                    onClick={() => handleStatusChange('Cancelled')}
-                    disabled={updating}
-                    className="px-4 py-2 border-2 border-crimson text-crimson text-[10px] font-semibold uppercase tracking-wider hover:bg-crimson hover:text-white transition-all disabled:opacity-50"
-                  >
-                    Cancel
+                    Start Consultation
                   </button>
                 )}
+                <button
+                  onClick={() => setIsCancelModalOpen(true)}
+                  disabled={updating}
+                  className="px-4 py-2 border-2 border-crimson text-crimson text-[10px] font-semibold uppercase tracking-wider hover:bg-crimson hover:text-white transition-all disabled:opacity-50"
+                >
+                  Cancel Appointment
+                </button>
+                <button
+                  onClick={() => setIsNoShowModalOpen(true)}
+                  disabled={updating}
+                  className="px-4 py-2 border-2 border-gray-400 text-gray-400 text-[10px] font-semibold uppercase tracking-wider hover:bg-gray-400 hover:text-white transition-all disabled:opacity-50"
+                >
+                  Mark No Show
+                </button>
               </div>
             </div>
           )}
@@ -282,6 +561,45 @@ function AppointmentDetailModal({ appointmentId, onClose, onSuccess }) {
           </button>
         </div>
       </div>
+
+      {/* Cancel Appointment Modal */}
+      {isCancelModalOpen && (
+        <CancelAppointmentModal
+          onClose={() => setIsCancelModalOpen(false)}
+          onConfirm={handleCancelAppointment}
+        />
+      )}
+
+      {/* No Show Modal */}
+      {isNoShowModalOpen && (
+        <NoShowModal
+          onClose={() => setIsNoShowModalOpen(false)}
+          onConfirm={handleMarkNoShow}
+        />
+      )}
+
+      {/* Treatment Record Modal */}
+      {isTreatmentModalOpen && (
+        <TreatmentRecordModal
+          appointmentId={appointmentId}
+          onClose={() => setIsTreatmentModalOpen(false)}
+          onSuccess={handleTreatmentSuccess}
+        />
+      )}
+
+      {/* Complete Appointment Modal */}
+      {isCompleteModalOpen && (
+        <CompleteAppointmentModal
+          appointmentId={appointmentId}
+          treatmentRecords={treatmentRecords}
+          onClose={() => setIsCompleteModalOpen(false)}
+          onConfirm={handleCompleteAppointment}
+          onBack={() => {
+            setIsCompleteModalOpen(false)
+            setIsTreatmentModalOpen(true)
+          }}
+        />
+      )}
     </div>
   )
 }
diff --git a/src/components/Billing.jsx b/src/components/Billing.jsx
index b168cfe..50cbbd8 100644
--- a/src/components/Billing.jsx
+++ b/src/components/Billing.jsx
@@ -20,12 +20,32 @@ function Billing() {
   // Filters
   const [statusFilter, setStatusFilter] = useState('')
   const [patientFilter, setPatientFilter] = useState('')
+  const [markingOverdue, setMarkingOverdue] = useState(false)
 
   useEffect(() => {
     fetchBillingStats()
     fetchInvoices()
   }, [statusFilter, patientFilter])
 
+  const handleMarkOverdue = async () => {
+    if (!window.confirm('Mark all eligible invoices (Sent > 30 days) as Overdue?')) {
+      return
+    }
+
+    setMarkingOverdue(true)
+    try {
+      const response = await api.post(API_ENDPOINTS.INVOICE_MARK_OVERDUE)
+      alert(response.message || 'Invoices marked as overdue')
+      fetchInvoices()
+      fetchBillingStats()
+    } catch (err) {
+      setError(err.message)
+      console.error('Error marking overdue:', err)
+    } finally {
+      setMarkingOverdue(false)
+    }
+  }
+
   const fetchBillingStats = async () => {
     try {
       const data = await api.get(API_ENDPOINTS.DASHBOARD_STATS)
@@ -125,6 +145,34 @@ function Billing() {
           </div>
         </div>
 
+        {/* Filters */}
+        <div className="flex gap-4 mb-6 p-4 bg-gray-bg border border-gray-light">
+          <div className="flex-1">
+            <label className="block text-[10px] uppercase mb-1 font-semibold">Status Filter</label>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="w-full px-2 py-2 border border-black text-xs focus:outline-2 focus:outline-black focus:outline-offset-2"
+            >
+              <option value="">All Statuses</option>
+              <option value="Draft">Draft</option>
+              <option value="Sent">Sent</option>
+              <option value="Paid">Paid</option>
+              <option value="Overdue">Overdue</option>
+              <option value="Cancelled">Cancelled</option>
+            </select>
+          </div>
+          <div className="flex items-end">
+            <button
+              onClick={handleMarkOverdue}
+              disabled={markingOverdue}
+              className="px-4 py-2 border-2 border-crimson text-crimson text-[10px] font-semibold uppercase tracking-wider hover:bg-crimson hover:text-white transition-all disabled:opacity-50"
+            >
+              {markingOverdue ? 'Processing...' : 'Mark Overdue'}
+            </button>
+          </div>
+        </div>
+
         {/* Recent Invoices */}
         <div className="border border-black mb-6">
           <div className="px-4 py-4 border-b border-black flex justify-between items-center bg-gray-bg">
@@ -172,10 +220,11 @@ function Billing() {
                 invoices.map((invoice, index) => {
                   const totalPaid = invoice.payments?.reduce((sum, p) => sum + parseFloat(p.amount), 0) || 0
                   const outstanding = parseFloat(invoice.total_amount) - totalPaid
+                  const isOverdue = invoice.status === 'Overdue'
 
                   return (
-                    <tr key={invoice.id} className="hover:bg-gray-bg transition-colors">
-                      <td className={`px-4 py-4 text-[13px] ${index !== invoices.length - 1 ? 'border-b border-gray-light' : ''}`}>
+                    <tr key={invoice.id} className={`hover:bg-gray-bg transition-colors ${isOverdue ? 'bg-crimson/5' : ''}`}>
+                      <td className={`px-4 py-4 text-[13px] ${isOverdue ? 'font-semibold' : ''} ${index !== invoices.length - 1 ? 'border-b border-gray-light' : ''}`}>
                         {invoice.invoice_number}
                       </td>
                       <td className={`px-4 py-4 text-[13px] ${index !== invoices.length - 1 ? 'border-b border-gray-light' : ''}`}>
@@ -316,6 +365,10 @@ function Billing() {
             setIsInvoiceModalOpen(false)
             setIsPaymentModalOpen(true)
           }}
+          onSuccess={() => {
+            fetchInvoices()
+            fetchBillingStats()
+          }}
         />
       )}
     </>
diff --git a/src/components/BookAppointmentModal.jsx b/src/components/BookAppointmentModal.jsx
index 4b6db87..7cb3284 100644
--- a/src/components/BookAppointmentModal.jsx
+++ b/src/components/BookAppointmentModal.jsx
@@ -1,15 +1,23 @@
 import { useState, useEffect } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
 
-function BookAppointmentModal({ onClose, onSuccess }) {
+function BookAppointmentModal({ onClose, onSuccess, preSelectedPatientId }) {
   const [patients, setPatients] = useState([])
+  const [patientSearchResults, setPatientSearchResults] = useState([])
+  const [patientSearchTerm, setPatientSearchTerm] = useState('')
+  const [isSearching, setIsSearching] = useState(false)
+  const [showSearchResults, setShowSearchResults] = useState(false)
   const [branches, setBranches] = useState([])
   const [doctors, setDoctors] = useState([])
+  const [allDoctors, setAllDoctors] = useState([])
+  const [specialties, setSpecialties] = useState([])
+  const [selectedSpecialty, setSelectedSpecialty] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
+  const [validationErrors, setValidationErrors] = useState({})
 
   const [formData, setFormData] = useState({
-    patient_id: '',
+    patient_id: preSelectedPatientId || '',
     branch_id: '',
     doctor_id: '',
     appointment_datetime: '',
@@ -18,11 +26,27 @@ function BookAppointmentModal({ onClose, onSuccess }) {
   })
 
   useEffect(() => {
-    fetchPatients()
+    if (preSelectedPatientId) {
+      fetchPatientById(preSelectedPatientId)
+    }
     fetchBranches()
     fetchDoctors()
+    fetchSpecialties()
   }, [])
 
+  useEffect(() => {
+    // Debounced patient search
+    if (patientSearchTerm.length >= 2) {
+      const timer = setTimeout(() => {
+        performPatientSearch()
+      }, 300)
+      return () => clearTimeout(timer)
+    } else {
+      setPatientSearchResults([])
+      setShowSearchResults(false)
+    }
+  }, [patientSearchTerm])
+
   const fetchPatients = async () => {
     try {
       const data = await api.get(API_ENDPOINTS.PATIENTS)
@@ -32,6 +56,35 @@ function BookAppointmentModal({ onClose, onSuccess }) {
     }
   }
 
+  const fetchPatientById = async (id) => {
+    try {
+      const data = await api.get(API_ENDPOINTS.PATIENT_BY_ID(id))
+      setPatientSearchTerm(`${data.first_name} ${data.last_name} - ${data.phone}`)
+    } catch (err) {
+      console.error('Error fetching patient:', err)
+    }
+  }
+
+  const performPatientSearch = async () => {
+    setIsSearching(true)
+    try {
+      const data = await api.get(API_ENDPOINTS.PATIENT_SEARCH(patientSearchTerm))
+      setPatientSearchResults(data)
+      setShowSearchResults(true)
+    } catch (err) {
+      console.error('Error searching patients:', err)
+    } finally {
+      setIsSearching(false)
+    }
+  }
+
+  const handleSelectPatient = (patient) => {
+    setFormData(prev => ({ ...prev, patient_id: patient.id }))
+    setPatientSearchTerm(`${patient.first_name} ${patient.last_name} - ${patient.phone}`)
+    setShowSearchResults(false)
+    setValidationErrors(prev => ({ ...prev, patient: null }))
+  }
+
   const fetchBranches = async () => {
     try {
       const data = await api.get(API_ENDPOINTS.BRANCHES)
@@ -45,11 +98,41 @@ function BookAppointmentModal({ onClose, onSuccess }) {
     try {
       const data = await api.get(`${API_ENDPOINTS.STAFF}?role=Doctor&is_active=true`)
       setDoctors(data)
+      setAllDoctors(data)
     } catch (err) {
       console.error('Error fetching doctors:', err)
     }
   }
 
+  const fetchSpecialties = async () => {
+    try {
+      const data = await api.get(API_ENDPOINTS.SPECIALTIES)
+      setSpecialties(data)
+    } catch (err) {
+      console.error('Error fetching specialties:', err)
+    }
+  }
+
+  const handleSpecialtyFilter = (specialtyId) => {
+    setSelectedSpecialty(specialtyId)
+    if (specialtyId) {
+      const filtered = allDoctors.filter(doc => doc.specialty_id === parseInt(specialtyId))
+      setDoctors(filtered)
+    } else {
+      setDoctors(allDoctors)
+    }
+    // Reset doctor selection if current doctor doesn't match filter
+    if (formData.doctor_id) {
+      const doctorStillAvailable = (specialtyId ? 
+        allDoctors.find(d => d.id === parseInt(formData.doctor_id) && d.specialty_id === parseInt(specialtyId)) :
+        true
+      )
+      if (!doctorStillAvailable) {
+        setFormData(prev => ({ ...prev, doctor_id: '' }))
+      }
+    }
+  }
+
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose()
@@ -64,6 +147,7 @@ function BookAppointmentModal({ onClose, onSuccess }) {
   const handleConfirm = async () => {
     setLoading(true)
     setError(null)
+    setValidationErrors({})
 
     try {
       if (!formData.patient_id || !formData.branch_id || !formData.doctor_id || !formData.appointment_datetime) {
@@ -74,6 +158,11 @@ function BookAppointmentModal({ onClose, onSuccess }) {
       if (onSuccess) onSuccess()
       onClose()
     } catch (err) {
+      // Handle specific validation errors from backend
+      if (err.response?.data?.validation) {
+        const validationType = err.response.data.validation
+        setValidationErrors({ [validationType]: err.response.data.error || err.message })
+      }
       setError(err.message)
       console.error('Error booking appointment:', err)
     } finally {
@@ -108,24 +197,46 @@ function BookAppointmentModal({ onClose, onSuccess }) {
 
           {/* Form Fields */}
           <div className="space-y-6">
+            {/* Patient Search */}
             <div>
               <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
-                Select Patient *
+                Search Patient *
               </label>
-              <select
-                name="patient_id"
-                value={formData.patient_id}
-                onChange={handleChange}
-                required
-                className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
-              >
-                <option value="">Select a patient...</option>
-                {patients.map(patient => (
-                  <option key={patient.id} value={patient.id}>
-                    {patient.first_name} {patient.last_name} - {patient.phone}
-                  </option>
-                ))}
-              </select>
+              <div className="relative">
+                <input
+                  type="text"
+                  value={patientSearchTerm}
+                  onChange={(e) => setPatientSearchTerm(e.target.value)}
+                  onFocus={() => patientSearchResults.length > 0 && setShowSearchResults(true)}
+                  placeholder="Search by name, ID, or phone..."
+                  className={`w-full px-3 py-3 border ${validationErrors.patient ? 'border-crimson' : 'border-black'} bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2`}
+                />
+                {isSearching && (
+                  <div className="absolute right-3 top-3 text-xs text-gray-mid">Searching...</div>
+                )}
+                
+                {/* Search Results Dropdown */}
+                {showSearchResults && patientSearchResults.length > 0 && (
+                  <div className="absolute z-10 w-full mt-1 bg-white border-2 border-black max-h-60 overflow-y-auto">
+                    {patientSearchResults.map(patient => (
+                      <button
+                        key={patient.id}
+                        onClick={() => handleSelectPatient(patient)}
+                        className="w-full px-3 py-2 text-left hover:bg-gray-bg transition-colors border-b border-gray-light text-sm"
+                      >
+                        <div className="font-semibold">{patient.first_name} {patient.last_name}</div>
+                        <div className="text-xs text-gray-mid">ID: {patient.id} | Phone: {patient.phone}</div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {validationErrors.patient && (
+                <p className="text-xs text-crimson mt-1">{validationErrors.patient}</p>
+              )}
+              {formData.patient_id && (
+                <p className="text-xs text-black mt-1">✓ Patient selected (ID: {formData.patient_id})</p>
+              )}
             </div>
 
             <div>
@@ -148,6 +259,26 @@ function BookAppointmentModal({ onClose, onSuccess }) {
               </select>
             </div>
 
+            {/* Specialty Filter */}
+            <div>
+              <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                Filter by Specialty (Optional)
+              </label>
+              <select
+                value={selectedSpecialty}
+                onChange={(e) => handleSpecialtyFilter(e.target.value)}
+                className="w-full px-3 py-3 border border-gray-mid bg-gray-bg text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+              >
+                <option value="">All Specialties</option>
+                {specialties.map(specialty => (
+                  <option key={specialty.id} value={specialty.id}>
+                    {specialty.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Doctor Selection */}
             <div>
               <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
                 Doctor *
@@ -157,7 +288,7 @@ function BookAppointmentModal({ onClose, onSuccess }) {
                 value={formData.doctor_id}
                 onChange={handleChange}
                 required
-                className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                className={`w-full px-3 py-3 border ${validationErrors.conflict ? 'border-crimson' : 'border-black'} bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2`}
               >
                 <option value="">Select a doctor...</option>
                 {doctors.map(doctor => (
@@ -166,6 +297,9 @@ function BookAppointmentModal({ onClose, onSuccess }) {
                   </option>
                 ))}
               </select>
+              {validationErrors.conflict && (
+                <p className="text-xs text-crimson mt-1">{validationErrors.conflict}</p>
+              )}
             </div>
 
             <div>
@@ -178,8 +312,11 @@ function BookAppointmentModal({ onClose, onSuccess }) {
                 value={formData.appointment_datetime}
                 onChange={handleChange}
                 required
-                className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                className={`w-full px-3 py-3 border ${validationErrors.hours ? 'border-crimson' : 'border-black'} bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2`}
               />
+              {validationErrors.hours && (
+                <p className="text-xs text-crimson mt-1">{validationErrors.hours}</p>
+              )}
             </div>
 
             <div>
diff --git a/src/components/Insurance.jsx b/src/components/Insurance.jsx
index 08392b3..6414ede 100644
--- a/src/components/Insurance.jsx
+++ b/src/components/Insurance.jsx
@@ -1,9 +1,19 @@
 import { useState, useEffect } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
 import SubmitClaimModal from './SubmitClaimModal'
+import ClaimDetailModal from './ClaimDetailModal'
+import EditClaimModal from './EditClaimModal'
+import InvoiceModal from './InvoiceModal'
 
 function Insurance() {
   const [isSubmitClaimModalOpen, setIsSubmitClaimModalOpen] = useState(false)
+  const [isClaimDetailModalOpen, setIsClaimDetailModalOpen] = useState(false)
+  const [isEditClaimModalOpen, setIsEditClaimModalOpen] = useState(false)
+  const [isInvoiceModalOpen, setIsInvoiceModalOpen] = useState(false)
+  const [selectedClaimId, setSelectedClaimId] = useState(null)
+  const [selectedClaim, setSelectedClaim] = useState(null)
+  const [selectedInvoice, setSelectedInvoice] = useState(null)
+  const [userRole, setUserRole] = useState(null)
   const [claims, setClaims] = useState([])
   const [stats, setStats] = useState({
     total: 0,
@@ -18,6 +28,7 @@ function Insurance() {
   useEffect(() => {
     fetchClaims()
     fetchStats()
+    fetchUserRole()
   }, [])
 
   const fetchClaims = async () => {
@@ -41,6 +52,45 @@ function Insurance() {
     }
   }
 
+  const fetchUserRole = async () => {
+    try {
+      const data = await api.get(API_ENDPOINTS.AUTH_STATUS)
+      setUserRole(data.user?.role)
+    } catch (err) {
+      console.error('Error fetching user role:', err)
+    }
+  }
+
+  const handleViewClaim = (claimId) => {
+    setSelectedClaimId(claimId)
+    setIsClaimDetailModalOpen(true)
+  }
+
+  const handleEditClaim = async (claimId) => {
+    try {
+      const claimData = await api.get(API_ENDPOINTS.INSURANCE_CLAIM_BY_ID(claimId))
+      setSelectedClaim(claimData)
+      setIsEditClaimModalOpen(true)
+    } catch (err) {
+      console.error('Error fetching claim for edit:', err)
+    }
+  }
+
+  const handleViewInvoice = async (invoiceId) => {
+    try {
+      const invoiceData = await api.get(API_ENDPOINTS.INVOICE_BY_ID(invoiceId))
+      setSelectedInvoice(invoiceData)
+      setIsInvoiceModalOpen(true)
+    } catch (err) {
+      console.error('Error fetching invoice:', err)
+    }
+  }
+
+  const handleClaimSuccess = () => {
+    fetchClaims()
+    fetchStats()
+  }
+
   const getStatusBadge = (status) => {
     const statusClasses = {
       approved: 'border-black bg-black text-white',
@@ -145,8 +195,11 @@ function Insurance() {
                       {getStatusBadge(claim.status.toLowerCase())}
                     </td>
                     <td className={`px-4 py-4 ${index !== claims.length - 1 ? 'border-b border-gray-light' : ''}`}>
-                      <button className="px-4 py-2 border-2 border-black bg-white text-black text-[10px] font-semibold uppercase tracking-wider hover:bg-black hover:text-white transition-all">
-                        {claim.status === 'Rejected' ? 'Resubmit' : 'View'}
+                      <button 
+                        onClick={() => handleViewClaim(claim.id)}
+                        className="px-4 py-2 border-2 border-black bg-white text-black text-[10px] font-semibold uppercase tracking-wider hover:bg-black hover:text-white transition-all"
+                      >
+                        View Details
                       </button>
                     </td>
                   </tr>
@@ -161,9 +214,48 @@ function Insurance() {
       {isSubmitClaimModalOpen && (
         <SubmitClaimModal 
           onClose={() => setIsSubmitClaimModalOpen(false)} 
-          onSuccess={() => {
-            fetchClaims()
-            fetchStats()
+          onSuccess={handleClaimSuccess}
+        />
+      )}
+
+      {/* Claim Detail Modal */}
+      {isClaimDetailModalOpen && (
+        <ClaimDetailModal
+          claimId={selectedClaimId}
+          onClose={() => {
+            setIsClaimDetailModalOpen(false)
+            setSelectedClaimId(null)
+          }}
+          onSuccess={handleClaimSuccess}
+          onViewInvoice={handleViewInvoice}
+          userRole={userRole}
+        />
+      )}
+
+      {/* Edit Claim Modal */}
+      {isEditClaimModalOpen && (
+        <EditClaimModal
+          claim={selectedClaim}
+          onClose={() => {
+            setIsEditClaimModalOpen(false)
+            setSelectedClaim(null)
+          }}
+          onSuccess={handleClaimSuccess}
+        />
+      )}
+
+      {/* Invoice Modal */}
+      {isInvoiceModalOpen && selectedInvoice && (
+        <InvoiceModal
+          invoice={selectedInvoice}
+          onClose={() => {
+            setIsInvoiceModalOpen(false)
+            setSelectedInvoice(null)
+          }}
+          onRecordPayment={() => {
+            // Close invoice modal when recording payment
+            setIsInvoiceModalOpen(false)
+            setSelectedInvoice(null)
           }}
         />
       )}
diff --git a/src/components/InvoiceModal.jsx b/src/components/InvoiceModal.jsx
index 8ea0192..c2b6097 100644
--- a/src/components/InvoiceModal.jsx
+++ b/src/components/InvoiceModal.jsx
@@ -1,10 +1,47 @@
-function InvoiceModal({ invoice, onClose, onRecordPayment }) {
+import { useState } from 'react'
+import { api, API_ENDPOINTS } from '../config/api'
+import ReceiptModal from './ReceiptModal'
+
+function InvoiceModal({ invoice, onClose, onRecordPayment, onSuccess }) {
+  const [updating, setUpdating] = useState(false)
+  const [error, setError] = useState(null)
+  const [selectedPaymentId, setSelectedPaymentId] = useState(null)
+  const [isReceiptModalOpen, setIsReceiptModalOpen] = useState(false)
+
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose()
     }
   }
 
+  const handleUpdateStatus = async (newStatus) => {
+    setUpdating(true)
+    setError(null)
+
+    try {
+      await api.put(API_ENDPOINTS.INVOICE_UPDATE_STATUS(invoice.id), {
+        status: newStatus
+      })
+      if (onSuccess) onSuccess()
+      // Refresh invoice or close modal
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      console.error('Error updating invoice status:', err)
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  const handleViewReceipt = (paymentId) => {
+    setSelectedPaymentId(paymentId)
+    setIsReceiptModalOpen(true)
+  }
+
+  const handlePrint = () => {
+    window.print()
+  }
+
   if (!invoice) return null
 
   const totalPaid = invoice.payments?.reduce((sum, p) => sum + parseFloat(p.amount), 0) || 0
@@ -29,6 +66,12 @@ function InvoiceModal({ invoice, onClose, onRecordPayment }) {
 
         {/* Modal Body */}
         <div className="px-6 py-6">
+          {error && (
+            <div className="mb-4 p-3 border-2 border-crimson bg-crimson/10 text-crimson text-sm print:hidden">
+              {error}
+            </div>
+          )}
+
           <div className="border-2 border-black px-8 py-8">
             {/* Invoice Header */}
             <div className="pb-6 mb-6 border-b border-gray-light">
@@ -59,8 +102,64 @@ function InvoiceModal({ invoice, onClose, onRecordPayment }) {
               <p className="text-sm"><strong>Patient:</strong> {invoice.patient_first_name} {invoice.patient_last_name}</p>
               <p className="text-sm"><strong>Patient ID:</strong> {invoice.patient_id}</p>
               <p className="text-sm"><strong>Appointment ID:</strong> {invoice.appointment_id || '-'}</p>
+              {invoice.appointment_datetime && (
+                <p className="text-sm"><strong>Appointment Date:</strong> {new Date(invoice.appointment_datetime).toLocaleDateString()}</p>
+              )}
             </div>
 
+            {/* Itemized Treatments */}
+            {invoice.items && invoice.items.length > 0 && (
+              <div className="mb-6">
+                <h3 className="text-sm font-semibold uppercase tracking-wider mb-4 border-b border-gray-light pb-2">
+                  Services & Treatments
+                </h3>
+                <table className="w-full border-collapse">
+                  <thead>
+                    <tr>
+                      <th className="text-left px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-gray-bg font-semibold">
+                        Description
+                      </th>
+                      <th className="text-center px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-gray-bg font-semibold">
+                        Qty
+                      </th>
+                      <th className="text-right px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-gray-bg font-semibold">
+                        Unit Price
+                      </th>
+                      <th className="text-right px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-gray-bg font-semibold">
+                        Total
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {invoice.items.map((item, idx) => (
+                      <tr key={idx}>
+                        <td className="px-2 py-3 text-sm border-b border-gray-light">
+                          <div>
+                            <p className="font-semibold">{item.treatment_name}</p>
+                            {item.treatment_description && (
+                              <p className="text-xs text-gray-mid">{item.treatment_description}</p>
+                            )}
+                            {item.consultation_notes && (
+                              <p className="text-xs text-gray-mid italic mt-1">Note: {item.consultation_notes}</p>
+                            )}
+                          </div>
+                        </td>
+                        <td className="px-2 py-3 text-sm text-center border-b border-gray-light">
+                          {item.quantity}
+                        </td>
+                        <td className="px-2 py-3 text-sm text-right border-b border-gray-light">
+                          LKR {parseFloat(item.unit_price).toFixed(2)}
+                        </td>
+                        <td className="px-2 py-3 text-sm text-right font-semibold border-b border-gray-light">
+                          LKR {parseFloat(item.total_price).toFixed(2)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
             {/* Invoice Totals */}
             <div className="text-right mt-4">
               <div className="pt-4 mt-4 border-t-2 border-black">
@@ -84,6 +183,7 @@ function InvoiceModal({ invoice, onClose, onRecordPayment }) {
                       <th className="text-left px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Method</th>
                       <th className="text-left px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Reference</th>
                       <th className="text-right px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold">Amount</th>
+                      <th className="text-center px-2 py-2 text-[10px] uppercase tracking-wider border-b border-gray-light bg-white font-semibold print:hidden">Actions</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -101,6 +201,14 @@ function InvoiceModal({ invoice, onClose, onRecordPayment }) {
                         <td className="px-2 py-2 text-[12px] text-right border-b border-gray-light">
                           LKR {parseFloat(payment.amount).toFixed(2)}
                         </td>
+                        <td className="px-2 py-2 text-center border-b border-gray-light print:hidden">
+                          <button
+                            onClick={() => handleViewReceipt(payment.id)}
+                            className="text-xs text-purple hover:underline font-semibold"
+                          >
+                            View Receipt
+                          </button>
+                        </td>
                       </tr>
                     ))}
                   </tbody>
@@ -111,23 +219,53 @@ function InvoiceModal({ invoice, onClose, onRecordPayment }) {
         </div>
 
         {/* Modal Footer */}
-        <div className="px-6 py-6 border-t border-gray-light flex gap-3 justify-end">
-          <button
-            onClick={onClose}
-            className="px-6 py-3 border-2 border-black bg-white text-black text-xs font-semibold uppercase tracking-wider hover:bg-black hover:text-white transition-all"
-          >
-            Close
-          </button>
-          {outstanding > 0 && (
+        <div className="px-6 py-6 border-t border-gray-light flex gap-3 justify-between print:hidden">
+          <div className="flex gap-3">
+            {invoice.status === 'Draft' && (
+              <button
+                onClick={() => handleUpdateStatus('Sent')}
+                disabled={updating}
+                className="px-6 py-3 border-2 border-blue-500 text-blue-500 text-xs font-semibold uppercase tracking-wider hover:bg-blue-500 hover:text-white transition-all disabled:opacity-50"
+              >
+                {updating ? 'Updating...' : 'Mark as Sent'}
+              </button>
+            )}
             <button
-              onClick={onRecordPayment}
-              className="px-6 py-3 border-2 border-black bg-black text-white text-xs font-semibold uppercase tracking-wider hover:bg-white hover:text-black transition-all"
+              onClick={handlePrint}
+              className="px-6 py-3 border-2 border-gray-mid text-gray-mid text-xs font-semibold uppercase tracking-wider hover:bg-gray-mid hover:text-white transition-all"
             >
-              Record Payment
+              Print Invoice
             </button>
-          )}
+          </div>
+          <div className="flex gap-3">
+            <button
+              onClick={onClose}
+              className="px-6 py-3 border-2 border-black bg-white text-black text-xs font-semibold uppercase tracking-wider hover:bg-black hover:text-white transition-all"
+            >
+              Close
+            </button>
+            {outstanding > 0 && (
+              <button
+                onClick={onRecordPayment}
+                className="px-6 py-3 border-2 border-black bg-black text-white text-xs font-semibold uppercase tracking-wider hover:bg-white hover:text-black transition-all"
+              >
+                Record Payment
+              </button>
+            )}
+          </div>
         </div>
       </div>
+
+      {/* Receipt Modal */}
+      {isReceiptModalOpen && (
+        <ReceiptModal
+          paymentId={selectedPaymentId}
+          onClose={() => {
+            setIsReceiptModalOpen(false)
+            setSelectedPaymentId(null)
+          }}
+        />
+      )}
     </div>
   )
 }
diff --git a/src/components/PatientDetailModal.jsx b/src/components/PatientDetailModal.jsx
index f11e131..a9a7189 100644
--- a/src/components/PatientDetailModal.jsx
+++ b/src/components/PatientDetailModal.jsx
@@ -1,11 +1,14 @@
 import { useState, useEffect } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
+import AddInsuranceModal from './AddInsuranceModal'
 
 function PatientDetailModal({ patientId, onClose }) {
   const [patient, setPatient] = useState(null)
   const [outstanding, setOutstanding] = useState(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
+  const [isAddInsuranceModalOpen, setIsAddInsuranceModalOpen] = useState(false)
+  const [selectedInsurance, setSelectedInsurance] = useState(null)
 
   useEffect(() => {
     if (patientId) {
@@ -41,6 +44,36 @@ function PatientDetailModal({ patientId, onClose }) {
     }
   }
 
+  const handleAddInsurance = () => {
+    setSelectedInsurance(null)
+    setIsAddInsuranceModalOpen(true)
+  }
+
+  const handleEditInsurance = (insurance) => {
+    setSelectedInsurance(insurance)
+    setIsAddInsuranceModalOpen(true)
+  }
+
+  const handleInsuranceSuccess = () => {
+    fetchPatientDetails()
+    setIsAddInsuranceModalOpen(false)
+    setSelectedInsurance(null)
+  }
+
+  const handleDeleteInsurance = async (insuranceId) => {
+    if (!window.confirm('Are you sure you want to deactivate this insurance policy?')) {
+      return
+    }
+
+    try {
+      await api.delete(API_ENDPOINTS.PATIENT_INSURANCE_BY_ID(patientId, insuranceId))
+      fetchPatientDetails() // Refresh patient data
+    } catch (err) {
+      console.error('Error deleting insurance:', err)
+      alert('Failed to delete insurance policy')
+    }
+  }
+
   if (loading) {
     return (
       <div
@@ -193,6 +226,92 @@ function PatientDetailModal({ patientId, onClose }) {
             </div>
           )}
 
+          {/* Insurance Information */}
+          <div className="mb-8">
+            <div className="flex justify-between items-center mb-4 border-b border-gray-light pb-2">
+              <h3 className="text-sm font-semibold uppercase tracking-wider">
+                Insurance Policies
+              </h3>
+              <button
+                onClick={handleAddInsurance}
+                className="px-4 py-2 border-2 border-crimson text-crimson text-[10px] font-semibold uppercase tracking-wider hover:bg-crimson hover:text-white transition-all"
+              >
+                Add Insurance
+              </button>
+            </div>
+            
+            {patient.insurance && patient.insurance.length > 0 ? (
+              <div className="space-y-4">
+                {patient.insurance.map((ins) => (
+                  <div key={ins.id} className="p-4 border border-gray-light bg-gray-bg">
+                    <div className="grid grid-cols-2 gap-4 mb-3">
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Provider
+                        </label>
+                        <p className="text-sm font-medium">{ins.provider_name}</p>
+                      </div>
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Policy Number
+                        </label>
+                        <p className="text-sm">{ins.policy_number}</p>
+                      </div>
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Coverage
+                        </label>
+                        <p className="text-sm">
+                          {ins.coverage_details?.coverage_percentage || 0}%
+                        </p>
+                      </div>
+                      <div>
+                        <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                          Expiration Date
+                        </label>
+                        <p className="text-sm">
+                          {ins.expiration_date ? new Date(ins.expiration_date).toLocaleDateString() : '-'}
+                        </p>
+                      </div>
+                      {ins.coverage_details?.max_claim && (
+                        <div>
+                          <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                            Max Claim Amount
+                          </label>
+                          <p className="text-sm">LKR {parseFloat(ins.coverage_details.max_claim).toFixed(2)}</p>
+                        </div>
+                      )}
+                      {ins.coverage_details?.deductible && (
+                        <div>
+                          <label className="block text-[10px] uppercase tracking-wider text-gray-mid mb-1">
+                            Deductible
+                          </label>
+                          <p className="text-sm">LKR {parseFloat(ins.coverage_details.deductible).toFixed(2)}</p>
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex gap-2 mt-3 pt-3 border-t border-gray-light">
+                      <button
+                        onClick={() => handleEditInsurance(ins)}
+                        className="px-3 py-1 border border-black text-black text-[10px] font-semibold uppercase tracking-wider hover:bg-black hover:text-white transition-all"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => handleDeleteInsurance(ins.id)}
+                        className="px-3 py-1 border border-crimson text-crimson text-[10px] font-semibold uppercase tracking-wider hover:bg-crimson hover:text-white transition-all"
+                      >
+                        Deactivate
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-mid">No insurance policies on file</p>
+            )}
+          </div>
+
           {/* Financial Information */}
           <div className="mb-8">
             <h3 className="text-sm font-semibold uppercase tracking-wider mb-4 border-b border-gray-light pb-2">
@@ -243,6 +362,19 @@ function PatientDetailModal({ patientId, onClose }) {
           </button>
         </div>
       </div>
+
+      {/* Add/Edit Insurance Modal */}
+      {isAddInsuranceModalOpen && (
+        <AddInsuranceModal
+          patientId={patientId}
+          insurance={selectedInsurance}
+          onClose={() => {
+            setIsAddInsuranceModalOpen(false)
+            setSelectedInsurance(null)
+          }}
+          onSuccess={handleInsuranceSuccess}
+        />
+      )}
     </div>
   )
 }
diff --git a/src/components/RecordPaymentModal.jsx b/src/components/RecordPaymentModal.jsx
index f0065a6..23490c9 100644
--- a/src/components/RecordPaymentModal.jsx
+++ b/src/components/RecordPaymentModal.jsx
@@ -1,9 +1,12 @@
 import { useState } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
+import ReceiptModal from './ReceiptModal'
 
 function RecordPaymentModal({ invoice, onClose, onSuccess }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
+  const [paymentSuccess, setPaymentSuccess] = useState(false)
+  const [createdPaymentId, setCreatedPaymentId] = useState(null)
 
   // Calculate outstanding balance
   const totalPaid = invoice?.payments?.reduce((sum, p) => sum + parseFloat(p.amount), 0) || 0
@@ -41,9 +44,10 @@ function RecordPaymentModal({ invoice, onClose, onSuccess }) {
         throw new Error('Payment amount cannot exceed outstanding balance')
       }
 
-      await api.post(API_ENDPOINTS.PAYMENTS, formData)
+      const response = await api.post(API_ENDPOINTS.PAYMENTS, formData)
+      setCreatedPaymentId(response.id)
+      setPaymentSuccess(true)
       if (onSuccess) onSuccess()
-      onClose()
     } catch (err) {
       setError(err.message)
       console.error('Error recording payment:', err)
@@ -52,6 +56,80 @@ function RecordPaymentModal({ invoice, onClose, onSuccess }) {
     }
   }
 
+  const calculateRemainingAfterPayment = () => {
+    return outstanding - parseFloat(formData.amount || 0)
+  }
+
+  if (paymentSuccess && createdPaymentId) {
+    return (
+      <div
+        className="fixed inset-0 bg-black/50 z-[1000] flex items-center justify-center"
+        onClick={handleBackdropClick}
+      >
+        <div className="bg-white border-2 border-black w-[90%] max-w-[600px]">
+          {/* Success Header */}
+          <div className="px-6 py-6 border-b border-black flex justify-between items-center bg-black text-white">
+            <h2 className="text-lg font-semibold">✓ Payment Recorded Successfully</h2>
+            <button
+              onClick={onClose}
+              className="w-8 h-8 border border-white bg-none hover:bg-white hover:text-black flex items-center justify-center text-lg transition-all"
+            >
+              ×
+            </button>
+          </div>
+
+          {/* Success Body */}
+          <div className="px-6 py-6">
+            <div className="p-6 border border-black bg-gray-bg mb-6">
+              <p className="text-lg font-semibold mb-4">Payment Details</p>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-sm text-gray-mid">Amount Paid:</span>
+                  <span className="text-sm font-semibold">LKR {parseFloat(formData.amount).toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm text-gray-mid">Payment Method:</span>
+                  <span className="text-sm">{formData.payment_method}</span>
+                </div>
+                <div className="flex justify-between pt-3 border-t border-gray-light">
+                  <span className="text-sm font-semibold">Remaining Balance:</span>
+                  <span className={`text-base font-bold ${calculateRemainingAfterPayment() > 0 ? 'text-crimson' : 'text-black'}`}>
+                    LKR {calculateRemainingAfterPayment().toFixed(2)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => setPaymentSuccess(false)}
+                className="flex-1 px-6 py-3 border-2 border-purple text-purple text-xs font-semibold uppercase tracking-wider hover:bg-purple hover:text-white transition-all"
+              >
+                View Receipt
+              </button>
+              <button
+                onClick={onClose}
+                className="flex-1 px-6 py-3 border-2 border-black bg-black text-white text-xs font-semibold uppercase tracking-wider hover:bg-white hover:text-black transition-all"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+
+          {/* Receipt Modal in success view */}
+          {!paymentSuccess && createdPaymentId && (
+            <ReceiptModal
+              paymentId={createdPaymentId}
+              onClose={() => {
+                setPaymentSuccess(true)
+              }}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div
       className="fixed inset-0 bg-black/50 z-[1000] flex items-center justify-center"
@@ -164,6 +242,22 @@ function RecordPaymentModal({ invoice, onClose, onSuccess }) {
                 className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
               />
             </div>
+
+            {/* Balance Calculation Preview */}
+            {formData.amount && parseFloat(formData.amount) > 0 && (
+              <div className="p-4 border border-purple bg-purple/5">
+                <p className="text-xs font-semibold uppercase tracking-wider mb-2">Balance After Payment</p>
+                <div className="flex justify-between items-center">
+                  <span className="text-sm">Remaining Balance:</span>
+                  <span className={`text-lg font-bold ${calculateRemainingAfterPayment() > 0 ? 'text-crimson' : 'text-black'}`}>
+                    LKR {calculateRemainingAfterPayment().toFixed(2)}
+                  </span>
+                </div>
+                {calculateRemainingAfterPayment() === 0 && (
+                  <p className="text-xs text-black mt-2">✓ This payment will fully settle the invoice</p>
+                )}
+              </div>
+            )}
           </div>
         </div>
 
diff --git a/src/components/RegisterPatientModal.jsx b/src/components/RegisterPatientModal.jsx
index 6048573..38b3d67 100644
--- a/src/components/RegisterPatientModal.jsx
+++ b/src/components/RegisterPatientModal.jsx
@@ -1,9 +1,11 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { api, API_ENDPOINTS } from '../config/api'
 
 function RegisterPatientModal({ onClose, onSuccess }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
+  const [hasInsurance, setHasInsurance] = useState(false)
+  const [insuranceProviders, setInsuranceProviders] = useState([])
   const [formData, setFormData] = useState({
     first_name: '',
     last_name: '',
@@ -25,12 +27,28 @@ function RegisterPatientModal({ onClose, onSuccess }) {
       relation: ''
     },
     insurance: {
-      provider_id: null,
+      provider_id: '',
       policy_number: '',
-      coverage_percentage: 80
+      coverage_percentage: 80,
+      max_claim: '',
+      deductible: '',
+      expiration_date: ''
     }
   })
 
+  useEffect(() => {
+    fetchInsuranceProviders()
+  }, [])
+
+  const fetchInsuranceProviders = async () => {
+    try {
+      const data = await api.get(API_ENDPOINTS.INSURANCE_PROVIDERS)
+      setInsuranceProviders(data)
+    } catch (err) {
+      console.error('Error fetching insurance providers:', err)
+    }
+  }
+
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose()
@@ -51,6 +69,12 @@ function RegisterPatientModal({ onClose, onSuccess }) {
         ...prev,
         emergency_contact: { ...prev.emergency_contact, [field]: value }
       }))
+    } else if (name.startsWith('insurance.')) {
+      const field = name.split('.')[1]
+      setFormData(prev => ({
+        ...prev,
+        insurance: { ...prev.insurance, [field]: value }
+      }))
     } else {
       setFormData(prev => ({ ...prev, [name]: value }))
     }
@@ -61,7 +85,22 @@ function RegisterPatientModal({ onClose, onSuccess }) {
     setError(null)
 
     try {
-      const response = await api.post(API_ENDPOINTS.PATIENTS, formData)
+      // Prepare data - only include insurance if hasInsurance is true
+      const dataToSubmit = { ...formData }
+      if (!hasInsurance) {
+        delete dataToSubmit.insurance
+      } else {
+        // Convert numeric fields
+        dataToSubmit.insurance = {
+          ...dataToSubmit.insurance,
+          provider_id: parseInt(dataToSubmit.insurance.provider_id),
+          coverage_percentage: parseFloat(dataToSubmit.insurance.coverage_percentage) || 80,
+          max_claim: dataToSubmit.insurance.max_claim ? parseFloat(dataToSubmit.insurance.max_claim) : null,
+          deductible: dataToSubmit.insurance.deductible ? parseFloat(dataToSubmit.insurance.deductible) : null
+        }
+      }
+
+      const response = await api.post(API_ENDPOINTS.PATIENTS, dataToSubmit)
       console.log('Patient registered:', response)
       if (onSuccess) onSuccess(response)
       onClose()
@@ -78,7 +117,22 @@ function RegisterPatientModal({ onClose, onSuccess }) {
     setError(null)
 
     try {
-      const response = await api.post(API_ENDPOINTS.PATIENTS, formData)
+      // Prepare data - only include insurance if hasInsurance is true
+      const dataToSubmit = { ...formData }
+      if (!hasInsurance) {
+        delete dataToSubmit.insurance
+      } else {
+        // Convert numeric fields
+        dataToSubmit.insurance = {
+          ...dataToSubmit.insurance,
+          provider_id: parseInt(dataToSubmit.insurance.provider_id),
+          coverage_percentage: parseFloat(dataToSubmit.insurance.coverage_percentage) || 80,
+          max_claim: dataToSubmit.insurance.max_claim ? parseFloat(dataToSubmit.insurance.max_claim) : null,
+          deductible: dataToSubmit.insurance.deductible ? parseFloat(dataToSubmit.insurance.deductible) : null
+        }
+      }
+
+      const response = await api.post(API_ENDPOINTS.PATIENTS, dataToSubmit)
       console.log('Patient registered and creating appointment:', response)
       if (onSuccess) onSuccess(response, true) // true indicates to open appointment modal
       onClose()
@@ -308,6 +362,120 @@ function RegisterPatientModal({ onClose, onSuccess }) {
                 className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
               />
             </div>
+
+            {/* Insurance Section */}
+            <div className="border-t border-gray-light pt-6">
+              <div className="flex items-center mb-4">
+                <input
+                  type="checkbox"
+                  id="hasInsurance"
+                  checked={hasInsurance}
+                  onChange={(e) => setHasInsurance(e.target.checked)}
+                  className="w-4 h-4 border-2 border-black mr-3"
+                />
+                <label htmlFor="hasInsurance" className="text-[11px] uppercase tracking-wider font-semibold">
+                  Patient Has Insurance
+                </label>
+              </div>
+
+              {hasInsurance && (
+                <div className="space-y-6">
+                  <div>
+                    <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                      Insurance Provider *
+                    </label>
+                    <select
+                      name="insurance.provider_id"
+                      value={formData.insurance.provider_id}
+                      onChange={handleChange}
+                      required={hasInsurance}
+                      className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                    >
+                      <option value="">Select Insurance Provider</option>
+                      {insuranceProviders.map((provider) => (
+                        <option key={provider.id} value={provider.id}>
+                          {provider.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                      Policy Number *
+                    </label>
+                    <input
+                      type="text"
+                      name="insurance.policy_number"
+                      value={formData.insurance.policy_number}
+                      onChange={handleChange}
+                      required={hasInsurance}
+                      className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                        Coverage Percentage (%)
+                      </label>
+                      <input
+                        type="number"
+                        name="insurance.coverage_percentage"
+                        value={formData.insurance.coverage_percentage}
+                        onChange={handleChange}
+                        min="0"
+                        max="100"
+                        className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                        Deductible (LKR)
+                      </label>
+                      <input
+                        type="number"
+                        name="insurance.deductible"
+                        value={formData.insurance.deductible}
+                        onChange={handleChange}
+                        min="0"
+                        step="0.01"
+                        className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                      Maximum Claim Amount (LKR)
+                    </label>
+                    <input
+                      type="number"
+                      name="insurance.max_claim"
+                      value={formData.insurance.max_claim}
+                      onChange={handleChange}
+                      min="0"
+                      step="0.01"
+                      className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                      Policy Expiration Date *
+                    </label>
+                    <input
+                      type="date"
+                      name="insurance.expiration_date"
+                      value={formData.insurance.expiration_date}
+                      onChange={handleChange}
+                      required={hasInsurance}
+                      className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 7640cf5..e0dd84d 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,9 +1,23 @@
 const roleNavigations = {
-  'front-desk': [
+  'admin': [
     { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
     { id: 'appointments', label: 'Appointments', icon: 'calendar' },
     { id: 'patients', label: 'Patients', icon: 'users' },
-    { id: 'billing', label: 'Billing', icon: 'billing' }
+    { id: 'treatments', label: 'Treatments', icon: 'treatment' },
+    { id: 'billing', label: 'Billing', icon: 'billing' },
+    { id: 'insurance', label: 'Insurance', icon: 'shield' },
+    { id: 'reports', label: 'Reports', icon: 'reports' },
+    { id: 'administration', label: 'Administration', icon: 'settings' }
+  ],
+  'manager': [
+    { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
+    { id: 'appointments', label: 'Appointments', icon: 'calendar' },
+    { id: 'patients', label: 'Patients', icon: 'users' },
+    { id: 'treatments', label: 'Treatments', icon: 'treatment' },
+    { id: 'billing', label: 'Billing', icon: 'billing' },
+    { id: 'insurance', label: 'Insurance', icon: 'shield' },
+    { id: 'reports', label: 'Reports', icon: 'reports' },
+    { id: 'administration', label: 'Administration', icon: 'settings' }
   ],
   'doctor': [
     { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
@@ -11,21 +25,29 @@ const roleNavigations = {
     { id: 'patients', label: 'Patients', icon: 'users' },
     { id: 'treatments', label: 'Treatments', icon: 'treatment' }
   ],
-  'billing': [
+  'nurse': [
     { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
-    { id: 'billing', label: 'Billing', icon: 'billing' },
-    { id: 'insurance', label: 'Insurance', icon: 'shield' },
-    { id: 'reports', label: 'Reports', icon: 'reports' }
+    { id: 'appointments', label: 'Appointments', icon: 'calendar' },
+    { id: 'patients', label: 'Patients', icon: 'users' },
+    { id: 'billing', label: 'Billing', icon: 'billing' }
   ],
-  'manager': [
+  'receptionist': [
     { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
     { id: 'appointments', label: 'Appointments', icon: 'calendar' },
     { id: 'patients', label: 'Patients', icon: 'users' },
-    { id: 'treatments', label: 'Treatments', icon: 'treatment' },
+    { id: 'billing', label: 'Billing', icon: 'billing' }
+  ],
+  'front-desk': [
+    { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
+    { id: 'appointments', label: 'Appointments', icon: 'calendar' },
+    { id: 'patients', label: 'Patients', icon: 'users' },
+    { id: 'billing', label: 'Billing', icon: 'billing' }
+  ],
+  'billing': [
+    { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
     { id: 'billing', label: 'Billing', icon: 'billing' },
     { id: 'insurance', label: 'Insurance', icon: 'shield' },
-    { id: 'reports', label: 'Reports', icon: 'reports' },
-    { id: 'administration', label: 'Administration', icon: 'settings' }
+    { id: 'reports', label: 'Reports', icon: 'reports' }
   ],
   'patient': [
     { id: 'dashboard', label: 'Dashboard', icon: 'chart' },
@@ -35,10 +57,13 @@ const roleNavigations = {
 }
 
 const roleLabels = {
-  'front-desk': 'Front Desk Staff',
+  'admin': 'System Administrator',
+  'manager': 'Branch Manager',
   'doctor': 'Doctor',
+  'nurse': 'Nurse',
+  'receptionist': 'Receptionist',
+  'front-desk': 'Front Desk Staff',
   'billing': 'Billing Staff',
-  'manager': 'Branch Manager',
   'patient': 'Patient'
 }
 
diff --git a/src/components/WalkInModal.jsx b/src/components/WalkInModal.jsx
index f84ff2f..65111c7 100644
--- a/src/components/WalkInModal.jsx
+++ b/src/components/WalkInModal.jsx
@@ -3,7 +3,14 @@ import { api, API_ENDPOINTS } from '../config/api'
 
 function WalkInModal({ onClose, onSuccess }) {
   const [patients, setPatients] = useState([])
+  const [patientSearchResults, setPatientSearchResults] = useState([])
+  const [patientSearchTerm, setPatientSearchTerm] = useState('')
+  const [isSearching, setIsSearching] = useState(false)
+  const [showSearchResults, setShowSearchResults] = useState(false)
   const [doctors, setDoctors] = useState([])
+  const [allDoctors, setAllDoctors] = useState([])
+  const [specialties, setSpecialties] = useState([])
+  const [selectedSpecialty, setSelectedSpecialty] = useState('')
   const [branches, setBranches] = useState([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
@@ -18,11 +25,24 @@ function WalkInModal({ onClose, onSuccess }) {
   })
 
   useEffect(() => {
-    fetchPatients()
     fetchDoctors()
     fetchBranches()
+    fetchSpecialties()
   }, [])
 
+  useEffect(() => {
+    // Debounced patient search
+    if (patientSearchTerm.length >= 2) {
+      const timer = setTimeout(() => {
+        performPatientSearch()
+      }, 300)
+      return () => clearTimeout(timer)
+    } else {
+      setPatientSearchResults([])
+      setShowSearchResults(false)
+    }
+  }, [patientSearchTerm])
+
   const fetchPatients = async () => {
     try {
       const data = await api.get(API_ENDPOINTS.PATIENTS)
@@ -32,15 +52,64 @@ function WalkInModal({ onClose, onSuccess }) {
     }
   }
 
+  const performPatientSearch = async () => {
+    setIsSearching(true)
+    try {
+      const data = await api.get(API_ENDPOINTS.PATIENT_SEARCH(patientSearchTerm))
+      setPatientSearchResults(data)
+      setShowSearchResults(true)
+    } catch (err) {
+      console.error('Error searching patients:', err)
+    } finally {
+      setIsSearching(false)
+    }
+  }
+
+  const handleSelectPatient = (patient) => {
+    setFormData(prev => ({ ...prev, patient_id: patient.id }))
+    setPatientSearchTerm(`${patient.first_name} ${patient.last_name} - ${patient.phone}`)
+    setShowSearchResults(false)
+  }
+
   const fetchDoctors = async () => {
     try {
       const data = await api.get(`${API_ENDPOINTS.STAFF}?role=Doctor&is_active=true`)
       setDoctors(data)
+      setAllDoctors(data)
     } catch (err) {
       console.error('Error fetching doctors:', err)
     }
   }
 
+  const fetchSpecialties = async () => {
+    try {
+      const data = await api.get(API_ENDPOINTS.SPECIALTIES)
+      setSpecialties(data)
+    } catch (err) {
+      console.error('Error fetching specialties:', err)
+    }
+  }
+
+  const handleSpecialtyFilter = (specialtyId) => {
+    setSelectedSpecialty(specialtyId)
+    if (specialtyId) {
+      const filtered = allDoctors.filter(doc => doc.specialty_id === parseInt(specialtyId))
+      setDoctors(filtered)
+    } else {
+      setDoctors(allDoctors)
+    }
+    // Reset doctor selection if current doctor doesn't match filter
+    if (formData.doctor_id) {
+      const doctorStillAvailable = (specialtyId ? 
+        allDoctors.find(d => d.id === parseInt(formData.doctor_id) && d.specialty_id === parseInt(specialtyId)) :
+        true
+      )
+      if (!doctorStillAvailable) {
+        setFormData(prev => ({ ...prev, doctor_id: '' }))
+      }
+    }
+  }
+
   const fetchBranches = async () => {
     try {
       const data = await api.get(API_ENDPOINTS.BRANCHES)
@@ -75,7 +144,8 @@ function WalkInModal({ onClose, onSuccess }) {
       const appointmentData = {
         ...formData,
         appointment_datetime: now.toISOString(),
-        status: 'In Progress'
+        status: 'In Progress',
+        override_validations: true // Walk-ins can bypass some validations
       }
 
       await api.post(API_ENDPOINTS.APPOINTMENTS, appointmentData)
@@ -115,24 +185,43 @@ function WalkInModal({ onClose, onSuccess }) {
           )}
 
           <div className="space-y-6">
+            {/* Patient Search */}
             <div>
               <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
-                Patient *
+                Search Patient *
               </label>
-              <select
-                name="patient_id"
-                value={formData.patient_id}
-                onChange={handleChange}
-                required
-                className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
-              >
-                <option value="">Select a patient...</option>
-                {patients.map(patient => (
-                  <option key={patient.id} value={patient.id}>
-                    {patient.first_name} {patient.last_name} - {patient.phone}
-                  </option>
-                ))}
-              </select>
+              <div className="relative">
+                <input
+                  type="text"
+                  value={patientSearchTerm}
+                  onChange={(e) => setPatientSearchTerm(e.target.value)}
+                  onFocus={() => patientSearchResults.length > 0 && setShowSearchResults(true)}
+                  placeholder="Search by name, ID, or phone..."
+                  className="w-full px-3 py-3 border border-black bg-white text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+                />
+                {isSearching && (
+                  <div className="absolute right-3 top-3 text-xs text-gray-mid">Searching...</div>
+                )}
+                
+                {/* Search Results Dropdown */}
+                {showSearchResults && patientSearchResults.length > 0 && (
+                  <div className="absolute z-10 w-full mt-1 bg-white border-2 border-black max-h-60 overflow-y-auto">
+                    {patientSearchResults.map(patient => (
+                      <button
+                        key={patient.id}
+                        onClick={() => handleSelectPatient(patient)}
+                        className="w-full px-3 py-2 text-left hover:bg-gray-bg transition-colors border-b border-gray-light text-sm"
+                      >
+                        <div className="font-semibold">{patient.first_name} {patient.last_name}</div>
+                        <div className="text-xs text-gray-mid">ID: {patient.id} | Phone: {patient.phone}</div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {formData.patient_id && (
+                <p className="text-xs text-black mt-1">✓ Patient selected (ID: {formData.patient_id})</p>
+              )}
             </div>
 
             <div>
@@ -155,6 +244,26 @@ function WalkInModal({ onClose, onSuccess }) {
               </select>
             </div>
 
+            {/* Specialty Filter */}
+            <div>
+              <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
+                Filter by Specialty (Optional)
+              </label>
+              <select
+                value={selectedSpecialty}
+                onChange={(e) => handleSpecialtyFilter(e.target.value)}
+                className="w-full px-3 py-3 border border-gray-mid bg-gray-bg text-sm focus:outline-2 focus:outline-black focus:outline-offset-2"
+              >
+                <option value="">All Specialties</option>
+                {specialties.map(specialty => (
+                  <option key={specialty.id} value={specialty.id}>
+                    {specialty.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Doctor Selection */}
             <div>
               <label className="block text-[11px] uppercase tracking-wider mb-2 font-semibold">
                 Doctor *
diff --git a/src/config/api.js b/src/config/api.js
index 793fba9..6c051f6 100644
--- a/src/config/api.js
+++ b/src/config/api.js
@@ -12,11 +12,20 @@ export const API_ENDPOINTS = {
   // Patients
   PATIENTS: `${API_BASE_URL}/patients`,
   PATIENT_BY_ID: (id) => `${API_BASE_URL}/patients/${id}`,
+  PATIENT_SEARCH: (query) => `${API_BASE_URL}/patients/search?q=${encodeURIComponent(query)}`,
   PATIENT_OUTSTANDING: (id) => `${API_BASE_URL}/patients/${id}/outstanding`,
+  PATIENT_INSURANCE: (patientId) => `${API_BASE_URL}/patients/${patientId}/insurance`,
+  PATIENT_INSURANCE_BY_ID: (patientId, insuranceId) => `${API_BASE_URL}/patients/${patientId}/insurance/${insuranceId}`,
 
   // Appointments
   APPOINTMENTS: `${API_BASE_URL}/appointments`,
   APPOINTMENT_BY_ID: (id) => `${API_BASE_URL}/appointments/${id}`,
+  APPOINTMENT_AVAILABLE_SLOTS: `${API_BASE_URL}/appointments/available-slots`,
+  APPOINTMENT_NO_SHOW: (id) => `${API_BASE_URL}/appointments/${id}/no-show`,
+  APPOINTMENT_CANCEL: (id) => `${API_BASE_URL}/appointments/${id}/cancel`,
+  APPOINTMENT_TREATMENTS: (id) => `${API_BASE_URL}/appointments/${id}/treatments`,
+  APPOINTMENT_TREATMENT_RECORD: (appointmentId, recordId) => `${API_BASE_URL}/appointments/${appointmentId}/treatments/${recordId}`,
+  APPOINTMENT_COMPLETE: (id) => `${API_BASE_URL}/appointments/${id}/complete`,
 
   // Treatments
   TREATMENTS: `${API_BASE_URL}/treatments`,
@@ -30,8 +39,13 @@ export const API_ENDPOINTS = {
   // Invoices
   INVOICES: `${API_BASE_URL}/invoices`,
   INVOICE_BY_ID: (id) => `${API_BASE_URL}/invoices/${id}`,
+  INVOICE_ITEMS: (id) => `${API_BASE_URL}/invoices/${id}/items`,
+  INVOICE_UPDATE_STATUS: (id) => `${API_BASE_URL}/invoices/${id}/status`,
+  INVOICE_OVERDUE: `${API_BASE_URL}/invoices/overdue`,
+  INVOICE_MARK_OVERDUE: `${API_BASE_URL}/invoices/mark-overdue`,
   PAYMENTS: `${API_BASE_URL}/invoices/payments`,
   PAYMENTS_BY_INVOICE: (invoiceId) => `${API_BASE_URL}/invoices/${invoiceId}/payments`,
+  PAYMENT_RECEIPT: (paymentId) => `${API_BASE_URL}/invoices/payments/${paymentId}/receipt`,
 
   // Dashboard
   DASHBOARD_STATS: `${API_BASE_URL}/dashboard/stats`,
@@ -40,11 +54,17 @@ export const API_ENDPOINTS = {
   // Staff
   STAFF: `${API_BASE_URL}/staff`,
   STAFF_BY_ID: (id) => `${API_BASE_URL}/staff/${id}`,
+  SPECIALTIES: `${API_BASE_URL}/staff/specialties`,
 
   // Insurance
+  INSURANCE_PROVIDERS: `${API_BASE_URL}/insurance/providers`,
+  INSURANCE_PROVIDER_BY_ID: (id) => `${API_BASE_URL}/insurance/providers/${id}`,
   INSURANCE_CLAIMS: `${API_BASE_URL}/insurance/claims`,
   INSURANCE_CLAIM_BY_ID: (id) => `${API_BASE_URL}/insurance/claims/${id}`,
   INSURANCE_STATS: `${API_BASE_URL}/insurance/claims/stats`,
+  INSURANCE_CLAIM_APPROVE: (id) => `${API_BASE_URL}/insurance/claims/${id}/approve`,
+  INSURANCE_CLAIM_REJECT: (id) => `${API_BASE_URL}/insurance/claims/${id}/reject`,
+  INSURANCE_CLAIM_RESUBMIT: (id) => `${API_BASE_URL}/insurance/claims/${id}/resubmit`,
 
   // Reports
   REPORTS_BRANCH_SUMMARY: `${API_BASE_URL}/reports/branch-summary`,