Optimize Modal, Add Detail Item . .

- Optimize when Show Modal
- Add DetailItemComponent for displaying project detail

public/data_user.json

@@ -79,31 +79,51 @@
 				"status": "Full-time",
 				"dateFrom": "2019-03-01",
 				"dateTo": "2021-02-07",
-				"desc": "Rokupang Surabaya, Indonesia"
+				"desc": "Rokupang Surabaya, Indonesia",
+				"source": {
+					"url": "/history/rokupang_kitchenstaff.md",
+					"type": "local",
+					"images": []
+				}
 			},
 			{
 				"id": 3,
 				"title": "Tax Admin",
 				"status": "Full-time",
 				"dateFrom": "2017-02-20",
 				"dateTo": "2018-10-26",
-				"desc": "CV. Karya Mandiri Sejahtera, Surabaya, Indonesia"
+				"desc": "CV. Karya Mandiri Sejahtera, Surabaya, Indonesia",
+				"source": {
+					"url": "/history/karyamandirisejahtera_taxadmin.md",
+					"type": "local",
+					"images": []
+				}
 			},
 			{
 				"id": 2,
 				"title": "Associate TVS",
 				"status": "Contract",
 				"dateFrom": "2015-11-16",
 				"dateTo": "2016-05-15",
-				"desc": "PT. Alfa Retail Indonesia, Surabaya, Indonesia"
+				"desc": "PT. Alfa Retail Indonesia, Surabaya, Indonesia",
+				"source": {
+					"url": "/history/alfaretailindonesia_associatetvs.md",
+					"type": "local",
+					"images": []
+				}
 			},
 			{
 				"id": 1,
 				"title": "Flash Animator",
 				"status": "Internship",
 				"dateFrom": "2015-04-20",
 				"dateTo": "2015-07-30",
-				"desc": "Maulidan Games, Surabaya, Indonesia"
+				"desc": "Maulidan Games, Surabaya, Indonesia",
+				"source": {
+					"url": "/history/maulidangames_flashanimator.md",
+					"type": "local",
+					"images": []
+				}
 			},
 			{
 				"id": 0,

public/history/alfaretailindonesia_associatetvs.md

@@ -0,0 +1,8 @@
+# **<span class="text-primary dark:text-primaryDark">Associate TVS</span> at PT Alfa Retail Indonesia**
+
+<br>
+
+- Customer Interaction: Engage with traders and handle their inquiries and orders.
+- Inventory Management: Monitor and manage inventory levels to ensure stock availability.
+- Sales Reporting: Prepare sales reports and analyze sales data.
+- Coordination: Coordinate with other departments (e.g., logistics, finance) to ensure smooth operations.

public/history/karyamandirisejahtera_taxadmin.md

@@ -0,0 +1,10 @@
+# **<span class="text-primary dark:text-primaryDark">Tax Administrator</span> at CV Karya Mandiri Sejahtera**
+
+<br>
+
+- Tax Document Management: Prepare and process tax documents like returns and reports.
+- Tax Calculation: Calculate taxes due for the company or individual.
+- Document Filing: File and print tax invoices and other required documents.
+- Record Keeping: Manage tax data archives efficiently.
+- Communication with Tax Authorities: Interact with government tax bodies.
+- Audit Preparation: Prepare documents for tax audits and assist during the audit process.

public/history/maulidangames_flashanimator.md

@@ -0,0 +1,7 @@
+# **<span class="text-primary dark:text-primaryDark">Flash Animator</span> at Maulidan Games**
+
+<br>
+
+- Keyframe Animation: Develop keyframe animations for characters, environments, and other objects.
+- Animation Cleanup: Refine and polish rough animations to ensure smooth transitions.
+- Animation Integration: Work with other team's member to integrate animations into Adobe Flash (Animate), ensuring proper functionality.

public/history/rokupang_kitchenstaff.md

@@ -0,0 +1,9 @@
+# **<span class="text-primary dark:text-primaryDark">Kitchen Staff</span> at Rokupang Surabaya**
+
+<br>
+
+- Food Preparation: Prepare ingredients and cook dishes.
+- Cleaning: Maintain kitchen cleanliness and hygiene.
+- Inventory Management: Check and restock supplies.
+- Order Assembly: Assemble and package orders for customers.
+- Equipment Maintenance: Clean and maintain kitchen equipment.

src/App.vue

@@ -13,11 +13,17 @@
 		<ScrollDownComponent></ScrollDownComponent>
 		<ToggleDarkModeComponent class="lan-floating size-12 sm:hidden"></ToggleDarkModeComponent>
 		<NavbarMobileComponent class="block sm:hidden"></NavbarMobileComponent>
+
+		<ModalComponent @close="closeModal" ref="modalComponent">
+			<template #body v-if="dynamicComponent">
+				<component :is="dynamicComponent.component" v-bind="dynamicComponent.props"></component>
+			</template>
+		</ModalComponent>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, provide, type Ref, inject } from "vue";
+import { ref, onMounted, provide, type Ref, useTemplateRef, onUnmounted } from "vue";
 import { RouterView } from "vue-router";
 import { useHead } from "@unhead/vue";
 import tools from "./helper/tools";
@@ -27,10 +33,13 @@ import ScrollUpComponent from "./components/ScrollUpComponent.vue";
 import ScrollDownComponent from "./components/ScrollDownComponent.vue";
 import FooterComponent from "./components/FooterComponent.vue";
 import ToggleDarkModeComponent from "./components/ToggleDarkModeComponent.vue";
+import ModalComponent from './components/ModalComponent.vue';
 import type IDataUser from "./helper/interfaces/IDataUser";
 import DataUserSymbol from "./helper/symbols/DataUserSymbol";
 import ThemeModeSymbol from "./helper/symbols/ThemeModeSymbol";
 import NamePartSymbol from "./helper/symbols/NamePartSymbol";
+import EventBus, { EventBusEnum } from "./helper/EventBus";
+import type { TDynamicModalComponent } from "./helper/interfaces/TDynamicModalComponent";
 
 useHead({
 	meta: [
@@ -60,17 +69,36 @@ useHead({
 	],
 });
 
+type ModalType = InstanceType<typeof ModalComponent>;
+const modalComponent = useTemplateRef<ModalType>('modalComponent');
+const dynamicComponent = ref<TDynamicModalComponent | null>(null);
+
 const themeMode = ref(false);
 const dataUser: Ref<IDataUser | null> = ref(null);
 const nameParts: Ref<string[]> = ref([]);
 
 async function getDataUser() {
 	dataUser.value = await tools.getDataUser<IDataUser>();
-	// console.log(dataUser.value);
 	nameParts.value = ("" + dataUser.value.profile.name.value).split(" ");
 }
 
-onMounted(getDataUser);
+function showModal(component: TDynamicModalComponent | null = null) {
+	if (component && dynamicComponent) dynamicComponent.value = component;
+	modalComponent.value?.onVisibleChange(true);
+}
+
+function closeModal(): void {
+	modalComponent.value?.onVisibleChange(false);
+	if (dynamicComponent) dynamicComponent.value = null;
+}
+
+onMounted(async () => {
+	EventBus.$on(EventBusEnum.ShowModal, showModal);
+	await getDataUser();
+});
+onUnmounted(() => {
+	EventBus.$off(EventBusEnum.ShowModal, showModal);
+});
 provide(DataUserSymbol, dataUser);
 provide(NamePartSymbol, nameParts);
 provide(ThemeModeSymbol, themeMode);