@neutron.co.id/operasional-interfaces 1.14.9 → 1.15.0

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

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

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

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

package/build/@common/composables/period.use.d.ts

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

package/build/@common/composables/period.use.mjs

@@ -0,0 +1,40 @@
+import { DateUtil } from "@neon.id/utils/date";
+import { PeriodUtil } from "@neon.id/utils/period";
+import { Query } from "@neon.id/query";
+import { computed, ref } from "vue";
+import { useOperasional } from "../../../@package/@office/common";
+export function usePeriod() {
+  const { staff } = useOperasional();
+  const isLoading = ref(false);
+  const date = ref(/* @__PURE__ */ new Date());
+  const startedAt = computed(() => DateUtil.startOfWeek(date.value));
+  const endedAt = computed(() => DateUtil.endOfWeek(date.value));
+  const header = computed(() => {
+    const options = { pattern: "eeee, dd MMMM yyyy" };
+    const start = DateUtil.format(startedAt.value, options);
+    const end = DateUtil.format(endedAt.value, options);
+    return `Sesi Tanggal: ${start} - ${end}`;
+  });
+  const query = computed(() => {
+    const period = PeriodUtil.period(
+      "startedAt",
+      startedAt.value,
+      endedAt.value
+    );
+    const filter = {
+      ...period,
+      shiftingStaffId: staff.value?.id
+    };
+    return Query.define({
+      filter
+    });
+  });
+  return {
+    query,
+    isLoading,
+    date,
+    header,
+    startedAt,
+    endedAt
+  };
+}

package/build/@common/config.d.ts

@@ -0,0 +1,5 @@
+import { CoreInterface, type TCoreInterfaceSelector } from '@neon.id/context/helpers';
+export type TCommonFeature = string;
+export interface TOperasionalCommonInterfaceOptions extends TCoreInterfaceSelector<TCommonFeature> {
+}
+export declare const config: CoreInterface<string>;

package/build/@common/config.mjs

@@ -0,0 +1,16 @@
+import {
+  CoreInterface
+} from "@neon.id/context/helpers";
+export const config = CoreInterface.define({
+  components: {
+    common: [],
+    features: {}
+  },
+  imports: {
+    common: [
+      // Composables
+      "usePeriod"
+    ],
+    features: {}
+  }
+});

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

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

package/build/@common/index.mjs

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

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

@@ -119,5 +119,8 @@ function onUpdate(newValue: Date) {
   .vc-time-icon {
     @apply hidden;
   }
+  .vc-time-header {
+    @apply hidden;
+  }
 }
 </style>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { NeonButton } from '@neon.id/interfaces'
+import { DateUtil } from '@neon.id/utils/date'
+import type { NCalendar } from '@neon.id/display'
+import { usePeriod } from '../../../@common'
+import { computed } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'update:period', period: Partial<NCalendar.PeriodData>): void
+  (e: 'update:date', period: Partial<NCalendar.PeriodData>): void
+  (e: 'sync'): void
+}>()
+
+const { date, startedAt, endedAt } = usePeriod()
+
+const dates = computed(() => {
+  return { startedAt: startedAt.value, endedAt: endedAt.value }
+})
+
+thisWeek()
+
+function thisWeek() {
+  date.value = DateUtil.startOfWeek(new Date()) || new Date()
+  emit('update:date', dates.value)
+}
+
+function prevWeek() {
+  date.value = DateUtil.substract(date.value, { weeks: 1 }) || date.value
+  emit('update:date', dates.value)
+}
+
+function nextWeek() {
+  date.value = DateUtil.add(date.value, { weeks: 1 }) || date.value
+  emit('update:date', dates.value)
+}
+
+defineOptions({ name: 'PeriodButton' })
+</script>
+<template>
+  <div class="period-button">
+    <NeonButton
+      icon-left="chevron-left"
+      size="xs"
+      color="dark"
+      @click="prevWeek"
+    />
+    <NeonButton
+      label="Saat Ini"
+      icon-left="calendar"
+      size="xs"
+      color="dark"
+      @click="thisWeek"
+    />
+    <NeonButton
+      icon-right="chevron-right"
+      size="xs"
+      color="dark"
+      @click="nextWeek"
+    />
+  </div>
+</template>
+
+<style scoped>
+.period-button {
+  @apply flex flex-row gap-2;
+}
+</style>

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

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

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

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

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

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

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

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

package/build/@office/common/utils/util.date.d.ts

@@ -1,5 +1,7 @@
 import 'dayjs/esm/locale/en.js';
 import 'dayjs/esm/locale/id.js';
 export declare class DateUtil {
+    static formatTz: any;
+    static startOf: any;
     static get day(): any;
 }

