From 5207eec99a9fe4c270a8f21ef9ba8a4f4a54b75b Mon Sep 17 00:00:00 2001
From: "sas.fajri" <sas.fajri@gmail.com>
Date: Thu, 7 May 2026 16:20:02 +0700
Subject: [PATCH] Add dashboard user MCU menu

---
 .../dashboard-user-mcu/api/dashboard_user.js  |  43 ++++
 .../components/oneDashboardUserMcuDetail.vue  | 194 ++++++++++++++++++
 .../components/oneDashboardUserMcuList.vue    | 115 +++++++++++
 test/vuex/dashboard-user-mcu/index.php        |  66 ++++++
 .../modules/dashboard_user.js                 | 132 ++++++++++++
 test/vuex/dashboard-user-mcu/store.js         |  12 ++
 6 files changed, 562 insertions(+)
 create mode 100644 test/vuex/dashboard-user-mcu/api/dashboard_user.js
 create mode 100644 test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.vue
 create mode 100644 test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuList.vue
 create mode 100644 test/vuex/dashboard-user-mcu/index.php
 create mode 100644 test/vuex/dashboard-user-mcu/modules/dashboard_user.js
 create mode 100644 test/vuex/dashboard-user-mcu/store.js

diff --git a/test/vuex/dashboard-user-mcu/api/dashboard_user.js b/test/vuex/dashboard-user-mcu/api/dashboard_user.js
new file mode 100644
index 0000000..5bbdccc
--- /dev/null
+++ b/test/vuex/dashboard-user-mcu/api/dashboard_user.js
@@ -0,0 +1,43 @@
+const URL = (window.BASE_URL ? window.BASE_URL : "") + "/one-api/dashboard_mcu/user/";
+
+async function post(endpoint, prm) {
+    try {
+        var resp = await axios.post(URL + endpoint, prm)
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            }
+        }
+        return resp.data
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        }
+    }
+}
+
+export async function save(prm) {
+    return post('save', prm)
+}
+
+export async function reset_password(prm) {
+    return post('reset_password', prm)
+}
+
+export async function assign_project(prm) {
+    return post('assign_project', prm)
+}
+
+export async function remove_project(prm) {
+    return post('remove_project', prm)
+}
+
+export async function search_project(prm) {
+    return post('search_project', prm)
+}
+
+export async function search(prm) {
+    return post('search', prm)
+}
diff --git a/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.vue b/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.vue
new file mode 100644
index 0000000..4f3c578
--- /dev/null
+++ b/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.vue
@@ -0,0 +1,194 @@
+<template>
+  <v-layout class="mb-2" column>
+    <v-dialog v-model="dialogsuccess" persistent max-width="320">
+      <v-card>
+        <v-card-title class="headline success white--text">Berhasil</v-card-title>
+        <v-card-text>{{ msgsuccess }}</v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" flat @click="closeDialogSuccess">OK</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-card>
+      <v-subheader red--text text--lighten-1>
+        DASHBOARD USER MCU
+        <v-spacer></v-spacer>
+        <v-btn small color="warning" @click="newForm">Baru</v-btn>
+        <v-btn small color="primary" @click="saveUser">Simpan</v-btn>
+        <v-btn small color="info" @click="resetPassword">Reset Password</v-btn>
+      </v-subheader>
+      <v-divider></v-divider>
+
+      <v-layout row wrap class="pa-2">
+        <v-flex xs12 pa-1>
+          <v-text-field label="Username*" v-model="username"></v-text-field>
+        </v-flex>
+        <v-flex xs12 pa-1>
+          <v-text-field label="Display Name" v-model="displayName"></v-text-field>
+        </v-flex>
+        <v-flex xs12 pa-1>
+          <v-text-field label="Password*" type="password" v-model="password"></v-text-field>
+        </v-flex>
+
+        <v-flex xs12 pa-1>
+          <v-autocomplete
+            v-model="selectedProject"
+            :items="projectItems"
+            :search-input.sync="projectKeyword"
+            item-text="label"
+            return-object
+            label="Cari Project (Nomor / Nama)"
+            no-filter
+          ></v-autocomplete>
+        </v-flex>
+        <v-flex xs12 pa-1>
+          <v-btn small color="primary" @click="assignProject">Assign Project</v-btn>
+        </v-flex>
+
+        <v-flex xs12 pa-1>
+          <div class="caption mb-1">Project Assigned</div>
+          <v-chip
+            v-for="(p, idx) in assignedProjects"
+            :key="idx"
+            class="mr-1 mb-1"
+            close
+            @input="removeProject(p)"
+          >
+            {{ p.project_number }} - {{ p.project_name }}
+          </v-chip>
+          <div v-if="assignedProjects.length == 0" class="grey--text caption">Belum ada project</div>
+        </v-flex>
+      </v-layout>
+    </v-card>
+  </v-layout>
+</template>
+
+<script>
+module.exports = {
+  data() {
+    return {
+      username: '',
+      displayName: '',
+      password: '',
+      selectedProject: null,
+      projectKeyword: ''
+    }
+  },
+  computed: {
+    selectedUser() { return this.$store.state.dashboard_user.selected_user || {} },
+    assignedProjects() { return this.selectedUser.projects || [] },
+    dialogsuccess() { return this.$store.state.dashboard_user.dialog_success },
+    msgsuccess() { return this.$store.state.dashboard_user.msg_success },
+    projectItems() {
+      return (this.$store.state.dashboard_user.project_options || []).map(p => {
+        return Object.assign({}, p, { label: p.project_number + ' - ' + p.project_name })
+      })
+    }
+  },
+  watch: {
+    selectedUser: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.username = val.User_Username || ''
+        this.displayName = val.User_DisplayName || ''
+        this.password = ''
+      }
+    },
+    projectKeyword(val) {
+      this.$store.dispatch('dashboard_user/search_project', { search: val || '' })
+    }
+  },
+  methods: {
+    closeDialogSuccess() {
+      this.$store.commit('dashboard_user/update_dialog_success', false)
+      this.refreshList()
+    },
+    refreshList() {
+      this.$store.dispatch('dashboard_user/search', {
+        username: this.$store.state.dashboard_user.search_username || '',
+        project: this.$store.state.dashboard_user.search_project && this.$store.state.dashboard_user.search_project.mcu_id ? this.$store.state.dashboard_user.search_project.mcu_id : 'all',
+        page: this.$store.state.dashboard_user.page || 1,
+        limit: this.$store.state.dashboard_user.limit || 20
+      })
+    },
+    validateBasic() {
+      if (!this.username) {
+        alert('Username wajib diisi')
+        return false
+      }
+      if (!this.password) {
+        alert('Password wajib diisi')
+        return false
+      }
+      return true
+    },
+    async saveUser() {
+      if (!this.validateBasic()) return
+      let resp = await this.$store.dispatch('dashboard_user/save', {
+        username: this.username,
+        password: this.password,
+        display_name: this.displayName
+      })
+      if (resp.status == 'OK') {
+        this.$store.commit('dashboard_user/update_selected_user', {})
+      } else {
+        alert(resp.message || 'Gagal simpan user')
+      }
+    },
+    async resetPassword() {
+      if (!this.validateBasic()) return
+      let resp = await this.$store.dispatch('dashboard_user/reset_password', {
+        username: this.username,
+        password: this.password
+      })
+      if (resp.status != 'OK') {
+        alert(resp.message || 'Gagal reset password')
+      }
+    },
+    async assignProject() {
+      if (!this.username) {
+        alert('Pilih atau isi username dulu')
+        return
+      }
+      if (!this.selectedProject || !this.selectedProject.mcu_id) {
+        alert('Pilih project dulu')
+        return
+      }
+      let resp = await this.$store.dispatch('dashboard_user/assign_project', {
+        username: this.username,
+        mcu_id: this.selectedProject.mcu_id
+      })
+      if (resp.status == 'OK') {
+        this.selectedProject = null
+        this.projectKeyword = ''
+        this.refreshList()
+      } else {
+        alert(resp.message || 'Gagal assign project')
+      }
+    },
+    async removeProject(project) {
+      if (!this.username || !project || !project.mcu_id) return
+      let resp = await this.$store.dispatch('dashboard_user/remove_project', {
+        username: this.username,
+        mcu_id: project.mcu_id
+      })
+      if (resp.status == 'OK') {
+        this.refreshList()
+      } else {
+        alert(resp.message || 'Gagal remove project')
+      }
+    },
+    newForm() {
+      this.$store.commit('dashboard_user/update_selected_user', {})
+      this.username = ''
+      this.displayName = ''
+      this.password = ''
+      this.selectedProject = null
+      this.projectKeyword = ''
+    }
+  }
+}
+</script>
diff --git a/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuList.vue b/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuList.vue
new file mode 100644
index 0000000..f5f09b4
--- /dev/null
+++ b/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuList.vue
@@ -0,0 +1,115 @@
+<template>
+  <v-layout class="fill-height" column>
+    <v-card class="mb-2 pa-2 searchbox">
+      <v-layout row wrap>
+        <v-flex xs5 pa-1>
+          <v-text-field label="Username" outline hide-details @keyup.enter="doSearch(1)" v-model="username"></v-text-field>
+        </v-flex>
+        <v-flex xs5 pa-1>
+          <v-autocomplete
+            label="Project"
+            outline
+            hide-details
+            return-object
+            item-text="label"
+            :items="projectItems"
+            :search-input.sync="projectSearch"
+            v-model="project"
+          ></v-autocomplete>
+        </v-flex>
+        <v-flex xs2 pa-1>
+          <v-btn color="primary" block @click="doSearch(1)">Cari</v-btn>
+        </v-flex>
+      </v-layout>
+    </v-card>
+
+    <v-card>
+      <v-layout row>
+        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+          <v-data-table :headers="headers" :items="users" :loading="isLoading" hide-actions class="elevation-1">
+            <template slot="items" slot-scope="props">
+              <td class="text-xs-left pa-2" @click="selectMe(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">{{ props.item.User_Username }}</td>
+              <td class="text-xs-left pa-2" @click="selectMe(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">{{ props.item.User_DisplayName || '-' }}</td>
+              <td class="text-xs-left pa-2" @click="selectMe(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">
+                <div v-if="props.item.projects && props.item.projects.length > 0">
+                  <div v-for="(p, idx) in props.item.projects" :key="idx">{{ p.project_number }} - {{ p.project_name }}</div>
+                </div>
+                <div v-else>-</div>
+              </td>
+            </template>
+          </v-data-table>
+          <div class="text-xs-center mt-2">
+            <v-pagination v-model="pageSync" :length="totalPages"></v-pagination>
+          </div>
+        </v-flex>
+      </v-layout>
+    </v-card>
+  </v-layout>
+</template>
+
+<script>
+module.exports = {
+  data() {
+    return {
+      headers: [
+        { text: 'USERNAME', align: 'Center', sortable: false, value: 'username', class: 'blue lighten-4' },
+        { text: 'NAMA', align: 'Center', sortable: false, value: 'display_name', class: 'blue lighten-4' },
+        { text: 'PROJECT', align: 'Center', sortable: false, value: 'project', class: 'blue lighten-4' }
+      ]
+    }
+  },
+  mounted() {
+    this.doSearch(1)
+  },
+  computed: {
+    users() { return this.$store.state.dashboard_user.users },
+    isLoading() { return this.$store.state.dashboard_user.search_status == 1 },
+    totalPages() {
+      let p = this.$store.state.dashboard_user.total_pages
+      return p > 0 ? p : 1
+    },
+    username: {
+      get() { return this.$store.state.dashboard_user.search_username },
+      set(val) { this.$store.commit('dashboard_user/update_search_username', val) }
+    },
+    project: {
+      get() { return this.$store.state.dashboard_user.search_project },
+      set(val) { this.$store.commit('dashboard_user/update_search_project', val || { mcu_id: 'all', project_number: 'All', project_name: 'Semua Project' }) }
+    },
+    projectSearch: {
+      get() { return this.$store.state.dashboard_user.project_keyword },
+      set(val) {
+        this.$store.commit('dashboard_user/update_project_keyword', val)
+        this.$store.dispatch('dashboard_user/search_project', { search: val || '' })
+      }
+    },
+    projectItems() {
+      let base = [{ mcu_id: 'all', project_number: 'All', project_name: 'Semua Project', label: 'All - Semua Project' }]
+      let records = (this.$store.state.dashboard_user.project_options || []).map(p => {
+        return Object.assign({}, p, { label: p.project_number + ' - ' + p.project_name })
+      })
+      return base.concat(records)
+    },
+    pageSync: {
+      get() { return this.$store.state.dashboard_user.page },
+      set(val) { this.doSearch(val) }
+    }
+  },
+  methods: {
+    doSearch(page) {
+      this.$store.dispatch('dashboard_user/search', {
+        username: this.username || '',
+        project: this.project && this.project.mcu_id ? this.project.mcu_id : 'all',
+        page: page || 1,
+        limit: this.$store.state.dashboard_user.limit
+      })
+    },
+    selectMe(item) {
+      this.$store.commit('dashboard_user/update_selected_user', item)
+    },
+    isSelected(item) {
+      return this.$store.state.dashboard_user.selected_user.User_ID == item.User_ID
+    }
+  }
+}
+</script>
diff --git a/test/vuex/dashboard-user-mcu/index.php b/test/vuex/dashboard-user-mcu/index.php
new file mode 100644
index 0000000..8871616
--- /dev/null
+++ b/test/vuex/dashboard-user-mcu/index.php
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Dashboard User MCU</title>
+  <link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
+  <link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
+</head>
+
+<body>
+  <div v-cloak id="app">
+    <v-app id="smartApp">
+      <one-navbar></one-navbar>
+      <v-content style="background:#F5E8DF!important">
+        <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+          <v-layout row wrap>
+            <v-flex xs6 class="left" fill-height pa-1>
+              <one-dashboard-user-mcu-list></one-dashboard-user-mcu-list>
+            </v-flex>
+            <v-flex xs6 class="right" fill-height pa-1>
+              <one-dashboard-user-mcu-detail></one-dashboard-user-mcu-detail>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-content>
+      <one-footer></one-footer>
+    </v-app>
+  </div>
+
+  <script src="../../../libs/vendor/moment.min.js"></script>
+  <script src="../../../libs/vendor/numeral.min.js"></script>
+  <script src="../../../libs/vendor/moment-locale-id.js"></script>
+  <script src="../../../libs/vendor/lodash.js"></script>
+  <script src="../../../libs/vendor/axios.min.js"></script>
+  <script src="../../../libs/vendor/vue.js"></script>
+  <script src="../../../libs/vendor/vuex.js"></script>
+  <script src="../../../libs/vendor/vuetify.js"></script>
+  <script src="../../../libs/vendor/httpVueLoader.js"></script>
+  <script src="../../../libs/one_global.js"></script>
+
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+  <script type="module">
+    import { store } from './store.js<?php echo $ts ?>';
+
+    new Vue({
+      store,
+      el: '#app',
+      components: {
+        'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+        'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+        'one-dashboard-user-mcu-list': httpVueLoader('./components/oneDashboardUserMcuList.vue'),
+        'one-dashboard-user-mcu-detail': httpVueLoader('./components/oneDashboardUserMcuDetail.vue')
+      }
+    })
+  </script>
+  <style>
+    [v-cloak] { display: none }
+  </style>
+</body>
+
+</html>
diff --git a/test/vuex/dashboard-user-mcu/modules/dashboard_user.js b/test/vuex/dashboard-user-mcu/modules/dashboard_user.js
new file mode 100644
index 0000000..86079c0
--- /dev/null
+++ b/test/vuex/dashboard-user-mcu/modules/dashboard_user.js
@@ -0,0 +1,132 @@
+import * as api from "../api/dashboard_user.js"
+
+export default {
+    namespaced: true,
+    state: {
+        users: [],
+        selected_user: {},
+        project_options: [],
+        search_username: '',
+        search_project: { mcu_id: 'all', project_number: 'All', project_name: 'Semua Project' },
+        project_keyword: '',
+        page: 1,
+        limit: 20,
+        total_rows: 0,
+        total_pages: 0,
+        search_status: 0,
+        save_status: 0,
+        save_error_message: '',
+        dialog_success: false,
+        msg_success: ''
+    },
+    mutations: {
+        update_users(state, val) { state.users = val },
+        update_selected_user(state, val) { state.selected_user = val },
+        update_project_options(state, val) { state.project_options = val },
+        update_search_username(state, val) { state.search_username = val },
+        update_search_project(state, val) { state.search_project = val },
+        update_project_keyword(state, val) { state.project_keyword = val },
+        update_page(state, val) { state.page = val },
+        update_limit(state, val) { state.limit = val },
+        update_total_rows(state, val) { state.total_rows = val },
+        update_total_pages(state, val) { state.total_pages = val },
+        update_search_status(state, val) { state.search_status = val },
+        update_save_status(state, val) { state.save_status = val },
+        update_save_error_message(state, val) { state.save_error_message = val },
+        update_dialog_success(state, val) { state.dialog_success = val },
+        update_msg_success(state, val) { state.msg_success = val }
+    },
+    actions: {
+        async search(context, prm) {
+            context.commit('update_search_status', 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.search(prm)
+                if (resp.status != 'OK') {
+                    context.commit('update_search_status', 3)
+                    context.commit('update_save_error_message', resp.message)
+                } else {
+                    let data = resp.data || {}
+                    context.commit('update_users', data.records || [])
+                    context.commit('update_total_rows', data.pagination ? data.pagination.total_rows : 0)
+                    context.commit('update_total_pages', data.pagination ? data.pagination.total_pages : 0)
+                    context.commit('update_page', data.pagination ? data.pagination.page : 1)
+                    context.commit('update_limit', data.pagination ? data.pagination.limit : 20)
+                    context.commit('update_search_status', 2)
+                }
+            } catch (e) {
+                context.commit('update_search_status', 3)
+                context.commit('update_save_error_message', e.message)
+            }
+        },
+        async search_project(context, prm) {
+            try {
+                prm.token = one_token()
+                let resp = await api.search_project(prm)
+                if (resp.status != 'OK') {
+                    context.commit('update_project_options', [])
+                } else {
+                    context.commit('update_project_options', resp.data.records || [])
+                }
+            } catch (e) {
+                context.commit('update_project_options', [])
+            }
+        },
+        async save(context, prm) {
+            context.commit('update_save_status', 1)
+            prm.token = one_token()
+            let resp = await api.save(prm)
+            if (resp.status != 'OK') {
+                context.commit('update_save_status', 3)
+                context.commit('update_save_error_message', resp.message)
+                return resp
+            }
+            context.commit('update_save_status', 2)
+            context.commit('update_msg_success', (resp.data && resp.data.message) ? resp.data.message : 'User berhasil disimpan')
+            context.commit('update_dialog_success', true)
+            return resp
+        },
+        async reset_password(context, prm) {
+            context.commit('update_save_status', 1)
+            prm.token = one_token()
+            let resp = await api.reset_password(prm)
+            if (resp.status != 'OK') {
+                context.commit('update_save_status', 3)
+                context.commit('update_save_error_message', resp.message)
+                return resp
+            }
+            context.commit('update_save_status', 2)
+            context.commit('update_msg_success', (resp.data && resp.data.message) ? resp.data.message : 'Password berhasil direset')
+            context.commit('update_dialog_success', true)
+            return resp
+        },
+        async assign_project(context, prm) {
+            context.commit('update_save_status', 1)
+            prm.token = one_token()
+            let resp = await api.assign_project(prm)
+            if (resp.status != 'OK') {
+                context.commit('update_save_status', 3)
+                context.commit('update_save_error_message', resp.message)
+                return resp
+            }
+            context.commit('update_save_status', 2)
+            context.commit('update_msg_success', (resp.data && resp.data.message) ? resp.data.message : 'Project berhasil di-assign')
+            context.commit('update_dialog_success', true)
+            return resp
+        },
+        async remove_project(context, prm) {
+            context.commit('update_save_status', 1)
+            prm.token = one_token()
+            let resp = await api.remove_project(prm)
+            if (resp.status != 'OK') {
+                context.commit('update_save_status', 3)
+                context.commit('update_save_error_message', resp.message)
+                return resp
+            }
+            context.commit('update_save_status', 2)
+            context.commit('update_msg_success', (resp.data && resp.data.message) ? resp.data.message : 'Project berhasil dihapus')
+            context.commit('update_dialog_success', true)
+            return resp
+        }
+    }
+}
diff --git a/test/vuex/dashboard-user-mcu/store.js b/test/vuex/dashboard-user-mcu/store.js
new file mode 100644
index 0000000..75c0dd4
--- /dev/null
+++ b/test/vuex/dashboard-user-mcu/store.js
@@ -0,0 +1,12 @@
+import dashboard_user from "./modules/dashboard_user.js";
+import system from "../../../apps/modules/system/system.js";
+
+export const store = new Vuex.Store({
+    modules: {
+        dashboard_user: dashboard_user,
+        system: system
+    },
+    state: {},
+    mutations: {},
+    actions: {}
+});