@finema/finework-layer 2.0.28 → 2.0.29

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.0.29](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.28...2.0.29) (2026-08-18)
+
 ## [2.0.28](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.27...2.0.28) (2026-08-18)
 
 ## [2.0.27](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.26...2.0.27) (2026-08-16)

package/app/app.vue

@@ -6,6 +6,6 @@
     }"
   >
     <NuxtPage />
-    <!-- <IssueLog /> -->
+    <FeedbackTicket />
   </App>
 </template>

package/app/components/{IssueLog/FormIssue.vue → FeedbackTicket/Form.vue}

@@ -23,13 +23,13 @@
                 แจ้งปัญหา / ขอ Feature
               </h2>
               <p class="text-xs text-gray-500">
-                Issue Log
+                Feedback Ticket
               </p>
             </div>
           </div>
           <div class="flex items-center gap-1">
             <NuxtLink
-              :to="routes.issueLog.issues.to"
+              :to="routes.feedbackTicket.tickets.to"
               class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
               title="ดูรายการทั้งหมด"
               @click="emit('update', false)"
@@ -87,8 +87,9 @@
 
 <script lang="ts" setup>
 import { UserModuleOptions } from '#layer/app/composables/useAuth'
-import { IssueLogTypeOptions } from '#layer/app/constants/issue-log/type'
-import { useIssueLogAddLoader } from '#layer/app/loaders/issue-log/issue-log'
+import { FeedbackTicketCategoryOptions } from '#layer/app/constants/feedback-ticket/category'
+import { FeedbackTicketPriority, FeedbackTicketPriorityOptions } from '#layer/app/constants/feedback-ticket/priority'
+import { useFeedbackTicketAddLoader } from '#layer/app/loaders/feedback/ticket'
 
 const emit = defineEmits<{
   (e: 'update', value: boolean): void
@@ -99,7 +100,7 @@ defineProps<{
   isOpen: boolean
 }>()
 
-const addLoader = useIssueLogAddLoader()
+const addLoader = useFeedbackTicketAddLoader()
 const noti = useNotification()
 
 const form = useForm({
@@ -107,15 +108,20 @@ const form = useForm({
     v.object({
       title: v.pipe(v.string(), v.minLength(1, 'กรุณาระบุหัวข้อ')),
       description: v.pipe(v.string(), v.minLength(1, 'กรุณาระบุรายละเอียด')),
-      type: v.pipe(v.string(), v.minLength(1, 'กรุณาเลือกประเภท')),
+      category: v.pipe(v.string(), v.minLength(1, 'กรุณาเลือกประเภท')),
+      priority: v.optional(v.string(), FeedbackTicketPriority.LOW),
       app: v.nullish(v.string()),
-      file: v.nullish(v.object({
-        url: v.string(),
-        name: v.string(),
-        path: v.string(),
-        size: v.number(),
-        id: v.string(),
-      })),
+      files: v.nullish(
+        v.array(
+          v.object({
+            url: v.string(),
+            name: v.string(),
+            path: v.string(),
+            size: v.number(),
+            id: v.string(),
+          }),
+        ),
+      ),
     }),
   ),
 })
@@ -146,18 +152,27 @@ const formFields = createFormFields(() => [
   },
   {
     type: INPUT_TYPES.SELECT,
-    class: 'col-span-2',
     props: {
       form,
-      name: 'type',
+      name: 'category',
       label: 'ประเภท',
       placeholder: 'เลือกประเภท',
-      options: IssueLogTypeOptions,
+      options: FeedbackTicketCategoryOptions,
       required: true,
     },
   },
   {
-    type: INPUT_TYPES.TEXTAREA,
+    type: INPUT_TYPES.SELECT,
+    props: {
+      form,
+      name: 'priority',
+      label: 'ความสำคัญ',
+      placeholder: 'เลือกความสำคัญ',
+      options: FeedbackTicketPriorityOptions,
+    },
+  },
+  {
+    type: INPUT_TYPES.WYSIWYG,
     class: 'col-span-2',
     props: {
       form,
@@ -169,11 +184,11 @@ const formFields = createFormFields(() => [
     },
   },
   {
-    type: INPUT_TYPES.UPLOAD_DROPZONE_AUTO,
+    type: INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE,
     class: 'col-span-2',
     props: {
       form,
-      name: 'file_id',
+      name: 'files',
       label: 'แนบรูปภาพ (ถ้ามี)',
       placeholder: 'PNG, JPG, GIF, WEBP (สูงสุด 5MB)',
       requestOptions: useRequestOptions().file(FileAppType.COMMON),
@@ -185,10 +200,7 @@ const formFields = createFormFields(() => [
 
 const onSubmit = form.handleSubmit((values) => {
   addLoader.run({
-    data: {
-      ...values,
-      file_id: values.file?.id,
-    },
+    data: values,
   })
 })
 

package/app/components/{IssueLog → FeedbackTicket}/index.vue

@@ -12,7 +12,7 @@
     </button>
   </div>
 
-  <IssueLogFormIssue
+  <FeedbackTicketForm
     :is-open="isOpen"
     @update="(v) => isOpen = v"
     @success="isOpen = false"

package/app/constants/feedback-ticket/category.ts

@@ -0,0 +1,16 @@
+export enum FeedbackTicketCategory {
+  BUG = 'BUG',
+  FEATURE_REQUEST = 'FEATURE_REQUEST',
+  IMPROVEMENT = 'IMPROVEMENT',
+}
+
+export const FeedbackTicketCategoryLabel: Record<FeedbackTicketCategory, string> = {
+  [FeedbackTicketCategory.BUG]: 'Report Bug',
+  [FeedbackTicketCategory.FEATURE_REQUEST]: 'Request Feature',
+  [FeedbackTicketCategory.IMPROVEMENT]: 'Improve',
+}
+
+export const FeedbackTicketCategoryOptions = Object.entries(FeedbackTicketCategoryLabel).map(([value, label]) => ({
+  value,
+  label,
+}))

package/app/constants/feedback-ticket/priority.ts

@@ -0,0 +1,18 @@
+export enum FeedbackTicketPriority {
+  CRITICAL = 'CRITICAL',
+  HIGH = 'HIGH',
+  MEDIUM = 'MEDIUM',
+  LOW = 'LOW',
+}
+
+export const FeedbackTicketPriorityLabel: Record<FeedbackTicketPriority, string> = {
+  [FeedbackTicketPriority.CRITICAL]: 'Critical',
+  [FeedbackTicketPriority.HIGH]: 'High',
+  [FeedbackTicketPriority.MEDIUM]: 'Medium',
+  [FeedbackTicketPriority.LOW]: 'Low',
+}
+
+export const FeedbackTicketPriorityOptions = Object.entries(FeedbackTicketPriorityLabel).map(([value, label]) => ({
+  value,
+  label,
+}))

package/app/constants/routes.ts

@@ -244,10 +244,10 @@ export const routes = {
       permissions: ['setting:USER', 'setting:ADMIN', 'setting:SUPER'],
     },
   },
-  issueLog: {
-    issues: {
-      label: 'Issue Log',
-      to: '/issue-logs',
+  feedbackTicket: {
+    tickets: {
+      label: 'Feedback Tickets',
+      to: '/feedback/tickets',
       icon: 'ph:bug-beetle',
     },
   },

package/app/loaders/{issue-log/issue-log.ts → feedback/ticket.ts}

@@ -1,28 +1,28 @@
-export const useIssueLogPageLoader = () => {
+export const useFeedbackTicketPageLoader = () => {
   const options = useRequestOptions()
 
   return usePageLoader({
-    baseURL: `/issue-logs`,
+    baseURL: `/feedback/tickets`,
     getBaseRequestOptions: options.auth,
   })
 }
 
-export const useIssueLogAddLoader = () => {
+export const useFeedbackTicketAddLoader = () => {
   const options = useRequestOptions()
 
   return useObjectLoader({
     method: 'POST',
-    url: `/issue-logs`,
+    url: `/feedback/tickets`,
     getRequestOptions: options.auth,
   })
 }
 
-export const useIssueLogDeleteLoader = (id: string) => {
+export const useFeedbackTicketDeleteLoader = (id: string) => {
   const options = useRequestOptions()
 
   return useObjectLoader({
     method: 'DELETE',
-    url: `/issue-logs/${id}`,
+    url: `/feedback/tickets/${id}`,
     getRequestOptions: options.auth,
   })
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",

package/app/components/IssueLog/BadgePriority.vue

@@ -1,16 +0,0 @@
-<template>
-  <Badge
-    variant="outline"
-    :leading-icon="IssueLogPriorityIcon[props.value]"
-    :color="IssueLogPriorityColor[props.value]"
-    :label="IssueLogPriorityLabel[props.value]"
-  />
-</template>
-
-<script lang="ts" setup>
-import { IssueLogPriorityColor, IssueLogPriorityIcon, IssueLogPriorityLabel, type IssueLogPriority } from '#layer/app/constants/issue-log/priority'
-
-const props = defineProps<{
-  value: IssueLogPriority
-}>()
-</script>

package/app/components/IssueLog/BadgeStatus.vue

@@ -1,16 +0,0 @@
-<template>
-  <Badge
-    variant="outline"
-    leading-icon="ci:dot-04-l"
-    :color="IssueLogStatusColor[props.value]"
-    :label="IssueLogStatusLabel[props.value]"
-  />
-</template>
-
-<script lang="ts" setup>
-import { IssueLogStatusColor, IssueLogStatusLabel, type IssueLogStatus } from '#layer/app/constants/issue-log/status'
-
-const props = defineProps<{
-  value: IssueLogStatus
-}>()
-</script>

package/app/components/IssueLog/BadgeType.vue

@@ -1,16 +0,0 @@
-<template>
-  <Badge
-    variant="outline"
-    :leading-icon="IssueLogTypeIcon[props.value]"
-    :color="IssueLogTypeColor[props.value]"
-    :label="IssueLogTypeLabel[props.value]"
-  />
-</template>
-
-<script lang="ts" setup>
-import { IssueLogTypeColor, IssueLogTypeIcon, IssueLogTypeLabel, type IssueLogType } from '#layer/app/constants/issue-log/type'
-
-const props = defineProps<{
-  value: IssueLogType
-}>()
-</script>

package/app/constants/issue-log/priority.ts

@@ -1,35 +0,0 @@
-export enum IssueLogPriority {
-  CRITICAL = 'CRITICAL',
-  HIGH = 'HIGH',
-  MEDIUM = 'MEDIUM',
-  LOW = 'LOW',
-}
-
-export const IssueLogPriorityLabel: Record<IssueLogPriority, string> = {
-  [IssueLogPriority.CRITICAL]: 'Critical',
-  [IssueLogPriority.HIGH]: 'High',
-  [IssueLogPriority.MEDIUM]: 'Medium',
-  [IssueLogPriority.LOW]: 'Low',
-}
-
-export const IssueLogPriorityColor: Record<IssueLogPriority, 'info' | 'neutral' | 'success' | 'warning' | 'error'> = {
-  [IssueLogPriority.CRITICAL]: 'error',
-  [IssueLogPriority.HIGH]: 'warning',
-  [IssueLogPriority.MEDIUM]: 'info',
-  [IssueLogPriority.LOW]: 'neutral',
-}
-
-export const IssueLogPriorityIcon: Record<IssueLogPriority, string> = {
-  [IssueLogPriority.CRITICAL]: 'ph:warning-circle-fill',
-  [IssueLogPriority.HIGH]: 'ph:arrow-up',
-  [IssueLogPriority.MEDIUM]: 'ph:minus',
-  [IssueLogPriority.LOW]: 'ph:arrow-down',
-}
-
-export const IssueLogPriorityOptions = Object.entries(IssueLogPriorityLabel).map(([value, label]) => ({
-  value,
-  label,
-  chip: {
-    color: IssueLogPriorityColor[value as IssueLogPriority],
-  },
-}))

package/app/constants/issue-log/routes.ts

@@ -1,7 +0,0 @@
-export const issueLogRoutes = {
-  issues: {
-    label: 'Issue Log',
-    to: '/issue-logs',
-    icon: 'ph:bug-beetle',
-  },
-} as const

package/app/constants/issue-log/status.ts

@@ -1,31 +0,0 @@
-export enum IssueLogStatus {
-  OPEN = 'OPEN',
-  IN_PROGRESS = 'IN_PROGRESS',
-  RESOLVED = 'RESOLVED',
-  CLOSED = 'CLOSED',
-  DUPLICATE = 'DUPLICATE',
-}
-
-export const IssueLogStatusLabel: Record<IssueLogStatus, string> = {
-  [IssueLogStatus.OPEN]: 'เปิด',
-  [IssueLogStatus.IN_PROGRESS]: 'กำลังดำเนินการ',
-  [IssueLogStatus.RESOLVED]: 'แก้ไขแล้ว',
-  [IssueLogStatus.CLOSED]: 'ปิด',
-  [IssueLogStatus.DUPLICATE]: 'ซ้ำกับที่แจ้งแล้ว',
-}
-
-export const IssueLogStatusColor: Record<IssueLogStatus, 'info' | 'neutral' | 'success' | 'warning' | 'error'> = {
-  [IssueLogStatus.OPEN]: 'info',
-  [IssueLogStatus.IN_PROGRESS]: 'warning',
-  [IssueLogStatus.RESOLVED]: 'success',
-  [IssueLogStatus.CLOSED]: 'error',
-  [IssueLogStatus.DUPLICATE]: 'error',
-}
-
-export const IssueLogStatusOptions = Object.entries(IssueLogStatusLabel).map(([value, label]) => ({
-  value,
-  label,
-  chip: {
-    color: IssueLogStatusColor[value as IssueLogStatus],
-  },
-}))

package/app/constants/issue-log/type.ts

@@ -1,80 +0,0 @@
-export enum IssueLogType {
-  BUG = 'BUG',
-  FEATURE_REQUEST = 'FEATURE_REQUEST',
-  IMPROVEMENT = 'IMPROVEMENT',
-}
-
-export const IssueLogTypeLabel: Record<IssueLogType, string> = {
-  [IssueLogType.BUG]: 'Report Bug',
-  [IssueLogType.FEATURE_REQUEST]: 'Request Feature',
-  [IssueLogType.IMPROVEMENT]: 'Improve',
-}
-
-export const IssueLogTypeColor: Record<IssueLogType, 'info' | 'neutral' | 'success' | 'warning' | 'error'> = {
-  [IssueLogType.BUG]: 'error',
-  [IssueLogType.FEATURE_REQUEST]: 'info',
-  [IssueLogType.IMPROVEMENT]: 'warning',
-}
-
-export const IssueLogTypeIcon: Record<IssueLogType, string> = {
-  [IssueLogType.BUG]: 'ph:bug',
-  [IssueLogType.FEATURE_REQUEST]: 'ph:sparkle',
-  [IssueLogType.IMPROVEMENT]: 'ph:wrench',
-}
-
-export const IssueLogTypeOptions = Object.entries(IssueLogTypeLabel).map(([value, label]) => ({
-  value,
-  label,
-  chip: {
-    color: IssueLogTypeColor[value as IssueLogType],
-  },
-}))
-
-const UserModuleLabel = {
-  [UserModule.CHECKIN]: 'Clock-In',
-  [UserModule.TIMESHEET]: 'Timesheet',
-  [UserModule.TODO]: 'Todo',
-  [UserModule.PMO]: 'PMO',
-  [UserModule.REQUEST]: 'Request',
-  [UserModule.SETTING]: 'Setting',
-  [UserModule.QUOTATION]: 'Quotation',
-  [UserModule.COSTSHEET]: 'Cost Sheet',
-  [UserModule.NEWSLETTER]: 'Newsletter',
-  [UserModule.CONTRACT]: 'Contract',
-  [UserModule.EVALUATION]: 'Evaluation',
-  [UserModule.EMPLOYEE]: 'Employee',
-  [UserModule.ASSET]: 'Asset',
-  [UserModule.RECRUIT]: 'Recruit',
-  [UserModule.LG]: 'งบค้ำประกัน',
-  [UserModule.EFACTORING]: 'E-Factoring',
-  [UserModule.RESOURCE]: 'Resource',
-}
-
-const UserModuleLogo = {
-  [UserModule.CHECKIN]: '/admin/clock-in-logo.png',
-  [UserModule.TIMESHEET]: '/admin/timesheet-logo.png',
-  [UserModule.TODO]: '/admin/todo.png',
-  [UserModule.PMO]: '/admin/pmo-logo.png',
-  [UserModule.REQUEST]: '/admin/request.png',
-  [UserModule.SETTING]: '/admin/report.svg',
-  [UserModule.QUOTATION]: '/admin/quotation.png',
-  [UserModule.COSTSHEET]: '/admin/cost-sheet.png',
-  [UserModule.NEWSLETTER]: '/admin/newsletter.png',
-  [UserModule.CONTRACT]: '/admin/contract.png',
-  [UserModule.EVALUATION]: '/admin/evaluation.png',
-  [UserModule.EMPLOYEE]: '/admin/employee.png',
-  [UserModule.ASSET]: '/admin/assets.png',
-  [UserModule.RECRUIT]: '/admin/recruit.png',
-  [UserModule.LG]: '/admin/guarantee.png',
-  [UserModule.EFACTORING]: '/admin/efactoring.png',
-  [UserModule.RESOURCE]: '/admin/resource.svg',
-}
-
-export const UserModuleOptions = Object.entries(UserModuleLabel).map(([value, label]) => ({
-  value,
-  label,
-  avatar: {
-    src: UserModuleLogo[value as keyof typeof UserModuleLogo],
-    alt: label,
-  },
-}))