fix detail mcu

add redirect ke detail mcu
multi login
2024-06-13 15:03:40 +07:00 · 2024-06-13 15:03:40 +07:00 · 2024-06-13 15:03:39 +07:00 · 2024-06-13 15:03:39 +07:00 · 2024-06-13 15:03:39 +07:00 · 2024-06-13 15:03:39 +07:00
39 changed files with 7340 additions and 1387 deletions
--- a/assets/asset-corporate-portal/js/login-general.js
+++ b/assets/asset-corporate-portal/js/login-general.js
@@ -54,17 +54,17 @@ var KTLogin = function () {

 			validation.validate().then(function (status) {
 				if (status == 'Valid') {
-					swal.fire({
-						text: "All is cool! Now you submit this form",
-						icon: "success",
-						buttonsStyling: false,
-						confirmButtonText: "Ok, got it!",
-						customClass: {
-							confirmButton: "btn font-weight-bold btn-light-primary"
-						}
-					}).then(function () {
-						KTUtil.scrollTop();
-					});
+					// swal.fire({
+					// 	text: "All is cool! Now you submit this form",
+					// 	icon: "success",
+					// 	buttonsStyling: false,
+					// 	confirmButtonText: "Ok, got it!",
+					// 	customClass: {
+					// 		confirmButton: "btn font-weight-bold btn-light-primary"
+					// 	}
+					// }).then(function () {
+					// 	KTUtil.scrollTop();
+					// });
 				} else {
 					swal.fire({
 						text: "Sorry, looks like there are some errors detected, please try again.",
--- a/assets/mcu/isihasilriwayat.html
+++ b/assets/mcu/isihasilriwayat.html
--- a/assets/stephen/isi-hasil-fisik-k3.html
+++ b/assets/stephen/isi-hasil-fisik-k3.html
--- a/handlers/corporate/dashboardpic.handlers.go
+++ b/handlers/corporate/dashboardpic.handlers.go
@@ -0,0 +1,193 @@
+package corporate_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	corporate_dashboardpic "cpone/views/corporate/dashboardpic"
+	"net/http"
+	"strconv"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type DashboardPicServices interface {
+	GetEmployeeAnalyticBreadcrumb(title string) (models.BreadCrumbV1, error)
+	DummyDataTest() ([]models.DashboardPic, error)
+	ListingDashboardPic(search string, startdate string, enddate string, currentpage int, rowperpage int) ([]models.DashboardPic, int, error)
+}
+
+type DashboardPicHandler struct {
+	DashboardPicServices DashboardPicServices
+}
+
+func NewDashboardPicHandler(ea DashboardPicServices) *DashboardPicHandler {
+	return &DashboardPicHandler{
+		DashboardPicServices: ea,
+	}
+}
+
+func (ea *DashboardPicHandler) HandleShowEmployeeAnalyticScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	title := "PT. Sadhana Abiyasa Sampoerna"
+
+	listID := utils.GenerateRandomID("listid")
+	paginationID := utils.GenerateRandomID("paginationid")
+
+	user, err := services.GetUserLogin()
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error get user dev", zap.Any("error", err))
+		return err
+	}
+
+	dataBreadcrumb, err := ea.DashboardPicServices.GetEmployeeAnalyticBreadcrumb(title)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error breadcrumb dev", zap.Any("error", err))
+		return err
+	}
+	defer logger.Sync()
+
+	navbaruser := navbarmenu.NavbarWithLogo(user)
+	sidbaruser := sidebaruserprofile.Navbaruserprofile(user)
+	breadcrumb := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadcrumb)
+
+	listingData, totalPage, err := ea.DashboardPicServices.ListingDashboardPic("", "", "", 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error get listing data", zap.Any("error", err), zap.Any("total", totalPage))
+		return err
+	}
+	listingcomponent := corporate_dashboardpic.ListingData(listingData, listID)
+
+	paginationcomponent := pagination.PaginationV3(
+		totalPage,
+		1,
+		"/dev/dashboard_pic/changepage",
+		paginationID,
+		"#listID, #paginationID, #searchID, #startdateID, #enddateID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		corporate_dashboardpic.BeforeRequestContent(),
+		corporate_dashboardpic.AfterRequestContent(),
+	)
+
+	filtercomponent := corporate_dashboardpic.FilterListing(
+		"/dev/dashboard_pic/filter",
+		"input changed delay:500ms",
+		"#searchID, #startdateID, #enddateID, #listID, #paginationID",
+		"outerHTML",
+		"#"+paginationID,
+		corporate_dashboardpic.BeforeRequestContent(),
+		corporate_dashboardpic.AfterRequestContent(),
+	)
+
+	content := corporate_dashboardpic.DashboardPic(
+		listID,
+		paginationID,
+		breadcrumb,
+		filtercomponent,
+		listingcomponent,
+		paginationcomponent,
+	)
+	css := corporate_dashboardpic.CSSDashboardPIC()
+	js := corporate_dashboardpic.JSDashboardPIC()
+
+	view := corporate_dashboardpic.ShowDashboardPic(title, content, css, js, navbaruser, sidbaruser)
+	return utils.View(c, view)
+}
+
+func (ea *DashboardPicHandler) HandlePagination(c echo.Context) error {
+
+	pageparam := c.QueryParam("page")
+	listID := c.QueryParam("listID")
+	paginationID := c.QueryParam("paginationID")
+	search := c.QueryParam("search")
+	startdate := c.QueryParam("startdate")
+	enddate := c.QueryParam("enddate")
+
+	var retVal []templ.Component
+	logger, _ := zap.NewProduction()
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error convert page param")
+		return err
+	}
+
+	listdata, totalPage, err := ea.DashboardPicServices.ListingDashboardPic(search, startdate, enddate, page, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error convert page param")
+		return err
+	}
+	listcomponent := corporate_dashboardpic.ListingData(listdata, listID)
+
+	paginationcomponent := pagination.PaginationV3(
+		totalPage,
+		page,
+		"/dev/dashboard_pic/changepage",
+		paginationID,
+		"#listID, #paginationID, #searchID, #startdateID, #enddateID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		corporate_dashboardpic.BeforeRequestContent(),
+		corporate_dashboardpic.AfterRequestContent(),
+	)
+
+	retVal = append(retVal, listcomponent)
+	retVal = append(retVal, paginationcomponent)
+	return utils.ViewMulti(c, retVal)
+}
+
+func (ea *DashboardPicHandler) HandleFilter(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	search := c.QueryParam("search")
+	startdate := c.QueryParam("startdate")
+	enddate := c.QueryParam("enddate")
+	listID := c.QueryParam("listID")
+	paginationID := c.QueryParam("paginationID")
+
+	dataList, totalPage, err := ea.DashboardPicServices.ListingDashboardPic(search, startdate, enddate, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error Get Listing Data", zap.Any("error", err))
+		return err
+	}
+
+	listcomponent := corporate_dashboardpic.ListingData(dataList, listID)
+	paginationcomponent := pagination.PaginationV3(
+		totalPage, 1,
+		"/dev/dashboard_pic/changepage",
+		paginationID,
+		"#listID, #paginationID, #searchID, #startdateID, #enddateID",
+		"#"+paginationID, "outerHTML", "", "",
+		corporate_dashboardpic.BeforeRequestContent(),
+		corporate_dashboardpic.AfterRequestContent(),
+	)
+
+	var retval []templ.Component
+	retval = append(retval, listcomponent)
+	retval = append(retval, paginationcomponent)
+	return utils.ViewMulti(c, retval)
+}
+
+func (ea *DashboardPicHandler) HandleToDetail(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	id := c.Param("id")
+
+	logger.Info("params", zap.Any("id", id))
+
+	url := "/dev/detail/" + id
+	c.Response().Header().Set("HX-Redirect", url)
+
+	return c.String(http.StatusOK, url)
+}
--- a/handlers/corporate/mcudetail.handlers.go
+++ b/handlers/corporate/mcudetail.handlers.go
@@ -0,0 +1,69 @@
+package corporate_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	navbarmenu "cpone/component/navbar"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu"
+
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type McuDetailServices interface {
+	GetBreadcrumb(title string) (models.BreadCrumbV1, error)
+}
+
+type McuDetailHandler struct {
+	McuDetailServices McuDetailServices
+}
+
+func NewMcuDetailHandler(mcud McuDetailServices) *McuDetailHandler {
+	return &McuDetailHandler{
+		McuDetailServices: mcud,
+	}
+}
+
+func (mcud *McuDetailHandler) HandlerShowMcuDetailScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	title := "PT. Sadhana Abiyasa Sampoerna"
+
+	user, err := services.GetUserLogin()
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error get user corp", zap.Any("error", err))
+		return err
+	}
+
+	dataBreadcrumb, err := mcud.McuDetailServices.GetBreadcrumb(title)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error breadcrumb corp", zap.Any("error", err))
+		return err
+	}
+
+	breadcrumb := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadcrumb)
+	navbaruser := navbarmenu.NavbarWithLogo(user)
+	sidbaruser := sidebaruserprofile.Navbaruserprofile(user)
+
+	content := corporate_mcudetail.McuDetailScreen(
+		breadcrumb,
+		corporate_mcudetail.TabViewMcuDetail(),
+	)
+	css := corporate_mcudetail.CSSMcuDetail()
+	js := corporate_mcudetail.JSMcuDetail()
+
+	view := corporate_mcudetail.ShowMcuDetail(
+		title,
+		content,
+		css,
+		js,
+		navbaruser,
+		sidbaruser,
+	)
+
+	return utils.View(c, view)
+}
--- a/handlers/dev/detailmcu.handlers.go
+++ b/handlers/dev/detailmcu.handlers.go
@@ -0,0 +1,69 @@
+package dev_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	navbarmenu "cpone/component/navbar"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	dev_detailmcu "cpone/views/dev/mcu"
+
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type DetailMcuServices interface {
+	GetBreadcrumb(title string) (models.BreadCrumbV1, error)
+}
+
+type DetailMcuHandler struct {
+	DetailMcuServices DetailMcuServices
+}
+
+func NewDetailMcuHandler(dmcu DetailMcuServices) *DetailMcuHandler {
+	return &DetailMcuHandler{
+		DetailMcuServices: dmcu,
+	}
+}
+
+func (dmcu *DetailMcuHandler) HandleShowDetailMcuScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	title := "PT. Sadhana Abiyasa Sampoerna"
+
+	user, err := services.GetUserLogin()
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error get user dev", zap.Any("error", err))
+		return err
+	}
+
+	dataBreadcrumb, err := dmcu.DetailMcuServices.GetBreadcrumb(title)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error breadcrumb dev", zap.Any("error", err))
+		return err
+	}
+
+	breadcrumb := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadcrumb)
+	navbaruser := navbarmenu.NavbarWithLogo(user)
+	sidbaruser := sidebaruserprofile.Navbaruserprofile(user)
+
+	content := dev_detailmcu.DetailMcuScreen(
+		breadcrumb,
+		dev_detailmcu.TabViewDetailMcu(),
+	)
+	css := dev_detailmcu.CSSDetailMcu()
+	js := dev_detailmcu.JSDetailMcu()
+
+	view := dev_detailmcu.ShowDetailMcu(
+		title,
+		content,
+		css,
+		js,
+		navbaruser,
+		sidbaruser,
+	)
+
+	return utils.View(c, view)
+}
--- a/handlers/dev/employeeanalytic.handlers.go
+++ b/handlers/dev/employeeanalytic.handlers.go
@@ -18,8 +18,8 @@ import (

 type EmployeeAnalyticServices interface {
 	GetEmployeeAnalyticBreadcrumb(title string) (models.BreadCrumbV1, error)
-	DummyDataTest() ([]models.EmployeeAnalytic, error)
-	ListingEmployeeAnalytic(search string, startdate string, enddate string, currentpage int, rowperpage int) ([]models.EmployeeAnalytic, int, error)
+	DummyDataTest() ([]models.DashboardPic, error)
+	ListingEmployeeAnalytic(search string, startdate string, enddate string, currentpage int, rowperpage int) ([]models.DashboardPic, int, error)
 }

 type EmployeeAnalyticHandler struct {
@@ -69,7 +69,7 @@ func (ea *EmployeeAnalyticHandler) HandleShowEmployeeAnalyticScreen(c echo.Conte
 	paginationcomponent := pagination.PaginationV3(
 		totalPage,
 		1,
-		"/dev/employeeanalytic/changepage",
+		"/dev/dashboard_pic/changepage",
 		paginationID,
 		"#listID, #paginationID, #searchID, #startdateID, #enddateID",
 		"#"+paginationID,
@@ -79,7 +79,7 @@ func (ea *EmployeeAnalyticHandler) HandleShowEmployeeAnalyticScreen(c echo.Conte
 	)

 	filtercomponent := dev_employeeanalytic.FilterListing(
-		"/dev/employeeanalytic/filter",
+		"/dev/dashboard_pic/filter",
 		"input changed delay:500ms",
 		"#searchID, #startdateID, #enddateID, #listID, #paginationID",
 		"outerHTML",
@@ -132,7 +132,7 @@ func (ea *EmployeeAnalyticHandler) HandlePagination(c echo.Context) error {
 	paginationcomponent := pagination.PaginationV3(
 		totalPage,
 		page,
-		"/dev/employeeanalytic/changepage",
+		"/dev/dashboard_pic/changepage",
 		paginationID,
 		"#listID, #paginationID, #searchID, #startdateID, #enddateID",
 		"#"+paginationID,
@@ -165,7 +165,7 @@ func (ea *EmployeeAnalyticHandler) HandleFilter(c echo.Context) error {
 	listcomponent := dev_employeeanalytic.ListingData(dataList, listID)
 	paginationcomponent := pagination.PaginationV3(
 		totalPage, 1,
-		"/dev/employeeanalytic/changepage",
+		"/dev/dashboard_pic/changepage",
 		paginationID,
 		"#listID, #paginationID, #searchID, #startdateID, #enddateID",
 		"#"+paginationID, "outerHTML", "", "",
@@ -178,3 +178,15 @@ func (ea *EmployeeAnalyticHandler) HandleFilter(c echo.Context) error {
 	retval = append(retval, paginationcomponent)
 	return utils.ViewMulti(c, retval)
 }
+
+func (ea *EmployeeAnalyticHandler) HandleIntoDetail(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	id := c.Param("id")
+
+	logger.Info("params", zap.Any("id", id))
+
+	url := "/dev/detail/" + id
+	c.Response().Header().Set("HX-Redirect", url)
+
+	return nil
+}
--- a/handlers/public/landingpage.handlers.go
+++ b/handlers/public/landingpage.handlers.go
@@ -3,6 +3,7 @@ package public_handlers
 import (
 	public_services "cpone/services/public"
 	public_landingpage "cpone/views/public/landingpage"
+	"net/http"

 	"github.com/a-h/templ"
 	"go.uber.org/zap"
@@ -65,6 +66,12 @@ func (uh *LandingPageHandler) ShowLandingPage(c echo.Context) error {
 	return uh.View(c, helo)
 }

+func (uh *LandingPageHandler) HandleBtnLogin(c echo.Context) error {
+	c.Response().Header().Set("HX-Redirect", "/login")
+
+	return c.String(http.StatusOK, "/login")
+}
+
 func (uh *LandingPageHandler) View(c echo.Context, cmp templ.Component) error {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)

--- a/handlers/public/login.handlers.go
+++ b/handlers/public/login.handlers.go
@@ -1,13 +1,19 @@
 package public_handlers

 import (
+	"cpone/models"
 	"cpone/utils"
 	public_login "cpone/views/public/login"
+	"encoding/json"
+	"net/http"

 	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
 )

 type LoginService interface {
+	Login(username string, password string) (models.ResponseApi, error)
+	MultiSignIn(username string, password string) (models.Response, error)
 }

 func NewLoginHandler(us LoginService) *LoginHandler {
@@ -20,14 +26,135 @@ type LoginHandler struct {
 	LoginService LoginService
 }

-// func (uh *LoginHandler) ShowLogin(c echo.Context) error {
-// 	helo := client_Login.Show()
-// 	return utils.View(c, helo)
-// }
-
 func (lh *LoginHandler) HandlerShowLogin(c echo.Context) error {

 	si := public_login.ShowLogin("Login ", public_login.MainLogin(), public_login.CssLogin(), public_login.JsLogin())

 	return utils.View(c, si)
 }
+
+func (lh *LoginHandler) HandlerSignIn(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	username := c.FormValue("username")
+	password := c.FormValue("password")
+
+	defer logger.Sync()
+	logger.Info("Params", zap.Any("username", username), zap.Any("pass", password))
+
+	resp, err := lh.LoginService.Login(username, password)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error", zap.Error(err))
+
+		si := public_login.ShowLogin("Login ", public_login.MainLogin(), public_login.CssLogin(), public_login.JsLogin())
+		return utils.View(c, si)
+	}
+	defer logger.Sync()
+
+	var url string
+	switch resp.Data.Type {
+	case "cpone":
+		url = "/one-ui"
+	case "pic":
+		url = "/dashboard_pic"
+	case "patient":
+		url = "/home"
+	default:
+		url = "/one-ui"
+	}
+
+	user, err := json.Marshal(resp.Data.User)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error", zap.Error(err))
+
+		si := public_login.ShowLogin("Login ", public_login.MainLogin(), public_login.CssLogin(), public_login.JsLogin())
+		return utils.View(c, si)
+	}
+
+	userString := string(user)
+
+	storeLocal := `
+	<script>
+		console.log("store token");
+		const token = "` + resp.Data.Token + `";
+		const user = JSON.stringify(` + userString + `);
+		localStorage.setItem("token", token);
+		localStorage.setItem("user", user);
+		
+		setTimeout(() => {
+			window.location.href = "` + url + `";
+		}, 100);
+	</script>
+	`
+
+	c.Response().Header().Set("HX-Trigger", "script")
+
+	return c.String(http.StatusOK, storeLocal)
+}
+
+func (lh *LoginHandler) HandleSignIn(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	username := c.FormValue("username")
+	password := c.FormValue("password")
+	defer logger.Sync()
+	logger.Info("Params", zap.Any("username", username), zap.Any("pass", password))
+
+	resp, err := lh.LoginService.MultiSignIn(username, password)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error", zap.Error(err))
+
+		si := public_login.ShowLogin("Login ", public_login.MainLogin(), public_login.CssLogin(), public_login.JsLogin())
+		return utils.View(c, si)
+	}
+	if resp.Status == "ERR" {
+		defer logger.Sync()
+		logger.Info("Error", zap.Any("ERR", resp.Status))
+
+		si := public_login.ShowLogin("Login ", public_login.MainLogin(), public_login.CssLogin(), public_login.JsLogin())
+		return utils.View(c, si)
+	}
+	defer logger.Sync()
+	logger.Info("valid", zap.Any("value", resp))
+
+	var url string
+	switch resp.Data.Type {
+	case "cpone":
+		url = "/one-ui"
+	case "pic":
+		url = "/corp/dashboard_pic"
+	case "patient":
+		url = "/corp/dashboard_pat"
+	default:
+		url = "/one-ui"
+	}
+
+	user, err := json.Marshal(resp.Data.User)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("Error", zap.Error(err))
+
+		si := public_login.ShowLogin("Login ", public_login.MainLogin(), public_login.CssLogin(), public_login.JsLogin())
+		return utils.View(c, si)
+	}
+	userString := string(user)
+
+	store := `
+	<script>
+		console.log("store token");
+		const token = "` + resp.Data.Token + `";
+		const user = JSON.stringify(` + userString + `);
+		localStorage.setItem("token", token);
+		localStorage.setItem("user", user);
+		
+		setTimeout(() => {
+			window.location.href = "` + url + `";
+		}, 100);
+	</script>	
+	`
+	c.Response().Header().Set("HX-Trigger", "script")
+	return c.String(http.StatusOK, store)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -16,10 +16,10 @@ import (
 )

 func SetupRoutes(app *echo.Echo, h *dev_handlers.UserHandler) {
-	group := app.Group("/user")
+	// group := app.Group("/user")

-	group.GET("", h.HandlerShowUsers)
-	group.GET("/details/:id", h.HandlerShowUserById)
+	// group.GET("", h.HandlerShowUsers)
+	// group.GET("/details/:id", h.HandlerShowUserById)

 }

@@ -67,8 +67,14 @@ func SetupRoutesPublic(app *echo.Echo, appStore db.AppStore) {
 	lh := public_handlers.NewLandingPageHandler(l)
 	public.GET("landingpage", lh.ShowLandingPage)
 	public.GET("home", lh.ShowLandingPage)
-	loginHdr := public_handlers.NewLoginHandler(l)
-	public.GET("login", loginHdr.HandlerShowLogin)
+	public.GET("home/login", lh.HandleBtnLogin)
+	// loginHdr := public_handlers.NewLoginHandler(l)
+	// public.GET("login", loginHdr.HandlerShowLogin)
+
+	loginServ := public_services.NewServicesLogin(appStore)
+	loginHadlr := public_handlers.NewLoginHandler(loginServ)
+	public.GET("login", loginHadlr.HandlerShowLogin)
+	public.POST("login/signin", loginHadlr.HandleSignIn)

 	// kartu kontrol
 	publicKartuKontrolServices := public_services.NewServicesKartuKontrol(appStore)
@@ -91,12 +97,26 @@ func SetupRoutesPublic(app *echo.Echo, appStore db.AppStore) {
 	public.GET("redirectsurveymcu", publicKartuKontrolhandlers.HandlerRedirectToSurveyMcu)
 }
 func SetupRoutesCorporate(app *echo.Echo, appStore db.AppStore) {
-	public := app.Group("/corp")
+	corp := app.Group("/corp")
 	l := corporate_services.NewServicesCompany(appStore)
 	lh := corporate_handlers.NewCompanyHandler(l)
-	public.GET("/company", lh.ShowCompany)
+	corp.GET("/company", lh.ShowCompany)
+
+	// dashboard_pic
+	dashbrdPicServ := corporate_services.NewDashboardPicServices(appStore)
+	dashbrdPicHandl := corporate_handlers.NewDashboardPicHandler(dashbrdPicServ)
+	corp.GET("/dashboard_pic", dashbrdPicHandl.HandleShowEmployeeAnalyticScreen)
+	corp.GET("/dashboard_pic/changepage", dashbrdPicHandl.HandlePagination)
+	corp.GET("/dashboard_pic/filter", dashbrdPicHandl.HandleFilter)
+	corp.GET("/dashboard_pic/click/:id", dashbrdPicHandl.HandleToDetail)
+
+	// mcu detail
+	mcudServ := corporate_services.NewMcuDetailServices(appStore)
+	mcudHandr := corporate_handlers.NewMcuDetailHandler(mcudServ)
+	corp.GET("/detail/:id", mcudHandr.HandlerShowMcuDetailScreen)
+
 	patientHandler := corporate_handlers.NewPatientHandler(l)
-	public.GET("/patient", patientHandler.ShowPatient)
+	corp.GET("/patient", patientHandler.ShowPatient)
 }

 func SetupRoutesClient(app *echo.Echo, appStore db.AppStore) {
@@ -236,9 +256,14 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	// employee analytic
 	devEmplAnaServices := dev_services.NewEmployeeAnalyticServices(appStore)
 	devEmplAnaHandler := dev_handlers.NewEmployeeAnalyticHandler(devEmplAnaServices)
-	dev.GET("/employeeanalytic", devEmplAnaHandler.HandleShowEmployeeAnalyticScreen)
-	dev.GET("/employeeanalytic/changepage", devEmplAnaHandler.HandlePagination)
-	dev.GET("/employeeanalytic/filter", devEmplAnaHandler.HandleFilter)
+	dev.GET("/dashboard_pic", devEmplAnaHandler.HandleShowEmployeeAnalyticScreen)
+	dev.GET("/dashboard_pic/changepage", devEmplAnaHandler.HandlePagination)
+	dev.GET("/dashboard_pic/filter", devEmplAnaHandler.HandleFilter)
+	dev.GET("/dashboard_pic/click/:id", devEmplAnaHandler.HandleIntoDetail)
+
+	devDetailMcuService := dev_services.NewDetailMcuServices(appStore)
+	devDetailMcuHandler := dev_handlers.NewDetailMcuHandler(devDetailMcuService)
+	dev.GET("/detail/:id", devDetailMcuHandler.HandleShowDetailMcuScreen)

 	// group result
 	devGRServices := dev_services.NewServicesGroupResult(appStore)
--- a/models/employeeanalytic.models.go
+++ b/models/employeeanalytic.models.go
@@ -1,6 +1,6 @@
 package models

-type EmployeeAnalytic struct {
+type DashboardPic struct {
 	Mgm_McuID                     int    `db:"Mgm_McuID"`
 	Mgm_McuLabel                  string `db:"Mgm_McuLabel"`
 	Mgm_McuFlagRelasiBayarSendiri string `db:"Mgm_McuFlagRelasiBayarSendiri"`
--- a/models/login.models.go
+++ b/models/login.models.go
@@ -0,0 +1,89 @@
+package models
+
+type ResponseApi struct {
+	Status string `json:"status"`
+	Data   struct {
+		User struct {
+			MUserID                      string `json:"M_UserID"`
+			MUserEmail                   string `json:"M_UserEmail"`
+			MUserUsername                string `json:"M_UserUsername"`
+			MUserGroupDashboard          string `json:"M_UserGroupDashboard"`
+			MUserDefaultTSampleStationID string `json:"M_UserDefaultT_SampleStationID"`
+			MStaffName                   string `json:"M_StaffName"`
+			IsCourier                    string `json:"is_courier"`
+			TimeAutologout               string `json:"time_autologout"`
+			IP                           string `json:"ip"`
+			Agent                        string `json:"agent"`
+			Version                      string `json:"version"`
+			LastLogin                    string `json:"last-login"`
+		} `json:"user"`
+		Token string `json:"token"`
+		Type  string `json:"type"`
+	} `json:"data"`
+	Message string `json:"message"`
+	Query   string `json:"query"`
+	DbError struct {
+		Code    int    `json:"code"`
+		Message string `json:"message"`
+	} `json:"db_error"`
+}
+
+type ResponseInvalid struct {
+	Status  string `json:"status"`
+	Message string `json:"message"`
+	Query   string `json:"query"`
+	DbError struct {
+		Code    int    `json:"code"`
+		Message string `json:"message"`
+	} `json:"db_error"`
+}
+
+type ResponseValid struct {
+	Status string `json:"status"`
+	Data   struct {
+		User struct {
+			MUserID                      string `json:"M_UserID"`
+			MUserEmail                   string `json:"M_UserEmail"`
+			MUserUsername                string `json:"M_UserUsername"`
+			MUserGroupDashboard          string `json:"M_UserGroupDashboard"`
+			MUserDefaultTSampleStationID string `json:"M_UserDefaultT_SampleStationID"`
+			MStaffName                   string `json:"M_StaffName"`
+			IsCourier                    string `json:"is_courier"`
+			TimeAutologout               string `json:"time_autologout"`
+			IP                           string `json:"ip"`
+			Agent                        string `json:"agent"`
+			Version                      string `json:"version"`
+			LastLogin                    string `json:"last-login"`
+		} `json:"user"`
+		Token string `json:"token"`
+		Type  string `json:"type"`
+	} `json:"data"`
+}
+
+type Response struct {
+	Status  string `json:"status"`
+	Message string `json:"message"`
+	Query   string `json:"query"`
+	DbError struct {
+		Code    int    `json:"code"`
+		Message string `json:"message"`
+	} `json:"db_error"`
+	Data struct {
+		User struct {
+			MUserID                      string `json:"M_UserID"`
+			MUserEmail                   string `json:"M_UserEmail"`
+			MUserUsername                string `json:"M_UserUsername"`
+			MUserGroupDashboard          string `json:"M_UserGroupDashboard"`
+			MUserDefaultTSampleStationID string `json:"M_UserDefaultT_SampleStationID"`
+			MStaffName                   string `json:"M_StaffName"`
+			IsCourier                    string `json:"is_courier"`
+			TimeAutologout               string `json:"time_autologout"`
+			IP                           string `json:"ip"`
+			Agent                        string `json:"agent"`
+			Version                      string `json:"version"`
+			LastLogin                    string `json:"last-login"`
+		} `json:"user"`
+		Token string `json:"token"`
+		Type  string `json:"type"`
+	} `json:"data"`
+}
--- a/services/corporate/dashboardpic.services.go
+++ b/services/corporate/dashboardpic.services.go
@@ -0,0 +1,128 @@
+package corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+
+	"go.uber.org/zap"
+)
+
+type DashboardPicServices struct {
+	DashboardPicStore db.AppStore
+}
+
+func NewDashboardPicServices(uStore db.AppStore) *DashboardPicServices {
+	return &DashboardPicServices{
+		DashboardPicStore: uStore,
+	}
+}
+
+func (ea *DashboardPicServices) GetEmployeeAnalyticBreadcrumb(title string) (models.BreadCrumbV1, error) {
+	breadcrumb := models.BreadCrumbV1{
+		Title: title,
+		Item: []models.ItemBreadCrumbV1{
+			{
+				Item: "Dashboard",
+				Url:  "/dev/dashboard",
+			},
+			{
+				Item: "Employee Health Medical Analytic",
+				Url:  "",
+			},
+		},
+	}
+
+	return breadcrumb, nil
+}
+
+func (ea *DashboardPicServices) DummyDataTest() ([]models.DashboardPic, error) {
+	employees := []models.DashboardPic{
+		{
+			Mgm_McuID:                     1,
+			Mgm_McuLabel:                  "Employee 1",
+			Mgm_McuFlagRelasiBayarSendiri: "Yes",
+			Mgm_McuBisaTambahPemeriksaan:  "No",
+			Mgm_McuCorporateID:            101,
+			Mgm_McuNumber:                 "EMP001",
+			Mgm_McuNumberNational:         "NAT001",
+			Mgm_McuNote:                   "Lorem ipsum dolor sit amet.",
+			Mgm_McuStartDate:              "2024-01-01",
+			Mgm_McuEndDate:                "2024-12-31",
+			Mgm_McuIsActive:               "Y",
+		},
+		{
+			Mgm_McuID:                     2,
+			Mgm_McuLabel:                  "Employee 2",
+			Mgm_McuFlagRelasiBayarSendiri: "No",
+			Mgm_McuBisaTambahPemeriksaan:  "Yes",
+			Mgm_McuCorporateID:            102,
+			Mgm_McuNumber:                 "EMP002",
+			Mgm_McuNumberNational:         "NAT002",
+			Mgm_McuNote:                   "Lorem ipsum dolor sit amet consectetur.",
+			Mgm_McuStartDate:              "2024-02-15",
+			Mgm_McuEndDate:                "2024-11-30",
+			Mgm_McuIsActive:               "Y",
+		},
+	}
+
+	return employees, nil
+}
+
+func (ea *DashboardPicServices) ListingDashboardPic(search string, startdate string, enddate string, currentpage int, rowperpage int) ([]models.DashboardPic, int, error) {
+	logger, _ := zap.NewProduction()
+	var ret []models.DashboardPic
+	var totalData int
+
+	if len(startdate) == 0 {
+		startdate = "1900-01-01"
+	}
+	if len(enddate) == 0 {
+		enddate = "9999-12-12"
+	}
+
+	prmLabel := "%" + search + "%"
+	offset := (currentpage - 1) * rowperpage
+	q := `
+		SELECT COUNT(*)
+		FROM mgm_mcu
+		WHERE Mgm_McuIsActive = 'Y'
+		AND Mgm_McuLabel LIKE ?
+		AND Mgm_McuStartDate >= ?
+		AND Mgm_McuEndDate <= ?
+	`
+	if err := dbx.Handlex.Get(&totalData, q, prmLabel, startdate, enddate); err != nil {
+		return nil, 0, fmt.Errorf("error query get total data: %v", err)
+	}
+
+	q = `
+		SELECT
+		Mgm_McuID,
+		Mgm_McuLabel,
+		Mgm_McuFlagRelasiBayarSendiri,
+		Mgm_McuBisaTambahPemeriksaan,
+		Mgm_McuCorporateID,
+		Mgm_McuNumber,
+		Mgm_McuNumberNational,
+		Mgm_McuNote,
+		DATE_FORMAT(Mgm_McuStartDate, '%d-%m-%Y') AS Mgm_McuStartDate,
+		DATE_FORMAT(Mgm_McuEndDate, '%d-%m-%Y') AS Mgm_McuEndDate,
+		Mgm_McuIsActive
+		FROM mgm_mcu
+		WHERE Mgm_McuIsActive = 'Y'
+		AND Mgm_McuLabel LIKE ?
+		AND Mgm_McuStartDate >= ?
+		AND Mgm_McuEndDate <= ?
+		ORDER BY Mgm_McuID ASC
+		LIMIT ? OFFSET ?
+	`
+	if err := dbx.Handlex.Select(&ret, q, prmLabel, startdate, enddate, rowperpage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error query get data: %v", err)
+	}
+	logger.Info("Resp", zap.Any("Respsone", ret))
+
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowperpage)))
+	return ret, totalPage, nil
+}
--- a/services/corporate/mcudetail.services.go
+++ b/services/corporate/mcudetail.services.go
@@ -0,0 +1,37 @@
+package corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+)
+
+type McuDetailServices struct {
+	McuDetailStore db.AppStore
+}
+
+func NewMcuDetailServices(uStore db.AppStore) *McuDetailServices {
+	return &McuDetailServices{
+		McuDetailStore: uStore,
+	}
+}
+
+func (mcud *McuDetailServices) GetBreadcrumb(title string) (models.BreadCrumbV1, error) {
+	breadcrumb := models.BreadCrumbV1{
+		Title: title,
+		Item: []models.ItemBreadCrumbV1{
+			{
+				Item: "Dashboard",
+				Url:  "/dev/dashboard",
+			},
+			{
+				Item: "Employee Health Medical Analytic",
+				Url:  "/dev/employeeanalytic/",
+			},
+			{
+				Item: title,
+				Url:  "",
+			},
+		},
+	}
+	return breadcrumb, nil
+}
--- a/services/dev/detailmcu.services.go
+++ b/services/dev/detailmcu.services.go
@@ -0,0 +1,37 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+)
+
+type DetailMcuServices struct {
+	DetailMcuStore db.AppStore
+}
+
+func NewDetailMcuServices(uStore db.AppStore) *DetailMcuServices {
+	return &DetailMcuServices{
+		DetailMcuStore: uStore,
+	}
+}
+
+func (dmcu *DetailMcuServices) GetBreadcrumb(title string) (models.BreadCrumbV1, error) {
+	breadcrumb := models.BreadCrumbV1{
+		Title: title,
+		Item: []models.ItemBreadCrumbV1{
+			{
+				Item: "Dashboard",
+				Url:  "/dev/dashboard",
+			},
+			{
+				Item: "Employee Health Medical Analytic",
+				Url:  "/dev/employeeanalytic/",
+			},
+			{
+				Item: title,
+				Url:  "",
+			},
+		},
+	}
+	return breadcrumb, nil
+}
--- a/services/dev/employeeanalytic.services.go
+++ b/services/dev/employeeanalytic.services.go
@@ -38,8 +38,8 @@ func (ea *EmployeeAnalyticServices) GetEmployeeAnalyticBreadcrumb(title string)
 	return breadcrumb, nil
 }

-func (ea *EmployeeAnalyticServices) DummyDataTest() ([]models.EmployeeAnalytic, error) {
-	employees := []models.EmployeeAnalytic{
+func (ea *EmployeeAnalyticServices) DummyDataTest() ([]models.DashboardPic, error) {
+	employees := []models.DashboardPic{
 		{
 			Mgm_McuID:                     1,
 			Mgm_McuLabel:                  "Employee 1",
@@ -71,9 +71,9 @@ func (ea *EmployeeAnalyticServices) DummyDataTest() ([]models.EmployeeAnalytic,
 	return employees, nil
 }

-func (ea *EmployeeAnalyticServices) ListingEmployeeAnalytic(search string, startdate string, enddate string, currentpage int, rowperpage int) ([]models.EmployeeAnalytic, int, error) {
+func (ea *EmployeeAnalyticServices) ListingEmployeeAnalytic(search string, startdate string, enddate string, currentpage int, rowperpage int) ([]models.DashboardPic, int, error) {
 	logger, _ := zap.NewProduction()
-	var ret []models.EmployeeAnalytic
+	var ret []models.DashboardPic
 	var totalData int

 	if len(startdate) == 0 {
--- a/services/public/login.services.go
+++ b/services/public/login.services.go
@@ -1,6 +1,17 @@
 package public_services

-import "cpone/db"
+import (
+	"bytes"
+	"cpone/db"
+	"cpone/models"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+
+	"go.uber.org/zap"
+)

 type ServicesLogin struct {
 	CompanyStore db.AppStore
@@ -12,3 +23,80 @@ func NewServicesLogin(uStore db.AppStore) *ServicesLogin {
 		CompanyStore: uStore,
 	}
 }
+
+func (ls *ServicesLogin) Login(username string, password string) (models.ResponseApi, error) {
+	logger, _ := zap.NewProduction()
+	url := "https://devcpone.aplikasi.web.id/one-api/v1/system/auth/login"
+
+	var resp models.ResponseApi
+
+	// Create a JSON payload with the username and password
+	payload := []byte(fmt.Sprintf(`{"username": "%s", "password": "%s"}`, username, password))
+	logger.Info("payload", zap.Any("data", payload))
+
+	// Make the POST request
+	request, err := http.Post(url, "application/json", bytes.NewBuffer(payload))
+	if err != nil {
+		logger.Info("requser", zap.Any("err", err))
+		return resp, err
+	}
+	if request.StatusCode != http.StatusOK {
+		logger.Info("status", zap.Any("err", request.StatusCode))
+		return resp, fmt.Errorf("server returned non-OK status: %d", request.StatusCode)
+	}
+	defer request.Body.Close()
+
+	// Read the response body
+	body, err := io.ReadAll(request.Body)
+	if err != nil {
+		logger.Info("body", zap.Any("data", body))
+		return resp, err
+	}
+
+	if err := json.Unmarshal(body, &resp); err != nil {
+		logger.Info("json", zap.Any("data", err))
+		return resp, err
+	}
+
+	// Check if status is "ERR"
+	if resp.Status == "ERR" {
+		logger.Info("status", zap.Any("data", resp.Message))
+		return resp, fmt.Errorf("login failed: %s", resp.Message)
+	}
+
+	return resp, nil
+}
+
+func (ls *ServicesLogin) MultiSignIn(username string, password string) (models.Response, error) {
+	logger, _ := zap.NewProduction()
+	var ret models.Response
+	uri := "https://devcpone.aplikasi.web.id/one-api/v1/system/auth/multi_login"
+
+	params := url.Values{}
+	params.Add("username", username)
+	params.Add("password", password)
+
+	resp, err := http.PostForm(uri, params)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("error request post", zap.Any("error", err))
+		return ret, err
+	}
+	defer resp.Body.Close()
+
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("error read body", zap.Any("error", err))
+		return ret, err
+	}
+
+	err = json.Unmarshal(body, &ret)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("error parse body", zap.Any("error", err))
+		return ret, err
+	}
+
+	return ret, nil
+}
--- a/views/corporate/dashboardpic/dashboardpic.templ
+++ b/views/corporate/dashboardpic/dashboardpic.templ
@@ -0,0 +1,110 @@
+package corporate_dashboardpic
+
+import "cpone/layout"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+templ DashboardPic(
+    listID string,
+    paginationID string,
+    breadcrumb templ.Component,
+    filtercomponent templ.Component,
+    listingcomponent templ.Component,
+    paginationcomponent templ.Component,    
+) {
+    <div class="container-fluid">
+        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "listID",
+            Name: "listID",
+            Type: "hidden",
+            Value: listID})
+        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
+            Name: "paginationID",
+            Type: "hidden",
+            Value: paginationID})
+        <div class="row align-item-center mb-10">
+            <div class="col-md-10 col-sm-12 p-0">
+                @breadcrumb
+            </div>
+        </div>
+        @filtercomponent
+        <div id="loading-parent" class="rounded">
+            @listingcomponent
+            @paginationcomponent
+            <div id="loading-child" class="rounded bg-transparent">
+                <div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <div id="loadingcontent"></div>
+    </div>
+}
+
+templ JSDashboardPIC() {
+
+}
+
+templ CSSDashboardPIC() {
+    <link
+        rel="stylesheet"
+        href="assets/css/googlefont/poppins.css"
+    />
+    <link 
+        rel="stylesheet"
+        href="assets/css/googlefont/publicsans.css"
+    />
+    <link 
+        rel="stylesheet"
+        href="assets/css/googlefont/roboto.css"
+    />
+    <style>
+        body {
+            background-color: white;
+        }
+        #div-chart {
+            margin: 40px 10vw 40px 10vw;
+        }
+        .title {
+            font-size: 20px;
+            font-weight: bold;
+        }
+        #title {
+            font-weight: 600;
+        }
+    </style>
+}
+
+script BeforeRequestContent() {
+    const loadingParent = document.getElementById("loading-parent");
+    const loadingChild = document.getElementById("loading-child");
+    const loadingSpinner = document.getElementById("loading-spinner");
+
+    loadingParent.classList.add("overlay");
+    loadingParent.classList.add("overlay-block");
+    loadingChild.classList.add("overlay-layer");
+    loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContent() {
+    const loadingParent = document.getElementById("loading-parent");
+    const loadingChild = document.getElementById("loading-child");
+    const loadingSpinner = document.getElementById("loading-spinner");
+
+    loadingParent.classList.remove("overlay");
+    loadingParent.classList.remove("overlay-block");
+    loadingChild.classList.remove("overlay-layer");
+    loadingSpinner.classList.add("d-none");
+}
+
+templ ShowDashboardPic(
+    title string,
+    cmp templ.Component,
+    css templ.Component,
+    js templ.Component,
+    navbaruser templ.Component,
+    userprofile templ.Component,
+) {
+    @layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile) {
+        @cmp
+    }
+}
--- a/views/corporate/dashboardpic/dashboardpic_templ.go
+++ b/views/corporate/dashboardpic/dashboardpic_templ.go
@@ -0,0 +1,216 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_dashboardpic
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/layout"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+func DashboardPic(
+	listID string,
+	paginationID string,
+	breadcrumb templ.Component,
+	filtercomponent templ.Component,
+	listingcomponent templ.Component,
+	paginationcomponent templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "listID",
+			Name:  "listID",
+			Type:  "hidden",
+			Value: listID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
+			Name:  "paginationID",
+			Type:  "hidden",
+			Value: paginationID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row align-item-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = breadcrumb.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = filtercomponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\"rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = listingcomponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = paginationcomponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\"rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JSDashboardPIC() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CSSDashboardPIC() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n        body {\r\n            background-color: white;\r\n        }\r\n        #div-chart {\r\n            margin: 40px 10vw 40px 10vw;\r\n        }\r\n        .title {\r\n            font-size: 20px;\r\n            font-weight: bold;\r\n        }\r\n        #title {\r\n            font-weight: 600;\r\n        }\r\n    </style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func BeforeRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContent_5717`,
+		Function: `function __templ_BeforeRequestContent_5717(){const loadingParent = document.getElementById("loading-parent");
+    const loadingChild = document.getElementById("loading-child");
+    const loadingSpinner = document.getElementById("loading-spinner");
+
+    loadingParent.classList.add("overlay");
+    loadingParent.classList.add("overlay-block");
+    loadingChild.classList.add("overlay-layer");
+    loadingSpinner.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContent_5717`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_5717`),
+	}
+}
+
+func AfterRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContent_077f`,
+		Function: `function __templ_AfterRequestContent_077f(){const loadingParent = document.getElementById("loading-parent");
+    const loadingChild = document.getElementById("loading-child");
+    const loadingSpinner = document.getElementById("loading-spinner");
+
+    loadingParent.classList.remove("overlay");
+    loadingParent.classList.remove("overlay-block");
+    loadingChild.classList.remove("overlay-layer");
+    loadingSpinner.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContent_077f`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_077f`),
+	}
+}
+
+func ShowDashboardPic(
+	title string,
+	cmp templ.Component,
+	css templ.Component,
+	js templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var5 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/corporate/dashboardpic/filterdashboardpic.templ
+++ b/views/corporate/dashboardpic/filterdashboardpic.templ
@@ -0,0 +1,68 @@
+package corporate_dashboardpic
+
+templ FilterListing(
+    hxGet string,
+    hxTrigger string,
+    hxInclude string,
+    hxSwap string,
+    hxTarget string,
+    hxBeforeRequest templ.ComponentScript,
+    hxAfterRequest templ.ComponentScript,    
+) {
+    <div class="row pt-8 align-items-center">
+        <div class="col-12 col-sm-3 col-md-1 col-lg-1 col-xl-1 mb-2">
+            <label class="text-black font-weight-bolder">Stard Date:</label>
+        </div>
+        <div class="col-12 col-sm-9 col-md-2 col-lg-2 col-xl-2 mb-2">
+            <input 
+                id="startdateID" 
+                name="startdate"
+                class="form-control form-control-lg bg-field border-0 rounded-lg" 
+                type="date" 
+                autocomplete="off"
+                hx-get={ hxGet }
+                hx-trigger={ hxTrigger }
+                hx-include={ hxInclude }
+                hx-swap={ hxSwap }
+                hx-target={ hxTarget }
+                hx-on::before-request={ hxBeforeRequest }
+                hx-on::after-request={ hxAfterRequest }
+            />
+        </div>
+        <div class="col-12 col-sm-3 col-md-1 col-lg-1 col-xl-1 mb-2">
+            <label class="text-black font-weight-bolder">End Date:</label>
+        </div>
+        <div class="col-12 col-sm-9 col-md-2 col-lg-2 col-xl-2 mb-2">
+            <input 
+                id="enddateID"
+                name="enddate"
+                class="form-control form-control-lg bg-field border-0 rounded-lg" 
+                type="date" 
+                autocomplete="off"
+                hx-get={ hxGet }
+                hx-trigger={ hxTrigger }
+                hx-include={ hxInclude }
+                hx-swap={ hxSwap }
+                hx-target={ hxTarget }
+                hx-on::before-request={ hxBeforeRequest }
+                hx-on::after-request={ hxAfterRequest }
+            />
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-2">
+            <input 
+                id="searchID"
+                name="search"
+                class="form-control form-control-lg bg-field border-0 rounded-lg"
+                type="text"
+                placeholder="nama karyawan"
+                hx-get={ hxGet }
+                hx-trigger={ hxTrigger }
+                hx-include={ hxInclude }
+                hx-swap={ hxSwap }
+                hx-target={ hxTarget }
+                hx-on::before-request={ hxBeforeRequest }
+                hx-on::after-request={ hxAfterRequest }
+            />
+        </div>
+    </div>
+}
--- a/views/corporate/dashboardpic/filterdashboardpic_templ.go
+++ b/views/corporate/dashboardpic/filterdashboardpic_templ.go
@@ -0,0 +1,316 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_dashboardpic
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func FilterListing(
+	hxGet string,
+	hxTrigger string,
+	hxInclude string,
+	hxSwap string,
+	hxTarget string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row pt-8 align-items-center\"><div class=\"col-12 col-sm-3 col-md-1 col-lg-1 col-xl-1 mb-2\"><label class=\"text-black font-weight-bolder\">Stard Date:</label></div><div class=\"col-12 col-sm-9 col-md-2 col-lg-2 col-xl-2 mb-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"startdateID\" name=\"startdate\" class=\"form-control form-control-lg bg-field border-0 rounded-lg\" type=\"date\" autocomplete=\"off\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 23, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 24, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 25, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 26, Col: 32}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 27, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"col-12 col-sm-3 col-md-1 col-lg-1 col-xl-1 mb-2\"><label class=\"text-black font-weight-bolder\">End Date:</label></div><div class=\"col-12 col-sm-9 col-md-2 col-lg-2 col-xl-2 mb-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"enddateID\" name=\"enddate\" class=\"form-control form-control-lg bg-field border-0 rounded-lg\" type=\"date\" autocomplete=\"off\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 42, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 43, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 44, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 45, Col: 32}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 46, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"searchID\" name=\"search\" class=\"form-control form-control-lg bg-field border-0 rounded-lg\" type=\"text\" placeholder=\"nama karyawan\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 58, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 59, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 60, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 61, Col: 32}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\filterdashboardpic.templ`, Line: 62, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var22.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/corporate/dashboardpic/listingdashboardpic.templ
+++ b/views/corporate/dashboardpic/listingdashboardpic.templ
@@ -0,0 +1,42 @@
+package corporate_dashboardpic
+
+import "cpone/models"
+import "strconv"
+
+templ ListingData(
+    data []models.DashboardPic,
+    listID string,
+) {
+    <div id={listID} class="align-items-center pt-8 flex-column" hx-swap-oob="true">
+        <div class="bg-field rounded">
+            <div class="p-8">
+                for i, d := range data {
+                    if i == (len(data) - 1)  {
+                        <div id={ strconv.Itoa(int(d.Mgm_McuID)) } class="card shadow p-8" hx-get={"/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID)}>
+                            @ItemCard(d)
+                        </div>
+                    } else {
+                        <div id={ strconv.Itoa(int(d.Mgm_McuID)) } class="card shadow p-8 mb-8" hx-get={"/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID)}>
+                            @ItemCard(d)
+                        </div>        
+                    }
+                }
+            </div>
+        </div>
+    </div>
+}
+
+templ ItemCard(data models.DashboardPic) {
+    <div class="row d-flex align-items-center">
+        <div class="col-7">
+            <h3 class="text-black">{ data.Mgm_McuLabel }</h3>
+        </div>
+        <div class="col-md col-lg text-right">
+            <span class="text-black font-weight-bolder">{ data.Mgm_McuNote }</span>
+        </div>
+        <div class="col-md col-lg text-right">
+            <span class="text-black font-weight-bolder">{ data.Mgm_McuStartDate } - { data.Mgm_McuEndDate }</span>
+        </div>
+    </div>    
+}
+
--- a/views/corporate/dashboardpic/listingdashboardpic_templ.go
+++ b/views/corporate/dashboardpic/listingdashboardpic_templ.go
@@ -0,0 +1,215 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_dashboardpic
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/models"
+import "strconv"
+
+func ListingData(
+	data []models.DashboardPic,
+	listID string,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(listID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 10, Col: 19}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"align-items-center pt-8 flex-column\" hx-swap-oob=\"true\"><div class=\"bg-field rounded\"><div class=\"p-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i, d := range data {
+			if i == (len(data) - 1) {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(d.Mgm_McuID)))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 15, Col: 64}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"card shadow p-8\" hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 15, Col: 155}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = ItemCard(d).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(d.Mgm_McuID)))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 19, Col: 64}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"card shadow p-8 mb-8\" hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 19, Col: 160}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = ItemCard(d).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ItemCard(data models.DashboardPic) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row d-flex align-items-center\"><div class=\"col-7\"><h3 class=\"text-black\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuLabel)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 32, Col: 54}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3></div><div class=\"col-md col-lg text-right\"><span class=\"text-black font-weight-bolder\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuNote)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 35, Col: 74}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"col-md col-lg text-right\"><span class=\"text-black font-weight-bolder\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuStartDate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 38, Col: 79}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" - ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuEndDate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\dashboardpic\listingdashboardpic.templ`, Line: 38, Col: 105}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/corporate/mcu/mcudetail.templ
+++ b/views/corporate/mcu/mcudetail.templ
@@ -0,0 +1,71 @@
+package corporate_mcudetail
+
+import "cpone/layout"
+
+templ McuDetailScreen(
+    breadcrumb templ.Component,
+    content templ.Component,
+) {
+    <div class="container-fluid">
+        <div class="row align-item-center mb-10">
+            <div class="col-md-10 col-sm-12 p-0">
+                @breadcrumb
+            </div>            
+        </div>
+        <div id="loading-parent" class="rounded">
+            @content
+            <div id="loading-child" class="rounded bg-transparent">
+                <div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+                    <span class="sr-only">Loading....</span>
+                </div>
+            </div>
+        </div>
+        <div id="loadingcontent"></div>
+    </div>
+}
+
+templ CSSMcuDetail() {
+    <link
+        rel="stylesheet"
+        href="assets/css/googlefont/poppins.css"
+    />
+    <link 
+        rel="stylesheet"
+        href="assets/css/googlefont/publicsans.css"
+    />
+    <link 
+        rel="stylesheet"
+        href="assets/css/googlefont/roboto.css"
+    />
+    <style>
+        body {
+            background-color: white;
+        }
+        #div-chart {
+            margin: 40px 10vw 40px 10vw;
+        }
+        .title {
+            font-size: 20px;
+            font-weight: bold;
+        }
+        #title {
+            font-weight: 600;
+        }
+    </style>
+}
+
+templ JSMcuDetail() {
+}
+
+templ ShowMcuDetail(
+    title string,
+    cmp templ.Component,
+    css templ.Component,
+    js templ.Component,
+    navbaruser templ.Component,
+    userprofile templ.Component,
+) {
+    @layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile) {
+        @cmp
+    }
+}
--- a/views/corporate/mcu/mcudetail_templ.go
+++ b/views/corporate/mcu/mcudetail_templ.go
@@ -0,0 +1,146 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_mcudetail
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/layout"
+
+func McuDetailScreen(
+	breadcrumb templ.Component,
+	content templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"row align-item-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = breadcrumb.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div id=\"loading-parent\" class=\"rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = content.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\"rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading....</span></div></div></div><div id=\"loadingcontent\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CSSMcuDetail() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n        body {\r\n            background-color: white;\r\n        }\r\n        #div-chart {\r\n            margin: 40px 10vw 40px 10vw;\r\n        }\r\n        .title {\r\n            font-size: 20px;\r\n            font-weight: bold;\r\n        }\r\n        #title {\r\n            font-weight: 600;\r\n        }\r\n    </style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JSMcuDetail() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowMcuDetail(
+	title string,
+	cmp templ.Component,
+	css templ.Component,
+	js templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var5 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/corporate/mcu/mcutabview.templ
+++ b/views/corporate/mcu/mcutabview.templ
@@ -0,0 +1,52 @@
+package corporate_mcudetail
+
+templ TabViewMcuDetail() {
+	<div>
+		<ul class="nav nav-tabs nav-tabs-line">
+			<li class="nav-item">
+				<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">Peserta</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan global</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3">Kelainan Lab</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4">kelainan Non Lab</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5">kelainan Fisik</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_6">Kesimpulan</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
+			</li>
+		</ul>
+	</div>
+	<div class="tab-content mt-5" id="myTabContent">
+		<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_5" role="tabpanel" aria-labelledby="kt_tab_pane_5" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_6" role="tabpanel" aria-labelledby="kt_tab_pane_6">
+			tab 6
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_7" role="tabpanel" aria-labelledby="kt_tab_pane_7">
+			tab 7
+		</div>
+	</div>
+}
--- a/views/corporate/mcu/mcutabview_templ.go
+++ b/views/corporate/mcu/mcutabview_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_mcudetail
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func TabViewMcuDetail() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><ul class=\"nav nav-tabs nav-tabs-line\"><li class=\"nav-item\"><a class=\"nav-link active\" data-toggle=\"tab\" href=\"#kt_tab_pane_1\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\">Kesimpulan</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_3\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_3\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_4\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_4\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_5\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_5\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_6\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_6\">tab 6\r</div><div class=\"tab-pane fade\" id=\"kt_tab_pane_7\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_7\">tab 7\r</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/dev/employeeanalytic/employeeanalytic.templ
+++ b/views/dev/employeeanalytic/employeeanalytic.templ
@@ -12,7 +12,7 @@ templ EmployeeAnalyticScreen(
    listingcomponent templ.Component,
    paginationcomponent templ.Component,
 ) {
-    <div class="container-fluid">
+    <div id="dashboardpicid" class="container-fluid">
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "listID",
            Name: "listID",
            Type: "hidden",
--- a/views/dev/employeeanalytic/employeeanalytic_templ.go
+++ b/views/dev/employeeanalytic/employeeanalytic_templ.go
@@ -34,7 +34,7 @@ func EmployeeAnalyticScreen(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"dashboardpicid\" class=\"container-fluid\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/employeeanalytic/listingemployeeanalytic.templ
+++ b/views/dev/employeeanalytic/listingemployeeanalytic.templ
@@ -4,7 +4,7 @@ import "cpone/models"
 import "strconv"

 templ ListingData(
-    data []models.EmployeeAnalytic,
+    data []models.DashboardPic,
    listID string,
 ) {
    <div id={listID} class="align-items-center pt-8 flex-column" hx-swap-oob="true">
@@ -12,13 +12,13 @@ templ ListingData(
            <div class="p-8">
                for i, d := range data {
                    if i == (len(data) - 1)  {
-                        <div id={ strconv.Itoa(int(d.Mgm_McuID)) } class="card shadow p-8">
+                        <div id={ strconv.Itoa(int(d.Mgm_McuID)) } class="card shadow p-8" hx-get={"/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID)}>
                            @ItemCard(d)
                        </div>
                    } else {
-                        <div id={ strconv.Itoa(int(d.Mgm_McuID)) } class="card shadow p-8 mb-8">
+                        <div id={ strconv.Itoa(int(d.Mgm_McuID)) } class="card shadow p-8 mb-8" hx-get={"/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID)}>
                            @ItemCard(d)
-                        </div>        
+                        </div>
                    }
                }
            </div>
@@ -26,7 +26,7 @@ templ ListingData(
    </div>
 }

-templ ItemCard(data models.EmployeeAnalytic) {
+templ ItemCard(data models.DashboardPic) {
    <div class="row d-flex align-items-center">
        <div class="col-7">
            <h3 class="text-black">{ data.Mgm_McuLabel }</h3>
--- a/views/dev/employeeanalytic/listingemployeeanalytic_templ.go
+++ b/views/dev/employeeanalytic/listingemployeeanalytic_templ.go
@@ -14,7 +14,7 @@ import "cpone/models"
 import "strconv"

 func ListingData(
-	data []models.EmployeeAnalytic,
+	data []models.DashboardPic,
 	listID string,
 ) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
@@ -61,7 +61,20 @@ func ListingData(
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"card shadow p-8\">")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"card shadow p-8\" hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 15, Col: 155}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -78,16 +91,29 @@ func ListingData(
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var4 string
-				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(d.Mgm_McuID)))
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(d.Mgm_McuID)))
 				if templ_7745c5c3_Err != nil {
 					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 19, Col: 64}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"card shadow p-8 mb-8\">")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"card shadow p-8 mb-8\" hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/click/" + strconv.Itoa(d.Mgm_McuID))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 19, Col: 160}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -112,7 +138,7 @@ func ListingData(
 	})
 }

-func ItemCard(data models.EmployeeAnalytic) templ.Component {
+func ItemCard(data models.DashboardPic) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -120,21 +146,21 @@ func ItemCard(data models.EmployeeAnalytic) templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var5 == nil {
-			templ_7745c5c3_Var5 = templ.NopComponent
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row d-flex align-items-center\"><div class=\"col-7\"><h3 class=\"text-black\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuLabel)
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuLabel)
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 32, Col: 54}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -142,12 +168,12 @@ func ItemCard(data models.EmployeeAnalytic) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuNote)
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuNote)
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 35, Col: 74}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -155,12 +181,12 @@ func ItemCard(data models.EmployeeAnalytic) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuStartDate)
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuStartDate)
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 38, Col: 79}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -168,12 +194,12 @@ func ItemCard(data models.EmployeeAnalytic) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuEndDate)
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(data.Mgm_McuEndDate)
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\employeeanalytic\listingemployeeanalytic.templ`, Line: 38, Col: 105}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/mcu/mcudetail.templ
+++ b/views/dev/mcu/mcudetail.templ
@@ -0,0 +1,143 @@
+package dev_detailmcu
+
+import "cpone/layout"
+
+templ DetailMcuScreen(
+    breadcrumb templ.Component,
+    content templ.Component,
+) {
+    <div class="container-fluid">
+        <div class="row align-item-center mb-10">
+            <div class="col-md-10 col-sm-12 p-0">
+                @breadcrumb
+            </div>            
+        </div>
+        <div id="loading-parent" class="rounded">
+            @content
+            <div id="loading-child" class="rounded bg-transparent">
+                <div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+                    <span class="sr-only">Loading....</span>
+                </div>
+            </div>
+        </div>
+        <div id="loadingcontent"></div>
+    </div>
+}
+
+templ CSSDetailMcu() {
+    <link
+        rel="stylesheet"
+        href="assets/css/googlefont/poppins.css"
+    />
+    <link 
+        rel="stylesheet"
+        href="assets/css/googlefont/publicsans.css"
+    />
+    <link 
+        rel="stylesheet"
+        href="assets/css/googlefont/roboto.css"
+    />
+    <style>
+        body {
+            background-color: white;
+        }
+        #div-chart {
+            margin: 40px 10vw 40px 10vw;
+        }
+        .title {
+            font-size: 20px;
+            font-weight: bold;
+        }
+        #title {
+            font-weight: 600;
+        }
+    </style>
+}
+
+templ JSDetailMcu() {
+	<script>
+		document.addEventListener('htmx:afterSwap', function(event) {
+			// Reinitialize selectpicker after HTMX content swap
+			$('.selectpicker').selectpicker('refresh');
+		});
+    
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            console.log("Before Request")
+			console.log(event.detail.xhr)
+			console.log(event.detail.target)
+            
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            console.log("After Request")
+            console.log(event.detail.xhr)
+			console.log(event.detail.target)
+        });
+        document.addEventListener('htmx:historyCacheError', function(event) {
+            console.log("Error History Cache Error")
+            console.log(event.detail.cause)
+			
+        });
+        document.addEventListener('htmx:historyCacheMissError', function(event) {
+            console.log("Error History Cache Miss Error")
+            console.log(event.detail.xhr)
+            console.log(event.detail.path)
+			
+        });
+        document.addEventListener('htmx:oobErrorNoTarget', function(event) {
+            console.log("Error OOB No Target")
+            console.log(event.detail.content)
+        });
+        document.addEventListener('htmx:onLoadError', function(event) {
+            console.log("Error On Load")
+            console.log(event.detail.xhr)
+            console.log(event.detail.elt)
+            console.log(event.detail.target)
+            console.log(event.detail.exception)
+            console.log(event.detail.requestConfig)
+        });
+        document.addEventListener('htmx:responseError', function(event) {
+            console.log("Error Response")
+            console.log(event.detail.xhr)
+            console.log(event.detail.elt)
+            console.log(event.detail.requestConfig)
+        });
+        document.addEventListener('htmx:sendError', function(event) {
+            console.log("Error Send Error")
+            console.log(event.detail.xhr)
+            console.log(event.detail.elt)
+            console.log(event.detail.requestConfig)
+        });
+        document.addEventListener('htmx:sseError', function(event) {
+            console.log("Error Sse ")
+            console.log(event.detail.xhr)
+            console.log(event.detail.error)
+            console.log(event.detail.source)
+        });
+		document.addEventListener('htmx:swapError', function(event) {
+            console.log("Error Swap Error")
+            console.log(event.detail.xhr)
+            console.log(event.detail.elt)
+            console.log("Target Swap: "+event.detail.target)
+            console.log(event.detail.requestConfig)
+        });
+		document.addEventListener('htmx:targetError', function(event) {
+            console.log("Error target")
+            console.log(event.detail.elt)
+            console.log("Target ID: "+event.detail.target)
+        });
+    </script>
+}
+
+templ ShowDetailMcu(
+    title string,
+    cmp templ.Component,
+    css templ.Component,
+    js templ.Component,
+    navbaruser templ.Component,
+    userprofile templ.Component,
+) {
+    @layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile) {
+        @cmp
+    }
+}
--- a/views/dev/mcu/mcudetail_templ.go
+++ b/views/dev/mcu/mcudetail_templ.go
@@ -0,0 +1,150 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_detailmcu
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/layout"
+
+func DetailMcuScreen(
+	breadcrumb templ.Component,
+	content templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"row align-item-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = breadcrumb.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div id=\"loading-parent\" class=\"rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = content.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\"rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading....</span></div></div></div><div id=\"loadingcontent\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CSSDetailMcu() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n        body {\r\n            background-color: white;\r\n        }\r\n        #div-chart {\r\n            margin: 40px 10vw 40px 10vw;\r\n        }\r\n        .title {\r\n            font-size: 20px;\r\n            font-weight: bold;\r\n        }\r\n        #title {\r\n            font-weight: 600;\r\n        }\r\n    </style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JSDetailMcu() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n\t\tdocument.addEventListener('htmx:afterSwap', function(event) {\r\n\t\t\t// Reinitialize selectpicker after HTMX content swap\r\n\t\t\t$('.selectpicker').selectpicker('refresh');\r\n\t\t});\r\n    \r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            console.log(\"Before Request\")\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.target)\r\n            \r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            console.log(\"After Request\")\r\n            console.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.target)\r\n        });\r\n        document.addEventListener('htmx:historyCacheError', function(event) {\r\n            console.log(\"Error History Cache Error\")\r\n            console.log(event.detail.cause)\r\n\t\t\t\r\n        });\r\n        document.addEventListener('htmx:historyCacheMissError', function(event) {\r\n            console.log(\"Error History Cache Miss Error\")\r\n            console.log(event.detail.xhr)\r\n            console.log(event.detail.path)\r\n\t\t\t\r\n        });\r\n        document.addEventListener('htmx:oobErrorNoTarget', function(event) {\r\n            console.log(\"Error OOB No Target\")\r\n            console.log(event.detail.content)\r\n        });\r\n        document.addEventListener('htmx:onLoadError', function(event) {\r\n            console.log(\"Error On Load\")\r\n            console.log(event.detail.xhr)\r\n            console.log(event.detail.elt)\r\n            console.log(event.detail.target)\r\n            console.log(event.detail.exception)\r\n            console.log(event.detail.requestConfig)\r\n        });\r\n        document.addEventListener('htmx:responseError', function(event) {\r\n            console.log(\"Error Response\")\r\n            console.log(event.detail.xhr)\r\n            console.log(event.detail.elt)\r\n            console.log(event.detail.requestConfig)\r\n        });\r\n        document.addEventListener('htmx:sendError', function(event) {\r\n            console.log(\"Error Send Error\")\r\n            console.log(event.detail.xhr)\r\n            console.log(event.detail.elt)\r\n            console.log(event.detail.requestConfig)\r\n        });\r\n        document.addEventListener('htmx:sseError', function(event) {\r\n            console.log(\"Error Sse \")\r\n            console.log(event.detail.xhr)\r\n            console.log(event.detail.error)\r\n            console.log(event.detail.source)\r\n        });\r\n\t\tdocument.addEventListener('htmx:swapError', function(event) {\r\n            console.log(\"Error Swap Error\")\r\n            console.log(event.detail.xhr)\r\n            console.log(event.detail.elt)\r\n            console.log(\"Target Swap: \"+event.detail.target)\r\n            console.log(event.detail.requestConfig)\r\n        });\r\n\t\tdocument.addEventListener('htmx:targetError', function(event) {\r\n            console.log(\"Error target\")\r\n            console.log(event.detail.elt)\r\n            console.log(\"Target ID: \"+event.detail.target)\r\n        });\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowDetailMcu(
+	title string,
+	cmp templ.Component,
+	css templ.Component,
+	js templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var5 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.EmployeeAnalyticLayout(title, css, js, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/dev/mcu/tabviewdetailmcu.templ
+++ b/views/dev/mcu/tabviewdetailmcu.templ
@@ -0,0 +1,62 @@
+package dev_detailmcu
+
+templ TabViewDetailMcu() {
+	<div>
+		<ul class="nav nav-tabs nav-tabs-line">
+			<li class="nav-item">
+				<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">Peserta</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan global</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3">Kelainan Lab</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4">kelainan Non Lab</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5">kelainan Fisik</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_6">Kesimpulan</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
+			</li>
+		</ul>
+	</div>
+	<div class="tab-content mt-5" id="myTabContent">
+		<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_5" role="tabpanel" aria-labelledby="kt_tab_pane_5" style="height: 800px;">
+			<object data="https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&__format=pdf&PID=2&username=adhi&tm=1717726294764" type="application/pdf" width="100%" height="100%"></object>
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_6" role="tabpanel" aria-labelledby="kt_tab_pane_6">
+			tab 6
+		</div>
+		<div class="tab-pane fade" id="kt_tab_pane_7" role="tabpanel" aria-labelledby="kt_tab_pane_7">
+			tab 7
+		</div>
+	</div>
+}
+
+// <embed
+//     type="application/x-google-chrome-pdf"
+//     src="chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/c8a5f314-4b1f-4d80-bc24-ea068d6b0763"
+//     original-url="https://devcpone.aplikasi.web.id/birt/run?_report=report/one/mcu/rpt_mcu_graph_001.rptdesign&amp;_format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764"
+//     background-color="4283586137"
+//     javascript="allow" full-frame=""
+// />
+// <iframe src="https://devcpone.aplikasi.web.id/birt/run?_report=report/one/mcu/rpt_mcu_graph_001.rptdesign&amp;_format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764"
+// style="width:600px; height:500px;" frameborder="0"></iframe>
--- a/views/dev/mcu/tabviewdetailmcu_templ.go
+++ b/views/dev/mcu/tabviewdetailmcu_templ.go
@@ -0,0 +1,45 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_detailmcu
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func TabViewDetailMcu() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><ul class=\"nav nav-tabs nav-tabs-line\"><li class=\"nav-item\"><a class=\"nav-link active\" data-toggle=\"tab\" href=\"#kt_tab_pane_1\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\">Kesimpulan</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_3\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_3\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_4\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_4\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_5\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_5\" style=\"height: 800px;\"><object data=\"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&amp;__format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_6\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_6\">tab 6\r</div><div class=\"tab-pane fade\" id=\"kt_tab_pane_7\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_7\">tab 7\r</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// <embed
+//     type="application/x-google-chrome-pdf"
+//     src="chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/c8a5f314-4b1f-4d80-bc24-ea068d6b0763"
+//     original-url="https://devcpone.aplikasi.web.id/birt/run?_report=report/one/mcu/rpt_mcu_graph_001.rptdesign&amp;_format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764"
+//     background-color="4283586137"
+//     javascript="allow" full-frame=""
+// />
+// <iframe src="https://devcpone.aplikasi.web.id/birt/run?_report=report/one/mcu/rpt_mcu_graph_001.rptdesign&amp;_format=pdf&amp;PID=2&amp;username=adhi&amp;tm=1717726294764"
+// style="width:600px; height:500px;" frameborder="0"></iframe>
--- a/views/public/landingpage/landingpage.templ
+++ b/views/public/landingpage/landingpage.templ
@@ -19,7 +19,12 @@ templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComp
 					alt="Your Brand"
 				/>
 			</a>
-			<button type="button" class="btn btn-lg btn-primary btn-pill">
+			<button 
+        id="btn_login"
+        hx-get="/home/login"
+        type="button" 
+        class="btn btn-lg btn-primary btn-pill"
+      >
 				<span class="title">Login</span>
 			</button>
 		</nav>
--- a/views/public/landingpage/landingpage_templ.go
+++ b/views/public/landingpage/landingpage_templ.go
@@ -27,7 +27,7 @@ func MainLandingPage(medicalServiceComponent templ.Component, listAdvantageCompo
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"wrapper-custom mb-25\"><!-- Navbar Start --><nav class=\"navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between\"><a class=\"navbar-brand\" href=\"#\"><img src=\"/asset-corporate-portal/media/landingpage/logo.png\" width=\"126\" height=\"40\" class=\"d-inline-block align-top\" alt=\"Your Brand\"></a> <button type=\"button\" class=\"btn btn-lg btn-primary btn-pill\"><span class=\"title\">Login</span></button></nav><!-- Navbar End --><!-- jumbotron START --><!-- <div class=\"jumbotron jumbotron-lp d-none d-lg-block\"> -->")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"wrapper-custom mb-25\"><!-- Navbar Start --><nav class=\"navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between\"><a class=\"navbar-brand\" href=\"#\"><img src=\"/asset-corporate-portal/media/landingpage/logo.png\" width=\"126\" height=\"40\" class=\"d-inline-block align-top\" alt=\"Your Brand\"></a> <button id=\"btn_login\" hx-get=\"/home/login\" type=\"button\" class=\"btn btn-lg btn-primary btn-pill\"><span class=\"title\">Login</span></button></nav><!-- Navbar End --><!-- jumbotron START --><!-- <div class=\"jumbotron jumbotron-lp d-none d-lg-block\"> -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/public/login/logincomponent.templ
+++ b/views/public/login/logincomponent.templ
@@ -113,6 +113,9 @@ templ FormSignin() {
 		<!--begin::Action-->
 		<div class="pb-lg-0 pb-5 pt-5">
 			<button
+				hx-post="/login/signin"
+				hx-swap="outerHTML"
+				hx-target="#kt_login"
 				type="button"
 				id="kt_login_signin_submit"
 				class="btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5 btn-primary"
@@ -271,4 +274,4 @@ templ ForgotPassword() {
 		</div>
 		<!--end::Form group-->
 	</form>
-}
+}
--- a/views/public/login/logincomponent_templ.go
+++ b/views/public/login/logincomponent_templ.go
@@ -47,7 +47,7 @@ func FormSignin() templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_signin_form\"><!--begin::Title--><div class=\"d-flex justify-content-center mb-5\"><img src=\"/asset-corporate-portal/media/logo/logo.png\" alt=\"\" style=\"height: 103px\"></div><div class=\"pt-2\"><h3 class=\"d-flex justify-content-center title-company text-dark\">Welcome to Corporate Portal\r</h3></div><div class=\"pb-10 pt-0\"><h3 class=\"subtitle-company\" style=\"color: #a7a8bb\">Sign in to access your account\r</h3></div><!--begin::Title--><!--begin::Form group--><div class=\"form-group\"><label class=\"font-size-h6 font-weight-bolder text-dark\">Email</label> <input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg\" type=\"text\" name=\"username\" autocomplete=\"off\" placeholder=\"Enter your email\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><div class=\"d-flex justify-content-between mt-n5\"><label class=\"font-size-h6 font-weight-bolder text-dark pt-5\">Password</label></div><div class=\"input-group\"><!-- form-control form-control-solid --><input class=\"h-auto form-control form-control-solid py-7 px-6 rounded-lg rounded-right-0\" type=\"password\" name=\"password\" id=\"user-password\" autocomplete=\"off\" placeholder=\"Enter your password\"><div class=\"input-group-append\"><span class=\"input-group-text rounded-lg rounded-left-0\" style=\"border: 0\"><!-- far fa-eye-slash --><a class=\"btn\" role=\"button\" id=\"btn-show\"><i class=\"far fa-eye-slash\" id=\"password-icon\"></i></a></span></div></div></div><div class=\"d-flex justify-content-end\"><a href=\"javascript:;\" class=\"font-size-h6 font-weight-bolder text-hover-primary mb-5 text-primary\" id=\"kt_login_forgot\">Forgot Password ?\r</a></div><!--end::Form group--><!--begin::Action--><div class=\"pb-lg-0 pb-5 pt-5\"><button type=\"button\" id=\"kt_login_signin_submit\" class=\"btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5 btn-primary\">Sign In\r</button></div><!--end::Action--></form>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_signin_form\"><!--begin::Title--><div class=\"d-flex justify-content-center mb-5\"><img src=\"/asset-corporate-portal/media/logo/logo.png\" alt=\"\" style=\"height: 103px\"></div><div class=\"pt-2\"><h3 class=\"d-flex justify-content-center title-company text-dark\">Welcome to Corporate Portal\r</h3></div><div class=\"pb-10 pt-0\"><h3 class=\"subtitle-company\" style=\"color: #a7a8bb\">Sign in to access your account\r</h3></div><!--begin::Title--><!--begin::Form group--><div class=\"form-group\"><label class=\"font-size-h6 font-weight-bolder text-dark\">Email</label> <input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg\" type=\"text\" name=\"username\" autocomplete=\"off\" placeholder=\"Enter your email\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><div class=\"d-flex justify-content-between mt-n5\"><label class=\"font-size-h6 font-weight-bolder text-dark pt-5\">Password</label></div><div class=\"input-group\"><!-- form-control form-control-solid --><input class=\"h-auto form-control form-control-solid py-7 px-6 rounded-lg rounded-right-0\" type=\"password\" name=\"password\" id=\"user-password\" autocomplete=\"off\" placeholder=\"Enter your password\"><div class=\"input-group-append\"><span class=\"input-group-text rounded-lg rounded-left-0\" style=\"border: 0\"><!-- far fa-eye-slash --><a class=\"btn\" role=\"button\" id=\"btn-show\"><i class=\"far fa-eye-slash\" id=\"password-icon\"></i></a></span></div></div></div><div class=\"d-flex justify-content-end\"><a href=\"javascript:;\" class=\"font-size-h6 font-weight-bolder text-hover-primary mb-5 text-primary\" id=\"kt_login_forgot\">Forgot Password ?\r</a></div><!--end::Form group--><!--begin::Action--><div class=\"pb-lg-0 pb-5 pt-5\"><button hx-post=\"/login/signin\" hx-swap=\"outerHTML\" hx-target=\"#kt_login\" type=\"button\" id=\"kt_login_signin_submit\" class=\"btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5 btn-primary\">Sign In\r</button></div><!--end::Action--></form>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
Author	SHA1	Message	Date
adibwp	52a161195e	fix detail mcu	2024-06-13 15:03:40 +07:00
adibwp	6deadec9a3	add redirect ke detail mcu	2024-06-13 15:03:40 +07:00
adibwp	c04b8b1081	multi login	2024-06-13 15:03:39 +07:00
adibwp	e1c8ddd8f0	multi login progress	2024-06-13 15:03:39 +07:00
adibwp	e6a5925588	pindah dashboard_pic ke corp route	2024-06-13 15:03:39 +07:00
adibwp	a2fc463990	add public dashboard_pic	2024-06-13 15:03:39 +07:00
adibwp	246dd34542	add store to localStorage	2024-06-13 15:03:39 +07:00
adibwp	9f822c5514	add login multi api & redirect	2024-06-13 15:03:39 +07:00
adibwp	dd980b4430	add click with id params	2024-06-13 15:03:38 +07:00
Hanan Askarim	f30189816b	add link report	2024-06-13 15:03:38 +07:00
adibwp	8dfdc3fece	object pdf	2024-06-13 15:03:38 +07:00
adibwp	2d67b7b723	add html tab	2024-06-13 15:03:38 +07:00
kaeltorus	f825bc1639	slicing riwayatfisik	2024-06-13 08:37:57 +07:00