DONE: fix error when pnpm dev because missing packages

Reviewed-on: KoPKB/My-KOPKB#18

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.git
+.gitea
+.DS_Store
+.idea
+.vscode

.gitea/workflows/build.yml

@@ -0,0 +1,43 @@
+name: Build Docker Image
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build-frontend:
+    runs-on: docker
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Login to Docker registry
+        run: |
+          echo "${{ secrets.REGISTRY_PASSWORD }}" | \
+            docker login git.koppkb.com \
+              -u "${{ secrets.REGISTRY_USERNAME }}" \
+              --password-stdin
+
+      - name: Build & push frontend image
+        run: |
+          set -e
+
+          IMAGE="git.koppkb.com/kopkb/my-kopkb-fe"
+          TAGS="-t ${IMAGE}:${{ gitea.sha }}"
+
+          if [ "${{ gitea.ref_type }}" = "tag" ] && echo "${{ gitea.ref_name }}" | grep -q '^v'; then
+            TAGS="${TAGS} -t ${IMAGE}:${{ gitea.ref_name }}"
+          fi
+
+          echo "Building and pushing frontend: ${TAGS}"
+          docker buildx build \
+            --platform linux/amd64 \
+            --cache-from type=registry,ref=${IMAGE}:buildcache,ignore-error=true \
+            --cache-to type=registry,ref=${IMAGE}:buildcache,mode=max \
+            -f docker/Dockerfile \
+            --build-arg VITE_API_BASE_URL=https://api.koppkb.com \
+            --build-arg VITE_APP_URL=https://mykopkb.koppkb.com \
+            ${TAGS} \
+            --push .

.gitea/workflows/deploy-prod.yml

@@ -0,0 +1,113 @@
+name: Deploy to Production
+
+# Manual production deploy — pulls pre-built images from the registry
+on:
+  workflow_dispatch:
+    inputs:
+      image_tag:
+        description: "Docker image tag to deploy (commit SHA or version tag, e.g. v1.0.0)"
+        required: true
+        default: "latest"
+        type: string
+
+env:
+  FRONTEND_IMAGE: git.koppkb.com/kopkb/my-kopkb-fe
+
+jobs:
+  deploy:
+    runs-on: mykopkb-production
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.image_tag }}
+
+      - name: Verify image exists in registry
+        run: |
+          set -e
+          echo "${{ secrets.REGISTRY_PASSWORD }}" | \
+            docker login git.koppkb.com \
+              -u "${{ secrets.REGISTRY_USERNAME }}" \
+              --password-stdin
+
+          IMAGE="${FRONTEND_IMAGE}:${{ inputs.image_tag }}"
+          echo "Checking if image exists: ${IMAGE}"
+          docker manifest inspect "${IMAGE}" > /dev/null
+          echo "✓ ${IMAGE} found"
+
+      - name: Deploy over SSH
+        env:
+          PROD_HOST: ${{ secrets.PROD_HOST }}
+          PROD_USER: ${{ secrets.PROD_USER }}
+          PROD_SSH_KEY: ${{ secrets.PROD_SSH_KEY }}
+          PROD_DEPLOY_DIR: ${{ secrets.PROD_DEPLOY_DIR }}
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
+          REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
+          IMAGE_TAG: ${{ inputs.image_tag }}
+        run: |
+          set -euo pipefail
+
+          if ! command -v ssh >/dev/null 2>&1; then
+            apt-get update && apt-get install -y openssh-client
+          fi
+
+          mkdir -p ~/.ssh
+          umask 077
+          # Gitea often stores a multiline key as one line. Prefer a base64
+          # secret (one line). A raw key that still contains BEGIN is accepted too.
+          if printf '%s' "$PROD_SSH_KEY" | grep -q -- '-----BEGIN'; then
+            printf '%b\n' "$PROD_SSH_KEY" | tr -d '\r' > ~/.ssh/id_ed25519
+          else
+            printf '%s' "$PROD_SSH_KEY" | tr -d '[:space:]' | base64 -d > ~/.ssh/id_ed25519
+          fi
+          chmod 600 ~/.ssh/id_ed25519
+          if ! ssh-keygen -y -f ~/.ssh/id_ed25519 >/dev/null; then
+            echo "ERROR: PROD_SSH_KEY is not a readable private key."
+            echo "On the runner, run: base64 -w0 ~/.ssh/mykopkb_prod"
+            echo "Put that single line in the PROD_SSH_KEY secret."
+            exit 1
+          fi
+          ssh-keyscan -H "$PROD_HOST" >> ~/.ssh/known_hosts
+
+          SSH=(ssh -i ~/.ssh/id_ed25519 -o IdentitiesOnly=yes "${PROD_USER}@${PROD_HOST}")
+          IMAGE="${FRONTEND_IMAGE}:${IMAGE_TAG}"
+
+          "${SSH[@]}" "mkdir -p '${PROD_DEPLOY_DIR}'"
+          scp -i ~/.ssh/id_ed25519 -o IdentitiesOnly=yes \
+            docker/docker-compose.production.yml \
+            "${PROD_USER}@${PROD_HOST}:${PROD_DEPLOY_DIR}/docker-compose.frontend.yml"
+
+          "${SSH[@]}" "bash -s" << EOF
+          set -euo pipefail
+          echo "${REGISTRY_PASSWORD}" | docker login git.koppkb.com \
+            -u "${REGISTRY_USERNAME}" --password-stdin
+
+          echo "Checking if image exists: ${IMAGE}"
+          docker manifest inspect "${IMAGE}" > /dev/null
+          echo "✓ ${IMAGE} found"
+
+          echo "Deploying frontend IMAGE=${IMAGE}"
+
+          docker network inspect mykopkb-production-network >/dev/null 2>&1 \
+            || docker network create mykopkb-production-network
+
+          cd "${PROD_DEPLOY_DIR}"
+          export IMAGE_TAG="${IMAGE_TAG}"
+
+          docker rm -f mykopkb-fe-production || true
+          docker compose -f docker-compose.frontend.yml -p mykopkb-fe pull
+          docker compose -f docker-compose.frontend.yml -p mykopkb-fe up -d
+
+          sleep 10
+          STATUS=\$(docker compose -f docker-compose.frontend.yml -p mykopkb-fe ps --status running --format '{{.Name}}' frontend || true)
+          if [ -z "\$STATUS" ]; then
+            docker compose -f docker-compose.frontend.yml -p mykopkb-fe logs --tail=50 frontend || true
+            exit 1
+          fi
+
+          FE_PORT=\$(grep -E '^FE_PORT=' .env 2>/dev/null | cut -d= -f2- | tr -d '"' || true)
+          FE_PORT=\${FE_PORT:-8081}
+          curl -sf "http://127.0.0.1:\${FE_PORT}/health"
+          echo "✓ Deployed frontend IMAGE_TAG=${IMAGE_TAG}"
+          EOF

