feat: add Patient 360 page and global search component

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/shared/global-search.tsx

@@ -1,12 +1,24 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { SearchLg, User01, Phone01, Calendar } from '@untitledui/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass, faUser, faCalendar } from '@fortawesome/pro-duotone-svg-icons';
+import type { FC, HTMLAttributes } from 'react';
 import { Input } from '@/components/base/input/input';
 import { Badge } from '@/components/base/badges/badges';
 import { useData } from '@/providers/data-provider';
 import { formatPhone } from '@/lib/format';
 import { cx } from '@/utils/cx';
 
+const SearchIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />
+);
+const UserIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faUser} className={className} />
+);
+const CalendarIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faCalendar} className={className} />
+);
+
 type SearchResultType = 'lead' | 'patient' | 'appointment';
 
 type SearchResult = {
@@ -21,10 +33,10 @@ type GlobalSearchProps = {
     onSelectResult?: (result: SearchResult) => void;
 };
 
-const TYPE_ICONS: Record<SearchResultType, typeof User01> = {
-    lead: User01,
-    patient: User01,
-    appointment: Calendar,
+const TYPE_ICONS: Record<SearchResultType, FC<{ className?: string }>> = {
+    lead: UserIcon,
+    patient: UserIcon,
+    appointment: CalendarIcon,
 };
 
 const TYPE_BADGE_COLORS: Record<SearchResultType, 'brand' | 'success' | 'blue'> = {
@@ -170,7 +182,7 @@ export const GlobalSearch = ({ onSelectResult }: GlobalSearchProps) => {
         <div ref={containerRef} className="relative w-64" onKeyDown={handleKeyDown}>
             <Input
                 placeholder="Search leads..."
-                icon={SearchLg}
+                icon={SearchIcon}
                 aria-label="Global search"
                 value={query}
                 onChange={(value) => setQuery(value)}
@@ -213,7 +225,7 @@ export const GlobalSearch = ({ onSelectResult }: GlobalSearchProps) => {
 
                     {!isSearching && results.length === 0 && (
                         <div className="flex flex-col items-center gap-1 px-4 py-6 text-center">
-                            <SearchLg className="size-5 text-fg-quaternary" />
+                            <SearchIcon className="size-5 text-fg-quaternary" />
                             <p className="text-sm font-medium text-secondary">No results</p>
                             <p className="text-xs text-tertiary">Try a different search term</p>
                         </div>

src/pages/patient-360.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router';
-import { Phone01, Mail01, Calendar, FileText06, Clock, MessageTextSquare01, Plus } from '@untitledui/icons';
+import { Phone01, Mail01, Calendar, MessageTextSquare01, Plus } from '@untitledui/icons';
 import { Tabs, TabList, Tab, TabPanel } from '@/components/application/tabs/tabs';
 import { TopBar } from '@/components/layout/top-bar';
 import { Avatar } from '@/components/base/avatar/avatar';