@mundogamernetwork/shared-ui 1.0.0

package/pages/roadmap.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { roadmap } = storeToRefs(institutionalStore);
+
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const activeQuarter = ref<string | null>(null);
+const activeStatus = ref<string | null>(null);
+const activeTopic = ref<number | null>(null);
+
+const statusLabels: Record<number, string> = {
+	1: "development",
+	2: "planning",
+	3: "complete",
+};
+
+const statusColors: Record<string, string> = {
+	planning: "#f0ad4e",
+	development: "#5bc0de",
+	complete: "#5cb85c",
+};
+
+async function fetchRoadmapData() {
+	try {
+		await institutionalStore.fetchRoadmap({
+			filter: {
+				status: 1,
+				platform_id: systemId,
+			},
+			sort: "start_date",
+			order: "asc",
+			per_page: "all",
+		});
+	} catch {
+		// silent
+	}
+}
+
+const groupedByQuarter = computed(() => {
+	const data = roadmap.value?.data?.data;
+	if (!data || !Array.isArray(data)) return {};
+
+	const groups: Record<string, any[]> = {};
+	data.forEach((item: any) => {
+		const date = item.start_date ? new Date(item.start_date) : null;
+		const quarter = date ? `Q${Math.ceil((date.getMonth() + 1) / 3)} ${date.getFullYear()}` : "Unknown";
+		if (!groups[quarter]) groups[quarter] = [];
+		groups[quarter].push(item);
+	});
+	return groups;
+});
+
+const quarters = computed(() => Object.keys(groupedByQuarter.value));
+
+const activeQuarterItems = computed(() => {
+	if (!activeQuarter.value) return [];
+	return groupedByQuarter.value[activeQuarter.value] || [];
+});
+
+const groupedByStatus = computed(() => {
+	const groups: Record<string, any[]> = {};
+	activeQuarterItems.value.forEach((item: any) => {
+		const status = statusLabels[item.status_id] || "planning";
+		if (!groups[status]) groups[status] = [];
+		groups[status].push(item);
+	});
+	return groups;
+});
+
+const statuses = computed(() => Object.keys(groupedByStatus.value));
+
+const activeStatusItems = computed(() => {
+	if (!activeStatus.value) return [];
+	return groupedByStatus.value[activeStatus.value] || [];
+});
+
+function selectQuarter(q: string) {
+	activeQuarter.value = activeQuarter.value === q ? null : q;
+	activeStatus.value = null;
+	activeTopic.value = null;
+}
+
+function selectStatus(s: string) {
+	activeStatus.value = activeStatus.value === s ? null : s;
+	activeTopic.value = null;
+}
+
+function selectTopic(id: number) {
+	activeTopic.value = activeTopic.value === id ? null : id;
+}
+
+onMounted(() => {
+	fetchRoadmapData();
+});
+</script>
+
+<template>
+	<div id="roadmap" class="container roadmap">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.roadmap.title") }}</h1>
+					<p>{{ $t("more.roadmap.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div v-if="roadmap.status === 'pending'" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="quarters.length > 0">
+							<div class="quarters">
+								<button
+									v-for="q in quarters"
+									:key="q"
+									class="quarter-btn"
+									:class="{ active: activeQuarter === q }"
+									@click="selectQuarter(q)"
+								>
+									{{ q }}
+								</button>
+							</div>
+
+							<div v-if="activeQuarter && statuses.length > 0" class="statuses">
+								<button
+									v-for="s in statuses"
+									:key="s"
+									class="status-btn"
+									:class="{ active: activeStatus === s }"
+									:style="{ borderColor: statusColors[s] }"
+									@click="selectStatus(s)"
+								>
+									{{ $t(`more.roadmap.status_${s}`, s) }}
+									<span class="count">{{ groupedByStatus[s]?.length || 0 }}</span>
+								</button>
+							</div>
+
+							<div v-if="activeStatus && activeStatusItems.length > 0" class="topics">
+								<div
+									v-for="topic in activeStatusItems"
+									:key="topic.id"
+									class="topic-card"
+								>
+									<button
+										class="topic-header"
+										@click="selectTopic(topic.id)"
+									>
+										<span>{{ topic.localized_title || topic.title }}</span>
+										<MGIcon icon="chevron-down" :class="{ rotate: activeTopic === topic.id }" />
+									</button>
+
+									<div v-if="activeTopic === topic.id" class="topic-detail">
+										<p v-if="topic.localized_description">{{ topic.localized_description }}</p>
+
+										<div v-if="topic.stages?.length" class="stages">
+											<div
+												v-for="stage in topic.stages"
+												:key="stage.id"
+												class="stage"
+											>
+												<div class="stage-header">
+													<span>{{ stage.localized_title || stage.title }}</span>
+													<span class="stage-progress">{{ stage.progress || 0 }}%</span>
+												</div>
+												<div class="progress-bar">
+													<div
+														class="progress-fill"
+														:style="{
+															width: `${stage.progress || 0}%`,
+															backgroundColor: statusColors[activeStatus] || '#5bc0de',
+														}"
+													></div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.roadmap.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.roadmap {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-roadmap.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.quarters {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 24px;
+
+		.quarter-btn {
+			padding: 8px 16px;
+			border: 1px solid var(--search-bar-border-color);
+			background: transparent;
+			color: var(--inactive);
+			cursor: pointer;
+			font-size: 14px;
+
+			&.active {
+				background: var(--chip-text);
+				color: var(--chip-background-2);
+				border-color: var(--chip-text);
+			}
+		}
+	}
+
+	.statuses {
+		display: flex;
+		gap: 12px;
+		margin-bottom: 24px;
+
+		.status-btn {
+			padding: 8px 16px;
+			border: 2px solid;
+			background: transparent;
+			color: var(--card-cover-title);
+			cursor: pointer;
+			font-size: 14px;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			&.active {
+				opacity: 1;
+			}
+
+			.count {
+				font-size: 12px;
+				opacity: 0.7;
+			}
+		}
+	}
+
+	.topics {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.topic-card {
+		background-color: var(--chip-background-2);
+
+		.topic-header {
+			width: 100%;
+			padding: 16px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: transparent;
+			border: none;
+			color: var(--card-cover-title);
+			font-size: 14px;
+			font-weight: 600;
+			cursor: pointer;
+
+			.rotate {
+				transform: rotate(180deg);
+				transition: 0.3s;
+			}
+		}
+
+		.topic-detail {
+			padding: 0 16px 16px;
+
+			p {
+				font-size: 14px;
+				line-height: 20px;
+				margin-bottom: 16px;
+			}
+		}
+	}
+
+	.stages {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.stage {
+		&-header {
+			display: flex;
+			justify-content: space-between;
+			font-size: 13px;
+			margin-bottom: 4px;
+		}
+
+		&-progress {
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+		}
+	}
+
+	.progress-bar {
+		height: 6px;
+		background: var(--body-bg);
+		border-radius: 3px;
+		overflow: hidden;
+
+		.progress-fill {
+			height: 100%;
+			transition: width 0.3s;
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+</style>

package/pages/status.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { status, generalStatus } = storeToRefs(institutionalStore);
+
+async function fetchStatusData() {
+	try {
+		await Promise.all([
+			institutionalStore.fetchStatus({
+				filter: { status: 1 },
+				sort: "name",
+				order: "asc",
+				per_page: "all",
+			}),
+			institutionalStore.fetchGeneralStatus({
+				filter: { status: 1 },
+			}),
+		]);
+	} catch {
+		// silent
+	}
+}
+
+const statusColorMap: Record<string, string> = {
+	green: "#5cb85c",
+	yellow: "#f0ad4e",
+	orange: "#ff8c00",
+	red: "#d9534f",
+};
+
+function getStatusColor(color: string): string {
+	return statusColorMap[color?.toLowerCase()] || color || "#5cb85c";
+}
+
+onMounted(() => {
+	fetchStatusData();
+});
+</script>
+
+<template>
+	<div id="status" class="container status-page">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.status.title") }}</h1>
+					<p>{{ $t("more.status.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div
+							v-if="generalStatus?.data?.data"
+							class="general-alert"
+							:style="{ backgroundColor: getStatusColor(generalStatus.data.data.color) }"
+						>
+							<span>{{ generalStatus.data.data.localized_message || generalStatus.data.data.message }}</span>
+						</div>
+
+						<div v-if="status.status === 'pending'" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="status?.data?.data && status.data.data.length > 0" class="status-list">
+							<div
+								v-for="item in status.data.data"
+								:key="item.id"
+								class="status-item"
+							>
+								<div class="status-item__icon">
+									<div
+										class="status-dot"
+										:style="{ backgroundColor: getStatusColor(item.status_color) }"
+									></div>
+								</div>
+								<img
+									v-if="item.avatar_url || item.icon_url"
+									:src="item.avatar_url || item.icon_url"
+									:alt="item.name"
+									class="status-item__avatar"
+								/>
+								<div class="status-item__info">
+									<h3>{{ item.localized_name || item.name }}</h3>
+									<p v-if="item.localized_description">{{ item.localized_description }}</p>
+								</div>
+								<span class="status-item__label" :style="{ color: getStatusColor(item.status_color) }">
+									{{ item.status_label || $t("more.status.operational") }}
+								</span>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.status.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.status-page {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-status.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.general-alert {
+		padding: 16px;
+		margin-bottom: 24px;
+		text-align: center;
+		color: #fff;
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	.status-list {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.status-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 16px;
+		background-color: var(--chip-background-2);
+
+		&__icon {
+			.status-dot {
+				width: 12px;
+				height: 12px;
+				border-radius: 50%;
+			}
+		}
+
+		&__avatar {
+			width: 32px;
+			height: 32px;
+			object-fit: contain;
+		}
+
+		&__info {
+			flex: 1;
+
+			h3 {
+				font-size: 14px;
+				font-weight: 500;
+				color: var(--card-cover-title);
+			}
+
+			p {
+				font-size: 12px;
+				color: var(--secondary-info-fg);
+			}
+		}
+
+		&__label {
+			font-size: 12px;
+			font-weight: 500;
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+</style>