@dasidev/dasi-ui 1.0.0

package/src/views/settings/AccountSettingsView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { client } from '@passwordless-id/webauthn';
+import api from '@/api/api';
+import { toast } from 'vue-sonner'
+import { LucideLockKeyhole, LucideRectangleEllipsis, LucideFingerprint, LucideEllipsisVertical, LucideTrash2, LoaderCircle } from 'lucide-vue-next'
+import SettingsItem from '@/components/settings/SettingsItem.vue'
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
+import PinInputerSetup from '@/components/helper/PinInputer.vue'
+import LoadingDialog from '@/components/loadings/LoadingDialog.vue'
+import { Switch } from '@/components/ui/switch'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import ChangePwd from '@/components/helper/ChangePwd.vue';
+
+const user: any = ref(null);
+const loadingUser = ref(true);
+
+/**
+ * El
+ *
+ */
+const loadingDialogEl: any = ref(null);
+
+
+onMounted(() => {
+  api.get('/auth/info').then((r) => {
+    user.value = r.data.data;
+  }).finally(() => {
+    loadingUser.value = false;
+  });
+})
+</script>
+
+<template>
+  <div class="mb-6">
+    <h1 class="text-2xl mb-2 font-medium">Akun</h1>
+    <p class="text-[16px] leading-normal">
+      Pengaturan akun pengguna.<br />Disini Anda dapat merubah alamat email dan kredensial otentikasi.
+    </p>
+    <div class="mb-4 border mt-3 opacity-50"></div>
+    <section class="w-96 pt-3 pb-6">
+      <template v-if="loadingUser">
+        <Skeleton class="w-24 h-3.5 mb-2"/>
+        <Skeleton class="w-[60%] h-5 mb-6"/>
+      </template>
+      <template v-else-if="user">
+        <SettingsItem :can-edit="true">
+          <template #label>Alamat Email</template>
+          <template #value>{{ user.email }}</template>
+        </SettingsItem>
+      </template>
+      <div class="font-medium ml-2 mb-1.5 text-sm">Otentikasi</div>
+      <div class="mb-2">
+        <ChangePwd>
+          <button class="border flex items-center rounded-md bg-white dark:bg-dasi_dark_bg3 px-3 py-2.5 w-[300px] font-medium hover:bg-slate-50 dark:hover:bg-dasi_dark_bg5 border-slate-300 dark:border-slate-500 hover:shadow-md transition">
+            <LucideLockKeyhole :size="20" class="mr-2 -mt-[2px]"/> Ganti Password
+          </button>
+        </ChangePwd>
+      </div>
+    </section>
+  </div>
+  <LoadingDialog ref="loadingDialogEl"/>
+</template>

