From 3fc94ae1c13c30cb98cafd7e54ff9f41ec2e8cff Mon Sep 17 00:00:00 2001
From: mpuckett <pucketm2016@gmail.com>
Date: Thu, 25 Jun 2026 14:54:42 -0500
Subject: [PATCH] Initial

---
 .../src/components/hosts/HostGroupsPanel.vue  | 224 +++++++++++++-
 client/src/style.css                          | 284 ++++++++++++++++++
 2 files changed, 498 insertions(+), 10 deletions(-)

diff --git a/client/src/components/hosts/HostGroupsPanel.vue b/client/src/components/hosts/HostGroupsPanel.vue
index 1dee795..b146f92 100644
--- a/client/src/components/hosts/HostGroupsPanel.vue
+++ b/client/src/components/hosts/HostGroupsPanel.vue
@@ -48,20 +48,127 @@
       wide
       @close="modalOpen = false"
     >
-      <form class="form-grid" @submit.prevent="save">
+      <form class="form-grid host-group-form" @submit.prevent="save">
         <label><span>Name</span><input v-model="form.name" required placeholder="Engineering" /></label>
         <label><span>Mode</span><select v-model="form.mode"><option value="manual">Manual</option><option value="dynamic">Rule based</option></select></label>
         <label><span>Visibility</span><select v-model="form.visibility"><option value="shared">Shared</option><option value="personal">Personal</option><option value="group">Group</option></select></label>
         <label v-if="form.visibility === 'group'"><span>Group</span><select v-model="form.groupId"><option value="">Choose group</option><option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option></select></label>
         <label class="full"><span>Description</span><textarea v-model="form.description" rows="2" placeholder="What this collection targets"></textarea></label>
 
-        <section v-if="form.mode === 'manual'" class="full modal-host-picker">
-          <div class="list-header"><span>Manual members</span><strong>{{ form.hostIds.length }} selected</strong></div>
-          <div class="host-picker">
-            <label v-for="host in hosts" :key="host.id">
-              <input v-model="form.hostIds" type="checkbox" :value="host.id" />
-              <span><strong>{{ host.name }}</strong><small>{{ host.transport }} - {{ host.address }}</small></span>
+        <section v-if="form.mode === 'manual'" class="full host-member-browser">
+          <div class="member-browser-header">
+            <div>
+              <span class="eyebrow">MANUAL MEMBERS</span>
+              <h4>Host membership</h4>
+              <p>Select exact hosts for this group. Imported host lists stay usable with search, filters, sorting, and pagination.</p>
+            </div>
+            <div class="member-selection-meter">
+              <strong>{{ form.hostIds.length }}</strong>
+              <span>selected</span>
+            </div>
+          </div>
+
+          <div class="member-toolbar">
+            <label class="member-search">
+              <Search :size="15" />
+              <input v-model="memberSearch" placeholder="Search host, FQDN, address, tags..." />
+              <button v-if="memberSearch" type="button" aria-label="Clear host search" @click="memberSearch = ''">
+                <X :size="13" />
+              </button>
             </label>
