feat: adiciona grupos em dialog de pacote

src/pages/packages/components/AddEditPackageDialog.vue

@@ -240,6 +240,115 @@
                 </div>
               </div>
             </div>
+
+            <!-- Tab: Grupos -->
+            <div v-show="currentTab === 'grupos'">
+              <div class="column q-gutter-y-sm">
+                <!-- Visível para todos os Grupos -->
+                <q-input
+                  outlined
+                  readonly
+                  dense
+                  label="Visível Para todos os Grupos"
+                  label-color="secondary"
+                  color="secondary"
+                  bg-color="white"
+                  style="border-radius: 8px"
+                >
+                  <template #append>
+                    <q-btn
+                      flat
+                      round
+                      dense
+                      size="sm"
+                      icon="mdi-check"
+                      color="positive"
+                      @click="setAllGroupsVisible(true)"
+                    />
+                    <q-btn
+                      flat
+                      round
+                      dense
+                      size="sm"
+                      icon="mdi-close-circle-outline"
+                      color="negative"
+                      @click="setAllGroupsVisible(false)"
+                    />
+                  </template>
+                </q-input>
+
+                <!-- Buscar Grupo -->
+                <q-input
+                  v-model="groupSearch"
+                  outlined
+                  dense
+                  label="Buscar Grupo"
+                  label-color="secondary"
+                  color="secondary"
+                  bg-color="white"
+                  style="border-radius: 8px"
+                >
+                  <template #append>
+                    <q-icon name="mdi-magnify" color="secondary" />
+                  </template>
+                </q-input>
+
+                <!-- Lista de Grupos -->
+                <div
+                  class="rounded-borders q-pa-sm"
+                  style="
+                    background-color: #f5f5f5;
+                    max-height: 280px;
+                    overflow-y: auto;
+                  "
+                >
+                  <div class="row items-center q-mb-xs q-px-sm">
+                    <q-icon
+                      name="mdi-account-group"
+                      color="secondary"
+                      size="sm"
+                      class="q-mr-xs"
+                    />
+                    <span class="text-body2">
+                      Grupos Ativos ({{ filteredGroups.length }})
+                    </span>
+                  </div>
+
+                  <q-separator class="q-mb-xs" />
+
+                  <div class="row q-px-sm q-py-xs">
+                    <span class="col text-caption text-grey-6">Grupo</span>
+                    <span class="col-auto text-caption text-grey-6">Status</span>
+                  </div>
+
+                  <template v-for="group in filteredGroups" :key="group.id">
+                    <q-separator />
+                    <div class="row items-center q-px-sm q-py-sm">
+                      <span class="col text-body2">{{ group.name }}</span>
+                      <div class="col-auto row q-gutter-x-xs">
+                        <q-btn
+                          round
+                          unelevated
+                          :color="group.visible ? 'positive' : 'grey-4'"
+                          icon="mdi-check"
+                          size="xs"
+                          @click="group.visible = true"
+                        />
+                        <q-btn
+                          round
+                          :outline="group.visible"
+                          :unelevated="!group.visible"
+                          color="negative"
+                          icon="mdi-close"
+                          size="xs"
+                          @click="group.visible = false"
+                        />
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
           </q-card-section>
 
           <q-card-actions align="right" class="q-px-md q-pb-md">
@@ -295,6 +404,7 @@ const currentTab = ref("informacoes");
 
 const tabs = [
   { name: "informacoes", label: "Informações" },
+  { name: "grupos", label: "Grupos" },
   { name: "unidades", label: "Unidades" },
 ];
 
@@ -344,6 +454,14 @@ const removeMaterial = (index) => {
 const unitSearch = ref("");
 const units = ref([]);
 
+// Grupos tab
+const groupSearch = ref("");
+const groups = ref([
+  { id: 1, name: "Grupo 1", visible: true },
+  { id: 2, name: "Grupo 2", visible: true },
+  { id: 3, name: "Grupo 3", visible: true },
+]);
+
 const filteredUnits = computed(() => {
   const q = unitSearch.value.toLowerCase();
   if (!q) return units.value;
@@ -354,6 +472,16 @@ const setAllVisible = (visible) => {
   units.value.forEach((u) => (u.visible = visible));
 };
 
+const filteredGroups = computed(() => {
+  const q = groupSearch.value.toLowerCase();
+  if (!q) return groups.value;
+  return groups.value.filter((g) => g.name.toLowerCase().includes(q));
+});
+
+const setAllGroupsVisible = (visible) => {
+  groups.value.forEach((g) => (g.visible = visible));
+};
+
 onMounted(async () => {
   loadingUnits.value = true;
   try {