package/src/views/settings/AuditLogsSettingsView.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import api from '@/api/api';
+import AccountDetailTimeline from '@/components/detail/AccountDetailTimeline.vue';
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
+import Pagination from '@/components/tables/Pagination.vue'
+import { Search, LoaderCircle, LucideDatabase } from 'lucide-vue-next'
+
+const loading = ref(true);
+const histories: any = ref([])
+const currentPage = ref(1);
+const itemsPerPage = ref(25);
+const totalData = ref(120);
+const searchTimer: any = ref(null);
+const searching = ref(false);
+const q = ref('');
+
+function searchActivity() {
+  searching.value = true;
+  if (searchTimer.value) clearTimeout(searchTimer.value);
+  searchTimer.value = setTimeout(() => {
+    getData();
+  }, 500);
+}
+
+function getData() {
+  api.get(`/auth/activity-log?page=${currentPage.value}&limit=${itemsPerPage.value}&search=${q.value}`).then((r) => {
+    console.log(r)
+    histories.value = r.data.data;
+    totalData.value = r.data.totalFilteredData;
+  }).finally(() => {
+    loading.value = false;
+    searching.value = false;
+  });
+}
+
+onMounted(() => {
+  getData();
+})
+</script>
+
+<template>
+  <div class="mb-6">
+    <h1 class="text-2xl mb-2 font-medium">Riwayat Aktivitas</h1>
+    <p class="text-[16px] leading-normal">
+      Riwayat aktivitas akun Anda pada aplikasi
+    </p>
+    <div class="border mt-3 opacity-50"></div>
+    <section class="pt-2 pb-6">
+      <div class="mb-6">
+        <div class="relative mb-3">
+          <input class="w-full border rounded-full h-10 text-[15px] px-5 pl-11 bg-white dark:bg-dark_bg5 transition hover:border-dasi_primary focus:bg-white focus:dark:bg-dark_bg6"
+            placeholder="Cari aktivitas..."
+            v-on:input="searchActivity"
+            v-model="q">
+          <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300">
+            <LoaderCircle class="animate-spin" :size="22" v-if="searching"/>
+            <Search :size="22" v-else/>
+          </div>
+        </div>
+        <section class="relative text-sm mb-6" v-if="loading">
+          <div class="absolute left-4 top-0 w-px h-full bg-gray-300"></div>
+          <div class="space-y-4">
+            <div class="relative flex items-center">
+              <div class="flex-none w-8 h-8 rounded-full overflow-hidden flex items-center justify-center bg-slate-100 dark:bg-dark_bg3">
+                <Skeleton class="w-[13px] h-[13px] rounded-full"></Skeleton>
+              </div>
+              <div class="ml-3 w-full">
+                <Skeleton class="h-2 w-[40%]"></Skeleton>
+              </div>
+            </div>
+            <div class="relative flex items-start">
+              <div class="flex-none flex items-center justify-center w-11 h-11 -ml-1.5 rounded-full border-4 bg-slate-100 dark:bg-dark_bg3 border-slate-100 overflow-hidden">
+                <Skeleton class="size-11 rounded-full"/>
+              </div>
+              <div class="ml-2 bg-slate-100 dark:bg-dark_bg3 px-4 py-3 border-slate-100 rounded-sm mt-1 mr-5 w-full">
+                <Skeleton class="h-3 w-[30%] mb-2"></Skeleton>
+                <Skeleton class="h-2 w-[60%] mb-2"></Skeleton>
+                <Skeleton class="h-2 w-[85%]"></Skeleton>
+              </div>
+            </div>
+            <div class="relative flex items-center">
+              <div class="flex-none w-8 h-8 rounded-full overflow-hidden flex items-center justify-center bg-slate-100 dark:bg-dark_bg3">
+                <Skeleton class="w-[13px] h-[13px] rounded-full"></Skeleton>
+              </div>
+              <div class="ml-3 w-full">
+                <Skeleton class="h-2 w-[40%]"></Skeleton>
+              </div>
+            </div>
+            <div class="relative flex items-center">
+              <div class="flex-none w-8 h-8 rounded-full overflow-hidden flex items-center justify-center bg-slate-100 dark:bg-dark_bg3">
+                <Skeleton class="w-[13px] h-[13px] rounded-full"></Skeleton>
+              </div>
+              <div class="ml-3 w-full">
+                <Skeleton class="h-2 w-[40%]"></Skeleton>
+              </div>
+            </div>
+          </div>
+        </section>
+        <div v-else-if="histories.length < 1" class="text-center pt-24 pb-20">
+          <LucideDatabase class="mx-auto mb-4" :stroke-width="1.5"/>
+          <h4 class="font-semibold text-[15px] mb-1">Data Tidak Tersedia</h4>
+          <p>
+            Tidak ada data ditemukan
+            <template v-if="q">dengan kata kunci pencarian <b><i>{{ q }}</i></b></template>
+            <template>untuk saat ini, silah coba kembali lagi nanti.</template>
+          </p>
+        </div>
+        <AccountDetailTimeline :timeline="histories" theme="theme2"/>
+        <div class="mb-4 border mt-8 opacity-50"></div>
+        <Pagination v-model:current-page="currentPage" v-model:items-per-page="itemsPerPage"
+          :total-data="totalData" v-on:get-data="getData" :loading="loading"/>
+      </div>
+    </section>
+  </div>
+</template>

