first commit

resources/js/Pages/Statistic/Index.vue

@@ -0,0 +1,58 @@
+<script setup>
+import AppLayout from "../../Layouts/AppLayout.vue";
+import {NList, NListItem, NFlex, NText, NH1, NTag} from 'naive-ui'
+
+const props = defineProps({
+    is_view_only: {
+        type: Boolean,
+        default: false
+    },
+    period: {
+        type: Object,
+        default: {}
+    },
+    group: {
+        type: Object,
+        default: {}
+    },
+    metrics: {
+        type: Object,
+        default: {}
+    },
+    form: {
+        type: Object,
+        default: {}
+    },
+})
+</script>
+
+<template>
+    <AppLayout>
+        <div class="max-w-6xl mx-auto mt-4 mb-4">
+            <div class="flex items-center justify-between">
+                <div>
+                    <n-h1 class="!mb-2">{{ group.name }}</n-h1>
+                    <n-text depth="3" v-if="group.description">
+                        {{ group.description }}
+                    </n-text>
+                </div>
+            </div>
+            <NList>
+                <NListItem v-for="metric in metrics.values">
+                    <NFlex justify="space-between" align="center" class="w-full px-4">
+                        <div>
+                            {{metric.item_name}}
+                        </div>
+                        <div>
+                            {{metric.sum}}
+                        </div>
+                    </NFlex>
+                </NListItem>
+            </NList>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+
+</style>