+            <label>
+              <span>Source</span>
+              <select v-model="memberSource">
+                <option value="">All sources</option>
+                <option v-for="source in sourceOptions" :key="source" :value="source">{{ sourceLabel(source) }}</option>
+              </select>
+            </label>
+            <label>
+              <span>Transport</span>
+              <select v-model="memberTransport">
+                <option value="">All transports</option>
+                <option v-for="transport in transportOptions" :key="transport" :value="transport">{{ transport }}</option>
+              </select>
+            </label>
+            <button :class="['ghost-button compact', { active: selectedOnly }]" type="button" @click="selectedOnly = !selectedOnly">
+              <ListChecks :size="15" />Selected
+            </button>
+          </div>
+
+          <div class="member-results-bar">
+            <span>{{ filteredHosts.length }} matching host(s)</span>
+            <div>
+              <button class="ghost-button compact" type="button" :disabled="!pagedHosts.length || pageAllSelected" @click="selectPage">
+                Select page
+              </button>
+              <button class="ghost-button compact" type="button" :disabled="!pagedHosts.some((host) => form.hostIds.includes(host.id))" @click="clearPage">
+                Clear page
+              </button>
+              <button class="ghost-button compact danger-text" type="button" :disabled="!form.hostIds.length" @click="form.hostIds = []">
+                Clear all
+              </button>
+            </div>
+          </div>
+
+          <div class="member-table-wrap">
+            <table class="member-table">
+              <thead>
+                <tr>
+                  <th class="select-col">
+                    <input
+                      type="checkbox"
+                      :checked="pageAllSelected"
+                      :disabled="!pagedHosts.length"
+                      aria-label="Select all hosts on this page"
+                      @change="$event.target.checked ? selectPage() : clearPage()"
+                    />
+                  </th>
+                  <th><button type="button" @click="toggleMemberSort('name')">Host <component :is="memberSortIcon('name')" :size="13" /></button></th>
+                  <th><button type="button" @click="toggleMemberSort('address')">Address <component :is="memberSortIcon('address')" :size="13" /></button></th>
+                  <th><button type="button" @click="toggleMemberSort('transport')">Transport <component :is="memberSortIcon('transport')" :size="13" /></button></th>
+                  <th><button type="button" @click="toggleMemberSort('sourceType')">Source <component :is="memberSortIcon('sourceType')" :size="13" /></button></th>
+                  <th>Tags</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="host in pagedHosts" :key="host.id" :class="{ selected: form.hostIds.includes(host.id) }">
+                  <td class="select-col">
+                    <input v-model="form.hostIds" type="checkbox" :value="host.id" :aria-label="`Select ${host.name}`" />
+                  </td>
+                  <td>
+                    <strong>{{ host.name }}</strong>
+                    <small>{{ host.fqdn || 'No FQDN recorded' }}</small>
+                  </td>
+                  <td><code>{{ host.address || '-' }}</code></td>
+                  <td><span class="status-pill neutral">{{ host.transport || '-' }}</span></td>
+                  <td><span :class="['status-pill', host.sourceType === 'vmware' ? 'dynamic' : 'manual']">{{ sourceLabel(host.sourceType) }}</span></td>
+                  <td><span class="member-tags">{{ tagSummary(host) }}</span></td>
+                </tr>
+                <tr v-if="!pagedHosts.length">
+                  <td colspan="6" class="member-empty">No hosts match the current filters.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="member-pagination">
+            <label>
+              <span>Rows</span>
+              <select v-model.number="memberPageSize">
+                <option :value="8">8</option>
+                <option :value="12">12</option>
+                <option :value="20">20</option>
+              </select>
+            </label>
+            <span>Page {{ Math.min(memberPage, memberPageCount) }} of {{ memberPageCount }}</span>
+            <div>
+              <button class="ghost-button compact" type="button" :disabled="memberPage <= 1" @click="memberPage -= 1">
+                <ChevronLeft :size="15" />Previous
+              </button>
+              <button class="ghost-button compact" type="button" :disabled="memberPage >= memberPageCount" @click="memberPage += 1">
+                Next<ChevronRight :size="15" />
+              </button>
+            </div>
           </div>
         </section>
 
@@ -102,12 +209,12 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
-import { Plus, RefreshCcw, Save, Trash2 } from '@lucide/vue';
+import { computed, reactive, ref, watch } from 'vue';
+import { ArrowDownAZ, ArrowUpAZ, ChevronsUpDown, ChevronLeft, ChevronRight, ListChecks, Plus, RefreshCcw, Save, Search, Trash2, X } from '@lucide/vue';
 import BaseModal from '../ui/BaseModal.vue';
 import ResourceTable from '../ui/ResourceTable.vue';
 
