Dev/v1.2 (#4)

Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Reviewed-on: #4

fe/src/modules/external-system/composables/useExternalSystemDetail.ts

@@ -0,0 +1,41 @@
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useExternalSystemList } from './useExternalSystemList'
+import {
+  getExternalSystemStatus,
+  isExternalSystemAccessible,
+} from '../utils/external-system.utils'
+
+export function useExternalSystemDetail() {
+  const route = useRoute()
+  const { getSystemById } = useExternalSystemList()
+
+  const loading = ref(false)
+  const error = ref<string | null>(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,
+  )
+
+  watch(
+    systemId,
+    () => {
+      error.value = system.value ? null : 'Sistem luaran tidak dijumpai.'
+    },
+    { immediate: true },
+  )
+
+  return {
+    system,
+    loading,
+    error,
+    status,
+    isAccessible,
+  }
+}

fe/src/modules/external-system/composables/useExternalSystemList.ts

@@ -0,0 +1,48 @@
+import { computed, ref } from 'vue'
+import { dummyExternalSystems } from '../data/dummy-external-systems'
+import {
+  externalSystemStatusLabel,
+  getExternalSystemStatus,
+} from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
+
+export function useExternalSystemList() {
+  const search = ref('')
+  const loading = ref(false)
+
+  const systems = computed(() => {
+    const query = search.value.trim().toLowerCase()
+    if (!query) {
+      return dummyExternalSystems
+    }
+
+    return dummyExternalSystems.filter((system) => {
+      const haystack = [
+        system.name,
+        system.code,
+        system.description,
+        externalSystemStatusLabel(getExternalSystemStatus(system)),
+      ]
+        .join(' ')
+        .toLowerCase()
+
+      return haystack.includes(query)
+    })
+  })
+
+  const availableCount = computed(
+    () => systems.value.filter((system) => getExternalSystemStatus(system) === 'available').length,
+  )
+
+  function getSystemById(id: string): ExternalSystem | undefined {
+    return dummyExternalSystems.find((system) => system.id === id)
+  }
+
+  return {
+    systems,
+    search,
+    loading,
+    availableCount,
+    getSystemById,
+  }
+}

fe/src/modules/external-system/data/dummy-external-systems.ts

@@ -0,0 +1,38 @@
+import type { ExternalSystem } from '../types/external-system.types'
+
+export const dummyExternalSystems: ExternalSystem[] = [
+  {
+    id: 'ext-001',
+    code: 'KOPKB-PORTAL',
+    name: 'Portal Ahli KOPKB',
+    description:
+      'Sistem utama keahlian Koperasi Permodalan Kelantan Berhad untuk semakan dividen, penyata dan maklumat ahli.',
+    url: 'https://anggota.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: 'sokongan@koppkb.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: 'AGM-VOTE',
+    name: 'Sistem Pengundian AGM',
+    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: 'agm@koppkb.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',
+  },
+]

fe/src/modules/external-system/index.ts

@@ -0,0 +1,2 @@
+export { externalSystemLayoutRoutes } from './routes'
+export { externalSystemMenu } from './menu'

fe/src/modules/external-system/menu.ts

@@ -0,0 +1,9 @@
+import type { Menu } from '@/core/types/menu'
+
+export const externalSystemMenu: Menu[] = [
+  {
+    icon: 'ExternalLink',
+    route_name: 'list-external-systems',
+    title: 'Sistem Luaran',
+  },
+]

