pgo-ui 1.1.47 → 1.1.49

package/src/pgo-components/pages/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="mx-auto m-4">
     <Breadcrumb class="mb-3" />
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <Card
         card-class="border-none"
         bg="vts-bg-surface-elevated"
@@ -55,15 +55,83 @@
           :height="280"
         />
       </Card>
+
+      <Card
+        card-class="border-none"
+        bg="vts-bg-surface-elevated"
+        padding="p-4"
+        shadow="shadow-lg"
+      >
+        <h3 :class="['text-lg font-semibold mb-2', lang === 'dv' ? 'faruma text-right' : 'eng-font text-left']">
+          {{ lang === 'dv' ? 'ޑިޕާޓްމަންޓް ތަފާސް ހިސާބު' : 'Department Overview' }}
+        </h3>
+        <BarChart
+          :series="departmentStats"
+          :categories="departments"
+          :colors="['#3B82F6', '#F59E0B']"
+          :height="280"
+        />
+      </Card>
+
+      <Card
+        card-class="border-none"
+        bg="vts-bg-surface-elevated"
+        padding="p-4"
+        shadow="shadow-lg"
+      >
+        <h3 :class="['text-lg font-semibold mb-2', lang === 'dv' ? 'faruma text-right' : 'eng-font text-left']">
+          {{ lang === 'dv' ? 'މައްސަލައިގެ ކޮމްޕްލެކްސިޓީ' : 'Case Complexity' }}
+        </h3>
+        <BubbleChart
+          :series="caseComplexity"
+          :xaxis-title="{ en: 'Duration (days)', dv: 'މުއްދަތު (ދުވަސް)' }"
+          :yaxis-title="{ en: 'Severity', dv: 'ސީރިއަސްކަން' }"
+          :colors="['#3B82F6', '#EF4444']"
+          :height="280"
+        />
+      </Card>
+
+      <Card
+        card-class="border-none"
+        bg="vts-bg-surface-elevated"
+        padding="p-4"
+        shadow="shadow-lg"
+      >
+        <h3 :class="['text-lg font-semibold mb-2', lang === 'dv' ? 'faruma text-right' : 'eng-font text-left']">
+          {{ lang === 'dv' ? 'ބައިތައް' : 'Category Breakdown' }}
+        </h3>
+        <TreemapChart
+          :series="categoryBreakdown"
+          :height="280"
+        />
+      </Card>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, inject } from 'vue'
-import { Breadcrumb, DonutChart, LineChart } from '../../components/pgo'
+import { computed, inject, onMounted, ref } from 'vue'
+import { Breadcrumb, BarChart, BubbleChart, DonutChart, LineChart, TreemapChart } from '../../components/pgo'
 import Card from '../../components/pgo/Card.vue'
 
+// Mount charts only once the grid container has a real width.
+// ResizeObserver fires after CSS layout (including drawer animations) settles,
+// so ApexCharts always measures correct container dimensions on first mount.
+const gridRef = ref(null)
+const chartsReady = ref(false)
+
+onMounted(() => {
+  let timer
+  const observer = new ResizeObserver(() => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      chartsReady.value = true
+      observer.disconnect()
+    }, 150)
+  })
+  if (gridRef.value) observer.observe(gridRef.value)
+})
+
 const { language } = inject('i18n')
 
 const props = defineProps({
@@ -91,4 +159,27 @@ const monthlyTrend = [
   { name: { en: 'Letters', dv: 'ސިޓީ' }, data: [40, 55, 70, 48, 90, 60] },
   { name: { en: 'Cases', dv: 'މައްސަލަ' }, data: [20, 35, 25, 50, 45, 65] }
 ]
+
+const departments = ['Dept A', 'Dept B', 'Dept C', 'Dept D', 'Dept E']
+
+const departmentStats = [
+  { name: { en: 'Letters', dv: 'ސިޓީ' }, data: [35, 50, 65, 40, 80] },
+  { name: { en: 'Cases', dv: 'މައްސަލަ' }, data: [15, 30, 20, 45, 35] }
+]
+
+const caseComplexity = [
+  { name: { en: 'Criminal', dv: 'ޖިނާއީ' }, data: [[10, 30, 20], [25, 50, 35], [40, 40, 25], [55, 60, 40], [70, 45, 30]] },
+  { name: { en: 'Civil', dv: 'މަދަނީ' }, data: [[15, 25, 15], [30, 35, 25], [45, 55, 20], [60, 30, 35], [75, 50, 45]] }
+]
+
+const categoryBreakdown = [
+  { data: [
+    { x: { en: 'Criminal', dv: 'ޖިނާއީ' }, y: 120 },
+    { x: { en: 'Civil', dv: 'މަދަނީ' }, y: 85 },
+    { x: { en: 'Family', dv: 'ޢާއިލީ' }, y: 60 },
+    { x: { en: 'Commercial', dv: 'ވިޔަފާރީ' }, y: 45 },
+    { x: { en: 'Administrative', dv: 'އިދާރީ' }, y: 30 },
+    { x: { en: 'Other', dv: 'އެހެނިހެން' }, y: 20 }
+  ]}
+]
 </script>

package/src/pgo-components/pages/ListView.vue

@@ -561,11 +561,14 @@ const fetchData = async (queryParams = {}) => {
     }
 }
 
-const formClose = () => {
+const formClose = (hasChanges = false) => {
     showDynamicForm.value = false
     editItemId.value = null
     LForm.value = {}
     formMode.value = ''
+    if (hasChanges) {
+        fetchData({ page: options.value.page, per_page: options.value.itemsPerPage })
+    }
 }
 // Handle options update from DataTable
 const handleOptionsUpdate = (newOptions) => {

package/dist/Radio-BUt_d2pT.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-BJ-lrjAf.js";
-export {
-  f as default
-};