Add search bar to expanded panel modals

components/dashboard/Locations.tsx

@@ -37,6 +37,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
   const [activeTab, setActiveTab] = useState<Tab>('map')
   const handleTabKeyDown = useTabListKeyboard()
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalSearch, setModalSearch] = useState('')
   type LocationItem = { country?: string; city?: string; region?: string; pageviews: number }
   const [fullData, setFullData] = useState<LocationItem[]>([])
   const [isLoadingFull, setIsLoadingFull] = useState(false)
@@ -320,17 +321,31 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
 
       <Modal
         isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        onClose={() => { setIsModalOpen(false); setModalSearch('') }}
         title={`Locations - ${activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}`}
         className="max-w-2xl"
       >
+        <div>
+          <input
+            type="text"
+            value={modalSearch}
+            onChange={(e) => setModalSearch(e.target.value)}
+            placeholder="Search locations..."
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+          />
+        </div>
         <div className="space-y-1 max-h-[80vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-4">
               <ListSkeleton rows={10} />
             </div>
           ) : (() => {
-            const modalData = fullData.length > 0 ? fullData : data
+            const rawModalData = fullData.length > 0 ? fullData : data
+            const search = modalSearch.toLowerCase()
+            const modalData = !modalSearch ? rawModalData : rawModalData.filter(item => {
+              const label = activeTab === 'countries' ? getCountryName(item.country ?? '') : activeTab === 'regions' ? getRegionName(item.region ?? '', item.country ?? '') : getCityName(item.city ?? '')
+              return label.toLowerCase().includes(search)
+            })
             const modalTotal = modalData.reduce((sum, item) => sum + item.pageviews, 0)
             return modalData.map((item) => {
               const dim = TAB_TO_DIMENSION[activeTab]