fe/src/modules/external-system/pages/ExternalSystemDetail.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Box } from '@/components/ui/box'
+import { Button } from '@/components/ui/button'
+import { Lucide } from '@/components/ui/lucide'
+import { useExternalSystemDetail } from '../composables/useExternalSystemDetail'
+import {
+  externalSystemStatusLabel,
+  externalSystemStatusVariant,
+  formatExternalSystemDateTime,
+  openExternalSystem,
+} from '../utils/external-system.utils'
+
+const router = useRouter()
+const { system, error, status, isAccessible } = useExternalSystemDetail()
+
+function goBack() {
+  router.push({ name: 'list-external-systems' })
+}
+
+function handleOpen() {
+  if (!system.value) return
+  openExternalSystem(system.value)
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-5 flex flex-wrap items-center gap-3">
+      <Button variant="ghost" look="outline" @click="goBack">
+        <Lucide icon="ArrowLeft" class="size-4" />
+        Kembali
+      </Button>
+    </div>
+
+    <AlertRoot v-if="error" class="mb-6" variant="danger">
+      <AlertTitle>Ralat</AlertTitle>
+      <AlertDescription>{{ error }}</AlertDescription>
+    </AlertRoot>
+
+    <template v-else-if="system && status">
+      <Box class="p-5 sm:p-6">
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <div class="flex min-w-0 items-start gap-4">
+            <div
+              class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary"
+            >
+              <Lucide :icon="system.icon" class="size-6" />
+            </div>
+            <div class="min-w-0">
+              <div class="text-sm opacity-70">Sistem Luaran</div>
+              <h2 class="text-xl font-semibold">{{ system.name }}</h2>
+              <div class="mt-1 text-sm font-medium text-primary/80">{{ system.code }}</div>
+            </div>
+          </div>
+
+          <Badge look="outline" :variant="externalSystemStatusVariant(status)">
+            {{ externalSystemStatusLabel(status) }}
+          </Badge>
+        </div>
+
+        <p class="mt-5 max-w-3xl text-sm leading-relaxed opacity-80">
+          {{ system.description }}
+        </p>
+
+        <div class="mt-6 grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-4">
+          <div>
+            <span class="opacity-70">URL:</span>
+            <div class="mt-0.5 break-all font-medium">{{ system.url }}</div>
+          </div>
+          <div>
+            <span class="opacity-70">Tarikh Mula:</span>
+            <div class="mt-0.5 font-medium">{{ formatExternalSystemDateTime(system.starts_at) }}</div>
+          </div>
+          <div>
+            <span class="opacity-70">Tarikh Tamat:</span>
+            <div class="mt-0.5 font-medium">{{ formatExternalSystemDateTime(system.ends_at) }}</div>
+          </div>
+          <div>
+            <span class="opacity-70">E-mel Sokongan:</span>
+            <div class="mt-0.5 font-medium">{{ system.contact_email ?? '-' }}</div>
+          </div>
+        </div>
+
+        <div v-if="system.notes" class="mt-6 border-t border-foreground/10 pt-5">
+          <div class="text-sm font-medium opacity-70">Nota</div>
+          <p class="mt-2 text-sm leading-relaxed opacity-80">{{ system.notes }}</p>
+        </div>
+
+        <div class="mt-6 flex flex-wrap gap-3 border-t border-foreground/10 pt-5">
+          <Button
+            look="outline"
+            variant="primary"
+            :disabled="!isAccessible"
+            @click="handleOpen"
+          >
+            Buka Sistem
+            <Lucide icon="ExternalLink" class="size-4" />
+          </Button>
+        </div>
+
+        <AlertRoot v-if="!isAccessible" class="mt-4" look="outline" variant="pending">
+          <Lucide class="mr-2 size-4 shrink-0" icon="Clock" />
+          <AlertTitle>Sistem Tidak Tersedia</AlertTitle>
+          <AlertDescription>
+            Pautan ini hanya boleh dibuka semasa tempoh acara yang ditetapkan dan sistem berstatus
+            aktif.
+          </AlertDescription>
+        </AlertRoot>
+      </Box>
+    </template>
+  </div>
+</template>

fe/src/modules/external-system/pages/ExternalSystemList.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Box } from '@/components/ui/box'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Lucide } from '@/components/ui/lucide'
+import { useExternalSystemList } from '../composables/useExternalSystemList'
+import {
+  externalSystemStatusLabel,
+  externalSystemStatusVariant,
+  formatExternalSystemDateTime,
+  getExternalSystemStatus,
+  openExternalSystem,
+} from '../utils/external-system.utils'
+import type { ExternalSystem } from '../types/external-system.types'
+
+const router = useRouter()
+const { systems, search, loading, availableCount } = useExternalSystemList()
+
+function goToDetail(system: ExternalSystem) {
+  router.push({ name: 'view-external-system', params: { id: system.id } })
+}
+
+function handleOpen(system: ExternalSystem) {
+  openExternalSystem(system)
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h2 class="text-lg font-medium">Sistem Luaran</h2>
+      </div>
+      <Badge look="outline" variant="primary">
+        {{ availableCount }} tersedia
+      </Badge>
+    </div>
+
+    <div class="mt-5 grid grid-cols-12 gap-x-6 gap-y-8">
+      <div class="col-span-12 mt-2 flex flex-wrap items-center sm:flex-nowrap">
+        <div class="w-full sm:w-auto">
+          <div class="relative w-56">
+            <Input v-model="search" class="w-56 pr-10" type="search" placeholder="Cari sistem..." :disabled="loading" />
+            <Lucide class="absolute inset-y-0 right-0 my-auto mr-3 h-4 w-4" icon="Search" />
+          </div>
+        </div>
+      </div>
+
+      <template v-if="systems.length">
+        <Box v-for="system in systems" :key="system.id"
+          class="col-span-12 flex h-full flex-col p-5 md:col-span-6 xl:col-span-4">
+          <div class="mb-4 flex items-start justify-between gap-3">
+            <div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+              <Lucide :icon="system.icon" class="size-5" />
+            </div>
+            <Badge look="outline" :variant="externalSystemStatusVariant(getExternalSystemStatus(system))">
+              {{ externalSystemStatusLabel(getExternalSystemStatus(system)) }}
+            </Badge>
+          </div>
+
+          <div class="text-base font-medium">{{ system.name }}</div>
+          <div class="mt-1 text-xs font-medium uppercase tracking-wide text-primary/80">
+            {{ system.code }}
+          </div>
+          <p class="mt-2 flex-1 text-sm leading-relaxed opacity-70">
+            {{ system.description }}
+          </p>
+
+          <div class="mt-4 space-y-1 text-xs opacity-70">
+            <div>
+              <span class="font-medium">Mula:</span>
+              {{ formatExternalSystemDateTime(system.starts_at) }}
+            </div>
+            <div>
+              <span class="font-medium">Tamat:</span>
+              {{ formatExternalSystemDateTime(system.ends_at) }}
+            </div>
+          </div>
+
+          <div class="mt-5 flex flex-col gap-2 sm:flex-row">
+            <Button class="w-full sm:flex-1" look="outline" variant="primary"
+              :disabled="getExternalSystemStatus(system) !== 'available'" @click="handleOpen(system)">
+              Buka Sistem
+              <Lucide icon="ExternalLink" class="size-4" />
+            </Button>
+            <Button class="w-full sm:flex-1" variant="ghost" @click="goToDetail(system)">
+              Butiran
+              <Lucide icon="ArrowRight" class="size-4" />
+            </Button>
+          </div>
+        </Box>
+      </template>
+
+      <Box v-else class="col-span-12 p-8 text-center">
+        <Lucide icon="SearchX" class="mx-auto size-8 opacity-40" />
+        <div class="mt-3 text-base font-medium">Tiada sistem dijumpai</div>
+        <p class="mt-1 text-sm opacity-70">Cuba istilah carian yang berbeza.</p>
+      </Box>
+    </div>
+  </div>
+</template>

fe/src/modules/external-system/routes.ts

@@ -0,0 +1,22 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const externalSystemLayoutRoutes: RouteRecordRaw[] = [
+  {
+    path: 'external-systems',
+    name: 'list-external-systems',
+    component: () => import('./pages/ExternalSystemList.vue'),
+    meta: {
+      title: 'Senarai Sistem Luaran',
+      module: 'external-system',
+    },
+  },
+  {
+    path: 'external-systems/:id',
+    name: 'view-external-system',
+    component: () => import('./pages/ExternalSystemDetail.vue'),
+    meta: {
+      title: 'Butiran Sistem Luaran',
+      module: 'external-system',
+    },
+  },
+]

fe/src/modules/external-system/types/external-system.types.ts

@@ -0,0 +1,20 @@
+import type { Icon } from '@/components/ui/lucide'
+
+export type ExternalSystemStatus = 'available' | 'upcoming' | 'ended' | 'inactive'
+
+export type ExternalSystem = {
+  id: string
+  code: string
+  name: string
+  description: string
+  url: string
+  icon: Icon
+  is_active: boolean
+  starts_at: string | null
+  ends_at: string | null
+  opens_in_new_tab: boolean
+  contact_email: string | null
+  notes: string | null
+  created_at: string
+  updated_at: string
+}

fe/src/modules/external-system/utils/external-system.utils.ts

@@ -0,0 +1,74 @@
+import dayjs from 'dayjs'
+import type { BadgeVariants } from '@/components/ui/styles/badge.styles'
+import type { ExternalSystem, ExternalSystemStatus } from '../types/external-system.types'
+
+export function getExternalSystemStatus(
+  system: ExternalSystem,
+  now = dayjs(),
+): ExternalSystemStatus {
+  if (!system.is_active) {
+    return 'inactive'
+  }
+
+  const startsAt = system.starts_at ? dayjs(system.starts_at) : null
+  const endsAt = system.ends_at ? dayjs(system.ends_at) : null
+
+  if (startsAt?.isAfter(now)) {
+    return 'upcoming'
+  }
+
+  if (endsAt?.isBefore(now)) {
+    return 'ended'
+  }
+
+  return 'available'
+}
+
+export function isExternalSystemAccessible(system: ExternalSystem, now = dayjs()): boolean {
+  return getExternalSystemStatus(system, now) === 'available'
+}
+
+export function externalSystemStatusLabel(status: ExternalSystemStatus): string {
+  switch (status) {
+    case 'available':
+      return 'Tersedia'
+    case 'upcoming':
+      return 'Akan Datang'
+    case 'ended':
+      return 'Tamat'
+    case 'inactive':
+      return 'Tidak Aktif'
+  }
+}
+
+export function externalSystemStatusVariant(
+  status: ExternalSystemStatus,
+): NonNullable<BadgeVariants['variant']> {
+  switch (status) {
+    case 'available':
+      return 'success'
+    case 'upcoming':
+      return 'pending'
+    case 'ended':
+      return 'ghost'
+    case 'inactive':
+      return 'danger'
+  }
+}
+
+export function formatExternalSystemDateTime(value: string | null): string {
+  if (!value) return '-'
+  return dayjs(value).format('DD MMM YYYY, HH:mm')
+}
+
+export function openExternalSystem(system: ExternalSystem) {
+  if (!isExternalSystemAccessible(system)) {
+    return
+  }
+
+  window.open(
+    system.url,
+    system.opens_in_new_tab ? '_blank' : '_self',
+    'noopener,noreferrer',
+  )
+}