feat: add view contract dialog functionality to actions column in contracts table

src/pages/tbr/tabs/ContractsTab.vue

@@ -41,15 +41,23 @@
       }}</q-td>
     </template>
 
-    <template #body-cell-actions>
+    <template #body-cell-actions="{ row: contract }">
       <q-td align="center">
-        <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-eye-outline"
+          size="sm"
+          @click="openViewDialog(contract)"
+        />
       </q-td>
     </template>
   </DefaultTable>
 </template>
 
 <script setup>
+import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import { getActiveFranchiseeContracts } from "src/api/franchisee_contract";
 import {
@@ -57,6 +65,16 @@ import {
   formatPercentage,
   formatDateYMDtoDMY,
 } from "src/helpers/utils";
+import ViewContractDialog from "src/pages/unit/components/ViewContractDialog.vue";
+
+const $q = useQuasar();
+
+function openViewDialog(contract) {
+  $q.dialog({
+    component: ViewContractDialog,
+    componentProps: { unitId: contract.unit_id, contract },
+  });
+}
 
 const loadContracts = () => getActiveFranchiseeContracts();