-
+
![logo-RAJD]()
@@ -84,61 +303,115 @@ const handleRegister = async () => {
-
+
+ class="mx-auto w-full px-5 py-6 sm:w-3/4 sm:px-8 lg:w-2/4 xl:ml-24 xl:w-auto xl:p-0 xl:before:hidden xl:after:hidden xl:shadow-none xl:border-none xl:bg-none">
{
@@ -27,13 +29,48 @@ export async function register(credentials: RegisterCredentials): Promise {
- const { data } = await api.post('/verify-email', payload)
+export async function sendPhoneVerificationOtp(
+ payload: SendPhoneVerificationOtpPayload,
+): Promise {
+ const { data } = await api.post(
+ '/phone-verification/send',
+ payload,
+ )
return data
}
-export async function resendVerificationEmail(email: string): Promise {
- const { data } = await api.post('/verify-email/resend', { email })
+export async function verifyPhoneVerificationOtp(
+ payload: VerifyPhoneVerificationOtpPayload,
+): Promise {
+ const { data } = await api.post(
+ '/phone-verification/verify',
+ payload,
+ )
+ return data
+}
+
+export async function sendAuthenticatedPhoneVerificationOtp(
+ payload: SendPhoneVerificationOtpPayload,
+): Promise {
+ const { data } = await api.post(
+ '/v1/phone-verification/send',
+ payload,
+ )
+ return data
+}
+
+export async function verifyAuthenticatedPhoneVerificationOtp(
+ payload: VerifyPhoneVerificationOtpPayload,
+): Promise {
+ const { data } = await api.post(
+ '/v1/phone-verification/verify',
+ payload,
+ )
+ return data
+}
+
+export async function sendVerificationEmail(): Promise {
+ const { data } = await api.post('/v1/email/verification-notification')
return data
}
@@ -73,8 +110,8 @@ export function getRegisterErrorMessage(error: unknown): string {
return getApiErrorMessage(error, 'Registration failed. Please try again.')
}
-export function getVerifyEmailErrorMessage(error: unknown): string {
- return getApiErrorMessage(error, 'Email verification failed. Please try again.')
+export function getPhoneVerificationErrorMessage(error: unknown): string {
+ return getApiErrorMessage(error, 'Gagal mengesahkan nombor telefon. Sila cuba lagi.')
}
export function getForgotPasswordErrorMessage(error: unknown): string {
@@ -85,15 +122,16 @@ export function getResetPasswordErrorMessage(error: unknown): string {
return getApiErrorMessage(error, 'Gagal menetapkan semula kata laluan. Sila cuba lagi.')
}
-export function isAccountPending(user: { status: string } | null | undefined): boolean {
- return user?.status === 'pending'
+export function isEmailVerified(user: { email_verified_at?: string | null } | null | undefined): boolean {
+ return Boolean(user?.email_verified_at)
}
-export function isLoginVerificationRequired(
- response: LoginResponse,
-): response is LoginResponse & { data: LoginVerificationRequiredData } {
- return 'requires_email_verification' in response.data
- && response.data.requires_email_verification === true
+export function isPhoneVerified(user: { phone_verified_at?: string | null } | null | undefined): boolean {
+ return Boolean(user?.phone_verified_at)
+}
+
+export function isAccountPending(user: { status: string } | null | undefined): boolean {
+ return user?.status === 'pending'
}
export function resolvePostAuthRoute(
diff --git a/src/modules/auth/types/auth.types.ts b/src/modules/auth/types/auth.types.ts
index 5a46f42..c3ce2f4 100644
--- a/src/modules/auth/types/auth.types.ts
+++ b/src/modules/auth/types/auth.types.ts
@@ -34,6 +34,7 @@ export interface AuthUser {
ic_number: string | null
position: string | null
phone_number: string | null
+ phone_verified_at: string | null
image_url: string | null
member_number: number | null
member_type: string | null
@@ -45,6 +46,7 @@ export interface AuthUser {
birth_date: string | null
birth_place: string | null
onboarding_completed_at: string | null
+ email_verified_at: string | null
roles?: Array
}
@@ -54,20 +56,17 @@ export interface LoginSessionData {
expires_at: string
}
-export interface LoginVerificationRequiredData {
- email: string
- requires_email_verification: true
-}
-
-export interface LoginResponse {
+export interface AuthSessionResponse {
success: boolean
message: string
- data: LoginSessionData | LoginVerificationRequiredData
+ data: LoginSessionData
active_role?: AuthRole | null
can_switch_role?: boolean
redirect_path?: string
}
+export type LoginResponse = AuthSessionResponse
+
export interface SwitchRoleResponse extends SessionResponse {
message: string
}
@@ -76,25 +75,42 @@ export interface RegisterCredentials {
name: string
email: string
ic_number: string
+ phone_number: string
+ phone_verification_token: string
password: string
password_confirmation: string
}
-export interface RegisterResponse {
- success: boolean
- message: string
- data: {
- email: string
- requires_email_verification: boolean
- }
+export type RegisterResponse = AuthSessionResponse
+
+export interface SendPhoneVerificationOtpPayload {
+ phone_number: string
}
-export interface VerifyEmailPayload {
- email: string
+export interface SendPhoneVerificationOtpResponse {
+ success: boolean
+ message: string
+}
+
+export interface VerifyPhoneVerificationOtpPayload {
+ phone_number: string
otp: string
}
-export type VerifyEmailResponse = LoginResponse
+export interface VerifyPhoneVerificationOtpResponse {
+ success: boolean
+ message: string
+ data: {
+ phone_number: string
+ verification_token: string
+ }
+}
+
+export interface VerifyAuthenticatedPhoneVerificationOtpResponse {
+ success: boolean
+ message: string
+ data: AuthUser
+}
export interface ResendVerificationResponse {
success: boolean
diff --git a/src/modules/external-system/composables/useExternalSystemDetail.ts b/src/modules/external-system/composables/useExternalSystemDetail.ts
index 9cc3a4e..4b78cce 100644
--- a/src/modules/external-system/composables/useExternalSystemDetail.ts
+++ b/src/modules/external-system/composables/useExternalSystemDetail.ts
@@ -1,32 +1,52 @@
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
-import { useExternalSystemList } from './useExternalSystemList'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { getExternalSystem } from '../services/external-system.service'
import {
getExternalSystemStatus,
isExternalSystemAccessible,
} from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
export function useExternalSystemDetail() {
const route = useRoute()
- const { getSystemById } = useExternalSystemList()
const loading = ref(false)
const error = ref(null)
+ const system = ref(null)
const systemId = computed(() => String(route.params.id ?? ''))
- const system = computed(() => getSystemById(systemId.value) ?? null)
-
const status = computed(() => (system.value ? getExternalSystemStatus(system.value) : null))
const isAccessible = computed(() =>
system.value ? isExternalSystemAccessible(system.value) : false,
)
+ async function fetchSystem(id: string) {
+ loading.value = true
+ error.value = null
+
+ try {
+ system.value = await getExternalSystem(id)
+ } catch (err) {
+ system.value = null
+ error.value = getApiErrorMessage(err, 'Sistem luaran tidak dijumpai.')
+ } finally {
+ loading.value = false
+ }
+ }
+
watch(
systemId,
- () => {
- error.value = system.value ? null : 'Sistem luaran tidak dijumpai.'
+ (id) => {
+ if (!id) {
+ system.value = null
+ error.value = 'Sistem luaran tidak dijumpai.'
+ return
+ }
+
+ fetchSystem(id)
},
{ immediate: true },
)
diff --git a/src/modules/external-system/composables/useExternalSystemLaunch.ts b/src/modules/external-system/composables/useExternalSystemLaunch.ts
new file mode 100644
index 0000000..61c4867
--- /dev/null
+++ b/src/modules/external-system/composables/useExternalSystemLaunch.ts
@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import Swal from 'sweetalert2'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { launchExternalSystemSso } from '../services/external-system.service'
+import { isExternalSystemAccessible } from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
+
+export function useExternalSystemLaunch() {
+ const launching = ref(false)
+
+ async function launchExternalSystem(system: ExternalSystem) {
+ if (!isExternalSystemAccessible(system) || launching.value) {
+ return
+ }
+
+ launching.value = true
+
+ try {
+ if (system.sso_enabled) {
+ const response = await launchExternalSystemSso(system.code)
+ window.open(
+ response.data.launch_url,
+ system.opens_in_new_tab ? '_blank' : '_self',
+ 'noopener,noreferrer',
+ )
+ return
+ }
+
+ window.open(
+ system.url,
+ system.opens_in_new_tab ? '_blank' : '_self',
+ 'noopener,noreferrer',
+ )
+ } catch (error) {
+ await Swal.fire({
+ icon: 'error',
+ title: 'Gagal membuka sistem',
+ text: getApiErrorMessage(error, 'Tidak dapat membuka sistem luaran.'),
+ })
+ } finally {
+ launching.value = false
+ }
+ }
+
+ return {
+ launching,
+ launchExternalSystem,
+ }
+}
diff --git a/src/modules/external-system/composables/useExternalSystemList.ts b/src/modules/external-system/composables/useExternalSystemList.ts
index 0b2048f..0e18dfe 100644
--- a/src/modules/external-system/composables/useExternalSystemList.ts
+++ b/src/modules/external-system/composables/useExternalSystemList.ts
@@ -1,5 +1,6 @@
-import { computed, ref } from 'vue'
-import { dummyExternalSystems } from '../data/dummy-external-systems'
+import { computed, onMounted, ref } from 'vue'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { listExternalSystems } from '../services/external-system.service'
import {
externalSystemStatusLabel,
getExternalSystemStatus,
@@ -9,14 +10,16 @@ import type { ExternalSystem } from '../types/external-system.types'
export function useExternalSystemList() {
const search = ref('')
const loading = ref(false)
+ const error = ref(null)
+ const allSystems = ref([])
const systems = computed(() => {
const query = search.value.trim().toLowerCase()
if (!query) {
- return dummyExternalSystems
+ return allSystems.value
}
- return dummyExternalSystems.filter((system) => {
+ return allSystems.value.filter((system) => {
const haystack = [
system.name,
system.code,
@@ -35,14 +38,34 @@ export function useExternalSystemList() {
)
function getSystemById(id: string): ExternalSystem | undefined {
- return dummyExternalSystems.find((system) => system.id === id)
+ return allSystems.value.find((system) => system.id === id)
}
+ async function fetchSystems() {
+ loading.value = true
+ error.value = null
+
+ try {
+ allSystems.value = await listExternalSystems()
+ } catch (err) {
+ error.value = getApiErrorMessage(err, 'Gagal memuatkan senarai sistem luaran.')
+ allSystems.value = []
+ } finally {
+ loading.value = false
+ }
+ }
+
+ onMounted(() => {
+ fetchSystems()
+ })
+
return {
systems,
search,
loading,
+ error,
availableCount,
getSystemById,
+ fetchSystems,
}
}
diff --git a/src/modules/external-system/data/dummy-external-systems.ts b/src/modules/external-system/data/dummy-external-systems.ts
deleted file mode 100644
index f9ae832..0000000
--- a/src/modules/external-system/data/dummy-external-systems.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { ExternalSystem } from '../types/external-system.types'
-
-export const dummyExternalSystems: ExternalSystem[] = [
- {
- id: 'ext-001',
- code: 'portal-mykopkb',
- name: 'Portal Ahli KOPKB',
- description:
- 'Sistem utama keahlian Koperasi Permodalan Kelantan Berhad untuk semakan dividen, penyata dan maklumat ahli.',
- url: 'https://mykopkb.koppkb.com',
- icon: 'Users',
- is_active: true,
- starts_at: '2026-01-01T00:00:00+08:00',
- ends_at: null,
- opens_in_new_tab: true,
- contact_email: 'dev_kopkb@gmail.com',
- notes: 'Log masuk menggunakan e-mel berdaftar ahli KOPKB.',
- created_at: '2026-01-15T09:00:00+08:00',
- updated_at: '2026-06-01T14:30:00+08:00',
- },
- {
- id: 'ext-002',
- code: 'e-vote',
- name: 'Sistem Pengundian AGM KOPKB',
- description:
- 'Platform pengundian dalam talian untuk Mesyuarat Agung Tahunan. Hanya tersedia semasa tempoh pengundian.',
- url: 'https://e-vote.erahn.com.my/login',
- icon: 'Vote',
- is_active: true,
- starts_at: '2026-05-01T08:00:00+08:00',
- ends_at: null,
- opens_in_new_tab: true,
- contact_email: 'dev_kopkb@gmail.com',
- notes: 'Sila lengkapkan profil sebelum mengundi.',
- created_at: '2026-05-20T10:00:00+08:00',
- updated_at: '2026-06-28T11:15:00+08:00',
- },
-]
diff --git a/src/modules/external-system/pages/ExternalSystemDetail.vue b/src/modules/external-system/pages/ExternalSystemDetail.vue
index 0b97907..1b99c14 100644
--- a/src/modules/external-system/pages/ExternalSystemDetail.vue
+++ b/src/modules/external-system/pages/ExternalSystemDetail.vue
@@ -6,15 +6,16 @@ import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { Lucide } from '@/components/ui/lucide'
import { useExternalSystemDetail } from '../composables/useExternalSystemDetail'
+import { useExternalSystemLaunch } from '../composables/useExternalSystemLaunch'
import {
externalSystemStatusLabel,
externalSystemStatusVariant,
formatExternalSystemDateTime,
- openExternalSystem,
} from '../utils/external-system.utils'
const router = useRouter()
const { system, error, status, isAccessible } = useExternalSystemDetail()
+const { launching, launchExternalSystem } = useExternalSystemLaunch()
function goBack() {
router.push({ name: 'list-external-systems' })
@@ -22,7 +23,7 @@ function goBack() {
function handleOpen() {
if (!system.value) return
- openExternalSystem(system.value)
+ launchExternalSystem(system.value)
}
@@ -93,7 +94,7 @@ function handleOpen() {
+
+ Ralat
+ {{ error }}
+
+
Daftar Akaun
-
- Daftar Akaun
+
+
- Daftar gagal
- {{ errorMessage }}
-
-
-
diff --git a/src/modules/auth/pages/VerifyEmail.vue b/src/modules/auth/pages/VerifyEmail.vue
deleted file mode 100644
index 2f17667..0000000
--- a/src/modules/auth/pages/VerifyEmail.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-
-
-
-
+
-
+
+
+ {{ step.label }}
+
+
-
-
diff --git a/src/modules/auth/routes.ts b/src/modules/auth/routes.ts
index 31906f2..5387b1b 100644
--- a/src/modules/auth/routes.ts
+++ b/src/modules/auth/routes.ts
@@ -13,12 +13,6 @@ export const authPublicRoutes: RouteRecordRaw[] = [
component: () => import('./pages/Register.vue'),
meta: { module: 'auth' },
},
- {
- path: '/verify-email',
- name: 'verify-email',
- component: () => import('./pages/VerifyEmail.vue'),
- meta: { module: 'auth' },
- },
{
path: '/forgot-password',
name: 'forgot-password',
diff --git a/src/modules/auth/services/auth.service.ts b/src/modules/auth/services/auth.service.ts
index 06391b2..94b2664 100644
--- a/src/modules/auth/services/auth.service.ts
+++ b/src/modules/auth/services/auth.service.ts
@@ -5,16 +5,18 @@ import type {
ForgotPasswordResponse,
LoginCredentials,
LoginResponse,
- LoginVerificationRequiredData,
RegisterCredentials,
RegisterResponse,
- ResendVerificationResponse,
ResetPasswordPayload,
ResetPasswordResponse,
+ ResendVerificationResponse,
SessionResponse,
+ SendPhoneVerificationOtpPayload,
+ SendPhoneVerificationOtpResponse,
SwitchRoleResponse,
- VerifyEmailPayload,
- VerifyEmailResponse,
+ VerifyPhoneVerificationOtpPayload,
+ VerifyPhoneVerificationOtpResponse,
+ VerifyAuthenticatedPhoneVerificationOtpResponse,
} from '../types/auth.types'
export async function login(credentials: LoginCredentials): Promise
-
-
-
-
-
-
-
- ![logo-RAJD]()
-
- {{ appName }} {{ appVersion }}
-
-
-
-
-
- ![logo-RAJD]()
-
-
- Sahkan E-mel
-
-
- Masukkan kod 6 digit yang dihantar ke e-mel anda.
-
-
-
-
- Verification failed
- {{ errorMessage }}
-
-
-
- {{ resendMessage }}
-
-
-
-
-
- - Verify Email -
-- Kod OTP 6 digit telah dihantar ke e-mel anda. -
- -
@@ -82,7 +88,8 @@ function handleOpen(system: ExternalSystem) {
@@ -94,7 +101,7 @@ function handleOpen(system: ExternalSystem) {
-
+
{
+ const { data } = await api.get('/v1/external-systems')
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memuatkan senarai sistem luaran.')
+ }
+
+ return data.data
+}
+
+export async function getExternalSystem(id: string): Promise {
+ const { data } = await api.get(`/v1/external-systems/${id}`)
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Sistem luaran tidak dijumpai.')
+ }
+
+ return data.data
+}
+
+export async function launchExternalSystemSso(
+ systemCode: string,
+): Promise {
+ const { data } = await api.post(
+ `/v1/external-systems/${systemCode}/sso/launch`,
+ )
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal membuka sistem.')
+ }
+
+ return data
+}
diff --git a/src/modules/external-system/types/external-system.types.ts b/src/modules/external-system/types/external-system.types.ts
index 2db3a87..2e590f3 100644
--- a/src/modules/external-system/types/external-system.types.ts
+++ b/src/modules/external-system/types/external-system.types.ts
@@ -13,8 +13,30 @@ export type ExternalSystem = {
starts_at: string | null
ends_at: string | null
opens_in_new_tab: boolean
+ sso_enabled: boolean
contact_email: string | null
notes: string | null
created_at: string
updated_at: string
}
+
+export type ExternalSystemSsoLaunchResponse = {
+ success: boolean
+ message?: string
+ data: {
+ launch_url: string
+ expires_at: string
+ }
+}
+
+export type ExternalSystemListResponse = {
+ success: boolean
+ message?: string
+ data: ExternalSystem[]
+}
+
+export type ExternalSystemResponse = {
+ success: boolean
+ message?: string
+ data: ExternalSystem
+}
diff --git a/src/modules/feedback/components/HelpdeskFab.vue b/src/modules/feedback/components/HelpdeskFab.vue
new file mode 100644
index 0000000..788028b
--- /dev/null
+++ b/src/modules/feedback/components/HelpdeskFab.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
diff --git a/src/modules/feedback/composables/useFeedbackList.ts b/src/modules/feedback/composables/useFeedbackList.ts
new file mode 100644
index 0000000..62d9262
--- /dev/null
+++ b/src/modules/feedback/composables/useFeedbackList.ts
@@ -0,0 +1,104 @@
+import { onMounted, ref, watch } from 'vue'
+import debounce from 'lodash/debounce'
+import type { SortConfig } from '@/components/ui/usage/DataTable.vue'
+import { useApiPagination } from '@/composables/useApiPagination'
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { listFeedback } from '../services/feedback.service'
+import type {
+ FeedbackListItem,
+ FeedbackPriority,
+ FeedbackStatus,
+ FeedbackType,
+} from '../types/feedback.types'
+
+export function useFeedbackList() {
+ const items = ref([])
+ const loading = ref(false)
+ const error = ref(null)
+ const search = ref('')
+ const typeFilter = ref('')
+ const statusFilter = ref('')
+ const priorityFilter = ref('')
+ const sortBy = ref([{ key: 'created_at', order: 'desc' }])
+ const page = ref(1)
+ const itemsPerPage = ref(10)
+
+ const { pagination, applyPagination } = useApiPagination({ per_page: 10 })
+
+ async function fetchItems(requestPage = page.value) {
+ loading.value = true
+ error.value = null
+
+ try {
+ const activeSort = sortBy.value[0]
+ const data = await listFeedback({
+ page: requestPage,
+ per_page: itemsPerPage.value,
+ sort_by: activeSort?.key ?? 'created_at',
+ sort_order: activeSort?.order ?? 'desc',
+ search: search.value.trim() || undefined,
+ type: typeFilter.value || undefined,
+ status: statusFilter.value || undefined,
+ priority: priorityFilter.value || undefined,
+ })
+
+ items.value = data.data
+ applyPagination(data.pagination)
+ page.value = data.pagination.current_page
+ } catch (err) {
+ error.value = getApiErrorMessage(err, 'Gagal memuatkan senarai maklum balas.')
+ items.value = []
+ } finally {
+ loading.value = false
+ }
+ }
+
+ function handleSortUpdate(value: SortConfig[]) {
+ sortBy.value = value
+ fetchItems(1)
+ }
+
+ const debouncedSearch = debounce(() => {
+ fetchItems(1)
+ }, 400)
+
+ watch(search, () => {
+ debouncedSearch()
+ })
+
+ watch([typeFilter, statusFilter, priorityFilter], () => {
+ fetchItems(1)
+ })
+
+ watch(page, (nextPage, previousPage) => {
+ if (nextPage !== previousPage) {
+ fetchItems(nextPage)
+ }
+ })
+
+ watch(itemsPerPage, (nextValue, previousValue) => {
+ if (nextValue !== previousValue) {
+ fetchItems(1)
+ }
+ })
+
+ onMounted(() => {
+ fetchItems(1)
+ })
+
+ return {
+ items,
+ loading,
+ error,
+ search,
+ typeFilter,
+ statusFilter,
+ priorityFilter,
+ sortBy,
+ page,
+ itemsPerPage,
+ pagination,
+ handleSortUpdate,
+ fetchItems,
+ }
+}
diff --git a/src/modules/feedback/index.ts b/src/modules/feedback/index.ts
new file mode 100644
index 0000000..bfb8ce4
--- /dev/null
+++ b/src/modules/feedback/index.ts
@@ -0,0 +1,22 @@
+export { feedbackPublicRoutes, feedbackLayoutRoutes } from './routes'
+export { feedbackMenu } from './menu'
+export { default as HelpdeskFab } from './components/HelpdeskFab.vue'
+export {
+ submitFeedback,
+ listFeedback,
+ getFeedback,
+ updateFeedback,
+ deleteFeedback,
+ getMyFeedback,
+ getFeedbackStatistics,
+} from './services/feedback.service'
+export type {
+ Feedback,
+ FeedbackFormState,
+ FeedbackListItem,
+ FeedbackStatus,
+ FeedbackType,
+ FeedbackPriority,
+ SubmitFeedbackPayload,
+ UpdateFeedbackPayload,
+} from './types/feedback.types'
diff --git a/src/modules/feedback/menu.ts b/src/modules/feedback/menu.ts
new file mode 100644
index 0000000..c5f288d
--- /dev/null
+++ b/src/modules/feedback/menu.ts
@@ -0,0 +1,10 @@
+import type { Menu } from '@/core/types/menu'
+
+export const feedbackMenu: Menu[] = [
+ {
+ icon: 'MessageCircle',
+ route_name: 'list-feedback',
+ title: 'Maklum Balas',
+ permission: 'lihat maklum balas',
+ },
+]
diff --git a/src/modules/feedback/pages/FeedbackDetail.vue b/src/modules/feedback/pages/FeedbackDetail.vue
new file mode 100644
index 0000000..970914e
--- /dev/null
+++ b/src/modules/feedback/pages/FeedbackDetail.vue
@@ -0,0 +1,486 @@
+
+
+
+
+
+
diff --git a/src/modules/feedback/pages/FeedbackList.vue b/src/modules/feedback/pages/FeedbackList.vue
new file mode 100644
index 0000000..dcd1315
--- /dev/null
+++ b/src/modules/feedback/pages/FeedbackList.vue
@@ -0,0 +1,289 @@
+
+
+
+ {
+ const formData = buildFeedbackFormData(payload)
+
+ const { data } = await api.post('/v1/feedback', formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ })
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal menghantar maklum balas.')
+ }
+
+ return data
+}
+
+export async function listFeedback(
+ params: ListFeedbackParams = {},
+): Promise> {
+ const { data } = await api.get>('/v1/feedback', {
+ params,
+ })
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memuatkan senarai maklum balas.')
+ }
+
+ return data
+}
+
+export async function getFeedback(id: string): Promise {
+ const { data } = await api.get(`/v1/feedback/${id}`)
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memuatkan maklum balas.')
+ }
+
+ return data.data
+}
+
+export async function updateFeedback(
+ id: string,
+ payload: UpdateFeedbackPayload,
+): Promise {
+ const { data } = await api.patch(`/v1/feedback/${id}`, payload)
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal mengemas kini maklum balas.')
+ }
+
+ return data
+}
+
+export async function deleteFeedback(id: string): Promise {
+ const { data } = await api.delete<{ success: boolean; message?: string }>(`/v1/feedback/${id}`)
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memadam maklum balas.')
+ }
+}
+
+export async function getMyFeedback(
+ params: ListFeedbackParams = {},
+): Promise> {
+ const { data } = await api.get<{
+ success: boolean
+ data: FeedbackListItem[]
+ meta: {
+ current_page: number
+ last_page: number
+ per_page: number
+ total: number
+ }
+ message?: string
+ }>('/v1/my-feedback', { params })
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memuatkan maklum balas anda.')
+ }
+
+ return {
+ success: true,
+ data: data.data,
+ pagination: {
+ current_page: data.meta.current_page,
+ per_page: data.meta.per_page,
+ total: data.meta.total,
+ last_page: data.meta.last_page,
+ from: null,
+ to: null,
+ has_more_pages: data.meta.current_page < data.meta.last_page,
+ },
+ }
+}
+
+export async function getFeedbackStatistics(): Promise {
+ const { data } = await api.get<{ success: boolean; data: FeedbackStatistics; message?: string }>(
+ '/v1/feedback-statistics',
+ )
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memuatkan statistik maklum balas.')
+ }
+
+ return data.data
+}
+
+export async function fetchFeedbackDocument(
+ feedbackId: string,
+ documentId: string,
+ mimeType?: string | null,
+): Promise {
+ const response = await api.get(`/v1/feedback/${feedbackId}/documents/${documentId}/download`, {
+ responseType: 'blob',
+ })
+
+ const contentType =
+ mimeType ||
+ (typeof response.headers['content-type'] === 'string' ? response.headers['content-type'] : null) ||
+ 'application/octet-stream'
+
+ return new Blob([response.data], { type: contentType })
+}
diff --git a/src/modules/feedback/types/feedback.types.ts b/src/modules/feedback/types/feedback.types.ts
new file mode 100644
index 0000000..89d5313
--- /dev/null
+++ b/src/modules/feedback/types/feedback.types.ts
@@ -0,0 +1,180 @@
+export type FeedbackType =
+ | 'bug'
+ | 'feature_request'
+ | 'general_feedback'
+ | 'ui_issue'
+ | 'performance_issue'
+
+export type FeedbackPriority = 'low' | 'medium' | 'high' | 'critical'
+
+export type FeedbackStatus = 'open' | 'in_progress' | 'resolved' | 'closed' | 'rejected'
+
+export type FeedbackDocument = {
+ id: string
+ name: string
+ mime_type: string | null
+ file_size: number | null
+ type: 'image' | 'video' | string
+ url?: string | null
+}
+
+export type FeedbackUserSummary = {
+ id: string
+ name: string
+ email: string
+ army_number?: string | null
+}
+
+export type FeedbackAssignedUser = {
+ id: string
+ name: string
+ email: string
+}
+
+export type Feedback = {
+ id: string
+ type: FeedbackType
+ title: string
+ description: string
+ priority: FeedbackPriority
+ status: FeedbackStatus
+ page_url: string | null
+ browser_info: Record | null
+ images?: FeedbackDocument[]
+ videos?: FeedbackDocument[]
+ steps_to_reproduce: string | null
+ expected_behavior: string | null
+ actual_behavior: string | null
+ additional_notes: string | null
+ admin_notes: string | null
+ resolved_at: string | null
+ user?: FeedbackUserSummary | null
+ assigned_user?: FeedbackAssignedUser | null
+ created_at: string
+ updated_at: string
+}
+
+export type FeedbackListItem = Feedback
+
+export type FeedbackFormState = {
+ type: FeedbackType
+ title: string
+ description: string
+ priority: FeedbackPriority
+ page_url: string
+ steps_to_reproduce: string
+ expected_behavior: string
+ actual_behavior: string
+ additional_notes: string
+ images: File[]
+ videos: File[]
+}
+
+export type SubmitFeedbackPayload = {
+ type: FeedbackType
+ title: string
+ description: string
+ priority: FeedbackPriority
+ page_url?: string
+ steps_to_reproduce?: string
+ expected_behavior?: string
+ actual_behavior?: string
+ additional_notes?: string
+ images?: File[]
+ videos?: File[]
+ screen_resolution?: string
+ viewport_size?: string
+ timezone?: string
+}
+
+export type UpdateFeedbackPayload = {
+ type?: FeedbackType
+ title?: string
+ description?: string
+ priority?: FeedbackPriority
+ page_url?: string | null
+ steps_to_reproduce?: string | null
+ expected_behavior?: string | null
+ actual_behavior?: string | null
+ additional_notes?: string | null
+ status?: FeedbackStatus
+ assigned_to?: string | null
+ admin_notes?: string | null
+}
+
+export type ListFeedbackParams = {
+ page?: number
+ per_page?: number
+ search?: string
+ sort_by?: string
+ sort_order?: 'asc' | 'desc'
+ type?: FeedbackType | ''
+ status?: FeedbackStatus | ''
+ priority?: FeedbackPriority | ''
+}
+
+export type FeedbackApiResponse = {
+ success: boolean
+ data: Feedback
+ message?: string
+}
+
+export type FeedbackStatistics = {
+ total: number
+ open: number
+ resolved: number
+ by_type: Record
+ by_priority: Record
+ by_status: Record
+}
+
+export const FEEDBACK_TYPE_OPTIONS: { label: string; value: FeedbackType }[] = [
+ { label: 'Ralat / Bug', value: 'bug' },
+ { label: 'Permintaan Ciri Baharu', value: 'feature_request' },
+ { label: 'Maklum Balas Umum', value: 'general_feedback' },
+ { label: 'Isu Antara Muka', value: 'ui_issue' },
+ { label: 'Isu Prestasi', value: 'performance_issue' },
+]
+
+export const FEEDBACK_PRIORITY_OPTIONS: { label: string; value: FeedbackPriority }[] = [
+ { label: 'Rendah', value: 'low' },
+ { label: 'Sederhana', value: 'medium' },
+ { label: 'Tinggi', value: 'high' },
+ { label: 'Kritikal', value: 'critical' },
+]
+
+export const FEEDBACK_STATUS_OPTIONS: { label: string; value: FeedbackStatus }[] = [
+ { label: 'Terbuka', value: 'open' },
+ { label: 'Dalam Proses', value: 'in_progress' },
+ { label: 'Diselesaikan', value: 'resolved' },
+ { label: 'Ditutup', value: 'closed' },
+ { label: 'Ditolak', value: 'rejected' },
+]
+
+export function feedbackTypeLabel(type: FeedbackType | string): string {
+ return FEEDBACK_TYPE_OPTIONS.find((option) => option.value === type)?.label ?? type
+}
+
+export function feedbackPriorityLabel(priority: FeedbackPriority | string): string {
+ return FEEDBACK_PRIORITY_OPTIONS.find((option) => option.value === priority)?.label ?? priority
+}
+
+export function feedbackStatusLabel(status: FeedbackStatus | string): string {
+ return FEEDBACK_STATUS_OPTIONS.find((option) => option.value === status)?.label ?? status
+}
+
+export function createEmptyFeedbackForm(): FeedbackFormState {
+ return {
+ type: 'general_feedback',
+ title: '',
+ description: '',
+ priority: 'medium',
+ page_url: typeof window !== 'undefined' ? window.location.href : '',
+ steps_to_reproduce: '',
+ expected_behavior: '',
+ actual_behavior: '',
+ additional_notes: '',
+ images: [],
+ videos: [],
+ }
+}
diff --git a/src/modules/membership-application/pages/MembershipApplication.vue b/src/modules/membership-application/pages/MembershipApplication.vue
index 9e8e7ea..aefe61b 100644
--- a/src/modules/membership-application/pages/MembershipApplication.vue
+++ b/src/modules/membership-application/pages/MembershipApplication.vue
@@ -21,6 +21,7 @@ import { Textarea } from '@/components/ui/textarea'
import { AlertRoot, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Lucide } from '@/components/ui/lucide'
import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
+import { HelpdeskFab } from '@/modules/feedback'
import { submitMembershipApplication, lookupMemberByIcNumber } from '../services/membership-application.service'
import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
import type {
@@ -567,6 +568,7 @@ function stepLabelClass(stepId: number) {
Tiada sistem dijumpai
Cuba istilah carian yang berbeza.
diff --git a/src/modules/external-system/services/external-system.service.ts b/src/modules/external-system/services/external-system.service.ts new file mode 100644 index 0000000..0e1b07a --- /dev/null +++ b/src/modules/external-system/services/external-system.service.ts @@ -0,0 +1,41 @@ +import { api } from '@/core/services/api' +import type { + ExternalSystem, + ExternalSystemListResponse, + ExternalSystemResponse, + ExternalSystemSsoLaunchResponse, +} from '../types/external-system.types' + +export async function listExternalSystems(): Promise
+
+ Ralat
+ {{ error }}
+
+
+
+ Berjaya
+ {{ successMessage }}
+
+
+
+
+
+
+
+
+
+
+ Butiran Maklum Balas
+Semak dan kemas kini status laporan.
+
+
+
+ Memuatkan...
+
+
+
+
+
+
+
+
+
+ {{ feedbackTypeLabel(feedback.type) }}
+ {{ feedbackPriorityLabel(feedback.priority) }}
+ {{ feedbackStatusLabel(feedback.status) }}
+
+
+
+
+
+ {{ feedback.title }}
+{{ feedback.description }}
+
+ URL:
+
+ {{ feedback.page_url }}
+
+
+
+
+
+
+ Langkah menghasilkan semula
+ {{ feedback.steps_to_reproduce }}
+
+
+
+
+
+ Kelakuan dijangka
+ {{ feedback.expected_behavior }}
+
+
+ Kelakuan sebenar
+ {{ feedback.actual_behavior }}
+
+
+
+ Nota tambahan
+ {{ feedback.additional_notes }}
+
+
+
+ Imej
+
+
+
+
+
+ Video
+
+
+
+
+
+
+
+
+
+ Status
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+ Nota admin
+
+
+
+
+
+
+
+
+ Penghantar
+ {{ feedback.user?.name ?? 'Tetamu' }}
+ {{ feedback.user.email }}
+
+
+ Dihantar
+ {{ formatDate(feedback.created_at) }}
+
+
+ Diselesaikan
+ {{ formatDate(feedback.resolved_at) }}
+
+
+ Ditugaskan kepada
+ {{ feedback.assigned_user.name }}
+ Tindakan Admin
+ +
+
+
+
+
+
+
+
+
+
+ {{ previewKind === 'video' ? 'Main Video' : 'Pratonton Imej' }}
+
+
+ {{ previewDocument.name }} · {{ formatFileSize(previewDocument.file_size) }}
+
+
+
+
+
+ Memuatkan...
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+ Ralat
+ {{ error }}
+
+
+
+
diff --git a/src/modules/feedback/pages/FeedbackSubmit.vue b/src/modules/feedback/pages/FeedbackSubmit.vue
new file mode 100644
index 0000000..7b27f44
--- /dev/null
+++ b/src/modules/feedback/pages/FeedbackSubmit.vue
@@ -0,0 +1,347 @@
+
+
+
+
+
+
+
+
+ Senarai Maklum Balas
+Urus laporan ralat, cadangan dan isu pengguna.
+
+
+
+
+
+
+
+ {{ feedbackPriorityLabel((item as FeedbackListItem).priority) }}
+
+
+
+
+
+ {{ feedbackStatusLabel((item as FeedbackListItem).status) }}
+
+
+
+
+ {{ (item as FeedbackListItem).user?.name ?? 'Tetamu' }}
+
+
+
+ {{ formatDate((item as FeedbackListItem).created_at) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Jenis
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Status
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Keutamaan
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+ {{ (item as FeedbackListItem).title }}
+
+ {{ (item as FeedbackListItem).description }}
+
+
+
+
+ {{ feedbackTypeLabel((item as FeedbackListItem).type) }}
+
+
+
+
+
+
diff --git a/src/modules/feedback/routes.ts b/src/modules/feedback/routes.ts
new file mode 100644
index 0000000..e3b5160
--- /dev/null
+++ b/src/modules/feedback/routes.ts
@@ -0,0 +1,33 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const feedbackPublicRoutes: RouteRecordRaw[] = [
+ {
+ path: '/feedback/submit',
+ name: 'feedback-submit',
+ component: () => import('./pages/FeedbackSubmit.vue'),
+ meta: { public: true, module: 'feedback', title: 'Maklum Balas' },
+ },
+]
+
+export const feedbackLayoutRoutes: RouteRecordRaw[] = [
+ {
+ path: 'feedback',
+ name: 'list-feedback',
+ component: () => import('./pages/FeedbackList.vue'),
+ meta: {
+ title: 'Senarai Maklum Balas',
+ module: 'feedback',
+ permission: 'lihat maklum balas',
+ },
+ },
+ {
+ path: 'feedback/:id',
+ name: 'view-feedback',
+ component: () => import('./pages/FeedbackDetail.vue'),
+ meta: {
+ title: 'Butiran Maklum Balas',
+ module: 'feedback',
+ permission: 'lihat maklum balas',
+ },
+ },
+]
diff --git a/src/modules/feedback/services/feedback.service.ts b/src/modules/feedback/services/feedback.service.ts
new file mode 100644
index 0000000..4eaf14b
--- /dev/null
+++ b/src/modules/feedback/services/feedback.service.ts
@@ -0,0 +1,170 @@
+import { api } from '@/core/services/api'
+import type { PaginatedApiResponse } from '@/core/types/api'
+import type {
+ Feedback,
+ FeedbackApiResponse,
+ FeedbackListItem,
+ FeedbackStatistics,
+ ListFeedbackParams,
+ SubmitFeedbackPayload,
+ UpdateFeedbackPayload,
+} from '../types/feedback.types'
+
+function appendIfPresent(formData: FormData, key: string, value: string | undefined | null) {
+ if (value !== null && value !== undefined && value !== '') {
+ formData.append(key, value)
+ }
+}
+
+export function buildFeedbackFormData(payload: SubmitFeedbackPayload): FormData {
+ const formData = new FormData()
+
+ formData.append('type', payload.type)
+ formData.append('title', payload.title)
+ formData.append('description', payload.description)
+ formData.append('priority', payload.priority)
+
+ appendIfPresent(formData, 'page_url', payload.page_url)
+ appendIfPresent(formData, 'steps_to_reproduce', payload.steps_to_reproduce)
+ appendIfPresent(formData, 'expected_behavior', payload.expected_behavior)
+ appendIfPresent(formData, 'actual_behavior', payload.actual_behavior)
+ appendIfPresent(formData, 'additional_notes', payload.additional_notes)
+ appendIfPresent(formData, 'screen_resolution', payload.screen_resolution)
+ appendIfPresent(formData, 'viewport_size', payload.viewport_size)
+ appendIfPresent(formData, 'timezone', payload.timezone)
+
+ payload.images?.forEach((file, index) => {
+ formData.append(`images[${index}]`, file)
+ })
+
+ payload.videos?.forEach((file, index) => {
+ formData.append(`videos[${index}]`, file)
+ })
+
+ return formData
+}
+
+/** Public + authenticated: POST /v1/feedback (auth cookie attaches user when present). */
+export async function submitFeedback(payload: SubmitFeedbackPayload): Promise
+
+
+
+
+
+ Ralat
+ {{ errorMessage }}
+
+
+
+
+
+
+ ![MyKOPKB]()
+
+
+
+
+ Maklum Balas
++ Laporkan ralat, cadangan atau isu. +
+Terima kasih!
+{{ successMessage }}
+
+
+
+
+
+
+
+
+
+
+ {
+ const { data } = await api.post(`/v1/users/${userId}/employments`, payload)
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal menambah pekerjaan.')
+ }
+
+ return data
+}
+
+export async function updateUserEmployment(
+ userId: string,
+ employmentId: string,
+ payload: EmploymentPayload,
+): Promise {
+ const { data } = await api.put(
+ `/v1/users/${userId}/employments/${employmentId}`,
+ payload,
+ )
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal mengemas kini pekerjaan.')
+ }
+
+ return data
+}
+
+export async function deleteUserEmployment(
+ userId: string,
+ employmentId: string,
+): Promise {
+ const { data } = await api.delete(
+ `/v1/users/${userId}/employments/${employmentId}`,
+ )
+
+ if (!data.success) {
+ throw new Error(data.message ?? 'Gagal memadam pekerjaan.')
+ }
+
+ return data
+}
diff --git a/src/modules/user/types/user.types.ts b/src/modules/user/types/user.types.ts
index 37ae0c1..46381ff 100644
--- a/src/modules/user/types/user.types.ts
+++ b/src/modules/user/types/user.types.ts
@@ -84,6 +84,7 @@ export interface CreateUserPayload {
member_number: number
member_type: string
join_date: string
+ leave_date?: string | null
birth_date: string
birth_place: string
}
@@ -99,6 +100,7 @@ export interface ListUsersParams {
join_date_to?: string
leave_date_from?: string
leave_date_to?: string
+ company_name?: string
}
export interface ListDeletedUsersParams {
diff --git a/src/router/index.ts b/src/router/index.ts
index 639454f..b25cac3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ import { activityLayoutRoutes } from '@/modules/activity'
import { dashboardLayoutRoutes } from '@/modules/dashboard'
import { externalSystemLayoutRoutes } from '@/modules/external-system'
import { activityLogLayoutRoutes } from '@/modules/activity-log'
+import { feedbackPublicRoutes, feedbackLayoutRoutes } from '@/modules/feedback'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -30,15 +31,17 @@ const router = createRouter({
...activityLayoutRoutes,
...externalSystemLayoutRoutes,
...membershipApplicationLayoutRoutes,
+ ...feedbackLayoutRoutes,
],
},
...authPublicRoutes,
...membershipApplicationPublicRoutes,
+ ...feedbackPublicRoutes,
...profilePublicRoutes,
],
})
-const PUBLIC_ROUTE_NAMES = new Set(['login', 'register', 'verify-email', 'membership-application-apply'])
+const PUBLIC_ROUTE_NAMES = new Set(['login', 'register', 'membership-application-apply', 'feedback-submit'])
router.beforeEach(async (to) => {
const authStore = useAuthStore(pinia)
@@ -66,11 +69,11 @@ router.beforeEach(async (to) => {
return true
}
- // Redirect authenticated users away from login/register/verify-email.
if (
authStore.isAuthenticated &&
PUBLIC_ROUTE_NAMES.has(routeName) &&
- routeName !== 'membership-application-apply'
+ routeName !== 'membership-application-apply' &&
+ routeName !== 'feedback-submit'
) {
return resolvePostAuthRoute(authStore.user)
}
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 5e241c4..3f20581 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -36,6 +36,8 @@ export const useAuthStore = defineStore('auth', {
isAuthenticated: (state) => state.user !== null,
isAccountPending: (state) => state.user?.status === 'pending',
isAccountActive: (state) => state.user?.status === 'active',
+ isEmailVerified: (state) => Boolean(state.user?.email_verified_at),
+ isPhoneVerified: (state) => Boolean(state.user?.phone_verified_at),
roles: (state) => state.user?.roles ?? [],
},
diff --git a/src/themes/Enigma/SideMenu/SideMenu.vue b/src/themes/Enigma/SideMenu/SideMenu.vue
index 21dd164..ab02773 100644
--- a/src/themes/Enigma/SideMenu/SideMenu.vue
+++ b/src/themes/Enigma/SideMenu/SideMenu.vue
@@ -1,4 +1,5 @@
diff --git a/src/modules/profile/components/PhoneVerificationSection.vue b/src/modules/profile/components/PhoneVerificationSection.vue
new file mode 100644
index 0000000..cdf7a6a
--- /dev/null
+++ b/src/modules/profile/components/PhoneVerificationSection.vue
@@ -0,0 +1,184 @@
+
+
+
+
+
+
diff --git a/src/modules/profile/pages/EmploymentTab.vue b/src/modules/profile/pages/EmploymentTab.vue
index d5adcb2..5400aec 100644
--- a/src/modules/profile/pages/EmploymentTab.vue
+++ b/src/modules/profile/pages/EmploymentTab.vue
@@ -72,7 +72,7 @@ const EMPLOYMENT_TYPE_OPTIONS: SelectOption[] = [
// TODO: replace with API lookup
const EMPLOYERS = [
{
- name: 'Infra Quest Sdn Bhd (IQSB)',
+ name: 'Infra Quest Sdn. Bhd. (IQSB)',
address: 'Lot 1045, Jalan Dato’ Lundang, 15200 Kota Bharu, Kelantan',
},
{
@@ -89,6 +89,10 @@ const EMPLOYERS = [
name: "An-Nisa'",
address: 'Jln Sultan Ibrahim, Bandar Kota Bharu, 15050 Kota Bharu, Kelantan.',
},
+ {
+ name: "Kel Infra Sdn. Bhd.",
+ address: "Tingkat 2 Menara Perbadanan, Jalan Tengku Petra Semerak, 15000 Kota Bharu, Kelantan.",
+ }
] as const
const COMPANY_OPTIONS: SelectOption[] = EMPLOYERS.map((employer) => ({
diff --git a/src/modules/profile/pages/ProfileTab.vue b/src/modules/profile/pages/ProfileTab.vue
index f4fef6a..7106781 100644
--- a/src/modules/profile/pages/ProfileTab.vue
+++ b/src/modules/profile/pages/ProfileTab.vue
@@ -31,6 +31,7 @@ import { updateProfile } from '@/modules/profile/services/profile.service'
import type { Address, AddressPayload } from '@/modules/profile/types/address.types'
import { useAuthStore } from '@/stores/auth'
import HeirTab from './HeirTab.vue'
+import PhoneVerificationSection from '../components/PhoneVerificationSection.vue'
defineProps<{
embedded?: boolean
@@ -44,7 +45,6 @@ const form = reactive({
name: '',
ic_number: '',
position: '',
- phone_number: '',
birth_date: '',
birth_place: '',
})
@@ -350,7 +350,6 @@ function syncFormFromUser() {
form.name = user.name ?? ''
form.ic_number = user.ic_number ?? ''
form.position = user.position ?? ''
- form.phone_number = user.phone_number ?? ''
form.birth_date = toDateInputValue(user.birth_date)
form.birth_place = user.birth_place ?? ''
syncProfileSelectValues()
@@ -368,7 +367,6 @@ async function onSaveProfile() {
name: form.name.trim(),
ic_number: form.ic_number.trim(),
position: form.position.trim(),
- phone_number: form.phone_number.trim(),
gender: gender ?? undefined,
marriage_status: marriageStatus ?? undefined,
birth_date: form.birth_date || undefined,
@@ -591,11 +589,6 @@ onMounted(async () => {
-
- No. Telefon
-
-
Jawatan
@@ -677,6 +670,8 @@ onMounted(async () => {
+
+
diff --git a/src/modules/user/pages/UserList.vue b/src/modules/user/pages/UserList.vue
index a00a2f8..32e64d2 100644
--- a/src/modules/user/pages/UserList.vue
+++ b/src/modules/user/pages/UserList.vue
@@ -20,6 +20,7 @@ import { Lucide } from '@/components/ui/lucide'
import DataTable from '@/components/ui/usage/DataTable.vue'
import type { TableHeader } from '@/components/ui/usage/DataTable.vue'
import { usePermissions } from '@/composables/usePermissions'
+import { EMPLOYERS } from '@/constants/employers'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { listRoles } from '@/modules/role/services/role.service'
import type { RoleListItem } from '@/modules/role/types/role.types'
@@ -48,6 +49,22 @@ const STATUS_FILTER_CHIPS: StatusFilterChip[] = [
{ label: 'Menunggu', value: 'pending', variant: 'pending' },
]
+function getEmployerShortLabel(name: string): string {
+ const match = name.match(/\(([^)]+)\)/)
+ if (match?.[1]) return match[1]
+ if (name.startsWith('An-Nisa')) return "An-Nisa'"
+ if (name.startsWith('Kel Infra')) return 'Kel Infra'
+ return name
+}
+
+const UNIT_FILTER_CHIPS = [
+ { label: 'Semua', value: '' },
+ ...EMPLOYERS.map((employer) => ({
+ label: getEmployerShortLabel(employer.name),
+ value: employer.name,
+ })),
+]
+
const router = useRouter()
const { hasPermission } = usePermissions()
@@ -163,6 +180,14 @@ function setStatusFilter(value: string) {
statusFilter.value = value
}
+function isUnitFilterActive(value: string) {
+ return unitFilter.value === value
+}
+
+function setUnitFilter(value: string) {
+ unitFilter.value = value
+}
+
function formatDeletedAt(value: string | null | undefined): string {
if (!value) return '-'
return dayjs(value).format('DD MMM YYYY, HH:mm')
@@ -356,6 +381,7 @@ const {
error,
search,
statusFilter,
+ unitFilter,
joinDateFrom,
joinDateTo,
leaveDateFrom,
@@ -540,6 +566,23 @@ onMounted(() => {
{{ chip.label }}
+
+
+
+ Nombor Telefon
++ {{ sectionDescription }} +
+
+
+
+
+
+ Disahkan
+
+
+ {{ feedbackMessage }}
+ + +
+
+
+ No. Telefon
+
+
+
+ Kod OTP
+
+
+
+
+
+ {{ feedbackMessage }}
+{{ errorMessage }}
+ +
+
+
+
+
+
+
+
+
diff --git a/src/modules/user/composables/useUserList.ts b/src/modules/user/composables/useUserList.ts
index c7082d9..2c4393c 100644
--- a/src/modules/user/composables/useUserList.ts
+++ b/src/modules/user/composables/useUserList.ts
@@ -18,6 +18,7 @@ export function useUserList() {
const joinDateTo = ref('')
const leaveDateFrom = ref('')
const leaveDateTo = ref('')
+ const unitFilter = ref('')
const sortBy = ref([{ key: 'name', order: 'asc' }])
const page = ref(1)
const itemsPerPage = ref(10)
@@ -55,6 +56,7 @@ export function useUserList() {
join_date_to: joinDateTo.value || undefined,
leave_date_from: leaveDateFrom.value || undefined,
leave_date_to: leaveDateTo.value || undefined,
+ company_name: unitFilter.value.trim() || undefined,
})
users.value = data.data
@@ -79,6 +81,7 @@ export function useUserList() {
join_date_to: joinDateTo.value || undefined,
leave_date_from: leaveDateFrom.value || undefined,
leave_date_to: leaveDateTo.value || undefined,
+ company_name: unitFilter.value.trim() || undefined,
})
stats.value = res.data
@@ -109,6 +112,11 @@ export function useUserList() {
fetchStats()
})
+ watch(unitFilter, () => {
+ fetchUsers(1)
+ fetchStats()
+ })
+
watch([joinDateFrom, joinDateTo, leaveDateFrom, leaveDateTo], () => {
fetchUsers(1)
fetchStats()
@@ -144,6 +152,7 @@ export function useUserList() {
joinDateTo,
leaveDateFrom,
leaveDateTo,
+ unitFilter,
hasJoinDateFilters,
hasLeaveDateFilters,
clearJoinDateFilters,
diff --git a/src/modules/user/pages/UserCreate.vue b/src/modules/user/pages/UserCreate.vue
index f8f4c80..09e684b 100644
--- a/src/modules/user/pages/UserCreate.vue
+++ b/src/modules/user/pages/UserCreate.vue
@@ -1,7 +1,8 @@
@@ -417,6 +431,17 @@ const formDisabled = computed(() => saving.value)
/>
+
+ Tarikh Berhenti Menjadi Anggota
+
+
+
Tarikh Lahir
({
+ label: employer.name,
+ value: employer.name,
+}))
+
+type EmploymentFieldKey =
+ | 'company_name'
+ | 'job_title'
+ | 'employment_type'
+ | 'salary'
+ | 'start_date'
+ | 'end_date'
+ | 'is_current'
+
+const EMPLOYMENT_FIELD_KEYS: EmploymentFieldKey[] = [
+ 'company_name',
+ 'job_title',
+ 'employment_type',
+ 'salary',
+ 'start_date',
+ 'end_date',
+ 'is_current',
+]
+
function createSelectCollection(options: SelectOption[]) {
return select.collection({
items: options,
@@ -71,6 +137,8 @@ const statusCollection = createSelectCollection(STATUS_OPTIONS)
const genderCollection = createSelectCollection(GENDER_OPTIONS)
const marriageStatusCollection = createSelectCollection(MARRIAGE_STATUS_OPTIONS)
const memberTypeCollection = createSelectCollection(MEMBER_TYPE_OPTIONS)
+const employmentTypeCollection = createSelectCollection(EMPLOYMENT_TYPE_OPTIONS)
+const companyNameCollection = createSelectCollection(COMPANY_OPTIONS)
const statusValue = ref([])
const genderValue = ref([])
@@ -82,6 +150,31 @@ const genderInitial = ref([])
const marriageStatusInitial = ref([])
const memberTypeInitial = ref([])
+const employmentTypeValue = ref([])
+const employmentTypeInitial = ref([])
+const companyNameValue = ref([])
+const companyNameInitial = ref([])
+
+const employments = ref([])
+const savingEmployment = ref(false)
+const deletingEmploymentId = ref(null)
+const editingEmploymentId = ref(null)
+const employmentErrors = reactive>>({})
+
+function emptyEmploymentForm() {
+ return {
+ company_name: '',
+ job_title: '',
+ employment_type: '',
+ salary: '',
+ start_date: '',
+ end_date: '',
+ is_current: true,
+ }
+}
+
+const employmentForm = reactive(emptyEmploymentForm())
+
function setStatusValue(details: { value: string[] }) {
statusValue.value = details.value
}
@@ -98,6 +191,59 @@ function setMemberTypeValue(details: { value: string[] }) {
memberTypeValue.value = details.value
}
+function setEmploymentTypeValue(details: { value: string[] }) {
+ employmentTypeValue.value = details.value
+ clearEmploymentFieldError('employment_type')
+ employmentForm.employment_type =
+ labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, details.value[0]) ?? ''
+}
+
+function setCompanyNameValue(details: { value: string[] }) {
+ companyNameValue.value = details.value
+ clearEmploymentFieldError('company_name')
+ employmentForm.company_name = details.value[0] ?? ''
+}
+
+function clearEmploymentFieldError(field: EmploymentFieldKey) {
+ delete employmentErrors[field]
+}
+
+function clearEmploymentErrors() {
+ for (const field of EMPLOYMENT_FIELD_KEYS) {
+ delete employmentErrors[field]
+ }
+}
+
+function setEmploymentErrorsFromApi(error: unknown): boolean {
+ const apiErrors = getApiValidationErrors(error)
+ if (!apiErrors) return false
+
+ for (const [field, messages] of Object.entries(apiErrors)) {
+ if (EMPLOYMENT_FIELD_KEYS.includes(field as EmploymentFieldKey) && messages[0]) {
+ employmentErrors[field as EmploymentFieldKey] = messages[0]
+ }
+ }
+
+ return Object.keys(employmentErrors).length > 0
+}
+
+function syncEmploymentSelectValues() {
+ employmentTypeValue.value = apiValueToLabel(
+ EMPLOYMENT_TYPE_OPTIONS,
+ employmentForm.employment_type,
+ )
+ employmentTypeInitial.value = [...employmentTypeValue.value]
+ companyNameValue.value = apiValueToLabel(COMPANY_OPTIONS, employmentForm.company_name)
+ companyNameInitial.value = [...companyNameValue.value]
+}
+
+function resetEmploymentForm() {
+ Object.assign(employmentForm, emptyEmploymentForm())
+ editingEmploymentId.value = null
+ clearEmploymentErrors()
+ syncEmploymentSelectValues()
+}
+
const router = useRouter()
const route = useRoute()
@@ -154,6 +300,219 @@ function syncFormFromUser(user: Awaited>['data']) {
genderInitial.value = [...genderValue.value]
marriageStatusInitial.value = [...marriageStatusValue.value]
memberTypeInitial.value = [...memberTypeValue.value]
+ employments.value = user.employments ?? []
+}
+
+const employmentTypeLabel = computed(() =>
+ Object.fromEntries(EMPLOYMENT_TYPE_OPTIONS.map((option) => [option.value, option.label])),
+)
+
+const isEditingEmployment = computed(() => editingEmploymentId.value !== null)
+
+const canAddEmployment = computed(() => !loading.value && employments.value.length === 0)
+
+const showEmploymentForm = computed(() => isEditingEmployment.value || canAddEmployment.value)
+
+function formatSalary(value: number | string | null | undefined): string {
+ const amount = Number(value)
+ if (Number.isNaN(amount)) return '-'
+ return new Intl.NumberFormat('ms-MY', {
+ style: 'currency',
+ currency: 'MYR',
+ minimumFractionDigits: 2,
+ }).format(amount)
+}
+
+function formatDateLabel(value: string | null | undefined): string {
+ if (!value) return ''
+ const date = new Date(value)
+ if (Number.isNaN(date.getTime())) return value
+ return new Intl.DateTimeFormat('ms-MY', {
+ day: 'numeric',
+ month: 'short',
+ year: 'numeric',
+ }).format(date)
+}
+
+function formatEmploymentPeriod(employment: Employment): string {
+ const start = formatDateLabel(employment.start_date)
+ if (employment.is_current) {
+ return `${start} - Kini`
+ }
+ const end = formatDateLabel(employment.end_date)
+ return end ? `${start} - ${end}` : start
+}
+
+function validateEmploymentForm(): boolean {
+ clearEmploymentErrors()
+
+ let valid = true
+
+ if (!companyNameValue.value[0]?.trim()) {
+ employmentErrors.company_name = 'Nama syarikat diperlukan.'
+ valid = false
+ }
+
+ if (!employmentForm.job_title.trim()) {
+ employmentErrors.job_title = 'Jawatan diperlukan.'
+ valid = false
+ }
+
+ if (
+ !employmentTypeValue.value[0] ||
+ !labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, employmentTypeValue.value[0])
+ ) {
+ employmentErrors.employment_type = 'Jenis kerja diperlukan.'
+ valid = false
+ }
+
+ const salary = Number(employmentForm.salary)
+ if (!employmentForm.salary.toString().trim() || Number.isNaN(salary) || salary < 0) {
+ employmentErrors.salary = 'Gaji diperlukan.'
+ valid = false
+ }
+
+ if (!employmentForm.start_date) {
+ employmentErrors.start_date = 'Tarikh mula diperlukan.'
+ valid = false
+ }
+
+ if (!employmentForm.is_current && !employmentForm.end_date) {
+ employmentErrors.end_date = 'Tarikh tamat diperlukan jika bukan pekerjaan semasa.'
+ valid = false
+ }
+
+ if (
+ !employmentForm.is_current &&
+ employmentForm.start_date &&
+ employmentForm.end_date &&
+ employmentForm.end_date < employmentForm.start_date
+ ) {
+ employmentErrors.end_date = 'Tarikh tamat mesti selepas tarikh mula.'
+ valid = false
+ }
+
+ return valid
+}
+
+function buildEmploymentPayload(): EmploymentPayload {
+ return {
+ company_name: employmentForm.company_name.trim(),
+ job_title: employmentForm.job_title.trim(),
+ employment_type:
+ labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, employmentTypeValue.value[0]) ??
+ employmentForm.employment_type,
+ salary: Number(employmentForm.salary),
+ start_date: employmentForm.start_date,
+ end_date: employmentForm.is_current ? null : employmentForm.end_date || null,
+ is_current: employmentForm.is_current,
+ }
+}
+
+async function refreshEmployments() {
+ const response = await getUser(userId.value)
+ employments.value = response.data.employments ?? []
+}
+
+function startEditEmployment(employment: Employment) {
+ clearEmploymentErrors()
+ editingEmploymentId.value = employment.id
+ employmentForm.company_name = employment.company_name
+ employmentForm.job_title = employment.job_title
+ employmentForm.employment_type = employment.employment_type
+ employmentForm.salary = String(employment.salary)
+ employmentForm.start_date = toDateInputValue(employment.start_date)
+ employmentForm.end_date = toDateInputValue(employment.end_date)
+ employmentForm.is_current = employment.is_current
+ syncEmploymentSelectValues()
+}
+
+async function onSaveEmployment() {
+ if (!validateEmploymentForm()) {
+ return
+ }
+
+ savingEmployment.value = true
+ const wasEditing = isEditingEmployment.value
+ const payload = buildEmploymentPayload()
+
+ try {
+ const res = wasEditing
+ ? await updateUserEmployment(userId.value, editingEmploymentId.value!, payload)
+ : await createUserEmployment(userId.value, payload)
+
+ if (!res.success) {
+ throw new Error(res.message ?? 'Gagal menyimpan pekerjaan.')
+ }
+
+ await refreshEmployments()
+ resetEmploymentForm()
+
+ await Swal.fire({
+ toast: true,
+ position: 'top-end',
+ icon: 'success',
+ title: wasEditing ? 'Pekerjaan berjaya dikemas kini.' : 'Pekerjaan berjaya ditambah.',
+ showConfirmButton: false,
+ timer: 3000,
+ })
+ } catch (err) {
+ if (!setEmploymentErrorsFromApi(err)) {
+ await Swal.fire({
+ icon: 'error',
+ title: 'Ralat',
+ text: getApiErrorMessage(err, 'Gagal menyimpan pekerjaan.'),
+ })
+ }
+ } finally {
+ savingEmployment.value = false
+ }
+}
+
+async function onDeleteEmployment(employment: Employment) {
+ const result = await Swal.fire({
+ icon: 'warning',
+ title: 'Padam pekerjaan?',
+ text: 'Tindakan ini tidak boleh dibatalkan.',
+ showCancelButton: true,
+ confirmButtonText: 'Padam',
+ cancelButtonText: 'Batal',
+ })
+
+ if (!result.isConfirmed) return
+
+ deletingEmploymentId.value = employment.id
+
+ try {
+ const res = await deleteUserEmployment(userId.value, employment.id)
+
+ if (!res.success) {
+ throw new Error(res.message ?? 'Gagal memadam pekerjaan.')
+ }
+
+ if (editingEmploymentId.value === employment.id) {
+ resetEmploymentForm()
+ }
+
+ await refreshEmployments()
+
+ await Swal.fire({
+ toast: true,
+ position: 'top-end',
+ icon: 'success',
+ title: 'Pekerjaan berjaya dipadam.',
+ showConfirmButton: false,
+ timer: 3000,
+ })
+ } catch (err) {
+ await Swal.fire({
+ icon: 'error',
+ title: 'Ralat',
+ text: getApiErrorMessage(err, 'Gagal memadam pekerjaan.'),
+ })
+ } finally {
+ deletingEmploymentId.value = null
+ }
}
async function fetchUser() {
@@ -182,6 +541,16 @@ watch(selectedStatus, (newStatus, oldStatus) => {
}
})
+watch(
+ () => employmentForm.is_current,
+ (isCurrent) => {
+ if (isCurrent) {
+ employmentForm.end_date = ''
+ clearEmploymentFieldError('end_date')
+ }
+ },
+)
+
async function handleSubmit() {
saving.value = true
error.value = null
@@ -218,6 +587,7 @@ async function handleSubmit() {
const formDisabled = computed(() => loading.value || saving.value)
onMounted(() => {
+ syncEmploymentSelectValues()
fetchUser()
})
@@ -405,5 +775,249 @@ onMounted(() => {
+
+
+
+
+
+
+ Pekerjaan
+Urus maklumat pekerjaan pengguna.
+Memuatkan pekerjaan...
+
+
+
+
+
+
+
+
+
+ {{ employment.company_name }}
+ Semasa
+
+ {{ employmentTypeLabel[employment.employment_type] ?? employment.employment_type }}
+
+
+ {{ employment.job_title }}
+{{ formatEmploymentPeriod(employment) }}
+{{ formatSalary(employment.salary) }}
+
+
+
+
+
+ Tiada pekerjaan direkodkan.
+
+
+
+
+ Unit:
+
+ {{ chip.label }}
+
+