Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b23447fd57 | |||
| d314694773 | |||
| 13fea33964 | |||
| 44a6925c1a |
@@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
dist
|
||||
.git
|
||||
.gitea
|
||||
.DS_Store
|
||||
.idea
|
||||
.vscode
|
||||
@@ -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 .
|
||||
@@ -0,0 +1,98 @@
|
||||
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
|
||||
|
||||
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 }}
|
||||
FRONTEND_IMAGE: git.koppkb.com/kopkb/my-kopkb-fe
|
||||
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
|
||||
printf '%s\n' "$PROD_SSH_KEY" > ~/.ssh/id_ed25519
|
||||
chmod 600 ~/.ssh/id_ed25519
|
||||
ssh-keyscan -H "$PROD_HOST" >> ~/.ssh/known_hosts
|
||||
|
||||
SSH=(ssh -i ~/.ssh/id_ed25519 -o IdentitiesOnly=yes "${PROD_USER}@${PROD_HOST}")
|
||||
|
||||
"${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
|
||||
|
||||
IMAGE="${FRONTEND_IMAGE}:${IMAGE_TAG}"
|
||||
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
|
||||
+3
-3
@@ -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
|
||||
|
||||
@@ -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
|
||||
@@ -0,0 +1,2 @@
|
||||
allowBuilds:
|
||||
esbuild: true
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
|
||||
<div v-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>
|
||||
<p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
|
||||
<p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
|
||||
<p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user