@neutron.co.id/operasional-interfaces 1.16.0-beta.3 → 1.16.1-beta.1

package/build/@mock/mock.interfaces.d.ts

@@ -4,6 +4,7 @@ import '@neon.id/discovery/style.css';
 import '@neon.id/field/style.css';
 import '@neon.id/form/style.css';
 import '@neon.id/interfaces/style.css';
+import '@neon.id/media/style.css';
 import '@neon.id/editor/style.css';
 import '@neon.id/relation/style.css';
 import '@neon.id/display/style.css';

package/build/@office/common/Import/ImportForm.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { NeonAlert, NeonButton, NeonPart, useToast } from '@neon.id/interfaces'
+import {
+  type NFileType,
+  type NFileUpload,
+  NeonFile,
+  NeonFileDrop,
+} from '@neon.id/media'
+import type { Mightbe } from '@neon.id/types'
+import { StringUtil } from '@neon.id/utils'
+import { useTimeAgo } from '@vueuse/core'
+import { computed, ref, defineProps, defineEmits, type PropType } from 'vue'
+
+defineOptions({ name: 'ImportForm' })
+
+// Define props
+defineProps({
+  title: {
+    type: String,
+    default: 'Import Shift',
+  },
+  description: {
+    type: String,
+    default: 'Download template CSV lalu masukkan data shift, Kemudian import',
+  },
+  fileTypes: {
+    type: Array as PropType<NFileType[]>,
+    default: () => [],
+  },
+  icon: {
+    type: String,
+    default: 'duotone:file-import',
+  },
+  downloadLabel: {
+    type: String,
+    default: 'Unduh Template',
+  },
+  uploadLabel: {
+    type: String,
+    default: 'Upload',
+  },
+  importLabel: {
+    type: String,
+    default: 'Import',
+  },
+})
+
+// Emit events
+const emit = defineEmits(['file-uploaded', 'file-cancelled', 'imported'])
+
+const isUploading = ref(false)
+const willUpload = ref(false)
+const upload = ref<NFileUpload | null>(null)
+
+const uploaded = computed(() => {
+  return null
+})
+
+function onDrop(dropped: File[] | null) {
+  if (!dropped) return
+
+  willUpload.value = false
+
+  const file = dropped[0]
+  upload.value = {
+    file,
+    progress: 0,
+    isUploaded: false,
+    isUploading: false,
+  }
+
+  emit('file-uploaded', file)
+}
+
+function onCancel() {
+  upload.value = null
+  emit('file-cancelled')
+}
+
+function timeAgo(date: Mightbe<string>, word: string) {
+  if (!date) return `Never ${word}`
+  const time = useTimeAgo(date, {})
+  return `${StringUtil.capital(word)} ${time.value?.toLowerCase()}`
+}
+</script>
+
+<template>
+  <NeonPart :icon="icon" :title="title" use-wrapper is-expanded>
+    <NeonAlert
+      :icon="icon"
+      :title="title"
+      :description="description"
+      color="base"
+    />
+
+    <div class="button-cols">
+      <div class="button-row">
+        <NeonButton
+          :icon="icon"
+          :label="downloadLabel"
+          color="base"
+          size="sm"
+          is-rounded
+        />
+      </div>
+    </div>
+
+    <NeonFileDrop
+      v-if="(!upload && !uploaded) || willUpload"
+      :types="fileTypes"
+      @drop="onDrop"
+    />
+
+    <div v-else class="upload-items">
+      <NeonFile
+        v-if="upload"
+        :file="upload.file"
+        :progress="upload.progress"
+        :is-uploading="upload.isUploading || isUploading"
+        :is-uploaded="upload.isUploaded"
+      >
+        <template #actions>
+          <NeonButton
+            v-if="!upload.isUploaded"
+            size="xs"
+            icon-left="times"
+            display="fill"
+            color="base"
+            is-squared
+            @click="onCancel"
+          />
+        </template>
+      </NeonFile>
+    </div>
+
+    <div class="button-cols">
+      <div class="button-row">
+        <NeonButton
+          :icon="icon"
+          :label="uploadLabel"
+          color="base"
+          size="sm"
+          is-rounded
+        />
+      </div>
+
+      <div class="button-end">
+        <NeonButton
+          :icon="icon"
+          :label="importLabel"
+          color="dark"
+          size="md"
+          is-rounded
+          @click="$emit('imported')"
+        />
+      </div>
+    </div>
+  </NeonPart>
+</template>
+
+<style scoped>
+.button-cols {
+  @apply flex flex-col space-y-2 space-x-2 space-x-reverse;
+  @apply sm:flex-row sm:items-center;
+}
+
+.button-row {
+  @apply flex-1 flex items-center space-x-2;
+}
+
+.time-ago {
+  @apply font-medium text-sm text-fg-subdued leading-none;
+}
+
+.button-end {
+  @apply flex-1 flex sm:justify-end space-x-2;
+}
+
+.warning-label {
+  @apply font-medium text-sm text-fg-subdued leading-none;
+  @apply text-yellow-600;
+}
+</style>

