@neutron.co.id/operasional-interfaces 1.14.0 → 1.14.2

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

@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import { GraphUtil, NeonSingle, useSingle } from '@neon.id/context'
+import { NeonField, NeonForm } from '@neon.id/form'
+import { NeonButton, NeonDivider, useToastStore } from '@neon.id/interfaces'
+import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
+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'
+import { NeonTime, useOperasional } from '../../../common'
+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 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]')
+})
+
+const reverseDiff = computed(() => {
+  return DateUtil.day(values.value.startedAt).diff(values.value.endedAt)
+})
+const reverseDuration = computed(() => {
+  if (isNaN(reverseDiff.value)) return '-'
+  const duration = DateUtil.day.duration(reverseDiff.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()
+}
+
+// OTHER
+const responseState = ref()
+const toast = useToastStore()
+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 approvedAbsensi = async () => {
+  await executeOne('approvedAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+const deleteAbsensi = async () => {
+  await executeOne('deleteAttendance', { attendanceId: id.value })
+  await syncOne()
+  window.location.href = '/pengawas/attendances'
+}
+const rejectedAbsensi = async () => {
+  await executeOne('rejectedAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+//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,
+        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"
+        >
+          <div class="flex flex-wrap">
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="success"
+                    icon-left="check"
+                    :is-disabled="
+                      values.status == 'approved' || values.status == 'rejected'
+                    "
+                    @click="approvedAbsensi"
+                    >Disetujui</NeonButton
+                  >
+                </template>
+              </NeonField>
+            </div>
+            &nbsp;&nbsp;
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="danger"
+                    icon-left="x"
+                    :is-disabled="
+                      values.status == 'approved' || values.status == 'rejected'
+                    "
+                    @click="rejectedAbsensi"
+                    >Ditolak</NeonButton
+                  >
+                </template>
+              </NeonField>
+            </div>
+            &nbsp;&nbsp;
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="warning"
+                    icon-left="trash-can"
+                    @click="deleteAbsensi"
+                    >Dihapus</NeonButton
+                  >
+                </template>
+              </NeonField>
+            </div>
+          </div>
+
+          <OfficeRelation
+            v-model="values"
+            :field="fields.submitStaff"
+            is-disabled
+          />
+
+          <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 == 'approved' || values.status == 'rejected'
+            "
+            @update:model-value="onStartedAtUpdate"
+          />
+          <NeonDivider
+            label="Tanggal ini digunakan hanya untuk Generate Absensi"
+            class="divider"
+          />
+          <NeonFields md="grid-cols-3">
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="fields.startedAt"
+              :is-disabled="values.isGenerate === true"
+            />
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="fields.endedAt"
+              :is-disabled="values.isGenerate === true"
+            />
+            <NeonButton
+              icon-left="bolt"
+              label="Generate"
+              color="success"
+              class="mt-12"
+              size="xs"
+              :is-loading="isLoading"
+              :is-disabled="
+                values.status !== 'approved' || values.isGenerate === true
+              "
+              is-rounded
+              @click="generate"
+            />
+          </NeonFields>
+
+          <NeonField
+            v-model="values.type"
+            v-bind="fields.type"
+            :is-disabled="
+              values.status == 'approved' || values.status == 'rejected'
+            "
+          />
+
+          <!-- <OfficeRelation
+            v-model="values"
+            :field="fields.decideStaff"
+            :is-disabled="
+              values.status == 'approved' || values.status == 'rejected'
+            "
+          /> -->
+
+          <OfficeRelation
+            v-if="values.type == 'leave'"
+            v-model="values"
+            :field="fields.delegateStaffs"
+            :is-disabled="
+              values.status == 'approved' || values.status == 'rejected'
+            "
+          />
+
+          <NeonField
+            v-if="isNew || isReady"
+            v-model="values.notes"
+            v-bind="fields.notes"
+          />
+
+          <NeonDivider v-if="values.type" is-dashed label="Keterangan" />
+
+          <NeonField
+            v-if="
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission' ||
+              values.type == 'leave'
+            "
+            v-model="values.submittedAt"
+            v-bind="fields.submittedAt"
+            is-disabled
+          />
+
+          <!-- EARLY GO HOME -->
+          <div
+            v-if="values.type == 'homeEarly'"
+            class="grid gap-2 sm:grid-cols-2"
+          >
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Jam Pulang Kerja',
+                options: {
+                  note: 'Jam pulang kerja.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.startedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                />
+              </template>
+            </NeonField>
+
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="{
+                handle: 'endedAt',
+                name: 'Jam Pulang Lebih Awal',
+                options: {
+                  note: 'Jam pulang lebih awal.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.endedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ reverseDuration }}
+                </div>
+              </template>
+            </NeonField>
+          </div>
+
+          <!-- COME TOO LATE -->
+          <div
+            v-if="values.type == 'comeLate'"
+            class="grid gap-2 sm:grid-cols-2"
+          >
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Jam Datang',
+                options: {
+                  note: 'Jam Datang kerja.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.startedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                />
+              </template>
+            </NeonField>
+
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="{
+                handle: 'endedAt',
+                name: 'Jam Datang Terlambat',
+                options: {
+                  note: 'Jam datang terlambat.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.endedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ duration }}
+                </div>
+              </template>
+            </NeonField>
+          </div>
+
+          <!-- TIMEOUT -->
+          <div
+            v-if="values.type == 'timeout'"
+            class="grid gap-2 sm:grid-cols-2"
+          >
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Mulai',
+                options: {
+                  note: 'Jam mulai.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.startedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                />
+              </template>
+            </NeonField>
+
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="{
+                handle: 'endedAt',
+                name: 'Selesai',
+                options: {
+                  note: 'Jam selesai.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.endedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ duration }}
+                </div>
+              </template>
+            </NeonField>
+          </div>
+        </NeonForm>
+      </OfficeTab>
+    </OfficeTabs>
+  </NeonSingle>
+</template>
+
+<style scoped>
+.neu-attendance-single {
+  @apply block;
+}
+</style>

package/build/@office/models/personalia/attendance/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AttendanceCollection';
+export * from './AttendanceSingle';
+export { default as AttendanceManager } from './AttendanceManager.vue';
+export { default as AttendanceStaff } from './AttendanceStaff.vue';
+export { default as AttendanceSupervisor } from './AttendanceSupervisor.vue';

package/build/@office/models/personalia/attendance/index.mjs

@@ -0,0 +1,5 @@
+export * from "./AttendanceCollection/index.mjs";
+export * from "./AttendanceSingle/index.mjs";
+export { default as AttendanceManager } from "./AttendanceManager.vue";
+export { default as AttendanceStaff } from "./AttendanceStaff.vue";
+export { default as AttendanceSupervisor } from "./AttendanceSupervisor.vue";

package/build/@office/models/personalia/checkIn/CheckInAccess.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { NeonModal, NeonSheet, NeonButton } from '@neon.id/interfaces'
+import { useAttendanceStore } from '../../../common'
+
+const attendanceStore = useAttendanceStore()
+const { isAsking, isScanError, isScanning } = storeToRefs(attendanceStore)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+function ok() {
+  isAsking.value = false
+  isScanError.value = false
+  isScanning.value = true
+}
+</script>
+
+<template>
+  <NeonModal v-model:is-active="isAsking" size="lg" @close="$emit('close')">
+    <NeonSheet title="Aktifkan Kamera" icon="camera" @close="$emit('close')">
+      <h4 align="center">Aktifkan kamera untuk scan QR Code</h4>
+      <p align="center">
+        Neutron Kantor membutuhkan akses ke kamera. Dengan klik "<b
+          >Saya Setuju</b
+        >", kamu telah menyetujui syarat dan ketentuan yang berlaku.
+      </p>
+      <NeonButton
+        is-full
+        size="md"
+        color="success"
+        icon-left="check"
+        class="buttons"
+        @click="ok"
+        >Saya Setuju</NeonButton
+      >
+    </NeonSheet>
+  </NeonModal>
+</template>
+
+<style scoped>
+.buttons {
+  @apply grid items-center gap-2 px-4;
+  height: 56px;
+}
+</style>

package/build/@office/models/personalia/checkIn/CheckInCollection/CheckInCollection.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta } from '@storybook/vue3';
+import CheckInCollection from './CheckInCollection.vue';
+declare const _default: Meta<typeof CheckInCollection>;
+export default _default;
+export declare const Main: import("@storybook/csf").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}>;
+export declare const InsideContent: import("@storybook/csf").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}>;
+export declare const $DefaultView: any;

package/build/@office/models/personalia/checkIn/CheckInCollection/CheckInCollection.stories.mjs

@@ -0,0 +1,36 @@
+import { decorateCollection, viewCollection, wrapCollection } from "@mock";
+import { StoryUtil } from "@neon.id/story/helpers";
+import { CheckInCollectionView } from "@neutron.co.id/operasional-modules";
+import { CheckInModel } from "@neutron.co.id/tempat-models";
+import CheckInCollection from "./CheckInCollection.vue";
+export default {
+  title: "Office/CheckIn/Collection",
+  tags: [],
+  component: CheckInCollection,
+  parameters: StoryUtil.parameters({
+    description: "`CheckInCollection`",
+    layout: "fullscreen",
+    controls: { exclude: ["colors"] },
+    backgrounds: { default: "light" }
+  })
+};
+export const Main = StoryUtil.story({
+  description: "Main.",
+  decorators: decorateCollection({
+    model: CheckInModel
+  })
+});
+export const InsideContent = StoryUtil.story({
+  description: "Inside content.",
+  render: wrapCollection(CheckInCollection),
+  decorators: decorateCollection({
+    model: CheckInModel
+  })
+});
+export const $DefaultView = viewCollection({
+  description: "Default view.",
+  component: CheckInCollectionView,
+  props: {
+    overrides: {}
+  }
+});

package/build/@office/models/personalia/checkIn/CheckInCollection/CheckInCollection.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { NeonCollection, useCollection } from '@neon.id/context'
+import { OfficeCollectionTable } from '@neon.id/office'
+import type { TTempatCheckInModel } from '@neutron.co.id/tempat-models'
+import type { Schema } from '@neutron.co.id/personalia-models'
+
+defineOptions({
+  name: 'CheckInCollection',
+})
+
+const { resource } = useCollection<Schema.CheckIn, TTempatCheckInModel>()
+</script>
+
+<template>
+  <NeonCollection class="neu-checkIn-collection">
+    <OfficeCollectionTable />
+  </NeonCollection>
+</template>
+
+<style scoped></style>

package/build/@office/models/personalia/checkIn/CheckInCollection/index.d.ts

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

package/build/@office/models/personalia/checkIn/CheckInCollection/index.mjs

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