feat: error response interceptor

Services/client/src/components/GlobalErrorDialog.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useErrorStore } from '@/stores/error'
+import { useLoader } from '@/stores/loader'
+
+const { visible, title, msg } = storeToRefs(useErrorStore())
+const loader = useLoader()
+
+watch(visible, () => {
+  loader.hide()
+})
+</script>
+
+<template>
+  <q-dialog transition-show="scale" transition-hide="scale" v-model="visible">
+    <q-card style="width: 400px">
+      <q-card-section>
+        <span class="text-h6">
+          <q-icon name="error" color="negative" size="2.5rem" />{{
+            title
+          }}</span
+        >
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">{{ msg }}</q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-primary">
+        <q-space />
+        <q-btn
+          flat
+          v-close-popup
+          label="ปิด"
+          @click="() => (visible = !visible)"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>