package/build/@office/common/NeutronImportButton/NeutronImportButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { NeonButton } from '@neon.id/interfaces'
+import { useRouter } from 'vue-router'
+
+defineOptions({ name: 'NeutronImportButton' })
+
+const router = useRouter()
+
+async function redirectImportGrading() {
+  router.push({ path: '/jadwal/import' })
+}
+</script>
+
+<template>
+  <div id="grading-actions">
+    <NeonButton
+      color="info"
+      size="sm"
+      is-rounded
+      icon-left="duotone:file-import"
+      @click="redirectImportGrading"
+    >
+      Import Shift
+    </NeonButton>
+  </div>
+</template>
+
+<style scoped></style>

package/build/@office/common/NeutronImportButton/index.d.ts

@@ -0,0 +1 @@
+export { default as NeutronImportButton } from './NeutronImportButton.vue';

package/build/@office/common/NeutronImportButton/index.mjs

@@ -0,0 +1 @@
+export { default as NeutronImportButton } from "./NeutronImportButton.vue";

package/build/@office/common/index.d.ts

@@ -3,3 +3,4 @@ export * from './NeonTime';
 export * from './providers';
 export * from './OfficeSingleSync';
 export * from './PeriodButton';
+export * from './NeutronImportButton';

package/build/@office/common/index.mjs

@@ -3,3 +3,4 @@ export * from "./NeonTime/index.mjs";
 export * from "./providers/index.mjs";
 export * from "./OfficeSingleSync/index.mjs";
 export * from "./PeriodButton/index.mjs";
+export * from "./NeutronImportButton/index.mjs";

package/build/@office/common/providers/import/index.d.ts

@@ -0,0 +1 @@
+export * from './useImportShift';

package/build/@office/common/providers/import/index.mjs

@@ -0,0 +1 @@
+export * from "./useImportShift.mjs";

package/build/@office/common/providers/import/useImportShift.d.ts

@@ -0,0 +1,7 @@
+import type { NFileUpload } from '@neon.id/media';
+import type { Mightbe } from '@neon.id/types';
+export declare function useImportShift(): {
+    loadings: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>>;
+    onDownloadTemplateCsvFile: () => Promise<void>;
+    onUploadCsvFile: (upload: Mightbe<NFileUpload>) => Promise<void>;
+};

package/build/@office/common/providers/import/useImportShift.mjs