-defineProps({
+const props = defineProps({
   hostGroups: { type: Array, default: () => [] },
   hosts: { type: Array, default: () => [] },
   groups: { type: Array, default: () => [] }
@@ -115,6 +222,14 @@ defineProps({
 
 const emit = defineEmits(['save', 'delete', 'sync', 'sync-all']);
 const modalOpen = ref(false);
+const memberSearch = ref('');
+const memberSource = ref('');
+const memberTransport = ref('');
+const selectedOnly = ref(false);
+const memberSort = ref('name');
+const memberDirection = ref('asc');
+const memberPage = ref(1);
+const memberPageSize = ref(8);
 const form = reactive(defaultForm());
 const columns = [
   { key: 'name', label: 'Name' },
@@ -125,6 +240,46 @@ const columns = [
   { key: 'actions', label: 'Actions', sortable: false }
 ];
 
+const sourceOptions = computed(() => uniqueOptions(props.hosts.map((host) => host.sourceType || 'manual')));
+const transportOptions = computed(() => uniqueOptions(props.hosts.map((host) => host.transport).filter(Boolean)));
+const filteredHosts = computed(() => {
+  const term = memberSearch.value.trim().toLowerCase();
+  const selected = new Set(form.hostIds);
+  return props.hosts.filter((host) => {
+    if (selectedOnly.value && !selected.has(host.id)) return false;
+    if (memberSource.value && (host.sourceType || 'manual') !== memberSource.value) return false;
+    if (memberTransport.value && host.transport !== memberTransport.value) return false;
+    if (!term) return true;
+    return [
+      host.name,
+      host.fqdn,
+      host.address,
+      host.transport,
+      host.sourceType,
+      ...(host.tags || [])
+    ].filter(Boolean).some((value) => String(value).toLowerCase().includes(term));
+  }).sort((a, b) => {
+    const left = sortableHostValue(a, memberSort.value);
+    const right = sortableHostValue(b, memberSort.value);
+    const result = left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' });
+    return memberDirection.value === 'asc' ? result : -result;
+  });
+});
+const memberPageCount = computed(() => Math.max(1, Math.ceil(filteredHosts.value.length / memberPageSize.value)));
+const pagedHosts = computed(() => {
+  const start = (memberPage.value - 1) * memberPageSize.value;
+  return filteredHosts.value.slice(start, start + memberPageSize.value);
+});
+const pageAllSelected = computed(() => Boolean(pagedHosts.value.length) && pagedHosts.value.every((host) => form.hostIds.includes(host.id)));
+
+watch([memberSearch, memberSource, memberTransport, selectedOnly, memberPageSize], () => {
+  memberPage.value = 1;
+});
+
+watch(memberPageCount, (pageCount) => {
+  if (memberPage.value > pageCount) memberPage.value = pageCount;
+});
+
 function defaultForm() {
   return {
     id: null,
@@ -144,6 +299,13 @@ function openModal(group = null) {
   form.rules = (group?.rules?.length ? group.rules : defaultForm().rules).map((rule) => ({ ...rule }));
   form.hostIds = [...(group?.hostIds || [])];
   form.groupId = group?.groupId || '';
+  memberSearch.value = '';
+  memberSource.value = '';
+  memberTransport.value = '';
+  selectedOnly.value = false;
+  memberSort.value = 'name';
+  memberDirection.value = 'asc';
+  memberPage.value = 1;
   modalOpen.value = true;
 }
 
@@ -161,6 +323,48 @@ function ruleSummary(group) {
   return (group.rules || []).map((rule) => `${rule.field} ${rule.operator} "${rule.value}"`).join(` ${group.matchMode || 'all'} `) || 'No rules';
 }
 
+function uniqueOptions(values) {
+  return [...new Set(values.filter(Boolean))].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
+}
+
+function sortableHostValue(host, key) {
+  if (key === 'sourceType') return host.sourceType || 'manual';
+  return String(host[key] || '');
+}
+
+function toggleMemberSort(key) {
+  if (memberSort.value === key) {
+    memberDirection.value = memberDirection.value === 'asc' ? 'desc' : 'asc';
+    return;
+  }
+  memberSort.value = key;
+  memberDirection.value = 'asc';
+}
+
+function memberSortIcon(key) {
+  if (memberSort.value !== key) return ChevronsUpDown;
+  return memberDirection.value === 'asc' ? ArrowUpAZ : ArrowDownAZ;
+}
+
+function selectPage() {
+  const selected = new Set(form.hostIds);
+  for (const host of pagedHosts.value) selected.add(host.id);
+  form.hostIds = [...selected];
+}
+
+function clearPage() {
+  const pageIds = new Set(pagedHosts.value.map((host) => host.id));
+  form.hostIds = form.hostIds.filter((id) => !pageIds.has(id));
+}
+
+function sourceLabel(source = 'manual') {
+  return source === 'vmware' ? 'VMware' : 'Manual';
+}
+
+function tagSummary(host) {
+  return host.tags?.length ? host.tags.slice(0, 3).join(', ') : '-';
+}
+
 function save() {
   emit('save', {
     ...form,
diff --git a/client/src/style.css b/client/src/style.css
index ea29ac1..3e5d3ea 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -4699,6 +4699,271 @@ body {
   overflow: auto;
 }
 
+.host-member-browser {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid rgba(156, 199, 232, .14);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 8% 0, rgba(88, 221, 255, .09), transparent 34%),
+    linear-gradient(145deg, rgba(11, 24, 48, .76), rgba(5, 11, 27, .72));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
+}
+
+.member-browser-header,
+.member-results-bar,
+.member-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.member-browser-header h4 {
+  margin: 2px 0 3px;
+  color: rgba(245, 250, 255, .96);
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.member-browser-header p {
+  max-width: 720px;
+  margin: 0;
+  color: rgba(200, 215, 234, .72);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.member-selection-meter {
+  min-width: 94px;
+  min-height: 54px;
+  display: grid;
+  place-items: center;
+  padding: 8px 12px;
+  border: 1px solid rgba(88, 221, 255, .22);
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, rgba(88, 221, 255, .16), rgba(166, 122, 255, .1)),
+    rgba(6, 16, 34, .68);
+}
+
+.member-selection-meter strong {
+  color: #fff;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.member-selection-meter span {
+  color: var(--cyan);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.member-toolbar {
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto;
+  gap: 10px;
+  align-items: end;
+}
+
+.member-toolbar label,
+.member-pagination label {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.member-toolbar label > span,
+.member-pagination label > span {
+  color: rgba(190, 215, 238, .78);
+  font: 800 10px/1.2 var(--display-font);
+  letter-spacing: .085em;
+  text-transform: uppercase;
+}
+
+.member-search {
+  position: relative;
+}
+
+.member-search svg {
+  position: absolute;
+  left: 13px;
+  bottom: 13px;
+  color: rgba(154, 178, 205, .72);
+  pointer-events: none;
+}
+
+.member-search input {
+  padding-left: 38px !important;
+  padding-right: 38px !important;
+}
+
+.member-search button {
+  position: absolute;
+  right: 8px;
+  bottom: 7px;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(156, 199, 232, .13);
+  border-radius: 9px;
+  color: rgba(218, 236, 255, .78);
+  background: rgba(255, 255, 255, .055);
+}
+
+.member-toolbar .ghost-button.active {
+  border-color: rgba(88, 221, 255, .34);
+  color: #fff;
+  background:
+    linear-gradient(135deg, rgba(88, 221, 255, .22), rgba(166, 122, 255, .12)),
+    rgba(9, 20, 42, .82);
+}
+
+.member-results-bar {
+  min-height: 36px;
+  padding: 8px 10px;
+  border: 1px solid rgba(156, 199, 232, .1);
+  border-radius: 13px;
+  background: rgba(2, 8, 20, .36);
+  color: rgba(213, 226, 244, .76);
+  font-size: 12px;
+}
+
+.member-results-bar > div,
+.member-pagination > div {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.member-table-wrap {
+  overflow: hidden;
+  border: 1px solid rgba(156, 199, 232, .12);
+  border-radius: 15px;
+  background: rgba(2, 8, 20, .44);
+}
+
+.member-table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.member-table th,
+.member-table td {
+  padding: 10px 11px;
+  border-bottom: 1px solid rgba(156, 199, 232, .08);
+  color: rgba(226, 237, 250, .82);
+  text-align: left;
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+.member-table th {
+  color: rgba(142, 172, 202, .88);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
+    rgba(5, 14, 30, .78);
+  font: 800 10px/1.2 var(--display-font);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.member-table th button {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+}
+
+.member-table tbody tr {
+  transition: background .18s ease, box-shadow .18s ease;
+}
+
+.member-table tbody tr:hover {
+  background: rgba(88, 221, 255, .055);
+}
+
+.member-table tbody tr.selected {
+  background:
+    linear-gradient(90deg, rgba(88, 221, 255, .13), rgba(100, 231, 189, .055)),
+    rgba(7, 19, 38, .78);
+}
+
+.member-table td strong,
+.member-table td small,
+.member-table code,
+.member-tags {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.member-table td strong {
+  color: #fff;
+  font-size: 12px;
+}
+
+.member-table td small {
+  margin-top: 3px;
+  color: rgba(170, 190, 215, .62);
+  font-size: 10px;
+}
+
+.member-table code {
+  color: rgba(218, 236, 255, .78);
+  font-size: 11px;
+}
+
+.member-table .select-col {
+  width: 44px;
+  text-align: center;
+}
+
+.host-member-browser input[type="checkbox"] {
+  width: 16px !important;
+  min-width: 16px !important;
+  max-width: 16px !important;
+  height: 16px !important;
+  min-height: 16px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 5px;
+  accent-color: #58ddff;
+}
+
+.member-empty {
+  height: 72px;
+  color: rgba(190, 208, 228, .62) !important;
+  text-align: center !important;
+}
+
+.member-pagination {
+  padding-top: 2px;
+  color: rgba(213, 226, 244, .72);
+  font-size: 12px;
+}
+
+.member-pagination label {
+  width: 110px;
+}
+
 .rule-editor {
   padding: 12px;
   border: 1px solid var(--border);
@@ -4720,6 +4985,25 @@ body {
 }
 
 @media (max-width: 720px) {
+  .member-browser-header,
+  .member-results-bar,
+  .member-pagination {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .member-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .member-table-wrap {
+    overflow-x: auto;
+  }
+
+  .member-table {
+    min-width: 760px;
+  }
+
   .rule-row {
     grid-template-columns: 1fr;
   }