docker/Dockerfile

@@ -1,12 +1,12 @@
 # Stage 1: Build Vue SPA
 FROM node:22 AS builder
 WORKDIR /app
-COPY fe/package*.json fe/pnpm-lock.yaml fe/.npmrc ./
+COPY package*.json pnpm-lock.yaml .npmrc pnpm-workspace.yaml ./
 # Skip prepare (cypress install); rebuild esbuild only — required for Vite
 RUN npm install -g pnpm && \
     pnpm install --frozen-lockfile --ignore-scripts && \
     pnpm rebuild esbuild
-COPY fe/ ./
+COPY . ./
 ARG VITE_APP_NAME="MyKOPKB"
 ARG VITE_APP_VERSION="1.0"
 ARG VITE_API_BASE_URL=https://api.koppkb.com
@@ -22,6 +22,6 @@ RUN pnpm exec vite build --mode=production
 
 # Stage 2: Serve static files
 FROM nginx:1.27-alpine
-COPY fe/docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/dist /usr/share/nginx/html
 EXPOSE 80

docker/docker-compose.production.yml

@@ -0,0 +1,25 @@
+services:
+  frontend:
+    image: git.koppkb.com/kopkb/my-kopkb-fe:${IMAGE_TAG:-latest}
+    container_name: mykopkb-fe-production
+    restart: unless-stopped
+    ports:
+      - "${FE_PORT:-8081}:80"
+    networks:
+      - mykopkb-production-network
+    healthcheck:
+      test: ["CMD", "wget", "-q", "--spider", "http://127.0.0.1/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "10m"
+        max-file: "3"
+
+networks:
+  mykopkb-production-network:
+    name: mykopkb-production-network
+    external: true

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - .
+
+allowBuilds:
+  esbuild: true

src/modules/user/pages/UserEdit.vue

@@ -24,6 +24,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
+import type { Heir } from '@/modules/profile/types/heir.types'
 import type { Employment, EmploymentPayload } from '@/modules/profile/types/employment.types'
 import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import {
@@ -131,6 +132,7 @@ const employmentTypeInitial = ref<string[]>([])
 const companyNameValue = ref<string[]>([])
 const companyNameInitial = ref<string[]>([])
 
+const heirs = ref<Heir[]>([])
 const employments = ref<Employment[]>([])
 const savingEmployment = ref(false)
 const deletingEmploymentId = ref<string | null>(null)
@@ -276,6 +278,7 @@ function syncFormFromUser(user: Awaited<ReturnType<typeof getUser>>['data']) {
   genderInitial.value = [...genderValue.value]
   marriageStatusInitial.value = [...marriageStatusValue.value]
   memberTypeInitial.value = [...memberTypeValue.value]
+  heirs.value = user.heirs ?? []
   employments.value = user.employments ?? []
 }
 
@@ -746,6 +749,44 @@ onMounted(() => {
       </form>
     </Box>
 
+    <Box>
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
+          <p class="mt-1 text-sm text-slate-500">Paparan maklumat penama anggota (baca sahaja).</p>
+        </div>
+
+        <div v-if="loading" class="text-sm text-slate-500">Memuatkan penama...</div>
+        <div v-else-if="error" class="text-sm text-slate-500">Maklumat penama tidak dapat dimuatkan.</div>
+        <div v-else-if="heirs.length" class="space-y-3">
+          <div v-for="heir in heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="font-medium text-slate-900">{{ heir.name }}</span>
+              <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
+              <Badge look="outline">{{ heir.relationship }}</Badge>
+            </div>
+            <dl class="mt-3 grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
+              <div>
+                <dt class="text-slate-500">No. Kad Pengenalan</dt>
+                <dd class="text-slate-700">{{ heir.ic_number || '-' }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">No. Telefon</dt>
+                <dd class="text-slate-700">{{ heir.phone_number || '-' }}</dd>
+              </div>
+              <div class="md:col-span-2">
+                <dt class="text-slate-500">Alamat</dt>
+                <dd class="whitespace-pre-line text-slate-700">{{ heir.address || '-' }}</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div v-else class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500">
+          Tiada penama direkodkan.
+        </div>
+      </div>
+    </Box>
+
     <Box>
       <div class="space-y-6">
         <div>

src/modules/user/pages/UserList.vue

@@ -317,6 +317,7 @@ async function confirmRestore() {
 
 const headers: TableHeader[] = [
   { title: 'Bil.', key: '#', sortable: false },
+  { title: 'Tindakan', key: 'actions', sortable: false },
   { title: 'Name', key: 'name', sortable: true },
   {
     title: 'Unit',
@@ -345,12 +346,12 @@ const headers: TableHeader[] = [
     exportValue: (item) => formatUserRoles(item.roles),
   },
   { title: 'Status', key: 'status', sortable: true },
-  { title: 'Tindakan', key: 'actions', sortable: false },
 ]
 
 // deleted users table headers
 const deletedHeaders: TableHeader[] = [
   { title: 'Bil.', key: '#', sortable: false },
+  { title: 'Tindakan', key: 'actions', sortable: false },
   { title: 'Name', key: 'name', sortable: true },
   {
     title: 'Unit',
@@ -368,7 +369,6 @@ const deletedHeaders: TableHeader[] = [
   },
   { title: 'Status', key: 'status', sortable: true },
   { title: 'Dipadam Pada', key: 'deleted_at', sortable: true },
-  { title: 'Tindakan', key: 'actions', sortable: false },
 ]
 
 const {

src/modules/user/pages/UserProfileTab.vue

@@ -5,6 +5,7 @@ import { Box } from '@/components/ui/box'
 import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import type { Address } from '@/modules/profile/types/address.types'
+import type { Heir } from '@/modules/profile/types/heir.types'
 import type { UserDetail } from '../types/user.types'
 
 const props = defineProps<{
@@ -31,6 +32,8 @@ const statusLabel = computed(() => {
 
 const roleNames = computed(() => props.user.roles?.map((role) => role.name).join(', ') || '-')
 
+const heirs = computed<Heir[]>(() => props.user.heirs ?? [])
+
 function formatDate(value: string | null | undefined): string {
   if (!value) return '-'
   return value.slice(0, 10)
@@ -157,19 +160,30 @@ function formatAddressLine(address: Address) {
     <Box raised="single" class="p-6">
       <div class="mb-6">
         <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
-        <p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
+        <p class="mt-1 text-sm text-slate-500">Paparan maklumat penama anggota (baca sahaja).</p>
       </div>
 
-      <div v-if="user.heirs?.length" class="space-y-3">
+      <div v-if="heirs.length" class="space-y-3">
-        <div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
+        <div v-for="heir in heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
           <div class="flex flex-wrap items-center gap-2">
             <span class="font-medium text-slate-900">{{ heir.name }}</span>
             <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
             <Badge look="outline">{{ heir.relationship }}</Badge>
           </div>
-          <p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
+          <dl class="mt-3 grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
-          <p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
+            <div>
-          <p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
+              <dt class="text-slate-500">No. Kad Pengenalan</dt>
+              <dd class="text-slate-700">{{ heir.ic_number || '-' }}</dd>
+            </div>
+            <div>
+              <dt class="text-slate-500">No. Telefon</dt>
+              <dd class="text-slate-700">{{ heir.phone_number || '-' }}</dd>
+            </div>
+            <div class="md:col-span-2">
+              <dt class="text-slate-500">Alamat</dt>
+              <dd class="whitespace-pre-line text-slate-700">{{ heir.address || '-' }}</dd>
+            </div>
+          </dl>
         </div>
       </div>