@@ -0,0 +1,137 @@
+import { useToastStore } from "@neon.id/interfaces";
+import { ref } from "vue";
+import { ofetch } from "ofetch";
+import Papa from "papaparse";
+import { useOperasionalOfficeStore } from "../office/index.mjs";
+import { useAuthStore } from "@neon.id/identitas-interfaces";
+export function useImportShift() {
+  const store = useOperasionalOfficeStore();
+  const toast = useToastStore();
+  const authStore = useAuthStore();
+  const loadings = ref(/* @__PURE__ */ new Set());
+  const isLoading = ref(false);
+  return {
+    loadings,
+    onDownloadTemplateCsvFile,
+    onUploadCsvFile
+  };
+  async function onDownloadTemplateCsvFile() {
+    console.log("onDownloadTemplateCsvFile: start");
+    isLoading.value = true;
+    try {
+      const response = await ofetch(
+        `${store.officeApiUrl}/downloadTemplateShift`,
+        {
+          method: "GET",
+          headers: {
+            "X-Neon-Key": "CH7JLKT6MW"
+          },
+          responseType: "text"
+        }
+      );
+      isLoading.value = false;
+      const blob = new Blob([response], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.setAttribute("href", url);
+      link.setAttribute("download", "template-shift.csv");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      console.log("onDownloadTemplateCsvFile: end");
+    } catch (error) {
+      if (error) {
+        console.error("onDownloadTemplateCsvFile: error", error);
+        toast.push({
+          content: "Template Shift gagal di download.",
+          canClose: true,
+          color: "danger"
+        });
+      }
+    }
+  }
+  async function onUploadCsvFile(upload) {
+    console.log("onUploadCsvFile: start");
+    console.log("upload:", upload?.file);
+    if (!upload?.file) {
+      console.error("CSV file not found.");
+      toast.push({
+        content: "File CSV tidak ditemukan.",
+        canClose: true,
+        color: "danger"
+      });
+      return;
+    }
+    Papa.parse(upload.file, {
+      header: true,
+      skipEmptyLines: true,
+      // Hindari baris kosong
+      complete: async (results) => {
+        const csvData = results.data;
+        console.log("csvData:", csvData);
+        if (!csvData.length) {
+          console.error("CSV file kosong atau tidak valid.");
+          toast.push({
+            content: "File CSV kosong atau format tidak valid.",
+            canClose: true,
+            color: "danger"
+          });
+          return;
+        }
+        const formData = new FormData();
+        formData.append("file", upload.file, upload.file.name || "shift.csv");
+        try {
+          isLoading.value = true;
+          const response = await ofetch(`${store.officeApiUrl}/importData`, {
+            method: "POST",
+            headers: {
+              "X-Neon-Key": "CH7JLKT6MW",
+              Authorization: `Bearer ${authStore.accessToken}`
+            },
+            body: formData
+          });
+          console.log("response:", response);
+          toast.push({
+            content: "Data shifting berhasil diimport.",
+            canClose: true,
+            color: "success"
+          });
+        } catch (error) {
+          console.error("onUploadCsvFile: error", error);
+          toast.push({
+            content: "Data Shift gagal diimport. Pastikan format data benar.",
+            canClose: true,
+            color: "danger"
+          });
+        } finally {
+          isLoading.value = false;
+        }
+      },
+      error: (err) => {
+        console.error("CSV parsing error:", err.message);
+        toast.push({
+          content: "Gagal membaca file CSV. Periksa formatnya.",
+          canClose: true,
+          color: "danger"
+        });
+      }
+    });
+  }
+  function notifyOk(content) {
+    toast.push({
+      id: "neu:operasional:importShift",
+      content,
+      color: "success",
+      icon: "check",
+      duration: 6e3
+    });
+  }
+  function notifyFail(content) {
+    toast.push({
+      id: "neu:operasional:importShift",
+      content,
+      color: "danger",
+      icon: "times"
+    });
+  }
+}

package/build/@office/common/providers/index.d.ts

@@ -1 +1,4 @@
 export * from './operasional';
+export * from './import';
+export * from './office';
+export * from './period';

package/build/@office/common/providers/index.mjs

@@ -1 +1,4 @@
 export * from "./operasional/index.mjs";
+export * from "./import/index.mjs";
+export * from "./office/index.mjs";
+export * from "./period/index.mjs";

package/build/@office/common/providers/office/index.d.ts

@@ -0,0 +1 @@
+export * from './office.store';

package/build/@office/common/providers/office/index.mjs

@@ -0,0 +1 @@
+export * from "./office.store.mjs";

package/build/@office/common/providers/office/office.store.d.ts

@@ -0,0 +1,7 @@
+export declare const useOperasionalOfficeStore: import("pinia").StoreDefinition<"neu:operasional:office:store", import("pinia")._UnwrapAll<Pick<{
+    officeApiUrl: import("vue").Ref<string | undefined>;
+}, "officeApiUrl">>, Pick<{
+    officeApiUrl: import("vue").Ref<string | undefined>;
+}, never>, Pick<{
+    officeApiUrl: import("vue").Ref<string | undefined>;
+}, never>>;

package/build/@office/common/providers/office/office.store.mjs

@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+export const useOperasionalOfficeStore = defineStore(
+  "neu:operasional:office:store",
+  () => {
+    const officeApiUrl = ref();
+    return {
+      officeApiUrl
+    };
+  }
+);

package/build/@office/common/providers/period/period.use.d.ts

@@ -1,6 +1,7 @@
 import { Query } from '@neon.id/query';
 export declare function usePeriod(): {
     query: import("vue").ComputedRef<Query>;
+    queryBranch: import("vue").ComputedRef<Query>;
     isLoading: import("vue").Ref<boolean>;
     date: import("vue").Ref<Date>;
     header: import("vue").ComputedRef<string>;

package/build/@office/common/providers/period/period.use.mjs

@@ -29,8 +29,23 @@ export function usePeriod() {
       filter
     });
   });
