Feat 272 dashboard refactor

frontend/src/basic/dashboard/Coordinator.vue

@@ -36,12 +36,11 @@
       >
         <slot name="success-footer">
           <slot name="buttons" />
-          <button
+          <BasicButton
             class="btn btn-secondary"
+            text="Close"
             @click="$refs.coordinatorModal.close()"
-          >
-            Close
-          </button>
+          />
         </slot>
       </span>
       <span
@@ -50,20 +49,16 @@
       >
         <slot name="footer">
           <slot name="buttons" />
-          <button
+          <BasicButton
             class="btn btn-secondary"
-            type="button"
+            :text="textCancel"
             @click="$refs.coordinatorModal.close()"
-          >
-            {{ textCancel }}
-          </button>
-          <button
+          />
+          <BasicButton
             class="btn btn-primary me-2"
-            type="button"
+            :text="data.id ? textUpdate : textAdd"
             @click="submit"
-          >
-            {{ data.id ? textUpdate : textAdd }}
-          </button>
+          />
         </slot>
       </span>
     </template>
@@ -73,6 +68,7 @@
 <script>
 import BasicModal from "@/basic/Modal.vue";
 import BasicForm from "@/basic/Form.vue";
+import BasicButton from "@/basic/Button.vue";
 import { sorter } from "@/assets/utils.js";
 
 /**
@@ -95,7 +91,7 @@ import { sorter } from "@/assets/utils.js";
  */
 export default {
   name: "BasicCoordinator",
-  components: { BasicModal, BasicForm },
+  components: { BasicModal, BasicForm, BasicButton },
   props: {
     title: {
       type: String,

frontend/src/basic/dashboard/ListPage.vue

@@ -0,0 +1,99 @@
+<template>
+  <Card :title="title">
+    <template
+      v-if="$slots.headerActions"
+      #headerElements
+    >
+      <slot name="headerActions" />
+    </template>
+    <template #body>
+      <BasicTable
+        :columns="columns"
+        :data="data"
+        :options="resolvedTableOptions"
+        :buttons="buttons"
+        :max-table-height="maxTableHeight"
+        @action="$emit('action', $event)"
+      >
+        <template
+          v-if="$slots.tableExtras"
+          #additional-buttons
+        >
+          <slot name="tableExtras" />
+        </template>
+      </BasicTable>
+      <slot name="afterTable" />
+    </template>
+  </Card>
+  <slot name="modals" />
+</template>
+
+<script>
+import Card from "@/basic/dashboard/card/Card.vue";
+import BasicTable from "@/basic/Table.vue";
+import {
+  DEFAULT_DASHBOARD_TABLE_OPTIONS,
+  DASHBOARD_TABLE_HEIGHT,
+} from "@/basic/dashboard/constants.js";
+
+/**
+ * Shared shell for dashboard list pages: card, header actions, and BasicTable.
+ * Pages supply columns, data, row buttons, and modals; table defaults come from constants.
+ *
+ * @param {String} title - Card title
+ * @param {Array} columns - BasicTable column definitions
+ * @param {Array} data - BasicTable row data
+ * @param {Array} buttons - BasicTable row-action buttons
+ * @param {Object} tableOptions - Extra BasicTable options merged onto defaults
+ * @param {String|Number} maxTableHeight - Max table height (defaults to DASHBOARD_TABLE_HEIGHT)
+ *
+ * @author Mohammad Elwan
+ */
+export default {
+  name: "DashboardListPage",
+  components: { Card, BasicTable },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    buttons: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    tableOptions: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    maxTableHeight: {
+      type: [String, Number],
+      required: false,
+      default: DASHBOARD_TABLE_HEIGHT,
+    },
+  },
+  emits: ["action"],
+  computed: {
+    resolvedTableOptions() {
+      return this.tableOptions
+        ? { ...DEFAULT_DASHBOARD_TABLE_OPTIONS, ...this.tableOptions }
+        : { ...DEFAULT_DASHBOARD_TABLE_OPTIONS };
+    },
+  },
+};
+</script>
+
+<style scoped>
+:deep(.card-body) {
+  padding: 1rem;
+}
+</style>