package/src/views/settings/DeviceSettingsView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import api from '@/api/api';
+import { LucideTabletSmartphone } from 'lucide-vue-next'
+import moment from 'moment'
+
+const activeDevices: any = ref([]);
+const inactiveDevices: any = ref([]);
+
+onMounted(() => {
+  api.get('/auth/device/active').then((r) => {
+    activeDevices.value = r.data.data;
+  });
+  api.get('/auth/device/inactive').then((r) => {
+    inactiveDevices.value = r.data.data;
+  });
+})
+</script>
+
+<template>
+  <main>
+    <h1 class="text-2xl mb-2 font-medium">Perangkat</h1>
+    <p class="text-[16px] leading-normal max-w-[400px]">
+      Disini Anda dapat melihat perangkat yang pernah login ke aplikasi menggunakan akun Anda.
+    </p>
+    <div class="mb-4 border mt-3 opacity-50"></div>
+    <section class="pt-3 pb-6">
+      <div class="mb-6">
+        <div class="font-medium ml-2 mb-1.5 text-sm">Perangkat aktif</div>
+        <div v-for="(item, i) in activeDevices" :key="`act${i}`"
+          class="bg-white dark:bg-dasi_dark_bg3 border px-3 py-2.5 rounded-md flex mb-2">
+          <div class="flex-none pt-[1px]">
+            <LucideTabletSmartphone :size="22" :stroke-width="1.5"/>
+          </div>
+          <div class="ml-3">
+            <h4 class="font-medium">
+              {{ item.userAgent  || 'Unknown device'}}
+            </h4>
+            <p class="text-[13px] text-gray-500">
+              Logged in at {{ moment(item.createdAt).utc().subtract(7, 'hours').format('D MMM YYYY HH:mm') }}
+              <span class="mx-1">|</span>
+              Last seen {{ item.lastSeen ? moment(item.lastSeen).utc().subtract(7, 'hours').calendar() : 'Unknown' }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="mb-6">
+        <div class="font-medium ml-2 mb-1.5 text-sm">Riwayat rerangkat 30 data terakhir</div>
+        <div v-for="(item, i) in inactiveDevices" :key="`act${i}`"
+          class="bg-white border px-3 py-2.5 rounded-md flex mb-2">
+          <div class="flex-none pt-[1px]">
+            <LucideTabletSmartphone :size="22" :stroke-width="1.5"/>
+          </div>
+          <div class="ml-3">
+            <h4 class="font-medium">
+              {{ item.userAgent  || 'Unknown device'}}
+            </h4>
+            <p class="text-[13px] text-gray-500">
+              Logged in at {{ moment(item.createdAt).utc().subtract(7, 'hours').format('D MMM YYYY HH:mm') }}
+              <template v-if="item.loggedOutDate">
+                <span class="mx-1">|</span>
+                Logged out at {{ moment(item.loggedOutDate).utc().subtract(7, 'hours').format('D MMM YYYY HH:mm') }}
+              </template>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>

package/src/views/settings/MainSettingsView.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <section>
+    <h1 class="text-2xl mb-2 font-medium">Pengaturan</h1>
+    <p class="text-[16px] leading-normal">
+      Disini adalah halaman untuk pengaturan akun dan aplikasi secara general.<br />
+      Silahkan pilih pengaturan dari menu disamping.
+    </p>
+  </section>
+</template>

package/src/views/settings/ProfileSettingsView.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import api from '@/api/api';
+import SettingsItem from '@/components/settings/SettingsItem.vue'
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
+import FormInputerDialog from '@/components/dialog/FormInputerDialog.vue'
+import { DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { toast } from 'vue-sonner';
+
+const user: any = ref(null);
+const loadingUser = ref(true);
+
+const formSchema = ref({
+  inputField: {
+    type: 'text',
+    placeholder: 'Masukan data...',
+    rules: 'required',
+    default: '',
+    messages: {
+      required: 'Mohon masukkan data perubahan.'
+    },
+  },
+});
+const formError = ref<string | null>(null);
+const dialogOpen = ref(false);
+const formLoading = ref(false);
+const editTitle = ref('');
+const editField = ref('');
+const valueTmp = ref('');
+
+function editItem(title: string, field: string) {
+  editField.value = field;
+  editTitle.value = `Ubah ${title}`;
+  valueTmp.value = user.value[field];;
+  formSchema.value.inputField.default = user.value[field];
+  dialogOpen.value = true;
+}
+
+function editSubmited(formData: any) {
+  dialogOpen.value = false;
+  user.value[editField.value] = formData.inputField;
+  api.post('/auth/update', {
+    field: editField.value,
+    value: formData.inputField,
+  }).then((r) => {
+    toast('Perubahan sukses tersimpan');
+    if (editField.value === 'name') localStorage.setItem('dasi.user.name', formData.inputField);
+  }).catch((err) => {
+    toast.error('Perubahan gagal tersimpan');
+    user.value[editField.value] = valueTmp.value;
+  });
+}
+
+onMounted(() => {
+  api.get('/auth/info').then((r) => {
+    user.value = r.data.data;
+  }).finally(() => {
+    loadingUser.value = false;
+  });
+})
+</script>
+
+<template>
+  <div class="mb-6">
+    <h1 class="text-2xl mb-2 font-medium">Profil</h1>
+    <p class="text-[16px] leading-normal">
+      Pengaturan profil pengguna.<br />Disini Anda dapat merubah nama dan Nomor telp.
+    </p>
+    <div class="mb-4 border mt-3 opacity-50"></div>
+    <section class="w-96 pt-3 pb-6">
+      <template v-if="loadingUser">
+        <Skeleton class="w-24 h-3.5 mb-2"/>
+        <Skeleton class="w-[60%] h-5 mb-6"/>
+        <Skeleton class="w-24 h-3.5 mb-2"/>
+        <Skeleton class="w-[60%] h-5 mb-6"/>
+      </template>
+      <template v-else-if="user">
+        <SettingsItem :can-edit="true" v-on:edit="editItem('Nama', 'name')">
+          <template #label>Nama</template>
+          <template #value>{{ user.name }}</template>
+        </SettingsItem>
+        <SettingsItem :can-edit="true" v-on:edit="editItem('Nomor Telp.', 'phoneNumber')">
+          <template #label>Nomor Telp.</template>
+          <template #value>{{ user.phoneNumber || '-' }}</template>
+        </SettingsItem>
+        <SettingsItem :can-edit="false">
+          <template #label>Organisasi</template>
+          <template #value>{{ user.organization ? user.organization.name : '-' }}</template>
+        </SettingsItem>
+        <SettingsItem :can-edit="false">
+          <template #label>Jabatan</template>
+          <template #value>{{ user.employeePosition ? user.employeePosition.name : '-' }}</template>
+        </SettingsItem>
+      </template>
+    </section>
+  </div>
+  <FormInputerDialog v-model:form="formSchema" @submit="editSubmited"
+    v-model:error="formError" v-model:saving="formLoading" v-model:show="dialogOpen">
+    <template #header>
+      <DialogTitle>{{ editTitle }}</DialogTitle>
+      <DialogDescription class="text-sm">Silahkan masukkan data perubahan pada kolom di bawah</DialogDescription>
+    </template>
+  </FormInputerDialog>
+</template>

package/src/vueform/config/informasi-gudang.ts

@@ -0,0 +1,47 @@
+import { formatNumberIntl } from "@/lib/utils";
+import type { PageConfig } from "./types";
+
+const config: PageConfig = {
+  sortBy: { key: "t_master_epi_kapal.nama", by: "asc" },
+  showAddBtn: true,
+  dataName: (item: any) => {
+    return item.masterEpiKapal?.nama || item.nama || "Kapal";
+  },
+  filter: {
+    "t_master_epi_kapal.jenis_kapal_code": {
+      type: "dasi_v2_config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Jenis Kapal",
+      placeholder: "Pilih jenis kapal...",
+      sortKey: "t_master_epi_kapal.t_master_epi_kapal.jenis_kapal_code",
+      filterType: "eq",
+      cellRender(_: number, row: any) {
+        return row.masterEpiKapal?.jenisKapal?.name;
+      }
+    },
+    t_pemilik_id: {
+      type: "dasi_v2_organization",
+      accessLevel: "transportir",
+      label: "Transportir",
+      placeholder: "Pilih transportir...",
+      sortKey: "pemilik.name",
+      filterType: "eq",
+      cellRender(_: number, row: any) {
+        return row.pemilik?.name;
+      }
+    },
+    status_kapal: {
+      type: "select",
+      label: "Status",
+      placeholder: "Pilih status...",
+      filterType: "eq",
+      native: false,
+      items: [
+        { value: "true", label: "Aktif" },
+        { value: "false", label: "Tidak Aktif" }
+      ],
+    }
+  }
+};
+
+export default config;

package/src/vueform/config/test-schema.ts

@@ -0,0 +1,8 @@
+import { formatNumberIntl } from "@/lib/utils";
+import type { PageConfig } from "./types";
+
+const config: PageConfig = {
+  showAddBtn: true,
+}
+
+export default config;