package/build/@office/common/utils/util.date.mjs

@@ -11,6 +11,8 @@ dayjs.extend(advancedFormat);
 dayjs.extend(isoWeek);
 dayjs.locale("id");
 export class DateUtil {
+  static formatTz;
+  static startOf;
   static get day() {
     return dayjs;
   }

package/build/@office/config.mjs

@@ -3,7 +3,7 @@ import {
 } from "@neon.id/context/helpers";
 export const config = OfficeInterfaces.define({
   components: {
-    common: ["OfficeSingleSync"],
+    common: ["OfficeSingleSync", "PeriodButton"],
     models: {
       personalia: [
         // Attendance
@@ -12,6 +12,7 @@ export const config = OfficeInterfaces.define({
         "AttendanceStaff",
         "AttendanceManager",
         "AttendanceSupervisor",
+        "AttendanceDelegate",
         // Check In
         "CheckInCollection",
         "CheckInSingle",
@@ -47,11 +48,22 @@ export const config = OfficeInterfaces.define({
         // Responsibility Type
         "ResponsibilityTypeCollection",
         "ResponsibilityTypeSingle",
-        //Shift
+        // Shift
         "ShiftCollection",
         "ShiftSingle",
-        "ShiftStaff",
         "ShiftAdministrator",
+        "ShiftSupervisor",
+        // Shift Type
+        "ShiftTypeCollection",
+        "ShiftTypeSingle",
+        // Shift Staff
+        "ShiftStaffCollection",
+        "ShiftStaffCollectionStaff",
+        "ShiftStaffCollectionBranch",
+        "ShiftStaffSingleBranch",
+        "ShiftStaffSingle",
+        "ShiftStaffWrapper",
+        "ShiftStaffDisplay",
         // Situation
         "SituationCollection",
         "SituationSingle",

package/build/@office/models/personalia/attendance/AttendanceCollection/AttendanceCollection.vue

@@ -54,7 +54,6 @@ function transformItem(item: any) {
 }
 
 function onCalendarPeriodUpdate(period: NCalendar.PeriodData) {
-  console.log('calendar', period)
   emit('update:period', period)
 }
 </script>

package/build/@office/models/personalia/attendance/AttendanceDelegate.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { GraphUtil, NeonSingle, useSingle } from '@neon.id/context'
+import { NeonCheck, NeonField, NeonForm } from '@neon.id/form'
+import {
+  NeonAlert,
+  NeonButton,
+  NeonDivider,
+  useToastStore,
+  NeonCopy,
+} from '@neon.id/interfaces'
+import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
+import { Query } from '@neon.id/query'
+import { computed, ref, watch } from 'vue'
+import { PromiseUtil } from '@neon.id/utils/promise'
+import {
+  AttendanceModel,
+  type TPersonaliaAttendanceModel,
+  type Schema,
+} from '@neutron.co.id/personalia-models'
+import { DateUtil } from '../../../common/utils/util.date'
+import { NeonTime, useOperasional } from '../../../common'
+import { AttendanceNoteTab } from './sections'
+import { useClientHandle } from '@urql/vue'
+
+const {
+  fields,
+  id,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isReady,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+  syncOne,
+  executeOne,
+} = useSingle<Schema.Attendance, TPersonaliaAttendanceModel>()
+
+const key = ref(0)
+const responseState = ref()
+const toast = useToastStore()
+
+const diff = computed(() => {
+  return DateUtil.day(values.value.endedAt).diff(values.value.startedAt)
+})
+
+const duration = computed(() => {
+  if (isNaN(diff.value)) return '-'
+  const duration = DateUtil.day.duration(diff.value)
+  return duration.format('HH [jam] mm [menit]')
+})
+
+function setDefaultSchedule() {
+  const today = DateUtil.day()
+  const startedAt = today.second(0).millisecond(0)
+  const endedAt = startedAt.add(90, 'minute')
+
+  key.value++
+}
+
+function onStartedAtUpdate(date: any) {
+  if (!date) return
+
+  const currentEndedendedAt = DateUtil.day(values.value.endedAt)
+  let startedAt = DateUtil.day(date)
+  let endedAt = DateUtil.day(date)
+
+  startedAt = startedAt.second(0).millisecond(0)
+  endedAt = endedAt
+    .hour(currentEndedendedAt.hour())
+    .minute(currentEndedendedAt.minute())
+    .second(0)
+    .millisecond(0)
+
+  values.value.startedAt = startedAt.toISOString()
+  values.value.endedAt = endedAt.toISOString()
+  conflictAtt.value = false
+}
+
+// OTHER
+
+const { staff } = useOperasional()
+const staffId = staff.value?.id || ''
+
+watch(isNew, setDefaultValues, { immediate: true })
+
+async function setDefaultValues() {
+  if (!isNew.value) return
+  await PromiseUtil.wait(500)
+
+  const defaultValues = {
+    submitStaffId: staffId,
+    submitStaff: staff.value,
+  } satisfies Schema.Attendance
+
+  values.value.submitStaffId = defaultValues.submitStaffId
+  values.value.submitStaff = defaultValues.submitStaff
+}
+
+const submitAbsensi = async () => {
+  await executeOne('submitAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+const changeAbsensi = async () => {
+  await executeOne('changeAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+const conflictAtt = ref(false)
+
+async function conflictAttendance() {
+  const resp = await executeOne('checkAttendance', {
+    staffId: staff.value?.id,
+    startedAt: values.value.startedAt,
+  })
+  const countAtt = resp.data.executeAttendance.output.countAttendance
+  if (values.value.startedAt) {
+    if (countAtt > 1) {
+      conflictAtt.value = true
+    } else {
+      await submitAbsensi()
+      await syncOne()
+      conflictAtt.value = false
+    }
+  } else {
+    conflictAtt.value = true
+  }
+}
+
+const staffOptions = computed(() => {
+  return {
+    filter: [
+      {
+        handle: '_id',
+        operator: 'nin',
+        value: staff.value?.id,
+      },
+    ],
+  }
+})
+
+//Generate Attendance
+const { client } = useClientHandle()
+
+function getNotified() {
+  if (responseState.value === 'attendanceGenerated') {
+    toast.push({
+      id: 'generate:attendance',
+      content: 'Successfully generated attendance.',
+      color: 'success',
+    })
+  }
+}
+
+async function generateAttendance() {
+  const responseGenerateAttendance = await client
+    .mutation(GraphUtil.executeOne(AttendanceModel, {}), {
+      action: 'generateAttendance',
+      input: {
+        attendanceId: values.value.id,
+        // Attendance input.
+        status: values.value.status,
+        submitStaffId: values.value.submitStaffId,
+        type: values.value.type,
+        decideStaffId: values.value.decideStaffId,
+        delegateStaffIds: values.value.delegateStaffIds,
+        monitoringStaffIds: values.value.monitoringStaffIds,
+        notes: values.value.notes,
+        submittedAt: values.value.submittedAt,
+        startedAt: values.value.startedAt,
+        endedAt: values.value.endedAt,
+      },
+    })
+    .toPromise()
+
+  const wrapper = responseGenerateAttendance.data?.executeAttendance
+  responseState.value = wrapper?.info?.state
+}
+
+async function generate() {
+  await generateAttendance()
+  await getNotified()
+  await syncOne()
+}
+</script>
+
+<template>
+  <NeonSingle class="neu-attendance-single">
+    <OfficeTabs :use-url="isMain">
+      <OfficeTab handle="info" icon="circle-info" title="Info">
+        <NeonForm
+          handle="info"
+          :initial-values="initialValues"
+          :is-loading="isLoading"
+          :is-changed="isChanged"
+          use-unsaved
+          @cancel="discardChanges"
+          @submit="saveOne"
+        >
+          <OfficeRelation
+            v-if="
+              values.type == 'leave' ||
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission'
+            "
+            v-model="values"
+            :field="fields.delegateStaffs"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+          />
+          <NeonField
+            :key="key"
+            :model-value="values.startedAt"
+            v-bind="{
+              handle: 'startedAt',
+              name: 'Tanggal',
+              type: 'date',
+              input: 'date2',
+              options: {
+                note: 'Tanggal absensi.',
+              },
+            }"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+            @update:model-value="onStartedAtUpdate"
+          />
+          <OfficeRelation
+            v-model="values"
+            :field="fields.submitStaff"
+            is-disabled
+          />
+          <OfficeRelation
+            v-model="values"
+            :field="fields.decideStaff"
+            :query="Query.define(staffOptions)"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+          />
+          <!-- <OfficeRelation
+            v-if="
+              values.type == 'leave' ||
+              values.type == 'sick' ||
+              values.type == 'dayOff' ||
+              values.type == 'permission'
+            "
+            v-model="values"
+            :field="fields.monitoringStaffs"
+            :is-disabled="
+              values.status == 'approved' || values.status == 'rejected'
+            "
+          /> -->
+          <NeonField
+            v-if="
+              values.type == 'leave' ||
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission'
+            "
+            v-model="values.delegateNotes"
+            v-bind="fields.delegateNotes"
+          />
+        </NeonForm>
+      </OfficeTab>
+      <!-- <AttendanceNoteTab /> -->
+    </OfficeTabs>
+  </NeonSingle>
+</template>
+
+<style scoped>
+.neu-attendance-single {
+  @apply block;
+}
+</style>

package/build/@office/models/personalia/attendance/AttendanceStaff.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { GraphUtil, NeonSingle, useSingle } from '@neon.id/context'
-import { NeonField, NeonForm } from '@neon.id/form'
+import { NeonCheck, NeonField, NeonForm } from '@neon.id/form'
 import {
   NeonAlert,
   NeonButton,
   NeonDivider,
   useToastStore,
+  NeonCopy,
 } from '@neon.id/interfaces'
 import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
 import { Query } from '@neon.id/query'
@@ -18,6 +19,7 @@ import {
 } from '@neutron.co.id/personalia-models'
 import { DateUtil } from '../../../common/utils/util.date'
 import { NeonTime, useOperasional } from '../../../common'
+import { AttendanceNoteTab } from './sections'
 import { useClientHandle } from '@urql/vue'
 
 const {
@@ -164,10 +166,13 @@ async function generateAttendance() {
         submitStaffId: values.value.submitStaffId,
         type: values.value.type,
         decideStaffId: values.value.decideStaffId,
+        delegateStaffIds: values.value.delegateStaffIds,
+        monitoringStaffIds: values.value.monitoringStaffIds,
         notes: values.value.notes,
         submittedAt: values.value.submittedAt,
         startedAt: values.value.startedAt,
         endedAt: values.value.endedAt,
+        delegateNotes: values.value.delegateNotes,
       },
     })
     .toPromise()
@@ -176,13 +181,16 @@ async function generateAttendance() {
   responseState.value = wrapper?.info?.state
 }
 
-console.log('decideStaffId', values.value.decideStaffId)
-
 async function generate() {
   await generateAttendance()
   await getNotified()
   await syncOne()
 }
+
+//copy link for catatan
+const copy = ref({
+  copyDelegate: `${window.location.origin}/penugasan/staff-attendances/?peek=neu:personalia:attendance:${id.value}:single-staff-view:s`,
+})
 </script>
 
 <template>
@@ -288,9 +296,16 @@ async function generate() {
               values.status == 'rejected'
             "
           />
-
+          <!-- <div class="flex items-right">
+            <div class="flex-grow">
+              <NeonFields class="flex-1"> -->
           <OfficeRelation
-            v-if="values.type == 'leave'"
+            v-if="
+              values.type == 'leave' ||
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission'
+            "
             v-model="values"
             :field="fields.delegateStaffs"
             :is-disabled="
@@ -299,12 +314,68 @@ async function generate() {
               values.status == 'rejected'
             "
           />
+          <!-- </NeonFields>
+            </div> -->
+          <!-- <div class="ml-2 flex items-end pb-1">
+              <NeonCopy
+                v-if="
+                  values.type == 'leave' ||
+                  values.type == 'dayOff' ||
+                  values.type == 'sick' ||
+                  values.type == 'permission' ||
+                  values.isNotes == true
+                "
+                :size="'sm'"
+                :value="copy.copyDelegate"
+              />
+            </div>
+          </div> -->
+          <!-- <NeonField
+            v-if="
+              values.type == 'leave' ||
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission'
+            "
+            v-model="values.isNotes"
+            v-bind="fields.isNotes"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'rejected' ||
+              values.status == 'approved'
+            "
+          > -->
+          <!-- <template #input>
+              <NeonCheck
+                v-if="
+                  values.type == 'leave' ||
+                  values.type == 'dayOff' ||
+                  values.type == 'sick' ||
+                  values.type == 'permission'
+                "
+                v-model="values.isNotes"
+                label="Catatan"
+                class="mt-2"
+                :is-disabled="values.status == 'approved'"
+              />
+            </template> -->
+          <!-- </NeonField> -->
 
           <NeonField
             v-if="isNew || isReady"
             v-model="values.notes"
             v-bind="fields.notes"
           />
+          <NeonField
+            v-if="
+              values.type == 'leave' ||
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission'
+            "
+            v-model="values.delegateNotes"
+            v-bind="fields.delegateNotes"
+          />
 
           <NeonDivider v-if="values.type" is-dashed label="Keterangan" />
 
@@ -537,6 +608,7 @@ async function generate() {
           </div>
         </NeonForm>
       </OfficeTab>
+      <!-- <AttendanceNoteTab /> -->
     </OfficeTabs>
   </NeonSingle>
 </template>