feat: implement access list management with CRUD operations and IP testing

- Added API integration for access lists including listing, creating, updating, deleting, and testing IPs against access lists.
- Created AccessListForm component for creating and editing access lists with validation.
- Developed AccessListSelector component for selecting access lists with detailed display of selected ACL.
- Implemented hooks for managing access lists and handling API interactions.
- Added tests for AccessListSelector and useAccessLists hooks to ensure functionality.
- Enhanced AccessLists page with UI for managing access lists, including create, edit, delete, and test IP features.

frontend/src/components/ProxyHostForm.tsx

@@ -6,6 +6,7 @@ import { useRemoteServers } from '../hooks/useRemoteServers'
 import { useDomains } from '../hooks/useDomains'
 import { useCertificates } from '../hooks/useCertificates'
 import { useDocker } from '../hooks/useDocker'
+import AccessListSelector from './AccessListSelector'
 import { parse } from 'tldts'
 
 // Application preset configurations
@@ -57,6 +58,7 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
     advanced_config: host?.advanced_config || '',
     enabled: host?.enabled ?? true,
     certificate_id: host?.certificate_id,
+    access_list_id: host?.access_list_id,
   })
 
   // CPMP internal IP for config helpers
@@ -490,6 +492,12 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
             </p>
           </div>
 
+          {/* Access Control List */}
+          <AccessListSelector
+            value={formData.access_list_id || null}
+            onChange={id => setFormData({ ...formData, access_list_id: id })}
+          />
+
           {/* Application Preset */}
           <div>
             <label htmlFor="application-preset" className="block text-sm font-medium text-gray-300 mb-2">