changes

2026-06-20 14:48:35 +07:00
parent 7402e61906
commit b596ea0a0f
31 changed files with 5911 additions and 13522 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+**/*.min.js
+my-bulma-project.css
+my-bulma-project.css.map
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,24 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "objectWrap": "preserve",
+  "bracketSpacing": true,
+  "semi": true,
+  "experimentalOperatorPosition": "end",
+  "experimentalTernaries": false,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "singleAttributePerLine": true,
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "proseWrap": "preserve",
+  "endOfLine": "lf",
+  "insertPragma": false,
+  "printWidth": 120,
+  "requirePragma": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto"
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true
+}
--- a/app/components/LogIn.vue
+++ b/app/components/LogIn.vue
@@ -0,0 +1,105 @@
+<script setup>
+const emit = defineEmits(["close"]);
+const store = useStore();
+
+const userCreds = {
+  email: "user@gmail.com",
+  password: "99171123",
+};
+const adminCreds = {
+  email: "admin@gmail.com",
+  password: "1234567890",
+};
+
+const formValues = ref(adminCreds);
+
+function login() {
+  if (formValues.value.email.includes("admin")) store.login = adminRec;
+  else store.login = userRec;
+  window.location.assign("/");
+}
+const adminRec = {
+  id: 1,
+  avatar: null,
+  username: "admin",
+  fullname: "Admin",
+  type: 1,
+  type__code: "admin",
+  type__name: "Quản trị hệ thống",
+  is_admin: true,
+  token: "3j3ki2rvy",
+};
+const userRec = {
+  id: 2,
+  avatar: null,
+  username: "user",
+  fullname: "User",
+  type: 2,
+  type__code: "user",
+  type__name: "Nhân viên",
+  is_admin: false,
+  token: "b2z0as13x",
+};
+</script>
+
+<template>
+  <div>
+    <div class="buttons is-centered is-flex-wrap-nowrap pb-3">
+      <button
+        @click="formValues = userCreds"
+        class="button fs-14 is-fullwidth"
+        :class="formValues.email === userCreds.email && 'is-primary is-light has-text-weight-bold'"
+      >
+        Nhân viên
+      </button>
+      <button
+        @click="formValues = adminCreds"
+        class="button fs-14 is-fullwidth"
+        :class="formValues.email === adminCreds.email && 'is-primary is-light has-text-weight-bold'"
+      >
+        Admin
+      </button>
+    </div>
+    <form>
+      <div class="field">
+        <p class="control has-icons-left has-icons-right">
+          <input
+            class="input"
+            type="email"
+            placeholder="Email"
+            v-model="formValues.email"
+            disabled
+          />
+          <span class="icon is-small is-left">
+            <SvgIcon v-bind="{ name: 'email.svg', type: 'grey', size: 18 }" />
+          </span>
+        </p>
+      </div>
+      <div class="field">
+        <p class="control has-icons-left">
+          <input
+            class="input"
+            type="password"
+            placeholder="Mật khẩu"
+            v-model="formValues.password"
+            disabled
+          />
+          <span class="icon is-small is-left">
+            <SvgIcon v-bind="{ name: 'password.svg', type: 'grey', size: 18 }" />
+          </span>
+        </p>
+      </div>
+      <div class="field is-grouped is-grouped-centered">
+        <p class="control">
+          <button
+            @click="login"
+            type="button"
+            class="button is-success"
+          >
+            Đăng nhập
+          </button>
+        </p>
+      </div>
+    </form>
+  </div>
+</template>
--- a/app/components/TopMenu.vue
+++ b/app/components/TopMenu.vue
@@ -1,9 +1,12 @@
 <template>
-  <nav class="navbar is-fixed-top has-shadow px-3" role="navigation">
+  <nav
+    class="navbar is-fixed-top has-shadow px-3"
+    role="navigation"
+  >
    <div class="navbar-brand mr-5">
      <span class="navbar-item">
        <SvgIcon v-bind="{ name: 'dot.svg', size: 18, type: 'primary' }" />
-        <span class="fsb-20 has-text-primary">HRM</span>
+        <span class="fsb-18 has-text-primary">HRM</span>
      </span>
      <a
        role="button"
@@ -20,19 +23,39 @@
        <span aria-hidden="true"></span>
      </a>
    </div>
-    <div class="navbar-menu" id="navMenu">
-      <div class="navbar-start" style="min-width: 650px">
-        <template v-for="(v, i) in leftmenu" :key="i" :id="v.code">
-          <a class="navbar-item px-2" v-if="!v.submenu" @click="changeTab(v)">
+    <div
+      class="navbar-menu"
+      id="navMenu"
+    >
+      <div
+        class="navbar-start"
+        style="min-width: 650px"
+      >
+        <template
+          v-for="(v, i) in leftmenu"
+          :key="i"
+          :id="v.code"
+        >
+          <a
+            class="navbar-item px-2"
+            v-if="!v.submenu"
+            @click="changeTab(v)"
+          >
            <span
              :class="`fs-15 ${currentTab.code === v.code ? 'activetab' : ''}`"
-              style="font-weight: 600; padding: 3px 4px"
+              style="font-weight: 500; padding: 3px 5px"
            >
              {{ v[lang] }}
            </span>
          </a>
-          <div class="navbar-item has-dropdown is-hoverable" v-else>
-            <a class="navbar-item px-2" @click="changeTab(v)">
+          <div
+            class="navbar-item has-dropdown is-hoverable"
+            v-else
+          >
+            <a
+              class="navbar-item px-2"
+              @click="changeTab(v)"
+            >
              <span
                :class="`icon-text ${currentTab.code === v.code ? 'activetab' : ''}`"
                style="padding: 3px 4px"
@@ -62,144 +85,88 @@
        </template>
      </div>
      <div class="navbar-end">
-        <a class="navbar-item" @click="changeTab(tabConfig)" v-if="tabConfig">
-          <SvgIcon
-            v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"
-          ></SvgIcon>
+        <a
+          v-if="!$store.login"
+          @click="openLogInModal"
+          class="navbar-item fs-14 px-2"
+        >
+          <span
+            class="px-2 py-1"
+            style="border-radius: 6px; border: 1px solid #204853"
+            >Đăng nhập</span
+          >
        </a>
-        <a class="navbar-item" @click="openProfile()" v-if="avatar">
+        <a
+          class="navbar-item"
+          @click="changeTab(tabConfig)"
+          v-if="tabConfig"
+        >
+          <SvgIcon v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"></SvgIcon>
+        </a>
+        <a
+          class="navbar-item"
+          @click="openProfile()"
+          v-if="avatar && $store.login"
+        >
          <Avatarbox v-bind="avatar"></Avatarbox>
        </a>
      </div>
    </div>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = undefined"
+    />
  </nav>
 </template>
 <script setup>
-import { watch } from 'vue';
+import { watch } from "vue";
 const router = useRouter();
 const route = useRoute();
-const emit = defineEmits(['changetab', 'langChanged']);
+const emit = defineEmits(["changetab", "langChanged"]);
 const { $find, $filter, $findIndex, $store } = useNuxtApp();
 const lang = ref($store.lang);
-// let menu = $filter($store.common, { category: 'topmenu' });
-// console.log('menu', menu);
-const menu = [
-  {
-    id: 1,
-    category: 'topmenu',
-    classify: 'left',
-    code: 'dashboard',
-    vi: 'Dashboard',
-    link: null,
-    detail: {
-      base: 'Dashboard',
-      component: 'DashboardMaster',
-    },
-    index: 0,
-  },
-  {
-    id: 2,
-    category: 'topmenu',
-    classify: 'left',
-    code: 'hrm',
-    vi: 'Quản lý nhân sự',
-    link: null,
-    detail: {
-      base: 'HRM',
-      component: 'HRMMaster',
-    },
-    index: 0,
-  },
-  {
-    id: 3,
-    category: 'topmenu',
-    classify: 'left',
-    code: 'rollcall',
-    vi: 'Chấm công',
-    link: null,
-    detail: {
-      base: 'Rollcall',
-      component: 'RollcallMaster',
-    },
-    index: 0,
-  },
-  {
-    id: 4,
-    category: 'topmenu',
-    classify: 'left',
-    code: 'salary',
-    vi: 'Tính lương',
-    link: null,
-    detail: {
-      base: 'Salary',
-      component: 'SalaryMaster',
-    },
-    index: 0,
-  },
-  {
-    id: 5,
-    category: 'topmenu',
-    classify: 'left',
-    code: 'kpi_efficiency',
-    vi: 'KPI & Hiệu suất',
-    link: null,
-    detail: {
-      base: 'Kpi',
-      component: 'KpiMaster',
-    },
-    index: 0,
-  },
-  {
-    id: 6,
-    category: 'topmenu',
-    classify: 'left',
-    code: 'employee',
-    vi: 'Cổng nhân viên',
-    link: null,
-    detail: {
-      base: 'Employee',
-      component: 'EmployeeMaster',
-    },
-    index: 0,
-  },
-];
-if ($store.rights.length > 0) {
-  menu = menu.filter((v) => $findIndex($store.rights, { setting: v.id }) >= 0);
-}
-// if (menu.length === 0) {
-//   $snackbar(
-//     $store.lang === 'vi'
-//       ? 'Bạn không có quyền truy cập'
-//       : 'You do not have permission to access.',
-//   );
-// }
-// menu.map((v) => {
-//   let arr = $filter($store.common, { category: 'submenu', classify: v.code });
+
 // if ($store.rights.length > 0) {
-//     arr = arr.filter((x) => $findIndex($store.rights, { setting: x.id }) >= 0);
+//   menu = menu.filter((v) => $findIndex($store.rights, { setting: v.id }) >= 0);
 // }
-//   v.submenu = arr.length > 0 ? arr : null;
-// });
-const leftmenu = $filter(menu, { category: 'topmenu', classify: 'left' });
-let currentTab = ref(leftmenu.length > 0 ? leftmenu[0] : undefined);
+
+const showModal = ref();
+function openLogInModal() {
+  showModal.value = {
+    component: "LogIn",
+    width: "400px",
+    height: "176px",
+    title: "Đăng nhập",
+  };
+}
+
+let leftmenu = ref(
+  !$store.login
+    ? $store.menu.slice(0, -1)
+    : $store.login.fullname === "User"
+      ? $store.menu.filter((m) => m.view)
+      : $store.menu,
+);
+let currentTab = ref(leftmenu.value.length > 0 ? leftmenu.value[0] : undefined);
 const subTab = ref();
-const tabConfig = $find(menu, { code: 'configuration' });
+const tabConfig = $find($store.menu, { code: "configuration" });
 const avatar = ref();
 const isAdmin = ref();
 const handleClick = function () {
-  const target = document.getElementById('burger');
-  target.classList.toggle('is-active');
-  const target1 = document.getElementById('navMenu');
-  target1.classList.toggle('is-active');
+  const target = document.getElementById("burger");
+  target.classList.toggle("is-active");
+  const target1 = document.getElementById("navMenu");
+  target1.classList.toggle("is-active");
 };
 const closeMenu = function () {
  if (!document) return;
-  const target = document.getElementById('burger');
-  const target1 = document.getElementById('navMenu');
+  const target = document.getElementById("burger");
+  const target1 = document.getElementById("navMenu");
  if (!target) return;
-  if (target.classList.contains('is-active')) {
-    target.classList.remove('is-active');
-    target1.classList.remove('is-active');
+  if (target.classList.contains("is-active")) {
+    target.classList.remove("is-active");
+    target1.classList.remove("is-active");
  }
 };
 function changeTab(tab, subtab) {
@@ -208,35 +175,31 @@ function changeTab(tab, subtab) {
  }
  currentTab.value = tab;
  subTab.value = subtab;
-  emit('changetab', tab, subtab);
+  emit("changetab", tab, subtab);
  closeMenu();
-  let query = subtab
-    ? { tab: tab.code, subtab: subtab.code }
-    : { tab: tab.code };
+  let query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
  router.push({ query: query });
 }
 function openProfile() {
  let modal = {
-    component: 'user/Profile',
-    width: '1100px',
-    height: '360px',
-    title: $store.lang === 'vi' ? 'Thông tin cá nhân' : '"User profile"',
+    component: "user/Profile",
+    width: "1100px",
+    height: "360px",
+    title: $store.lang === "vi" ? "Thông tin cá nhân" : '"User profile"',
  };
-  $store.commit('showmodal', modal);
+  $store.commit("showmodal", modal);
 }
-let found = route.query.tab
-  ? $find(menu, { code: route.query.tab })
-  : undefined;
+let found = route.query.tab ? $find($store.menu, { code: route.query.tab }) : undefined;
 if (found || currentTab.value) changeTab(found || currentTab.value);
 onMounted(() => {
  if (!$store.login) return;
  avatar.value = {
    image: null,
    text: $store.login.fullname.substring(0, 1).toUpperCase(),
-    size: 'two',
-    type: 'findata',
+    size: "two",
+    type: "findata",
  };
-  isAdmin.value = $store.login.type__code === 'admin';
+  isAdmin.value = $store.login.type__code === "admin";
 });
 watch(
  () => $store.login,
@@ -245,10 +208,10 @@ watch(
    avatar.value = {
      image: null,
      text: $store.login.fullname.substring(0, 1).toUpperCase(),
-      size: 'two',
-      type: 'findata',
+      size: "two",
+      type: "findata",
    };
-    isAdmin.value = $store.login.type__code === 'admin';
+    isAdmin.value = $store.login.type__code === "admin";
    lang.value = $store.lang;
  },
 );
--- a/app/components/common/Avatarbox.vue
+++ b/app/components/common/Avatarbox.vue
@@ -4,8 +4,14 @@
    @click="$emit('justclick')"
    :style="image ? 'border: none' : ''"
  >
-    <figure class="image" v-if="image">
-      <img class="is-rounded" :src="`${$path()}download?name=${image}`" />
+    <figure
+      class="image"
+      v-if="image"
+    >
+      <img
+        class="is-rounded"
+        :src="`${$path()}download?name=${image}`"
+      />
    </figure>
    <div v-else>
      <span>{{ text }}</span>
@@ -14,19 +20,18 @@
 </template>
 <script>
 export default {
-  props: ['text', 'image', 'type', 'size'],
+  props: ["text", "image", "type", "size"],
 };
 </script>
 <style>
 .cbox-findata-two {
-  font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
-  border: 1px solid #e4e4e4;
+  border: 1px solid #d3d3d3;
  border-radius: 50%;
 }
 </style>
--- a/app/components/common/TextEditor.vue
+++ b/app/components/common/TextEditor.vue
@@ -1,393 +1,3 @@
-<template>
-  <ClientOnly>
-    <div ref="el"></div>
-  </ClientOnly>
-</template>
+<template>hey</template>

-<script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import 'ckeditor5/ckeditor5.css';
-import 'ckeditor5-premium-features/ckeditor5-premium-features.css';
-
-const el = ref(null);
-let editor = null;
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['update:modelValue']);
-const content = ref(props.modelValue || '');
-
-onMounted(async () => {
-  if (!process.client) return;
-
-  const {
-    ClassicEditor,
-    AccessibilityHelp,
-    Autoformat,
-    AutoImage,
-    AutoLink,
-    Autosave,
-    BalloonToolbar,
-    BlockQuote,
-    BlockToolbar,
-    Bold,
-    CKBox,
-    CKBoxImageEdit,
-    CloudServices,
-    Essentials,
-    FontBackgroundColor,
-    FontColor,
-    FontFamily,
-    FontSize,
-    Heading,
-    Highlight,
-    ImageBlock,
-    ImageCaption,
-    ImageInline,
-    ImageInsert,
-    ImageInsertViaUrl,
-    ImageResize,
-    ImageStyle,
-    ImageTextAlternative,
-    ImageToolbar,
-    ImageUpload,
-    Indent,
-    IndentBlock,
-    Italic,
-    Link,
-    LinkImage,
-    List,
-    ListProperties,
-    MediaEmbed,
-    Mention,
-    PageBreak,
-    Paragraph,
-    PasteFromOffice,
-    PictureEditing,
-    RemoveFormat,
-    SelectAll,
-    SpecialCharacters,
-    SpecialCharactersArrows,
-    SpecialCharactersCurrency,
-    SpecialCharactersEssentials,
-    SpecialCharactersLatin,
-    SpecialCharactersMathematical,
-    SpecialCharactersText,
-    Subscript,
-    Superscript,
-    Table,
-    TableCaption,
-    TableCellProperties,
-    GeneralHtmlSupport,
-    TableColumnResize,
-    TableProperties,
-    TableToolbar,
-    TextTransformation,
-    TodoList,
-    Underline,
-    Alignment,
-    Undo,
-  } = await import('ckeditor5');
-  const { ExportPdf, ExportWord, ImportWord } = await import('ckeditor5-premium-features');
-
-  editor = await ClassicEditor.create(el.value, {
-    // licenseKey: 'GPL',
-
-    plugins: [
-      AccessibilityHelp,
-      Autoformat,
-      AutoImage,
-      AutoLink,
-      Autosave,
-      BalloonToolbar,
-      BlockQuote,
-      BlockToolbar,
-      Bold,
-      CKBox,
-      CKBoxImageEdit,
-      CloudServices,
-      Essentials,
-      ExportPdf,
-      ExportWord,
-      FontBackgroundColor,
-      FontColor,
-      FontFamily,
-      FontSize,
-      Heading,
-      Highlight,
-      ImageBlock,
-      ImageCaption,
-      ImageInline,
-      ImageInsert,
-      ImageInsertViaUrl,
-      ImageResize,
-      ImageStyle,
-      ImageTextAlternative,
-      ImageToolbar,
-      ImageUpload,
-      ImportWord,
-      Indent,
-      IndentBlock,
-      Italic,
-      Link,
-      LinkImage,
-      List,
-      ListProperties,
-      MediaEmbed,
-      Mention,
-      PageBreak,
-      Paragraph,
-      PasteFromOffice,
-      PictureEditing,
-      RemoveFormat,
-      SelectAll,
-      SpecialCharacters,
-      SpecialCharactersArrows,
-      SpecialCharactersCurrency,
-      SpecialCharactersEssentials,
-      SpecialCharactersLatin,
-      SpecialCharactersMathematical,
-      SpecialCharactersText,
-      Subscript,
-      Superscript,
-      Table,
-      TableCaption,
-      TableCellProperties,
-      TableColumnResize,
-      TableProperties,
-      TableToolbar,
-      TextTransformation,
-      TodoList,
-      Underline,
-      Alignment,
-      GeneralHtmlSupport,
-      Undo,
-    ],
-
-    toolbar: [
-      'undo',
-      'redo',
-      '|',
-      'importWord',
-      'exportWord',
-      'exportPdf',
-      '|',
-      'heading',
-      '|',
-      'fontSize',
-      'fontFamily',
-      'fontColor',
-      'fontBackgroundColor',
-      '|',
-      'bold',
-      'italic',
-      'underline',
-      'subscript',
-      'superscript',
-      'removeFormat',
-      '|',
-      'alignment', // 👈 THÊM
-      '|',
-      'specialCharacters',
-      'pageBreak',
-      'link',
-      'insertImage',
-      'insertImageViaUrl',
-      'ckbox',
-      'mediaEmbed',
-      'insertTable',
-      'highlight',
-      'blockQuote',
-      '|',
-      'bulletedList',
-      'numberedList',
-      'todoList',
-      'outdent',
-      'indent',
-    ],
-    exportPdf: {
-      stylesheets: [
-        'https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css',
-        'https://cdn.ckeditor.com/ckeditor5-premium-features/43.2.0/ckeditor5-premium-features.css',
-      ],
-      fileName: 'export-pdf-demo.pdf',
-      converterOptions: {
-        format: 'Tabloid',
-        margin_top: '20mm',
-        margin_bottom: '20mm',
-        margin_right: '24mm',
-        margin_left: '24mm',
-        page_orientation: 'portrait',
-      },
-    },
-    exportWord: {
-      stylesheets: [
-        'https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css',
-        'https://cdn.ckeditor.com/ckeditor5-premium-features/43.2.0/ckeditor5-premium-features.css',
-      ],
-      fileName: 'export-word-demo.docx',
-      converterOptions: {
-        document: {
-          orientation: 'portrait',
-          size: 'Tabloid',
-          margins: {
-            top: '20mm',
-            bottom: '20mm',
-            right: '24mm',
-            left: '24mm',
-          },
-        },
-      },
-    },
-    balloonToolbar: ['bold', 'italic','fontFamily','fontSize', '|', 'alignment', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
-    blockToolbar: [
-      'fontSize',
-      'fontColor',
-      'fontBackgroundColor',
-      '|',
-      'bold',
-      'italic',
-      '|',
-      'link',
-      'insertImage',
-      'insertTable',
-      '|',
-      'bulletedList',
-      'numberedList',
-      'outdent',
-      'indent',
-    ],
-    fontFamily: {
-      supportAllValues: true,
-    },
-    fontSize: {
-      options: [10, 12,13, 14, 'default', 18, 20, 22],
-      supportAllValues: true,
-    },
-    heading: {
-      options: [
-        {
-          model: 'paragraph',
-          title: 'Paragraph',
-          class: 'ck-heading_paragraph',
-        },
-        {
-          model: 'heading1',
-          view: 'h1',
-          title: 'Heading 1',
-          class: 'ck-heading_heading1',
-        },
-        {
-          model: 'heading2',
-          view: 'h2',
-          title: 'Heading 2',
-          class: 'ck-heading_heading2',
-        },
-        {
-          model: 'heading3',
-          view: 'h3',
-          title: 'Heading 3',
-          class: 'ck-heading_heading3',
-        },
-        {
-          model: 'heading4',
-          view: 'h4',
-          title: 'Heading 4',
-          class: 'ck-heading_heading4',
-        },
-        {
-          model: 'heading5',
-          view: 'h5',
-          title: 'Heading 5',
-          class: 'ck-heading_heading5',
-        },
-        {
-          model: 'heading6',
-          view: 'h6',
-          title: 'Heading 6',
-          class: 'ck-heading_heading6',
-        },
-      ],
-    },
-    image: {
-      toolbar: [
-        'toggleImageCaption',
-        'imageTextAlternative',
-        '|',
-        'imageStyle:inline',
-        'imageStyle:wrapText',
-        'imageStyle:breakText',
-        '|',
-        'resizeImage',
-        '|',
-        'ckboxImageEdit',
-      ],
-    },
-    link: {
-      addTargetToExternalLinks: true,
-      defaultProtocol: 'https://',
-      decorators: {
-        toggleDownloadable: {
-          mode: 'manual',
-          label: 'Downloadable',
-          attributes: {
-            download: 'file',
-          },
-        },
-      },
-    },
-    list: {
-      properties: {
-        styles: true,
-        startIndex: true,
-        reversed: true,
-      },
-    },
-    mention: {
-      feeds: [
-        {
-          marker: '@',
-          feed: [],
-        },
-      ],
-    },
-    menuBar: {
-      isVisible: true,
-    },
-    table: {
-      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties'],
-    },
-    alignment: {
-      options: ['left', 'center', 'right', 'justify'],
-    },
-  });
-
-  // set data ban đầu
-  editor.setData(props.modelValue || '');
-
-  // khi thay đổi → emit ra ngoài
-  editor.model.document.on('change:data', () => {
-    const data = editor.getData();
-    emit('update:modelValue', data);
-  });
-});
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (editor && val !== editor.getData()) {
-      editor.setData(val || '');
-    }
-  },
-);
-onBeforeUnmount(async () => {
-  if (editor) {
-    await editor.destroy();
-    editor = null;
-  }
-});
-</script>
+<script setup></script>
--- a/app/components/marketing/email/dataGmail/EmailSent.vue
+++ b/app/components/marketing/email/dataGmail/EmailSent.vue
@@ -1,347 +1,5 @@
 <template>
-  <div class="container">
-    <div class="level mb-4">
-      <div class="level-left">
-        <div class="level-item">
-          <div>
-            <h2 class="title is-4">Sent Emails</h2>
-            <p class="subtitle is-6">
-              {{ loading ? "Loading..." : `${emailsSent.length} email(s) sent` }}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="level-right">
-        <div class="level-item">
-          <button
-            class="button is-light"
-            @click="getDataEmailsSent"
-            :disabled="loading"
-            :class="{ 'is-loading': loading }"
-          >
-            <span class="icon">
-              <RefreshCw :size="16" />
-            </span>
-            <span>Refresh</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="box">
-      <table class="table is-fullwidth is-striped is-hoverable">
-        <thead>
-          <tr>
-            <th>Emails</th>
-            <th>Subject</th>
-            <th>Content</th>
-            <th>Status</th>
-            <th>Sent At</th>
-            <th>Updated At</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-if="loading">
-            <tr v-for="index in 5" :key="index">
-              <td><div class="skeleton-line"></div></td>
-              <td><div class="skeleton-line"></div></td>
-              <td><div class="skeleton-line"></div></td>
-              <td><div class="skeleton-line"></div></td>
-              <td><div class="skeleton-line"></div></td>
-              <td><div class="skeleton-line"></div></td>
-            </tr>
-          </template>
-          <template v-else-if="emailsSent.length === 0">
-            <tr>
-              <td colspan="6">
-                <div class="has-text-centered py-6">
-                  <Mail :size="64" class="has-text-grey-light mb-4" />
-                  <p class="title is-5">No emails sent yet</p>
-                  <p class="subtitle is-6">Sent emails will appear here</p>
-                </div>
-              </td>
-            </tr>
-          </template>
-          <template v-else>
-            <tr v-for="email in emailsSent" :key="email.id" class="is-clickable" @click="handleViewDetail(email)">
-              <td>
-                <span>{{ truncateText(email.receiver, 40) }}</span>
-              </td>
-              <td>{{ truncateText(email.subject, 20) }}</td>
-              <td>
-                <div v-html="truncateText(stripHtml(extractMessageContent(email.content), 1000), 40)"></div>
-              </td>
-              <td>
-                <span v-if="email.status === 1" class="tag is-warning">
-                  <span class="icon is-small">
-                    <SvgIcon v-bind="{ name: 'loading.svg', type: 'white', size: 12 }" />
-                  </span>
-                  <span>Pending</span>
-                </span>
-                <span v-else-if="email.status === 2" class="tag is-success">
-                  <span class="icon is-small">
-                    <CheckCircle2 :size="12" />
-                  </span>
-                  <span>Sent</span>
-                </span>
-                <span v-else-if="email.status === 3" class="tag is-danger">
-                  <span class="icon is-small">
-                    <XCircle :size="12" />
-                  </span>
-                  <span>Failed</span>
-                </span>
-                <span v-else-if="email.status === 4" class="tag is-info">
-                  <span class="icon is-small">
-                    <Clock :size="12" />
-                  </span>
-                  <span>Scheduled</span>
-                </span>
-              </td>
-              <td>
-                <div>
-                  <p class="is-size-7">
-                    <span class="icon is-small">
-                      <Calendar :size="12" />
-                    </span>
-                    {{ formatDate(email.create_time) }}
-                  </p>
-                  <p class="is-size-7 has-text-grey">{{ getRelativeTime(email.create_time) }}</p>
-                </div>
-              </td>
-              <td>
-                <div>
-                  <p class="is-size-7">
-                    <span class="icon is-small">
-                      <Clock :size="12" />
-                    </span>
-                    {{ formatDate(email.update_time || "") }}
-                  </p>
-                  <p class="is-size-7 has-text-grey">{{ getRelativeTime(email.update_time || "") || "---" }}</p>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- Detail Modal -->
-    <div v-if="showDetailModal && selectedEmail" class="modal is-active">
-      <div class="modal-background" @click="showDetailModal = false"></div>
-      <div class="modal-card" style="width: 90%; max-width: 1200px">
-        <header class="modal-card-head">
-          <p class="modal-card-title">Email Details</p>
-          <button class="delete" @click="showDetailModal = false"></button>
-        </header>
-
-        <section class="modal-card-body">
-          <div class="field">
-            <label class="label">
-              Recipients ({{ selectedEmail.receiver.split(";").filter((e) => e.trim()).length }})
-            </label>
-            <div class="box" style="max-height: 150px; overflow-y: auto">
-              <p style="white-space: pre-wrap">{{ selectedEmail.receiver }}</p>
-            </div>
-          </div>
-
-          <div class="field">
-            <label class="label">Subject</label>
-            <p>{{ selectedEmail.subject }}</p>
-          </div>
-
-          <div class="field">
-            <label class="label">Content</label>
-            <div
-              class="box content"
-              style="max-height: 300px; overflow-y: auto"
-              v-html="selectedEmail.content || 'No content'"
-            ></div>
-          </div>
-
-          <div class="columns">
-            <div class="column">
-              <label class="label">Status</label>
-              <div>
-                <span v-if="selectedEmail.status === 1" class="tag is-warning">Pending</span>
-                <span v-else-if="selectedEmail.status === 2" class="tag is-success">Sent</span>
-                <span v-else-if="selectedEmail.status === 3" class="tag is-danger">Failed</span>
-                <span v-else-if="selectedEmail.status === 4" class="tag is-info">Scheduled</span>
-              </div>
-            </div>
-
-            <div class="column">
-              <label class="label">Sent At</label>
-              <p>{{ new Date(selectedEmail.create_time).toLocaleString("vi-VN") }}</p>
-            </div>
-
-            <div class="column">
-              <label class="label">Updated At</label>
-              <p>
-                {{ selectedEmail.update_time ? new Date(selectedEmail.update_time).toLocaleString("vi-VN") : "---" }}
-              </p>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
+  <div class="container"></div>
 </template>

-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { formatDistanceToNow } from "date-fns";
-import axios from "axios";
-import { useNuxtApp } from "nuxt/app";
-import { apiUrl } from '@/components/marketing/email/Email.utils';
-
-interface EmailSent {
-  id: number;
-  receiver: string;
-  subject: string;
-  content: string;
-  status: number;
-  create_time: string;
-  update_time?: string;
-}
-
-const nuxtApp = useNuxtApp();
-const $snackbar = nuxtApp.$snackbar as (message?: string) => void;
-
-const emailsSent = ref<EmailSent[]>([]);
-const loading = ref(true);
-const selectedEmail = ref<EmailSent | null>(null);
-const showDetailModal = ref(false);
-
-const extractMessageContent = (html: string | null | undefined): string => {
-  if (!html || html === "") return "No content";
-
-  try {
-    if (typeof window !== "undefined") {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, "text/html");
-      const messageContentDiv = doc.querySelector("div.message-content");
-
-      if (messageContentDiv) {
-        const content = messageContentDiv.innerHTML.trim();
-        if (content) {
-          return content;
-        }
-        return messageContentDiv.innerHTML;
-      }
-    } else {
-      const regex = /<div[^>]*class=["'][^"']*message-content[^"']*["'][^>]*>([\s\S]*?)<\/div>/i;
-      const match = html.match(regex);
-
-      if (match && match[1]) {
-        return match[1].trim();
-      }
-    }
-  } catch (error) {
-    console.error("Error extracting message content:", error);
-  }
-
-  return html;
-};
-
-const stripHtml = (html: string, maxLength: number = 1000): string => {
-  if (!html) return "";
-  const text = html.replace(/<[^>]*>/g, "");
-  return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
-};
-
-const getDataEmailsSent = async () => {
-  loading.value = true;
-  try {
-    const response = await axios.get(`${apiUrl}/Email_Sent/?sort=-id`);
-    if (response.status === 200) {
-      emailsSent.value = response.data.rows || response.data || [];
-    }
-  } catch (error) {
-    console.error("Error fetching sent emails:", error);
-    $snackbar("Failed to load sent emails");
-  } finally {
-    loading.value = false;
-  }
-};
-
-const formatDate = (dateString: string) => {
-  try {
-    if (dateString === "") return "";
-    const date = new Date(dateString);
-    return date.toLocaleString("vi-VN", {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  } catch {
-    return "Invalid date";
-  }
-};
-
-const getRelativeTime = (dateString: string) => {
-  try {
-    if (dateString === "") return "";
-    return formatDistanceToNow(new Date(dateString), { addSuffix: true });
-  } catch {
-    return "";
-  }
-};
-
-const handleViewDetail = (email: EmailSent) => {
-  selectedEmail.value = email;
-  showDetailModal.value = true;
-};
-
-const truncateText = (text: string | undefined | null, maxLength: number = 50): string => {
-  if (!text) return "";
-  const textStr = String(text);
-  if (textStr.length <= maxLength) return textStr;
-  return textStr.substring(0, maxLength) + "...";
-};
-
-onMounted(() => {
-  getDataEmailsSent();
-});
-</script>
-
-<style scoped>
-.is-clickable {
-  cursor: pointer;
-}
-
-.is-clickable:hover {
-  background-color: #f5f5f5;
-}
-
-.skeleton-line {
-  height: 20px;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-  border-radius: 4px;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.rotating {
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
+<script setup lang="ts"></script>
--- a/app/components/user/Logout.vue
+++ b/app/components/user/Logout.vue
@@ -2,14 +2,28 @@
  <div>
    <article class="message is-dark">
      <div class="message-body py-2 mt-5 has-text-dark fs-16">
-      {{$store.lang==='en'? 'Click the button below to log out of the system.' : 'Nhấn vào nút bên dưới để thoát khỏi hệ thống.'}}
+        {{
+          $store.lang === "en"
+            ? "Click the button below to log out of the system."
+            : "Nhấn vào nút bên dưới để thoát khỏi hệ thống."
+        }}
      </div>
    </article>
    <div class="mt-5 pt-3">
-    <button class="button is-primary has-text-white" @click="$requestLogin()">{{$store.lang==='en'? 'Sign out' : 'Đăng xuất'}}</button>
+      <button
+        class="button is-primary has-text-white"
+        @click="logout"
+      >
+        {{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}
+      </button>
    </div>
  </div>
 </template>
 <script setup>
-const { $store, $requestLogin } = useNuxtApp()
+const { $store, $requestLogin } = useNuxtApp();
+
+function logout() {
+  $store.login = undefined;
+  window.location.assign("/");
+}
 </script>
--- a/app/components/viewer/Rights.vue
+++ b/app/components/viewer/Rights.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { isEqual } from "es-toolkit";
+
+const store = useStore();
+const { $copy, $snackbar } = useNuxtApp();
+
+const localMenu = ref($copy(store.menu));
+
+function save() {
+  store.menu = $copy(localMenu.value);
+  localMenu.value = $copy(store.menu);
+  $snackbar("Đã cập nhật phân quyền");
+}
+</script>
+
+<template>
+  <div style="max-width: 800px; margin-inline: auto">
+    <table class="table is-fullwidth is-hoverable is-bordered fs-14 mb-4">
+      <thead>
+        <tr style="background-color: #e4fff0">
+          <th>
+            <SvgIcon v-bind="{ name: 'visibility.svg', size: 20 }" />
+          </th>
+          <th>Menu</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="m in localMenu"
+          :key="m.id"
+          @click="m.view = !m.view"
+          class="is-clickable"
+        >
+          <td>
+            <label class="checkbox">
+              <input
+                type="checkbox"
+                :disabled="localMenu.filter((menu) => menu.view).length === 1 && m.view"
+                v-model="m.view"
+              />
+            </label>
+          </td>
+          <td>
+            <div class="is-flex is-justify-content-space-between is-align-items-center">
+              <p>{{ m.vi }}</p>
+              <p class="fs-13 has-text-grey">{{ m.code }}</p>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="block">
+      <button
+        :disabled="isEqual(store.menu, localMenu)"
+        @click="save"
+        class="button is-primary"
+      >
+        <span class="icon">
+          <SvgIcon v-bind="{ name: 'save.svg', type: 'white', size: 19 }" />
+        </span>
+        <span>Lưu thay đổi</span>
+      </button>
+    </div>
+  </div>
+</template>
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -13,15 +13,19 @@
      @close="$store.removeSnackbar()"
    />

-    <Modal v-if="showmodal" v-bind="showmodal" @close="showmodal = undefined" />
+    <Modal
+      v-if="showmodal"
+      v-bind="showmodal"
+      @close="showmodal = undefined"
+    />
  </div>
 </template>

 <script setup>
-import { onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import SnackBar from '@/components/snackbar/SnackBar.vue';
-import Modal from '@/components/Modal.vue';
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+import SnackBar from "@/components/snackbar/SnackBar.vue";
+import Modal from "@/components/Modal.vue";
 const route = useRoute();
 const { $getdata, $store } = useNuxtApp();
 var authorized = ref(false);
@@ -29,10 +33,7 @@ const snackbar = ref(undefined);
 const showmodal = ref(undefined);
 function getViewport() {
  let viewport;
-  var width =
-    window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth;
+  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (width <= 768)
    viewport = 1; //'mobile'
  else if (width >= 769 && width <= 1023)
@@ -42,25 +43,24 @@ function getViewport() {
  else if (width >= 1216 && width <= 1407)
    viewport = 4; //'widescreen'
  else if (width >= 1408) viewport = 5; //'fullhd'
-  $store.commit('viewport', viewport);
+  $store.commit("viewport", viewport);
 }
 async function checkRedirect() {
-  console.log('checkRedirect');
+  console.info("checkRedirect");
  if (route.query.username && route.query.token) {
    let row = await $getdata(
-      'user',
+      "user",
      null,
      {
        filter: { username: route.query.username },
-        values:
-          'id,avatar,username,fullname,type,type__code,type__name,is_admin',
+        values: "id,avatar,username,fullname,type,type__code,type__name,is_admin",
      },
      true,
    );
-    if (row === 'error' || row === undefined) return;
+    if (row === "error" || row === undefined) return;
    else {
      row.token = route.query.token;
-      $store.commit('login', row);
+      $store.commit("login", row);
    }
  } else if (!$store.login) {
    return;
@@ -69,34 +69,14 @@ async function checkRedirect() {
 }
 async function checkLogin() {
  if ($store.login ? $store.login.token : false) {
-    $store.commit(
-      'rights',
-      await $getdata('grouprights', { group: $store.login.type }),
-    );
-    $store.commit(
-      'dealer',
-      await $getdata(
-        'dealer',
-        undefined,
-        {
-          filter: { user: $store.login.id },
-          values: 'id,code,name,phone,email,create_time',
-        },
-        true,
-      ),
-    );
-    let authtoken = await $getdata(
-      'token',
-      { token: $store.login.token },
-      undefined,
-      true,
-    );
+    $store.commit("rights", await $getdata("grouprights", { group: $store.login.type }));
+    let authtoken = await $getdata("token", { token: $store.login.token }, undefined, true);
    if (authtoken ? authtoken.expiry : true) return;
    authorized.value = true;
  }
 }
 onMounted(() => {
-  checkRedirect();
+  // checkRedirect();
  getViewport();
 });
 watch(
--- a/app/plugins/02-connection.js
+++ b/app/plugins/02-connection.js
@@ -144,8 +144,8 @@ export default defineNuxtPlugin(() => {
    },
    {
      name: "dealersetting",
-      url: "data/Biz_Setting/",
-      url_detail: "data-detail/Biz_Setting/",
+      url: "data/Common/",
+      url_detail: "data-detail/Common/",
      params: { sort: "index" },
    },
    {
@@ -250,8 +250,8 @@ export default defineNuxtPlugin(() => {
    {
      name: "common",
      commit: "common",
-      url: "data/Biz_Setting/",
-      url_detail: "data-detail/Biz_Setting/",
+      url: "data/Common/",
+      url_detail: "data-detail/Common/",
      params: { sort: "index" },
    },
    { name: "upload", url: "upload/", params: {} },
@@ -302,8 +302,8 @@ export default defineNuxtPlugin(() => {
    {
      name: "bizsetting",
      commit: "bizsetting",
-      url: "data/Biz_Setting/",
-      url_detail: "data-detail/Biz_Setting/",
+      url: "data/Common/",
+      url_detail: "data-detail/Common/",
      params: {},
    },
    {
@@ -1285,7 +1285,7 @@ export default defineNuxtPlugin(() => {
  /**
   * @param {'edit' | 'view'} right
   * @param {{ code?: string, category?: string }} options
-   * `code` & `category` from `Biz_Setting`
+   * `code` & `category` from `Common`
   * - If passed options, returns edit rights for `code` (useful for components used in modals in many different tabs)
   * - If not passed, returns edit rights for current tab & subtab
   * @returns {boolean}
--- a/app/plugins/03-api-loader.js
+++ b/app/plugins/03-api-loader.js
@@ -1,8 +1,6 @@
-export default defineNuxtPlugin(async (nuxtApp) => {
-  const { $getapi, $readyapi } = useNuxtApp()
-  let connlist = $readyapi(['moneyunit', 'datatype', 'filterchoice', 'colorchoice', 'textalign', 'placement', 'colorscheme', 
-    'filtertype', 'sorttype', 'tablesetting', 'settingchoice', 'sharechoice', 'menuchoice', 'settingtype', 'settingclass', 
-'sex', 'legaltype', 'cart'])
-  let filter = connlist.filter(v=>!v.ready)
-  if(filter.length>0) await $getapi(filter)
-})
+export default defineNuxtPlugin(async () => {
+  const { $getapi, $readyapi } = useNuxtApp();
+  let connlist = $readyapi(["common", "tablesetting"]);
+  let filter = connlist.filter((v) => !v.ready);
+  if (filter.length > 0) await $getapi(filter);
+});
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -1,10 +1,10 @@
 import { defineNuxtPlugin } from "#app";
-import Employee from '@/components/viewer/Employee.vue';
-import Kpi from '@/components/viewer/Kpi.vue';
-import Salary from '@/components/viewer/Salary.vue';
-import Dashboard from '@/components/viewer/Dashboard.vue';
-import HRM from '@/components/viewer/HRM.vue';
-import Rollcall from '@/components/viewer/Rollcall.vue';
+import Employee from "@/components/viewer/Employee.vue";
+import Kpi from "@/components/viewer/Kpi.vue";
+import Salary from "@/components/viewer/Salary.vue";
+import Dashboard from "@/components/viewer/Dashboard.vue";
+import HRM from "@/components/viewer/HRM.vue";
+import Rollcall from "@/components/viewer/Rollcall.vue";
 import Notebox from "~/components/common/Notebox.vue";
 import ProductCountbox from "~/components/common/ProductCountbox.vue";
 import SvgIcon from "~/components/SvgIcon.vue";
@@ -20,13 +20,9 @@ import ChipImage from "~/components/media/ChipImage.vue";
 import Avatarbox from "~/components/common/Avatarbox.vue";
 import Email from "~/components/marketing/email/Email.vue";
 import ViewList from "~/components/common/ViewList.vue";
-import InternalEntry from "~/components/modal/InternalEntry.vue"

 import Configuration from "~/components/maintab/Configuration.vue";
 import DebtView from "~/components/accounting/DebtView.vue";
-import ReportDaily from "~/components/report/Daily.vue";
-import ReportFormTo from "~/components/report/FromTo.vue";
-import ReportMonthly from "~/components/report/Monthly.vue";

 //format
 import FormatNumber from "~/components/datatable/format/FormatNumber.vue";
@@ -50,36 +46,18 @@ import ScrollBox from "~/components/datatable/ScrollBox.vue";
 import Product from "~/components/product/Product.vue";
 import Reservation from "~/components/modal/Reservation.vue";
 import UserMainTab from "~/components/modal/UserMainTab.vue";
-import TransactionFiles from "~/components/transaction/TransactionFiles.vue";
 import PaymentSchedule from "~/components/application/PaymentSchedule.vue";
-import TransactionView from "~/components/transaction/TransactionView.vue";
-import ContractPaymentUpload from "~/components/application/ContractPaymentUpload.vue";
 import CountWithAdd from "~/components/common/CountWithAdd.vue";
 import CalculationView from "~/components/application/CalculationView.vue";
 import InternalAccount from "~/components/accounting/InternalAccount.vue";
 import MenuAccount from "~/components/menu/MenuAccount.vue";
 import PhaseAdvance from "~/components/application/PhaseAdvance.vue";
-import ImageLayout from '@/components/media/ImageLayout.vue';
-import ProjectDocuments from '~/components/product/ProjectDocuments.vue';
-import ProductEdit from '~/components/product/ProductEdit.vue';
-
-import ProductHandover from '~/components/product/ProductHandover.vue'
-import Cart from '~/components/product/Cart.vue'
-import CountdownTimer from '~/components/common/CountdownTimer.vue'
-import CustomerInfo2 from '~/components/customer/CustomerInfo2.vue'
-import MenuFile from '~/components/menu/MenuFile.vue'
-import DebtProduct from '~/components/accounting/DebtProduct.vue'
-import DebtCustomer from '~/components/accounting/DebtCustomer.vue'
-import Due from '~/components/debt/Due.vue';
-import Overdue from '@/components/debt/Overdue.vue';
-import DebtSendEmail from '@/components/debt/DebtSendEmail.vue';
-import DebtCheckbox from '@/components/debt/DebtCheckbox.vue';
-import Allocate from '@/components/transaction/Allocate.vue';
-import Handover from '~/components/handover/Handover.vue'
-import HandoverSendEmail from '@/components/handover/HandoverSendEmail.vue';
-import HandoverCheckbox from '@/components/handover/HandoverCheckbox.vue';
-import HandoverStatus from '@/components/handover/HandoverStatus.vue';
-import CountDown from '@/components/dialog/CountDown.vue';
+import ImageLayout from "@/components/media/ImageLayout.vue";
+import Cart from "~/components/product/Cart.vue";
+import CountdownTimer from "~/components/common/CountdownTimer.vue";
+import CustomerInfo2 from "~/components/customer/CustomerInfo2.vue";
+import MenuFile from "~/components/menu/MenuFile.vue";
+import Rights from "@/components/viewer/Rights.vue";

 const components = {
  DebtView,
@@ -88,14 +66,10 @@ const components = {
  CustomerInfo2,
  CountdownTimer,
  PhaseAdvance,
-  InternalEntry,
  ViewList,
  ColorText,
  CalculationView,
  CountWithAdd,
-  ContractPaymentUpload,
-  TransactionView,
-  TransactionFiles,
  Reservation,
  Notebox,
  ProductCountbox,
@@ -118,9 +92,6 @@ const components = {
  MenuParam,
  ScrollBox,
  MenuPayment,
-  ReportDaily,
-  ReportFormTo,
-  ReportMonthly,
  DataModel,
  FormatNumber,
  FormatDate,
@@ -134,27 +105,15 @@ const components = {
  InternalAccount,
  MenuAccount,
  ImageLayout,
-  ProjectDocuments,
  Cart,
  MenuFile,
-  DebtProduct,
-  DebtCustomer,
-  Due,
-  Overdue,
-  DebtSendEmail,
-  DebtCheckbox,
-  ProductHandover,
-  Allocate,
-  Handover,
-  HandoverSendEmail,
-  HandoverCheckbox,
-  HandoverStatus,
  Dashboard,
  HRM,
  Rollcall,
  Salary,
  Kpi,
-  Employee
+  Employee,
+  Rights,
 };

 export default defineNuxtPlugin((nuxtApp) => {
--- a/app/plugins/ckeditor.client.js
+++ b/app/plugins/ckeditor.client.js
@@ -1,6 +0,0 @@
-import { defineNuxtPlugin } from '#app';
-import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(CkeditorPlugin);
-});
--- a/app/plugins/excelExporter.client.js
+++ b/app/plugins/excelExporter.client.js
@@ -1,323 +0,0 @@
-/**
- * plugins/excelExporter.js
- *
- * Xuất Excel từ DataTable với đầy đủ:
- *  - Group header (2 dòng, colspan/rowspan merge)
- *  - Stack split (array → nhiều sub-row, mỗi item 1 dòng)
- *  - splitTemplate, splitExpression, splitField, splitType currency
- *  - Template: FormatNumber, dayjs date, điều kiện row.type===x, Math.abs diff
- *  - Lọc cột action (DebtCheckbox, SvgIcon, modal...)
- *  - Màu header từ headerStyle / tablesetting
- *
- * Không cần cài thêm package — SheetJS load từ CDN lần đầu dùng (lazy).
- */
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Import SheetJS từ package đã cài (npm install xlsx)
-// ─────────────────────────────────────────────────────────────────────────────
-import * as _XLSX from 'xlsx'
-
-async function getXLSX() {
-  return _XLSX
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Helpers
-// ─────────────────────────────────────────────────────────────────────────────
-
-function stripHtml(str) {
-  if (!str) return ''
-  return String(str).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
-}
-
-function fmtCurrency(v) {
-  if (v === null || v === undefined || v === '') return ''
-  const n = Number(v)
-  if (isNaN(n)) return String(v)
-  return n.toLocaleString('vi-VN')
-}
-
-function fmtDate(raw, fmt = 'DD/MM/YYYY') {
-  if (!raw) return ''
-  try {
-    const d  = new Date(raw)
-    const dd = String(d.getDate()).padStart(2, '0')
-    const mm = String(d.getMonth() + 1).padStart(2, '0')
-    return fmt.replace('DD', dd).replace('MM', mm).replace('YYYY', String(d.getFullYear()))
-  } catch { return String(raw) }
-}
-
-function resolveSplitTemplate(template, item) {
-  return template.replace(/\{(\w+)\}/g, (_, key) => item[key] ?? '')
-}
-
-function evalSplitExpression(expression, item) {
-  try {
-    const expr = expression.replace(/\{(\w+)\}/g, (_, key) => {
-      const v = item[key]
-      return (v === null || v === undefined) ? 'null' : Number(v)
-    })
-    // eslint-disable-next-line no-new-func
-    return Function('"use strict"; return (' + expr + ')')()
-  } catch { return null }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Resolve text của 1 item trong stack array
-// ─────────────────────────────────────────────────────────────────────────────
-
-function getStackItemText(field, item) {
-  if (field.splitExpression) {
-    const val = evalSplitExpression(field.splitExpression, item)
-    if (val === null || val === undefined) return '—'
-    return field.splitType === 'currency' ? fmtCurrency(val) : String(val)
-  }
-  if (field.splitTemplate) return resolveSplitTemplate(field.splitTemplate, item)
-  const val = item[field.splitField]
-  if (val === null || val === undefined) return '—'
-  return field.splitType === 'currency' ? fmtCurrency(val) : String(val)
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Resolve text của 1 cell bình thường
-// ─────────────────────────────────────────────────────────────────────────────
-
-function getCellText(field, row) {
-  if (field.name === '__stt') return row.__stt ?? ''
-
-  if (field.split === 'stack') {
-    const arr = row[field.name]
-    if (!Array.isArray(arr) || arr.length === 0) return '—'
-    // Gom tất cả item thành 1 chuỗi ngăn cách bởi newline
-    return arr.map(item => getStackItemText(field, item)).join('\n')
-  }
-
-  if (field.template) return evalTemplate(field.template, row)
-
-  if (field.format === 'date' && row[field.name]) return fmtDate(row[field.name])
-
-  if (field.format === 'number' || field.type === 'currency') {
-    return row[field.name] !== null && row[field.name] !== undefined
-      ? fmtCurrency(row[field.name]) : ''
-  }
-
-  return row[field.name] ?? ''
-}
-
-function evalTemplate(template, row) {
-  // <FormatNumber v-bind="{value: row.xxx}" />
-  const fnMatch = template.match(/FormatNumber[^}]*value:\s*row\.(\w+)/)
-  if (fnMatch) {
-    const v = row[fnMatch[1]]
-    return v === null || v === undefined ? '' : fmtCurrency(v)
-  }
-
-  // row.type === N ? row.xxx : null
-  const condMatch = template.match(/row\.(\w+)\s*===\s*(\d+)\s*\?\s*row\.(\w+)\s*:\s*null/)
-  if (condMatch) {
-    const v = row[condMatch[1]] === Number(condMatch[2]) ? row[condMatch[3]] : null
-    return v === null || v === undefined ? '' : fmtCurrency(v)
-  }
-
-  // $dayjs(row.xxx).format('...')
-  const djMatch = template.match(/\$dayjs\(row\.(\w+)\)\.format\(['"]([^'"]+)['"]\)/)
-  if (djMatch) return fmtDate(row[djMatch[1]], djMatch[2])
-
-  // Math.abs($dayjs().startOf('day').diff(row.xxx, 'day'))
-  const diffMatch = template.match(/Math\.abs\(.*\.diff\(row\.(\w+),\s*'day'\)\)/)
-  if (diffMatch) {
-    try {
-      const d = new Date(row[diffMatch[1]]); d.setHours(0, 0, 0, 0)
-      const today = new Date(); today.setHours(0, 0, 0, 0)
-      return String(Math.abs(Math.round((today - d) / 86400000)))
-    } catch { return '' }
-  }
-
-  // {{row.xxx}} nội suy đơn giản
-  const interpolated = template.replace(/\{\{row\.(\w+)\}\}/g, (_, k) => row[k] ?? '')
-  return stripHtml(interpolated)
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Xây dựng group header row (mirror DataTable.vue groupHeaderRow computed)
-// ─────────────────────────────────────────────────────────────────────────────
-
-function buildGroupHeaderRow(fields) {
-  const result = []
-  let i = 0
-  while (i < fields.length) {
-    const f = fields[i]
-    if (!f.groupHeader) {
-      result.push({ label: stripHtml(f.label), colspan: 1, rowspan: 2, isGroup: false })
-      i++
-    } else {
-      let count = 1
-      while (i + count < fields.length && fields[i + count].groupHeader === f.groupHeader) count++
-      result.push({ label: f.groupHeader, colspan: count, rowspan: 1, isGroup: true })
-      i += count
-    }
-  }
-  return result
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Style helpers
-// ─────────────────────────────────────────────────────────────────────────────
-
-function hexFromStyle(headerStyle) {
-  const m = (headerStyle || '').match(/background-color:\s*#([0-9a-fA-F]{6})/i)
-  return m ? m[1].toUpperCase() : '204853'
-}
-
-function thinBorder() {
-  const s = { style: 'thin', color: { rgb: 'FFD0D0D0' } }
-  return { top: s, bottom: s, left: s, right: s }
-}
-
-function headerCellStyle(bgHex, fgHex) {
-  return {
-    fill:      { patternType: 'solid', fgColor: { rgb: 'FF' + bgHex } },
-    font:      { bold: true, color: { rgb: 'FF' + fgHex }, sz: 10, name: 'Arial' },
-    alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
-    border:    thinBorder(),
-  }
-}
-
-function dataCellStyle(alignRight, wrapText) {
-  return {
-    font:      { sz: 10, name: 'Arial' },
-    alignment: { horizontal: alignRight ? 'right' : 'left', vertical: 'top', wrapText },
-    border:    thinBorder(),
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Hàm xuất Excel chính
-// ─────────────────────────────────────────────────────────────────────────────
-
-async function exportToExcel({ fields, data, tablesetting = [], filename = 'export' }) {
-  const XLSX = await getXLSX()
-
-  const hasGroup    = fields.some(f => f.groupHeader)
-  const HEADER_ROWS = hasGroup ? 2 : 1
-
-  const fgHex = (tablesetting.find(s => s.code === 'header-font-color')?.detail || '#FFFFFF')
-    .replace('#', '').toUpperCase()
-
-  // ── Xây dựng AOA ──────────────────────────────────────────────────────────
-  const aoa = []
-
-  if (hasGroup) {
-    const groupRow = buildGroupHeaderRow(fields)
-    const row1 = []
-    const row2 = []
-    let colCursor = 0
-
-    groupRow.forEach(col => {
-      if (!col.isGroup) {
-        row1.push(col.label)
-        row2.push('')             // merge về row1 sau
-        colCursor++
-      } else {
-        row1.push(col.label)
-        for (let x = 1; x < col.colspan; x++) row1.push('')
-        const groupFields = fields.slice(colCursor, colCursor + col.colspan)
-        groupFields.forEach(f => row2.push(stripHtml(f.label)))
-        colCursor += col.colspan
-      }
-    })
-    aoa.push(row1)
-    aoa.push(row2)
-  } else {
-    aoa.push(fields.map(f => stripHtml(f.label)))
-  }
-
-  // ── Dữ liệu ────────────────────────────────────────────────────────────────
-  data.forEach((row, idx) => {
-    if (row.__stt === undefined) row.__stt = idx + 1
-
-    // Đếm số sub-row cần (bằng max length của các stack field)
-    const maxStack = Math.max(1, ...fields.map(f =>
-      f.split === 'stack' && Array.isArray(row[f.name]) ? (row[f.name].length || 1) : 1
-    ))
-
-    for (let si = 0; si < maxStack; si++) {
-      aoa.push(fields.map(f => {
-        // Cột stack: lấy item[si]
-        if (f.split === 'stack') {
-          const arr  = Array.isArray(row[f.name]) ? row[f.name] : []
-          const item = arr[si]
-          return item ? getStackItemText(f, item) : ''
-        }
-        // Cột thường: chỉ ghi ở sub-row đầu
-        return si === 0 ? String(getCellText(f, row) ?? '') : ''
-      }))
-    }
-  })
-
-  // ── Worksheet ──────────────────────────────────────────────────────────────
-  const ws = XLSX.utils.aoa_to_sheet(aoa)
-
-  // ── Merge cells ────────────────────────────────────────────────────────────
-  if (hasGroup) {
-    const merges    = []
-    const groupRow  = buildGroupHeaderRow(fields)
-    let c = 0
-    groupRow.forEach(col => {
-      if (!col.isGroup) {
-        merges.push({ s: { r: 0, c }, e: { r: 1, c } })                              // rowspan=2
-        c++
-      } else {
-        if (col.colspan > 1)
-          merges.push({ s: { r: 0, c }, e: { r: 0, c: c + col.colspan - 1 } })       // colspan
-        c += col.colspan
-      }
-    })
-    ws['!merges'] = merges
-  }
-
-  // ── Độ rộng cột ────────────────────────────────────────────────────────────
-  ws['!cols'] = fields.map(f => {
-    const labelLen = stripHtml(f.label).length
-    const minWch   = Math.max(f.minwidth ? f.minwidth / 7 : 10, labelLen + 2)
-    const maxWch   = f.maxwidth ? f.maxwidth / 7 : 40
-    return { wch: Math.min(minWch, maxWch) }
-  })
-
-  // ── Chiều cao dòng header ──────────────────────────────────────────────────
-  ws['!rows'] = Array.from({ length: HEADER_ROWS }, () => ({ hpt: 36 }))
-
-  // ── Style từng cell ────────────────────────────────────────────────────────
-  const wsRange = XLSX.utils.decode_range(ws['!ref'])
-  for (let R = wsRange.s.r; R <= wsRange.e.r; R++) {
-    for (let C = wsRange.s.c; C <= wsRange.e.c; C++) {
-      const addr = XLSX.utils.encode_cell({ r: R, c: C })
-      if (!ws[addr]) ws[addr] = { t: 's', v: '' }
-      const f = fields[C]
-      if (R < HEADER_ROWS) {
-        ws[addr].s = headerCellStyle(hexFromStyle(f?.headerStyle), fgHex)
-      } else {
-        const isRight = f?.textalign === 'right' || f?.splitType === 'currency'
-        const hasStack = f?.split === 'stack'
-        ws[addr].s = dataCellStyle(isRight, hasStack)
-      }
-    }
-  }
-
-  // ── Ghi file ───────────────────────────────────────────────────────────────
-  const wb = XLSX.utils.book_new()
-  XLSX.utils.book_append_sheet(wb, ws, 'Data')
-  XLSX.writeFile(wb, `${filename}.xlsx`)
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Nuxt Plugin
-// ─────────────────────────────────────────────────────────────────────────────
-
-export default defineNuxtPlugin(() => {
-  return {
-    provide: {
-      exportTableExcel: exportToExcel,
-    },
-  }
-})
--- a/app/stores/index.js
+++ b/app/stores/index.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";

-export const useStore = defineStore("maindev", {
+export const useStore = defineStore("hrm-dev", {
  state: () => ({
    viewport: undefined,
    login: undefined,
@@ -10,20 +10,103 @@ export const useStore = defineStore("maindev", {
    settings: [],
    showmodal: undefined,
    snackbar: undefined,
-    productdocument: undefined,
-    applicationstatus: undefined,
-    applicationproduct: undefined,
-    lastlegendfiltertab: 'Giỏ hàng',
-    layersetting: undefined,
    country: undefined,
    lang: "vi",
    branch: {},
    rights: [],
-    product: [],
-    cart: [],
-    selectedPaymentSchedulesForEmailInDue: [],
-    selectedPaymentSchedulesForEmailInOverdue: [],
-    selectedProductsForHandoverEmail: [],
+    menu: [
+      {
+        id: 1,
+        category: "topmenu",
+        classify: "left",
+        code: "dashboard",
+        vi: "Dashboard",
+        link: null,
+        view: true,
+        detail: {
+          base: "Dashboard",
+          component: "DashboardMaster",
+        },
+      },
+      {
+        id: 2,
+        category: "topmenu",
+        classify: "left",
+        code: "hrm",
+        vi: "Quản lý nhân sự",
+        link: null,
+        view: true,
+        detail: {
+          base: "HRM",
+          component: "HRMMaster",
+        },
+      },
+      {
+        id: 3,
+        category: "topmenu",
+        classify: "left",
+        code: "rollcall",
+        vi: "Chấm công",
+        link: null,
+        view: true,
+        detail: {
+          base: "Rollcall",
+          component: "RollcallMaster",
+        },
+      },
+      {
+        id: 4,
+        category: "topmenu",
+        classify: "left",
+        code: "salary",
+        vi: "Tính lương",
+        link: null,
+        view: false,
+        detail: {
+          base: "Salary",
+          component: "SalaryMaster",
+        },
+      },
+      {
+        id: 5,
+        category: "topmenu",
+        classify: "left",
+        code: "kpi_efficiency",
+        vi: "KPI & Hiệu suất",
+        link: null,
+        view: false,
+        detail: {
+          base: "Kpi",
+          component: "KpiMaster",
+        },
+      },
+      {
+        id: 6,
+        category: "topmenu",
+        classify: "left",
+        code: "employee",
+        vi: "Cổng nhân viên",
+        link: null,
+        view: false,
+        detail: {
+          base: "Employee",
+          component: "EmployeeMaster",
+        },
+      },
+      {
+        id: 7,
+        category: "topmenu",
+        classify: "left",
+        code: "rights",
+        vi: "Phân quyền",
+        link: null,
+        view: false,
+        detail: {
+          base: "Rights",
+          component: "RightsMaster",
+        },
+      },
+    ],
  }),

  actions: {
@@ -34,38 +117,10 @@ export const useStore = defineStore("maindev", {
    removeSnackbar() {
      this.snackbar = undefined;
    },
-    
-    updateProduct(products) {
-      this.product = products;
-    },
-    
-    updateCart(carts) {
-      this.cart = carts;
-    },
-    
-    updateSingleProduct(updatedProduct) {
-      const index = this.product.findIndex(p => p.id === updatedProduct.id);
-      if (index !== -1) {
-        this.product[index] = updatedProduct;
-      } else {
-        this.product.push(updatedProduct);
-      }
-    },
-    
-    removeProduct(productId) {
-      this.product = this.product.filter(p => p.id !== productId);
-    },
  },

  persist: {
-    pick: [
-      "token", 
-      "login", 
-      "lang", 
-      "dealer", 
-      "lastlegendfiltertab", 
-      "layersetting"
-    ],
+    pick: ["token", "login", "lang", "menu"],
    storage: piniaPluginPersistedstate.localStorage(),
  },
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,57 +5,41 @@
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
+    "format": "prettier . --write",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css"
  },
  "dependencies": {
-    "@aps_sdk/authentication": "^1.0.0",
-    "@aps_sdk/model-derivative": "^1.2.0",
-    "@aps_sdk/oss": "^1.2.2",
-    "@ckeditor/ckeditor5-vue": "^7.3.1",
    "@nuxt/image": "^1.11.0",
    "@pinia/nuxt": "^0.11.2",
-    "@tato30/vue-pdf": "^1.11.4",
    "@vue-email/components": "^0.0.21",
    "@vue-email/render": "^0.0.9",
    "@vueup/vue-quill": "^1.2.0",
    "axios": "^1.9.0",
-    "bowser": "^2.11.0",
-    "bulma": "^1.0.2",
-    "ckeditor5": "^43.3.1",
-    "ckeditor5-premium-features": "^43.3.1",
+    "bulma": "^1.0.4",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.13",
    "docx-preview": "^0.3.6",
    "es-toolkit": "^1.42.0",
    "highcharts": "^12.2.0",
    "highcharts-vue": "^2.0.1",
-    "ipx": "^3.0.1",
    "mammoth": "^1.9.1",
    "nuxt-qrcode": "^0.4.8",
    "pdfjs-dist": "^3.11.174",
    "pinia": "^3.0.3",
    "pinia-plugin-persistedstate": "^4.5.0",
-    "qs": "^6.14.0",
-    "quill": "^2.0.3",
    "sass": "^1.81.0",
-    "sharp": "^0.33.5",
    "socket.io-client": "^4.8.3",
-    "vue": "latest",
+    "vue": "^3.5.34",
    "vue-advanced-cropper": "^2.8.9",
-    "vue-pdf": "^4.3.0",
    "vue-router": "latest",
-    "vue3-datepicker": "^0.4.0",
-    "vue3-quill": "^0.3.1",
    "xlsx": "^0.18.5"
  },
-  "overrides": {
-    "vue": "latest"
-  },
  "devDependencies": {
-    "nuxt": "^4.2.0",
-    "typescript": "^5.9.3"
+    "nuxt": "^4.4.7",
+    "typescript": "^5.9.3",
+    "prettier": "3.8.3"
  }
 }
--- a/public/icon/cart.svg
+++ b/public/icon/cart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M7 22q-.825 0-1.412-.587T5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22m10 0q-.825 0-1.412-.587T15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22M6.15 6l2.4 5h7l2.75-5zM5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h11q.425 0 .713.288T19 16t-.288.713T18 17H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H2q-.425 0-.712-.288T1 3t.288-.712T2 2h1.625q.275 0 .525.15t.375.425zm3.35 7h7z"/></svg>
--- a/public/icon/email.svg
+++ b/public/icon/email.svg
@@ -1 +1 @@
-<?xml version="1.0" ?><svg data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><title/><path d="M116.73,31.83a3,3,0,0,0-4.2-.61L64.14,67.34a1,1,0,0,1-1.2,0L15.5,31.06a3,3,0,1,0-3.64,4.77L49.16,64.36,12.27,92.16A3,3,0,1,0,15.88,97L54.11,68.14l5.18,4a7,7,0,0,0,8.43.06l5.44-4.06L111.84,97a3,3,0,1,0,3.59-4.81L78.17,64.35,116.12,36A3,3,0,0,0,116.73,31.83Z"/><path d="M113,19H15A15,15,0,0,0,0,34V94a15,15,0,0,0,15,15h98a15,15,0,0,0,15-15V34A15,15,0,0,0,113,19Zm9,75a9,9,0,0,1-9,9H15a9,9,0,0,1-9-9V34a9,9,0,0,1,9-9h98a9,9,0,0,1,9,9Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zM20 8l-7.475 4.675q-.125.075-.262.113t-.263.037t-.262-.037t-.263-.113L4 8v10h16zm-8 3l8-5H4zM4 8v.25v-1.475v.025V6v.8v-.012V8.25zv10z"/></svg>
--- a/public/icon/money.svg
+++ b/public/icon/money.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M12.025 21q-.425 0-.712-.288T11.025 20v-1.15Q9.9 18.6 9.05 17.975t-1.375-1.75q-.175-.35-.012-.737t.587-.563q.35-.15.725.013t.575.537q.425.75 1.075 1.138t1.6.387q1.025 0 1.737-.462t.713-1.438q0-.875-.55-1.387t-2.55-1.163q-2.15-.675-2.95-1.612t-.8-2.288q0-1.625 1.05-2.525t2.15-1.025V4q0-.425.288-.713T12.025 3t.713.288t.287.712v1.1q.95.15 1.65.613t1.15 1.137q.225.325.088.725t-.563.575q-.35.15-.725.013t-.7-.488t-.763-.537t-1.087-.188q-1.1 0-1.675.488T9.825 8.65q0 .825.75 1.3t2.6 1q1.725.5 2.613 1.588t.887 2.512q0 1.775-1.05 2.7t-2.6 1.15V20q0 .425-.288.713t-.712.287"/></svg>
--- a/public/icon/password.svg
+++ b/public/icon/password.svg
@@ -1,12 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Iconly/Curved/Password</title>
-    <g id="Iconly/Curved/Password" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Password" transform="translate(2.749900, 2.750100)" stroke="#000000" stroke-width="1.5">
-            <path d="M7.9389,9.25 C7.9389,10.273 7.1099,11.102 6.0869,11.102 C5.0639,11.102 4.2349,10.273 4.2349,9.25 C4.2349,8.227 5.0639,7.398 6.0869,7.398 L6.0899,7.398 C7.1119,7.399 7.9389,8.228 7.9389,9.25 Z" id="Stroke-1"></path>
-            <polyline id="Stroke-3" points="7.9419 9.25 14.2599 9.25 14.2599 11.102"></polyline>
-            <line x1="11.4321" y1="11.102" x2="11.4321" y2="9.25" id="Stroke-5"></line>
-            <path d="M0,9.25 C0,2.313 2.313,0 9.25,0 C16.187,0 18.5,2.313 18.5,9.25 C18.5,16.187 16.187,18.5 9.25,18.5 C2.313,18.5 0,16.187 0,9.25 Z" id="Stroke-7"></path>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M3 17h18q.425 0 .713.288T22 18t-.288.713T21 19H3q-.425 0-.712-.288T2 18t.288-.712T3 17m1-5.55l-.475.85q-.15.275-.45.35t-.575-.075t-.35-.45t.075-.575l.475-.85h-.95q-.325 0-.537-.212T1 9.95t.213-.537t.537-.213h.95l-.475-.8q-.15-.275-.075-.575t.35-.45t.575-.075t.45.35l.475.8l.475-.8q.15-.275.45-.35t.575.075t.35.45t-.075.575l-.475.8h.95q.325 0 .538.213T7 9.95t-.213.538t-.537.212H5.3l.475.85q.15.275.075.575t-.35.45t-.575.075t-.45-.35zm8 0l-.475.85q-.15.275-.45.35t-.575-.075t-.35-.45t.075-.575l.475-.85h-.95q-.325 0-.537-.212T9 9.95t.213-.537t.537-.213h.95l-.475-.8q-.15-.275-.075-.575t.35-.45t.575-.075t.45.35l.475.8l.475-.8q.15-.275.45-.35t.575.075t.35.45t-.075.575l-.475.8h.95q.325 0 .537.213T15 9.95t-.213.538t-.537.212h-.95l.475.85q.15.275.075.575t-.35.45t-.575.075t-.45-.35zm8 0l-.475.85q-.15.275-.45.35t-.575-.075t-.35-.45t.075-.575l.475-.85h-.95q-.325 0-.537-.212T17 9.95t.213-.537t.537-.213h.95l-.475-.8q-.15-.275-.075-.575t.35-.45t.575-.075t.45.35l.475.8l.475-.8q.15-.275.45-.35t.575.075t.35.45t-.075.575l-.475.8h.95q.325 0 .538.213T23 9.95t-.213.538t-.537.212h-.95l.475.85q.15.275.075.575t-.35.45t-.575.075t-.45-.35z"/></svg>
--- a/public/icon/save.svg
+++ b/public/icon/save.svg
@@ -1 +1 @@
-<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g id="_133_save-02" data-name="133 save-02"><path d="M26,29H6a3,3,0,0,1-3-3V6A3,3,0,0,1,6,3H20.26a3,3,0,0,1,1.95.72L28,8.64A3,3,0,0,1,29,10.92V26A3,3,0,0,1,26,29ZM6,5A1,1,0,0,0,5,6V26a1,1,0,0,0,1,1H26a1,1,0,0,0,1-1V10.92a1,1,0,0,0-.35-.76L20.91,5.24A1,1,0,0,0,20.26,5Z"/><path d="M18,10H10A2,2,0,0,1,8,8V4A1,1,0,0,1,9,3H19a1,1,0,0,1,1,1V8A2,2,0,0,1,18,10ZM10,5V8h8V5Z"/><path d="M23,29H9a1,1,0,0,1-1-1V17a2,2,0,0,1,2-2H22a2,2,0,0,1,2,2V28A1,1,0,0,1,23,29ZM10,27H22V17H10Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h11.175q.4 0 .763.15t.637.425l2.85 2.85q.275.275.425.638t.15.762V19q0 .825-.587 1.413T19 21zM19 7.85L16.15 5H5v14h14zM12 18q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-5-8h7q.425 0 .713-.288T15 9V7q0-.425-.288-.712T14 6H7q-.425 0-.712.288T6 7v2q0 .425.288.713T7 10M5 7.85V19V5z"/></svg>
--- a/public/icon/visibility.svg
+++ b/public/icon/visibility.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.35 0-6.113-1.8t-4.362-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19"/></svg>
--- a/server/api/apsAuthToken.js
+++ b/server/api/apsAuthToken.js
@@ -1,3 +0,0 @@
-import { getViewerToken } from '../utils/aps.js';
-
-export default defineEventHandler(getViewerToken);
--- a/server/api/models/[urn]/status.js
+++ b/server/api/models/[urn]/status.js
@@ -1,25 +0,0 @@
-export default defineEventHandler(async (event) => {
-  const urn = getRouterParam(event, 'urn');
-  const manifest = await getManifest(urn);
-
-  if (!manifest) 
-    return { status: 'n/a' };
-   
-  let messages = [];
-  if (manifest.derivatives) {
-    for (const derivative of manifest.derivatives) {
-      messages = messages.concat(derivative.messages || []);
-      if (derivative.children) {
-        for (const child of derivative.children) {
-          messages.concat(child.messages || []);
-        }
-      }
-    }
-  }
-
-  return { 
-    status: manifest.status, 
-    progress: manifest.progress, 
-    messages 
-  };
-})
--- a/server/api/models/index.js
+++ b/server/api/models/index.js
@@ -1,37 +0,0 @@
-export default defineEventHandler(async (event) => {
-  if (event.method === 'GET') {
-    const objects = await listObjects();
-    return objects.map((o) => ({
-      name: o.objectKey,
-      urn: urnify(o.objectId),
-    }));
-  }
-  
-  if (event.method === 'POST') {
-    const formData = await readMultipartFormData(event);
-    if (!formData) {
-      throw createError({
-        statusCode: 400,
-        statusMessage: `formData should not be ${formData}`,
-      }) 
-    }
-
-    const file = formData[0];
-
-    try {
-      const obj = await uploadObject(file.filename, file.data);
-      await translateObject(urnify(obj.objectId), req.fields['model-zip-entrypoint']);
-
-      return {
-        name: obj.objectKey,
-        urn: urnify(obj.objectId),
-      }
-    } catch (error) {
-      throw createError({
-        statusCode: 400,
-        statusMessage: 'Upload file failed',
-        error,
-      }) 
-    }
-  }
-})
--- a/server/middleware/product-rewrite.ts
+++ b/server/middleware/product-rewrite.ts
@@ -1,9 +0,0 @@
-export default defineEventHandler((event) => {
-  const originalUrl = event.node.req.url || "";
-  if (originalUrl.startsWith("/product:")) {
-    const rewritten = originalUrl.replace("/product:", "/product/");
-    event.node.req.url = rewritten;
-    event._path = rewritten;
-  }
-});
-
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -1,3 +0,0 @@
-{
-  "extends": "../.nuxt/tsconfig.server.json"
-}
--- a/server/utils/aps.js
+++ b/server/utils/aps.js
@@ -1,101 +0,0 @@
-import { AuthenticationClient, Scopes } from '@aps_sdk/authentication';
-import { ModelDerivativeClient, View, OutputType } from '@aps_sdk/model-derivative';
-import { OssClient, Region, PolicyKey } from '@aps_sdk/oss';
-
-const apsClientId = 'PkqB8KlPGekLGKElPSjPhC9C2NGyXMN64QVhPSaqUhV46zEn';
-const apsClientSecret = 'Jr70CpXFaV2PRd9lux3ZXBKpSMwFsyO6xq1Y7AJy1Q4xcK6nZMLq20KB8SlipC4Z';
-const apsBucket = `${apsClientId.toLowerCase()}-basic-app`;
-const authenticationClient = new AuthenticationClient();
-const ossClient = new OssClient();
-const modelDerivativeClient = new ModelDerivativeClient();
-
-async function getInternalToken() {
-  const credentials = await authenticationClient.getTwoLeggedToken(
-    apsClientId,
-    apsClientSecret,
-    [Scopes.DataRead, Scopes.DataCreate, Scopes.DataWrite, Scopes.BucketCreate, Scopes.BucketRead],
-  );
-  return credentials.access_token;
-}
-
-export const getViewerToken = async () => {
-  return await authenticationClient.getTwoLeggedToken(apsClientId, apsClientSecret, [
-    Scopes.ViewablesRead,
-  ]);
-};
-
-export const ensureBucketExists = async (bucketKey) => {
-  const accessToken = await getInternalToken();
-  try {
-    await ossClient.getBucketDetails(bucketKey, { accessToken });
-  } catch (err) {
-    if (err.axiosError.response.status === 404) {
-      await ossClient.createBucket(
-        Region.Us,
-        { bucketKey: bucketKey, policyKey: PolicyKey.Persistent },
-        { accessToken },
-      );
-    } else {
-      throw err;
-    }
-  }
-};
-
-export const listObjects = async () => {
-  await ensureBucketExists(apsBucket);
-  const accessToken = await getInternalToken();
-  let resp = await ossClient.getObjects(apsBucket, { limit: 64, accessToken });
-  let objects = resp.items;
-  while (resp.next) {
-    const startAt = new URL(resp.next).searchParams.get('startAt');
-    resp = await ossClient.getObjects(apsBucket, { limit: 64, startAt, accessToken });
-    objects = objects.concat(resp.items);
-  }
-  return objects;
-};
-
-export const uploadObject = async (objectName, buffer) => {
-  await ensureBucketExists(apsBucket);
-  const accessToken = await getInternalToken();
-  const obj = await ossClient.uploadObject(apsBucket, objectName, buffer, { accessToken });
-  return obj;
-};
-
-export const translateObject = async (urn, rootFilename) => {
-  const accessToken = await getInternalToken();
-  const job = await modelDerivativeClient.startJob(
-    {
-      input: {
-        urn,
-        compressedUrn: !!rootFilename,
-        rootFilename,
-      },
-      output: {
-        formats: [
-          {
-            views: [View._2d, View._3d],
-            type: OutputType.Svf2,
-          },
-        ],
-      },
-    },
-    { accessToken },
-  );
-  return job.result;
-};
-
-export const getManifest = async (urn) => {
-  const accessToken = await getInternalToken();
-  try {
-    const manifest = await modelDerivativeClient.getManifest(urn, { accessToken });
-    return manifest;
-  } catch (err) {
-    if (err.axiosError.response.status === 404) {
-      return null;
-    } else {
-      throw err;
-    }
-  }
-};
-
-export const urnify = (id) => Buffer.from(id).toString('base64').replace(/=/g, '');
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M7 22q-.825 0-1.412-.587T5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22m10 0q-.825 0-1.412-.587T15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22M6.15 6l2.4 5h7l2.75-5zM5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h11q.425 0 .713.288T19 16t-.288.713T18 17H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H2q-.425 0-.712-.288T1 3t.288-.712T2 2h1.625q.275 0 .525.15t.375.425zm3.35 7h7z"/></svg>