+  const queryBranch = computed(() => {
+    const period = PeriodUtil.period(
+      "startedAt",
+      startedAt.value,
+      endedAt.value
+    );
+    const filter = {
+      ...period,
+      branchIds: { $in: staff.value?.branchIds }
+    };
+    return Query.define({
+      filter
+    });
+  });
   return {
     query,
+    queryBranch,
     isLoading,
     date,
     header,

package/build/@office/config.mjs

@@ -3,7 +3,7 @@ import {
 } from "@neon.id/context/helpers";
 export const config = OfficeInterfaces.define({
   components: {
-    common: ["OfficeSingleSync", "PeriodButton"],
+    common: ["OfficeSingleSync", "PeriodButton", "NeutronImportButton"],
     models: {
       personalia: [
         // Attendance
@@ -107,6 +107,7 @@ export const config = OfficeInterfaces.define({
       "withOperasional",
       "useAttendanceStore",
       "useOperasionalStore",
+      "useOperasionalOfficeStore",
       "NOperasional",
       "useOperasional"
     ],

package/build/@office/models/personalia/shiftStaff/ShiftStaffCollectionBranch.vue

@@ -5,7 +5,7 @@ import { usePeriod } from '../../../common/providers/period'
 
 defineOptions({ name: 'ShiftStaffCollectionBranch' })
 
-const { isLoading, date, query } = usePeriod()
+const { isLoading, date, queryBranch } = usePeriod()
 
 async function onPeriodUpdate(period: any) {
   date.value = period.startedAt
@@ -22,7 +22,7 @@ async function onPeriodUpdate(period: any) {
     view="single-branchs-view"
     :displays="['table', 'calendar', 'timeline']"
     :is-loading="isLoading"
-    :query="query"
+    :query="queryBranch"
     @update:date="onPeriodUpdate"
     @update:period="onPeriodUpdate"
   ></ShiftStaffWrapper>

package/build/@office/models/personalia/shiftStaff/ShiftStaffCollectionStaff.vue

@@ -20,7 +20,7 @@ async function onPeriodUpdate(period: any) {
     scope="staff"
     path="/jadwal/period"
     :displays="['table', 'calendar', 'timeline']"
-    :excludes="['create']"
+    :excludes="['create', 'click']"
     :is-loading="isLoading"
     :query="query"
     @update:date="onPeriodUpdate"

package/build/@office/models/personalia/shiftStaff/ShiftStaffImport.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { NeonAlert, NeonButton, NeonPart } from '@neon.id/interfaces'
+import { type NFileUpload, NeonFile, NeonFileDrop } from '@neon.id/media'
+import type { Mightbe } from '@neon.id/types'
+import { StringUtil } from '@neon.id/utils'
+import { useTimeAgo } from '@vueuse/core'
+import { ref } from 'vue'
+import { useImportShift } from '../../../common/providers/'
+
+defineOptions({ name: 'ShiftStaffImport' })
+
+const { onDownloadTemplateCsvFile, onUploadCsvFile } = useImportShift()
+
+const isUploading = ref(false)
+const willUpload = ref(false)
+const upload = ref<NFileUpload>()
+
+function onDrop(dropped: File[] | null) {
+  if (!dropped) return
+
+  willUpload.value = false
+
+  const file = dropped[0]
+  upload.value = {
+    file,
+    progress: 0,
+    isUploaded: false,
+    isUploading: false,
+  }
+}
+
+function onCancel() {
+  upload.value = undefined
+}
+
+const goBack = () => {
+  window.history.back()
+}
+
+const handleImportCsvFile = async (upload: Mightbe<NFileUpload>) => {
+  await onUploadCsvFile(upload)
+  goBack()
+}
+
+function timeAgo(date: Mightbe<string>, word: string) {
+  if (!date) return `Never ${word}`
+  const time = useTimeAgo(date, {})
+  return `${StringUtil.capital(word)} ${time.value?.toLowerCase()}`
+}
+</script>
+<template>
+  <NeonPart
+    icon="duotone:file-import"
+    title="Import Shift"
+    use-wrapper
+    is-expanded
+  >
+    <div class="flex items-center gap-2">
+      <NeonButton
+        icon="duotone:arrow-left"
+        size="sm"
+        is-rounded
+        @click="goBack"
+      />
+      <NeonAlert
+        icon="duotone:file-import"
+        title="Import Jadwal Shift."
+        description="Download template CSV lalu masukkan data shift, Kemudian import"
+      />
+    </div>
+
+    <div class="button-cols">
+      <div class="button-row">
+        <NeonButton
+          icon="files"
+          label="Unduh Template"
+          color="base"
+          size="sm"
+          is-rounded
+          @click="onDownloadTemplateCsvFile"
+        />
+      </div>
+    </div>
+
+    <NeonFileDrop
+      v-if="!upload || willUpload"
+      :types="['csv']"
+      @drop="onDrop"
+    />
+
+    <div v-else class="upload-items">
+      <NeonFile
+        v-if="upload"
+        :file="upload.file"
+        :progress="upload.progress"
+        :is-uploading="upload.isUploading || isUploading"
+        :is-uploaded="upload.isUploaded"
+      >
+        <template #actions>
+          <NeonButton
+            v-if="!upload.isUploaded"
+            size="xs"
+            icon-left="times"
+            display="fill"
+            color="base"
+            is-squared
+            @click="onCancel"
+          />
+        </template>
+      </NeonFile>
+    </div>
+
+    <div class="button-cols">
+      <div class="button-row">
+        <!-- <NeonButton
+          icon="duotone:arrow-up-from-bracket"
+          label="Upload"
+          color="base"
+          size="sm"
+          is-rounded
+        /> -->
+      </div>
+      <div class="button-end">
+        <NeonButton
+          icon="duotone:file-import"
+          label="Import"
+          color="dark"
+          size="sm"
+          is-rounded
+          @click="handleImportCsvFile(upload)"
+        />
+      </div>
+    </div>
+  </NeonPart>
+</template>
+
+<style scoped>
+.button-cols {
+  @apply flex flex-col space-y-2 space-x-2 space-x-reverse;
+  @apply sm:flex-row sm:items-center;
+}
+
+.button-row {
+  @apply flex-1 flex items-center space-x-2;
+}
+
+.time-ago {
+  @apply font-medium text-sm text-fg-subdued leading-none;
+}
+
+.button-end {
+  @apply flex-1 flex sm:justify-end space-x-2;
+}
+
+.warning-label {
+  @apply font-medium text-sm text-fg-subdued leading-none;
+  @apply text-yellow-600;
+}
+</style>