feat(history): add permission check for viewing history tab and simplify component structure

src/pages/students/components/EditStudentDialog.vue

@@ -25,7 +25,7 @@
           <ContractTab :student="props.student" />
         </div>
 
-        <div v-show="currentTab === 'history'">
+        <div v-if="canViewClasses" v-show="currentTab === 'history'">
           <HistoryTab />
         </div>
 
@@ -99,6 +99,9 @@ const permissions = permissionStore();
 const canViewContracts = computed(() =>
   permissions.getAccess("franchisee_contracts", "view"),
 );
+const canViewClasses = computed(() =>
+  permissions.getAccess("franchisee_classes", "view"),
+);
 
 watch(currentTab, (tab) => {
   if (tab === "media") mediaTabRef.value?.refresh();
@@ -114,7 +117,9 @@ const tabs = computed(() => [
   ...(canViewContracts.value
     ? [{ name: "contracts", label: "Contratos" }]
     : []),
-  { name: "history", label: "Frequência" },
+  ...(canViewClasses.value
+    ? [{ name: "history", label: "Frequência" }]
+    : []),
   { name: "media", label: "Mídias" },
 ]);
 

src/pages/students/tabs/HistoryTab.vue

@@ -6,94 +6,9 @@
       >
     </div>
 
-    <div v-for="course in courses" :key="course.id" class="q-mb-sm">
-      <div
-        class="row items-center q-px-md q-py-sm rounded-borders"
-        style="border: 1px solid #e0e0e0; cursor: default"
-      >
-        <span class="col text-body2" style="color: #e8825a">{{
-          course.name
-        }}</span>
-        <q-btn
-          flat
-          round
-          dense
-          :icon="
-            expandedCourses.includes(course.id) ? 'mdi-eye' : 'mdi-eye-outline'
-          "
-          @click="toggleCourse(course.id)"
-        />
-      </div>
-
-      <div v-if="expandedCourses.includes(course.id)">
-        <q-markup-table flat bordered class="q-mt-xs">
-          <thead>
-            <tr>
-              <th class="text-left">Item</th>
-              <th class="text-left">Data</th>
-              <th class="text-left">Status</th>
-              <th class="text-right">Justificativa</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(record, index) in course.attendances" :key="index">
-              <td>{{ record.item }}</td>
-              <td>
-                <q-badge
-                  :label="record.date"
-                  style="
-                    background-color: #6ed4c8;
-                    color: #fff;
-                    font-size: 0.75rem;
-                    padding: 4px 8px;
-                    border-radius: 12px;
-                  "
-                />
-              </td>
-              <td>{{ record.status }}</td>
-              <td class="text-right">{{ record.justification }}</td>
-            </tr>
-          </tbody>
-        </q-markup-table>
-      </div>
+    <div class="column items-center q-pa-xl text-grey-6">
+      <q-icon name="mdi-calendar-check-outline" size="48px" />
+      <div class="q-mt-sm">Nenhuma frequência registrada.</div>
     </div>
   </div>
 </template>
-
-<script setup>
-import { ref } from "vue";
-
-const expandedCourses = ref([1]);
-
-const courses = ref([
-  {
-    id: 1,
-    name: "Inteligência extrema",
-    attendances: [
-      { item: 1, date: "15/02", status: "Presente", justification: "-" },
-      { item: 2, date: "18/02", status: "Presente", justification: "-" },
-      { item: 3, date: "20/02", status: "Ausente", justification: "Sim" },
-      { item: 3, date: "20/02", status: "Ausente", justification: "Não" },
-    ],
-  },
-  {
-    id: 2,
-    name: "Inteligência extrema II",
-    attendances: [],
-  },
-  {
-    id: 3,
-    name: "Inteligência extrema III",
-    attendances: [],
-  },
-]);
-
-function toggleCourse(id) {
-  const idx = expandedCourses.value.indexOf(id);
-  if (idx === -1) {
-    expandedCourses.value.push(id);
-  } else {
-    expandedCourses.value.splice(idx, 1);
-  }
-}
-</script>