step 1 : komponen mcu peserta

cmd/main.go

@@ -27,6 +27,10 @@ func main() {
 		return c.Redirect(http.StatusMovedPermanently, "/landing_page/")
 	})
 
+	app.GET("/pie_chart", func(c echo.Context) error {
+		return c.Redirect(http.StatusMovedPermanently, "/pie_chart/")
+	})
+
 	uStore, err := db.NewUserStore(dbName)
 	if err != nil {
 		app.Logger.Fatalf("failed to create store: %s", err)
@@ -38,6 +42,14 @@ func main() {
 
 	handlers.SetupRoutes(app, h)
 
+	LStore, err := db.NewLoginStore(dbName)
+	if err != nil {
+		app.Logger.Fatalf("failed to create store: %s", err)
+	}
+	l := services.NewServicesLogin(services.Login{}, LStore)
+	lh := handlers.NewLoginHandler(l)
+	handlers.SetupRoutesLogin(app, lh)
+
 	xStore, err := db.NewXsampleStore(dbName)
 	if err != nil {
 		app.Logger.Fatalf("failed to create store: %s", err)
@@ -54,6 +66,15 @@ func main() {
 	lphs := handlers.NewLandingPageHandler(lps)
 	handlers.SetupRoutesLandingPage(app, lphs)
 
+	LpchartStore, err := db.NewPieChartStore(dbName)
+	if err != nil {
+		app.Logger.Fatalf("failed to create store: %s", err)
+	}
+
+	lpchart := services.NewServicesPiechart(services.Piechart{}, LpchartStore)
+	lphsx := handlers.NewPiechartHandler(lpchart)
+	handlers.SetupRoutesPieChart(app, lphsx)
+
 	app.Logger.Fatal(app.Start(":5000"))
 }
 

db/chart.store.go

@@ -0,0 +1,26 @@
+package db
+
+import (
+	"database/sql"
+
+	_ "github.com/glebarez/go-sqlite"
+)
+
+type PieChartStore struct {
+	Db *sql.DB
+}
+
+func NewPieChartStore(dbName string) (PieChartStore, error) {
+	Db, err := getConnection(dbName)
+	if err != nil {
+		return PieChartStore{}, err
+	}
+
+	if err := createMigrations(dbName, Db); err != nil {
+		return PieChartStore{}, err
+	}
+
+	return PieChartStore{
+		Db,
+	}, nil
+}

db/login.store.go

@@ -0,0 +1,26 @@
+package db
+
+import (
+	"database/sql"
+
+	_ "github.com/glebarez/go-sqlite"
+)
+
+type LoginStore struct {
+	Db *sql.DB
+}
+
+func NewLoginStore(dbName string) (LoginStore, error) {
+	Db, err := getConnection(dbName)
+	if err != nil {
+		return LoginStore{}, err
+	}
+
+	if err := createMigrations(dbName, Db); err != nil {
+		return LoginStore{}, err
+	}
+
+	return LoginStore{
+		Db,
+	}, nil
+}

handlers/chart.handlers.go

@@ -0,0 +1,138 @@
+package handlers
+
+import (
+	"crypto/md5"
+	"encoding/hex"
+	"encoding/json"
+	"fmt"
+	"strings"
+	"time"
+
+	"github.com/a-h/templ"
+	"github.com/emarifer/go-templ-project-structure/services"
+	mcupeserta "github.com/emarifer/go-templ-project-structure/views/mcu/peserta"
+	"github.com/emarifer/go-templ-project-structure/views/piechart"
+	"github.com/emarifer/go-templ-project-structure/views/xsample"
+	"github.com/labstack/echo/v4"
+)
+
+type PiechartService interface {
+	GetPieChart(string, int) (string, services.Piechart, error)
+}
+
+func NewPiechartHandler(us PiechartService) *PiechartHandler {
+	return &PiechartHandler{
+		PiechartService: us,
+	}
+}
+
+type PiechartHandler struct {
+	PiechartService PiechartService
+}
+
+func (uh *PiechartHandler) Hello(c echo.Context) error {
+	helo := xsample.ShowHelo("Hello World", xsample.HelloWorld("Hello World"), xsample.CssHelo(), xsample.JsHelo())
+	return uh.View(c, helo)
+}
+
+// example pie chart
+func (uh *PiechartHandler) ShowPieChart(c echo.Context) error {
+	// helo := piechart.MainPieChart("main_001")
+	var code = "mcu006"
+	title, udata, err := uh.PiechartService.GetPieChart(code, 1)
+	if err != nil {
+		// fmt.Println(err)
+		return err
+	}
+
+	jsonData, err := json.MarshalIndent(udata, "", "    ")
+	if err != nil {
+		fmt.Println("Error:", err)
+		return err
+	}
+
+	// randomID := md5.Sum([]byte(title + time.Now().String()))
+	seed := title + time.Now().String()
+	hash := md5.Sum([]byte(seed))
+	randomID := hex.EncodeToString(hash[:])
+	randomID = strings.ReplaceAll(randomID, "-", "")
+
+	// randomID := hex.EncodeToString(md5.Sum([]byte(title + time.Now().String())))
+	helo := piechart.ShowPieChart("Chart", piechart.MainPieChart(randomID, string(jsonData)), piechart.CssPieChart(), piechart.JsPieChart())
+	return uh.View(c, helo)
+}
+
+// mcu peserta
+func (uh *PiechartHandler) ShowMcuPeserta(c echo.Context) error {
+
+	// 1
+	var code001 = "mcu001"
+	title001, udata001, err001 := uh.PiechartService.GetPieChart(code001, 1)
+	if err001 != nil {
+		return err001
+	}
+
+	jsonData001, err001 := json.MarshalIndent(udata001, "", "    ")
+	if err001 != nil {
+		fmt.Println("Error:", err001)
+		return err001
+	}
+
+	seed001 := title001 + time.Now().String()
+	hash001 := md5.Sum([]byte(seed001))
+	randomID001 := hex.EncodeToString(hash001[:])
+	randomID001 = strings.ReplaceAll(randomID001, "-", "")
+
+	// 2
+	var code002 = "mcu002"
+	title002, udata002, err002 := uh.PiechartService.GetPieChart(code002, 1)
+	if err002 != nil {
+		return err002
+	}
+
+	jsonData002, err002 := json.MarshalIndent(udata002, "", "    ")
+	if err002 != nil {
+		fmt.Println("Error:", err002)
+		return err002
+	}
+
+	seed002 := title002 + time.Now().String()
+	hash002 := md5.Sum([]byte(seed002))
+	randomID002 := hex.EncodeToString(hash002[:])
+	randomID002 = strings.ReplaceAll(randomID002, "-", "")
+
+	// 3
+	var code003 = "mcu003"
+	title003, udata003, err003 := uh.PiechartService.GetPieChart(code003, 1)
+	if err003 != nil {
+		return err003
+	}
+
+	jsonData003, err003 := json.MarshalIndent(udata003, "", "    ")
+	if err003 != nil {
+		fmt.Println("Error:", err003)
+		return err003
+	}
+
+	seed003 := title003 + time.Now().String()
+	hash003 := md5.Sum([]byte(seed003))
+	randomID003 := hex.EncodeToString(hash003[:])
+	randomID003 = strings.ReplaceAll(randomID003, "-", "")
+
+	helo := mcupeserta.ShowMcuPeserta("Peserta", mcupeserta.MainMcuPeserta(
+		randomID001, string(jsonData001),
+		randomID002, string(jsonData002),
+		randomID003, string(jsonData003),
+	),
+		mcupeserta.CssMcuPeserta(),
+		mcupeserta.JsMcuPeserta(),
+	)
+
+	return uh.View(c, helo)
+}
+
+func (uh *PiechartHandler) View(c echo.Context, cmp templ.Component) error {
+	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
+
+	return cmp.Render(c.Request().Context(), c.Response().Writer)
+}

handlers/landingpage.handlers.go

@@ -5,7 +5,7 @@ import (
 
 	"github.com/a-h/templ"
 	"github.com/emarifer/go-templ-project-structure/services"
-	landingpage "github.com/emarifer/go-templ-project-structure/views/LandingPage"
+	landingpage "github.com/emarifer/go-templ-project-structure/views/landingpage"
 
 	"github.com/labstack/echo/v4"
 )

handlers/login.handlers.go

@@ -2,19 +2,34 @@ package handlers
 
 import (
 	"github.com/a-h/templ"
+	"github.com/emarifer/go-templ-project-structure/services"
 	"github.com/emarifer/go-templ-project-structure/views/login"
 
 	"github.com/labstack/echo/v4"
 )
 
-func HandlerShowLoginCompany(c echo.Context) error {
-
-	// si := user.ShowIndex("| Home", user.Show(udata))
-	si := login.ShowLogin("Login ", login.DivLogin(), login.CssLogin(), login.JsLogin())
-
-	return ViewLoginCompany(c, si)
+type LoginService interface {
+	GetLogin(Email string, Password string) (services.Login, error)
 }
-func ViewLoginCompany(c echo.Context, cmp templ.Component) error {
+
+func NewLoginHandler(us LoginService) *LoginHandler {
+	return &LoginHandler{
+		LoginService: us,
+	}
+}
+
+type LoginHandler struct {
+	LoginService LoginService
+}
+
+func (lh *LoginHandler) HandlerShowLogin(c echo.Context) error {
+
+	si := login.ShowLogin("Login ", login.MainLogin(), login.CssLogin(), login.JsLogin())
+
+	return lh.ViewLogin(c, si)
+}
+
+func (uh *LoginHandler) ViewLogin(c echo.Context, cmp templ.Component) error {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
 
 	return cmp.Render(c.Request().Context(), c.Response().Writer)

handlers/routes.go

@@ -11,6 +11,10 @@ func SetupRoutes(app *echo.Echo, h *UserHandler) {
 }
 
 //PLAYGROUND TESTING
+func SetupRoutesLogin(app *echo.Echo, h *LoginHandler) {
+	l := app.Group("/login")
+	l.GET("/", h.HandlerShowLogin)
+}
 func SetupRoutesXsample(app *echo.Echo, h *XsampleHandler) {
 	xSample := app.Group("/xsample")
 	xSample.GET("/xsample01", h.Hello)
@@ -19,6 +23,11 @@ func SetupRoutesLandingPage(app *echo.Echo, h *LandingPageHandler) {
 	Lp := app.Group("/landing_page")
 	Lp.GET("/", h.ShowLandingPage)
 }
+func SetupRoutesPieChart(app *echo.Echo, h *PiechartHandler) {
+	Lp := app.Group("/pie_chart")
+	Lp.GET("/", h.ShowPieChart)
+	Lp.GET("/peserta", h.ShowMcuPeserta)
+}
 func SetupRoutesProject(app *echo.Echo) {
 
 }

services/chart.services.go

@@ -0,0 +1,699 @@
+package services
+
+import (
+	"fmt"
+
+	"github.com/emarifer/go-templ-project-structure/db"
+)
+
+func NewServicesPiechart(u Piechart, uStore db.PieChartStore) *ServicesPiechart {
+
+	return &ServicesPiechart{
+		Piechart:      u,
+		PieChartStore: uStore,
+	}
+}
+
+// type Option struct {
+// 	Title struct {
+// 		Text string
+// 		Left string
+// 	}
+// 	Tooltip struct {
+// 		Trigger string
+// 	}
+// 	Legend struct {
+// 		Top    string
+// 		Left   string
+// 		Orient string
+// 	}
+// 	Series []Series
+// }
+
+type SeriesData struct {
+	Value int    `json:"value"`
+	Name  string `json:"name"`
+}
+
+type Series struct {
+	Label struct {
+		Position  string `json:"position"`
+		Formatter string `json:"formatter"`
+	} `json:"label"`
+	Name      string   `json:"name"`
+	Type      string   `json:"type"`
+	Radius    []string `json:"radius"`
+	ItemStyle struct {
+		BorderRadius int    `json:"borderRadius"`
+		BorderColor  string `json:"borderColor"`
+		BorderWidth  int    `json:"borderWidth"`
+	} `json:"itemStyle"`
+	Data     []SeriesData `json:"data"`
+	Emphasis struct {
+		ItemStyle struct {
+			ShadowBlur    int    `json:"shadowBlur"`
+			ShadowOffsetX int    `json:"shadowOffsetX"`
+			ShadowColor   string `json:"shadowColor"`
+		} `json:"itemStyle"`
+	} `json:"emphasis"`
+}
+
+type Barchart struct {
+	Title struct {
+		Text string `json:"text"`
+	} `json:"title"`
+	Dataset struct {
+		Source [][]interface{} `json:"source"`
+	} `json:"dataset"`
+	Grid struct {
+		ContainLabel bool `json:"containLabel"`
+	} `json:"grid"`
+	XAxis struct {
+		Name string `json:"name"`
+	} `json:"xAxis"`
+	YAxis struct {
+		Type string `json:"type"`
+	} `json:"yAxis"`
+	VisualMap struct {
+		Orient    string `json:"orient"`
+		Left      string `json:"left"`
+		Min       int    `json:"min"`
+		Max       int    `json:"max"`
+		Show      bool   `json:"show"`
+		Dimension int    `json:"dimension"`
+		InRange   struct {
+			Color []string `json:"color"`
+		} `json:"inRange"`
+	} `json:"visualMap"`
+	Series []struct {
+		Label struct {
+			Position  string `json:"position"`
+			Show      bool   `json:"show"`
+			Formatter string `json:"formatter"`
+		} `json:"label"`
+		Type   string `json:"type"`
+		Encode struct {
+			X string `json:"x"`
+			Y string `json:"y"`
+		} `json:"encode"`
+	} `json:"series"`
+}
+
+type Piechart struct {
+	// ID          int       `json:"id"`
+	// Xsamplename string    `json:"Xsamplename"`
+	// Email       string    `json:"email"`
+	// CreatedAt   time.Time `json:"created_at,omitempty"`
+
+	Title struct {
+		Text    string `json:"text"`
+		SubText string `json:"subtext"`
+		Left    string `json:"left"`
+	} `json:"title"`
+	Tooltip struct {
+		Trigger string `json:"trigger"`
+	} `json:"tooltip"`
+	Legend struct {
+		Top    string `json:"top"`
+		Left   string `json:"left"`
+		Orient string `json:"orient"`
+	} `json:"legend"`
+	Series []Series `json:"series"`
+}
+
+type ServicesPiechart struct {
+	Piechart      Piechart
+	PieChartStore db.PieChartStore
+}
+
+// func (su *ServicesPiechart) GetAllXsamples() ([]Piechart, error) {
+// 	query := `SELECT id, Xsamplename, email, created_at FROM Xsamples ORDER BY created_at DESC`
+
+// 	rows, err := su.PieChartStore.Db.Query(query)
+// 	if err != nil {
+// 		return []Piechart{}, err
+// 	}
+// 	// We close the resource
+// 	defer rows.Close()
+
+// 	Xsamples := []Piechart{}
+// 	for rows.Next() {
+// 		rows.Scan(
+// 			&su.Piechart.ID,
+// 			&su.Piechart.Xsamplename,
+// 			&su.Piechart.Email,
+// 			&su.Piechart.CreatedAt,
+// 		)
+
+// 		Xsamples = append(Xsamples, su.Piechart)
+// 	}
+
+// 	return Xsamples, nil
+// }
+
+// func (su *ServicesPiechart) GetXsampleById(id int) (Piechart, error) {
+
+// 	query := `SELECT id, Xsamplename, email, created_at FROM Xsamples
+// 		WHERE id = ?`
+
+// 	stmt, err := su.PieChartStore.Db.Prepare(query)
+// 	if err != nil {
+// 		return Piechart{}, err
+// 	}
+
+// 	defer stmt.Close()
+
+// 	su.Piechart.ID = id
+// 	err = stmt.QueryRow(
+// 		su.Piechart.ID,
+// 	).Scan(
+// 		&su.Piechart.ID,
+// 		&su.Piechart.Xsamplename,
+// 		&su.Piechart.Email,
+// 		&su.Piechart.CreatedAt,
+// 	)
+// 	if err != nil {
+// 		return Piechart{}, err
+// 	}
+
+// 	return su.Piechart, nil
+// }
+
+// Peserta MCU -- MCU001
+func GetPieChartMcu001(code string, id int) (string, Piechart, error) {
+	var title = "Peserta  MCU"
+	option := Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: "Total Peserta 506",
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+
+			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
+			// Top:    "bottom",
+			// Left:   "center",
+			// Orient: "horizontal",
+		},
+		Series: []Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: []SeriesData{
+					{Value: 506, Name: "Sudah MCU : 506 Peserta"},
+					{Value: 54, Name: "Belum MCU : 54 Peserta"},
+				},
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+	return title, option, nil
+}
+
+// Kepersertaan MCU Berdasarkan Jenis Kelamin -- MCU002
+func GetPieChartMcu002(code string, id int) (string, Piechart, error) {
+	var title = "Kepesertaan  MCU"
+	option := Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: "Berdasarkan Jenis Kelamin",
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+
+			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
+			// Top:    "bottom",
+			// Left:   "center",
+			// Orient: "horizontal",
+		},
+		Series: []Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: []SeriesData{
+					{Value: 143, Name: "Laki-laki : 143 Peserta"},
+					{Value: 114, Name: "Perempuan : 114 Peserta"},
+				},
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+	return title, option, nil
+}
+
+// Peserta MCU berdasarkan umur
+func GetPieChartMcu003(code string, id int) (string, Piechart, error) {
+	var title = "Peserta MCU"
+	option := Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: "Berdasarkan Umur",
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+
+			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
+			// Top:    "bottom",
+			// Left:   "center",
+			// Orient: "horizontal",
+		},
+		Series: []Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: []SeriesData{
+					{Value: 188, Name: "< 30 Tahun : 188 Peserta"},
+					{Value: 194, Name: "30 - < 40 Tahun : 194 Peserta"},
+					{Value: 123, Name: "40 - < 50 Tahun : 123 Peserta"},
+					{Value: 55, Name: "≥ 50 Tahun : 55 Peserta"},
+				},
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+	return title, option, nil
+}
+
+// Status Index Masa Tubuh (BMI) -- MCU006
+func GetPieChartMcu006(code string, id int) (string, Piechart, error) {
+	var title = "Status Index Masa Tubuh (BMI)"
+	option := Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: "",
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+
+			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
+			// Top:    "bottom",
+			// Left:   "center",
+			// Orient: "horizontal",
+		},
+		Series: []Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: []SeriesData{
+					{Value: 19, Name: "Underweight : 19 Peserta"},
+					{Value: 104, Name: "Normal : 104 Peserta"},
+					{Value: 230, Name: "Obese 1  : 230 Peserta"},
+					{Value: 99, Name: "Obese 2 : 99 Peserta"},
+				},
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+
+	return title, option, nil
+}
+
+// Kriteria Hipertensi -- MCU007
+func GetPieChartMcu007(code string, id int) (string, Piechart, error) {
+	var title = "Kriteria Hipertensi"
+	option := Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: "",
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+
+			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
+			// Top:    "bottom",
+			// Left:   "center",
+			// Orient: "horizontal",
+		},
+		Series: []Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: []SeriesData{
+					{Value: 237, Name: "Normal : 237 Peserta"},
+					{Value: 215, Name: "Prehipertensi : 215 Peserta"},
+					{Value: 66, Name: "Hipertensi Grade I  : 66 Peserta"},
+					{Value: 33, Name: "Hipertensi Grade II : 33 Peserta"},
+				},
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+
+	return title, option, nil
+}
+
+// Visus Jauh -- MCU008
+func GetPieChartMcu008(code string, id int) (string, Piechart, error) {
+	var title = "Visus Jauh"
+	option := Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: "",
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+
+			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
+			// Top:    "bottom",
+			// Left:   "center",
+			// Orient: "horizontal",
+		},
+		Series: []Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: []SeriesData{
+					{Value: 237, Name: "Normal : 237 Peserta"},
+					{Value: 194, Name: "Kelainan Refraksi : 194 Peserta"},
+					{Value: 64, Name: "Kelainan Refraksi terkoreksi : 64 Peserta"},
+					{Value: 56, Name: "Kelainan Refraksi tidak terkoreksi : 56 Peserta"},
+				},
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+
+	return title, option, nil
+}
+
+func (su *ServicesPiechart) GetPieChart(code string, id int) (string, Piechart, error) {
+	if code == "mcu001" {
+		return GetPieChartMcu001(code, id)
+	}
+
+	if code == "mcu002" {
+		return GetPieChartMcu002(code, id)
+	}
+
+	if code == "mcu003" {
+		return GetPieChartMcu003(code, id)
+	}
+
+	if code == "mcu006" {
+		return GetPieChartMcu006(code, id)
+	}
+
+	if code == "mcu007" {
+		return GetPieChartMcu007(code, id)
+	}
+
+	if code == "mcu008" {
+		return GetPieChartMcu008(code, id)
+	}
+
+	return "", Piechart{}, fmt.Errorf("code " + code + " not found")
+}

services/login.services.go

@@ -0,0 +1,59 @@
+package services
+
+import (
+	"time"
+
+	"github.com/emarifer/go-templ-project-structure/db"
+)
+
+func NewServicesLogin(u Login, uStore db.LoginStore) *ServicesLogin {
+
+	return &ServicesLogin{
+		Login:      u,
+		LoginStore: uStore,
+	}
+}
+
+type Login struct {
+	ID        int       `json:"id"`
+	Loginname string    `json:"Loginname"`
+	Email     string    `json:"Email"`
+	Password  string    `json:"Password"`
+	CreatedAt time.Time `json:"created_at,omitempty"`
+}
+
+type ServicesLogin struct {
+	Login      Login
+	LoginStore db.LoginStore
+}
+
+func (su *ServicesLogin) GetLogin(Email string, Password string) (Login, error) {
+
+	query := `SELECT id, Loginname, Email, Password, created_at FROM Login
+		WHERE Email = ? AND Password = ?`
+
+	stmt, err := su.LoginStore.Db.Prepare(query)
+	if err != nil {
+		return Login{}, err
+	}
+
+	defer stmt.Close()
+
+	su.Login.Email = Email
+	su.Login.Password = Password
+	err = stmt.QueryRow(
+		su.Login.Email,
+		su.Login.Password,
+	).Scan(
+		&su.Login.ID,
+		&su.Login.Loginname,
+		&su.Login.Email,
+		&su.Login.Password,
+		&su.Login.CreatedAt,
+	)
+	if err != nil {
+		return Login{}, err
+	}
+
+	return su.Login, nil
+}

views/component/chart/chart.templ

@@ -0,0 +1,30 @@
+package chart
+
+templ ShowChart(idDiv string, udata string) {
+    <div id={ idDiv } class="mx-auto"></div>
+	@GenerateChart(idDiv, udata)
+}
+
+script GenerateChart(idDiv string, udata string) {
+    htmx.onLoad(function(elt) {
+        console.log("elt ",elt)
+        var element = document.getElementById(idDiv);
+        console.log("element ",element)
+        if (element) {
+            element.style.height = "400px";
+            element.style.width = "100%";
+        }
+
+        var myChart = {}; 
+        var option = {};
+
+        // var myChart_001 = echarts.init(document.getElementById(idDiv));
+        myChart[idDiv] = echarts.init(element);
+
+        // var option_001 = JSON.parse(udata);
+        option[idDiv] = JSON.parse(udata);
+        console.log("option ", option)
+        // myChart_001.setOption(option_001);
+        myChart[idDiv].setOption(option[idDiv]);
+    });
+}

views/component/chart/chart_templ.go

@@ -0,0 +1,82 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package chart
+
+//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 ShowChart(idDiv string, udata 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(idDiv)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\chart\chart.templ`, Line: 4, 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=\"mx-auto\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = GenerateChart(idDiv, udata).Render(ctx, 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
+	})
+}
+
+func GenerateChart(idDiv string, udata string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_GenerateChart_4c73`,
+		Function: `function __templ_GenerateChart_4c73(idDiv, udata){htmx.onLoad(function(elt) {
+        console.log("elt ",elt)
+        var element = document.getElementById(idDiv);
+        console.log("element ",element)
+        if (element) {
+            element.style.height = "400px";
+            element.style.width = "100%";
+        }
+
+        var myChart = {}; 
+        var option = {};
+
+        // var myChart_001 = echarts.init(document.getElementById(idDiv));
+        myChart[idDiv] = echarts.init(element);
+
+        // var option_001 = JSON.parse(udata);
+        option[idDiv] = JSON.parse(udata);
+        console.log("option ", option)
+        // myChart_001.setOption(option_001);
+        myChart[idDiv].setOption(option[idDiv]);
+    });
+}`,
+		Call:       templ.SafeScript(`__templ_GenerateChart_4c73`, idDiv, udata),
+		CallInline: templ.SafeScriptInline(`__templ_GenerateChart_4c73`, idDiv, udata),
+	}
+}

views/layout/playground_layout.templ

@@ -92,6 +92,8 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 			id="kt_body"
 			class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
 		>
+			// htmx
+			<script src="https://unpkg.com/htmx.org@1.9.12"></script>
 			<!--begin::Main-->
 			{ children... }
 			<!--end::Main-->
@@ -166,12 +168,7 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 			<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
 			<script src="assets/js/scripts.bundle.js"></script>
 			<!--end::Global Theme Bundle-->
-			<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"
-			integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA=="
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-			></script>
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js" integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 			@js
 			<!--end::Page Scripts-->
 		</body>

views/layout/playground_layout_templ.go

@@ -45,7 +45,7 @@ func PlaygroundLayout(title string, css templ.Component, js templ.Component) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><!--end::Head--><!--begin::Body--><body id=\"kt_body\" class=\"header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading\"><!--begin::Main-->")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><!--end::Head--><!--begin::Body--><body id=\"kt_body\" class=\"header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading\"><script src=\"https://unpkg.com/htmx.org@1.9.12\"></script><!--begin::Main-->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/login/login.templ

@@ -4,44 +4,14 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 )
 
-templ DivLogin() {
+templ MainLogin() {
 	<div class="d-flex flex-column flex-root">
 		<div
 			class="login login-1 login-signin-on d-flex flex-column flex-lg-row flex-column-fluid bg-white"
 			id="kt_login"
 		>
 			<!--begin::Aside-->
-			<div
-				class="login-aside d-flex flex-column flex-row-auto"
-				style="background-color: #3b4f9f"
-			>
-				<!--begin::Aside Top-->
-				<div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10">
-					<!--begin::Aside header-->
-					<div class="aside-title mb-5">
-						Empowering Your Workforce's Health
-					</div>
-					<!--end::Aside header-->
-					<!--begin::Aside title-->
-					<div class="aside-subtitle">
-						Discover peace of mind and prioritize your health with our
-						comprehensive medical check-up packages
-					</div>
-					<!--end::Aside title-->
-				</div>
-				<!--end::Aside Top-->
-				<!--begin::Aside Bottom-->
-				<div
-					class="d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end"
-				>
-					<img
-						src="asset-corporate-portal/media/login-company-vector.png"
-						class="img-fluid"
-						style="height: 55vh; width: 55vh"
-					/>
-				</div>
-				<!--end::Aside Bottom-->
-			</div>
+			@AsideLeft()
 			<!--begin::Aside-->
 			<!--begin::Content-->
 			<div
@@ -52,254 +22,21 @@ templ DivLogin() {
 					<!--begin::Signin-->
 					<div class="login-form login-signin">
 						<!--begin::Form-->
-						<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.png"
-									alt=""
-									style="height: 103px"
-								/>
-							</div>
-							<div class="pt-2">
-								<h3
-									class="d-flex justify-content-center title-company"
-									style="color: black"
-								>
-									Welcome to Corporate Portal
-								</h3>
-							</div>
-							<div class="pb-10 pt-0">
-								<h3 class="subtitle-company" style="color: #a7a8bb">
-									Sign in to access your account
-								</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"
-									id="kt_login_forgot"
-									style="color: #0c518c"
-								>
-									Forgot Password ?
-								</a>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Action-->
-							<div class="pb-lg-0 pb-5 pt-5">
-								<button
-									type="button"
-									id="kt_login_signin_submit"
-									style="background-color: #0c518c"
-									class="btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5"
-								>
-									Sign In
-								</button>
-							</div>
-							<!--end::Action-->
-						</form>
+						@FormSignin()
 						<!--end::Form-->
 					</div>
 					<!--end::Signin-->
 					<!--begin::Signup -->
 					<div class="login-form login-signup">
 						<!--begin::Form -->
-						<form
-							class="form"
-							novalidate="novalidate"
-							id="kt_login_signup_form"
-						>
-							<!--begin::Title -->
-							<div class="pb-13 pt-lg-0 pt-5">
-								<h3
-									class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
-								>
-									Sign Up
-								</h3>
-								<p class="text-muted font-weight-bold font-size-h4">
-									Enter your details to create your account
-								</p>
-							</div>
-							<!--end::Title -->
-							<!--begin::Form group-->
-							<div class="form-group">
-								<input
-									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-									type="text"
-									placeholder="Fullname"
-									name="fullname"
-									autocomplete="off"
-								/>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Form group-->
-							<div class="form-group">
-								<input
-									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-									type="email"
-									placeholder="Email"
-									name="email"
-									autocomplete="off"
-								/>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Form group-->
-							<div class="form-group">
-								<input
-									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-									type="password"
-									placeholder="Password"
-									name="password"
-									autocomplete="off"
-								/>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Form group-->
-							<div class="form-group">
-								<input
-									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-									type="password"
-									placeholder="Confirm password"
-									name="cpassword"
-									autocomplete="off"
-								/>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Form group-->
-							<div class="form-group">
-								<label class="checkbox mb-0">
-									<input type="checkbox" name="agree"/>I Agree the
-									<a href="#">terms and conditions</a>.
-									<span></span>
-								</label>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Form group-->
-							<div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
-								<button
-									type="button"
-									id="kt_login_signup_submit"
-									class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
-								>
-									Submit
-								</button>
-								<button
-									type="button"
-									id="kt_login_signup_cancel"
-									class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
-								>
-									Cancel
-								</button>
-							</div>
-							<!--end::Form group-->
-						</form>
+						@FormSignup()
 						<!--end::Form -->
 					</div>
 					<!--end::Signup -->
 					<!--begin::Forgot-->
 					<div class="login-form login-forgot">
 						<!--begin::Form-->
-						<form
-							class="form"
-							novalidate="novalidate"
-							id="kt_login_forgot_form"
-						>
-							<!--begin::Title-->
-							<div class="d-flex justify-content-center mb-5">
-								<img
-									src="asset-corporate-portal/media/logo.png"
-									alt=""
-									style="height: 103px"
-								/>
-							</div>
-							<div class="pb-13 pt-lg-0 pt-5">
-								<h3
-									class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
-								>
-									Forgotten Password ?
-								</h3>
-								<p class="text-muted font-weight-bold font-size-h4">
-									Enter your email to reset your password
-								</p>
-							</div>
-							<!--end::Title-->
-							<!--begin::Form group-->
-							<div class="form-group">
-								<input
-									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-									type="email"
-									placeholder="Email"
-									name="email"
-									autocomplete="off"
-								/>
-							</div>
-							<!--end::Form group-->
-							<!--begin::Form group-->
-							<div class="form-group d-flex flex-wrap pb-lg-0">
-								<button
-									type="button"
-									id="kt_login_forgot_submit"
-									class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit"
-								>
-									Submit
-								</button>
-								<button
-									type="button"
-									id="kt_login_forgot_cancel"
-									class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel"
-								>
-									Cancel
-								</button>
-							</div>
-							<!--end::Form group-->
-						</form>
+						@ForgotPassword()
 						<!--end::Form-->
 					</div>
 					<!--end::Forgot-->
@@ -315,73 +52,52 @@ templ DivLogin() {
 
 templ CssLogin() {
 	<style>
-
-		.title-company {
-    color: #181c32;
-    font-family: Poppins;
-    font-size: 31px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-    letter-spacing: -0.3px;
-}
-.subtitle-company {
-    color: #a7a8bb;
-    font-family: Poppins;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
+      .title-company {
+        color: #181c32;
+        font-family: Poppins;
+        font-size: 31px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        letter-spacing: -0.3px;
+      }
+      .subtitle-company {
+        color: #a7a8bb;
+        font-family: Poppins;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+      .aside-title {
+        color: #fff;
+        text-align: center;
+        font-family: Poppins;
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        letter-spacing: -0.84px;
+      }
+      .aside-subtitle {
+        color: #fff;
+        text-align: center;
+        font-family: Poppins;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 30px; /* 187.5% */
+        letter-spacing: -0.48px;
+      }
+    </style>
 }
 
-.aside-title {
-    color: #fff;
-    text-align: center;
-    font-family: Poppins;
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-    letter-spacing: -0.84px;
-}
-
-.aside-subtitle {
-    color: #fff;
-    text-align: center;
-    font-family: Poppins;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 30px;
-    /* 187.5% */
-    letter-spacing: -0.48px;
-}
-
-.btn-submit {
-    background-color: #3b4f9f !important
-}
-
-.btn-cancel {
-    color: #3b4f9f !important;
-    background-color: #e1f0ff !important;
-}
-
-	</style>
-}
-
-// templ CssLoginCompany() {
-// 	<link
-// 		rel="stylesheet"
-// 		type="text/css"
-// 		href="asset-corporate-portal/css/login.css"
-// 	/>
-// }
 templ JsLogin() {
-	<script src="asset-corporate-portal/js/login-general.js"></script>
+	<script src="../../asset-corporate-portal/js/login-general.js"></script>
 }
 
 templ ShowLogin(title string, cmp templ.Component, css templ.Component, js templ.Component) {
-	@layout.CanvasLayout(title, css, js) {
+	@layout.PlaygroundLayout(title, css, js) {
 		@cmp
 	}
 }

views/login/logincomponent.templ

@@ -0,0 +1,274 @@
+package login
+
+templ AsideLeft() {
+	<div class="login-aside d-flex flex-column flex-row-auto bg-primary">
+		<!--begin::Aside Top-->
+		<div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10">
+			<!--begin::Aside header-->
+			<div class="aside-title mb-5">
+				Empowering Your Workforce's Health
+			</div>
+			<!--end::Aside header-->
+			<!--begin::Aside title-->
+			<div class="aside-subtitle">
+				Discover peace of mind and prioritize your health with our
+				comprehensive medical check-up packages
+			</div>
+			<!--end::Aside title-->
+		</div>
+		<!--end::Aside Top-->
+		<!--begin::Aside Bottom-->
+		<div
+			class="d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end"
+		>
+			<img
+				src="../../asset-corporate-portal/media/login/login-company-vector.png"
+				class="img-fluid"
+				style="height: 55vh; width: 55vh"
+			/>
+		</div>
+		<!--end::Aside Bottom-->
+	</div>
+}
+
+templ FormSignin() {
+	<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
+			</h3>
+		</div>
+		<div class="pb-10 pt-0">
+			<h3 class="subtitle-company" style="color: #a7a8bb">
+				Sign in to access your account
+			</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 ?
+			</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
+			</button>
+		</div>
+		<!--end::Action-->
+	</form>
+}
+
+templ FormSignup() {
+	<form
+		class="form"
+		novalidate="novalidate"
+		id="kt_login_signup_form"
+	>
+		<!--begin::Title -->
+		<div class="pb-13 pt-lg-0 pt-5">
+			<h3
+				class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
+			>
+				Sign Up
+			</h3>
+			<p class="text-muted font-weight-bold font-size-h4">
+				Enter your details to create your account
+			</p>
+		</div>
+		<!--end::Title -->
+		<!--begin::Form group-->
+		<div class="form-group">
+			<input
+				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+				type="text"
+				placeholder="Fullname"
+				name="fullname"
+				autocomplete="off"
+			/>
+		</div>
+		<!--end::Form group-->
+		<!--begin::Form group-->
+		<div class="form-group">
+			<input
+				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+				type="email"
+				placeholder="Email"
+				name="email"
+				autocomplete="off"
+			/>
+		</div>
+		<!--end::Form group-->
+		<!--begin::Form group-->
+		<div class="form-group">
+			<input
+				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+				type="password"
+				placeholder="Password"
+				name="password"
+				autocomplete="off"
+			/>
+		</div>
+		<!--end::Form group-->
+		<!--begin::Form group-->
+		<div class="form-group">
+			<input
+				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+				type="password"
+				placeholder="Confirm password"
+				name="cpassword"
+				autocomplete="off"
+			/>
+		</div>
+		<!--end::Form group-->
+		<!--begin::Form group-->
+		<div class="form-group">
+			<label class="checkbox mb-0">
+				<input type="checkbox" name="agree"/>I Agree the
+				<a href="#">terms and conditions</a>.
+				<span></span>
+			</label>
+		</div>
+		<!--end::Form group-->
+		<!--begin::Form group-->
+		<div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
+			<button
+				type="button"
+				id="kt_login_signup_submit"
+				class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
+			>
+				Submit
+			</button>
+			<button
+				type="button"
+				id="kt_login_signup_cancel"
+				class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
+			>
+				Cancel
+			</button>
+		</div>
+		<!--end::Form group-->
+	</form>
+}
+
+templ ForgotPassword() {
+	<form
+		class="form"
+		novalidate="novalidate"
+		id="kt_login_forgot_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="pb-13 pt-lg-0 pt-5">
+			<h3
+				class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
+			>
+				Forgotten Password ?
+			</h3>
+			<p class="text-muted font-weight-bold font-size-h4">
+				Enter your email to reset your password
+			</p>
+		</div>
+		<!--end::Title-->
+		<!--begin::Form group-->
+		<div class="form-group">
+			<input
+				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+				type="email"
+				placeholder="Email"
+				name="email"
+				autocomplete="off"
+			/>
+		</div>
+		<!--end::Form group-->
+		<!--begin::Form group-->
+		<div class="form-group d-flex flex-wrap pb-lg-0">
+			<button
+				type="button"
+				id="kt_login_forgot_submit"
+				class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit"
+			>
+				Submit
+			</button>
+			<button
+				type="button"
+				id="kt_login_forgot_cancel"
+				class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel"
+			>
+				Cancel
+			</button>
+		</div>
+		<!--end::Form group-->
+	</form>
+}

views/login/logincomponent_templ.go

@@ -0,0 +1,107 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package login
+
+//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 AsideLeft() 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=\"login-aside d-flex flex-column flex-row-auto bg-primary\"><!--begin::Aside Top--><div class=\"d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10\"><!--begin::Aside header--><div class=\"aside-title mb-5\">Empowering Your Workforce's Health\r</div><!--end::Aside header--><!--begin::Aside title--><div class=\"aside-subtitle\">Discover peace of mind and prioritize your health with our\r comprehensive medical check-up packages\r</div><!--end::Aside title--></div><!--end::Aside Top--><!--begin::Aside Bottom--><div class=\"d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end\"><img src=\"../../asset-corporate-portal/media/login/login-company-vector.png\" class=\"img-fluid\" style=\"height: 55vh; width: 55vh\"></div><!--end::Aside Bottom--></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 FormSignin() 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("<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>")
+		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 FormSignup() 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("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_signup_form\"><!--begin::Title --><div class=\"pb-13 pt-lg-0 pt-5\"><h3 class=\"font-weight-bolder text-dark font-size-h4 font-size-h1-lg\">Sign Up\r</h3><p class=\"text-muted font-weight-bold font-size-h4\">Enter your details to create your account\r</p></div><!--end::Title --><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"text\" placeholder=\"Fullname\" name=\"fullname\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"email\" placeholder=\"Email\" name=\"email\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"password\" placeholder=\"Password\" name=\"password\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"password\" placeholder=\"Confirm password\" name=\"cpassword\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><label class=\"checkbox mb-0\"><input type=\"checkbox\" name=\"agree\">I Agree the\r <a href=\"#\">terms and conditions</a>.\r <span></span></label></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group d-flex flex-wrap pb-lg-0 pb-3\"><button type=\"button\" id=\"kt_login_signup_submit\" class=\"btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4\">Submit\r</button> <button type=\"button\" id=\"kt_login_signup_cancel\" class=\"btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3\">Cancel\r</button></div><!--end::Form group--></form>")
+		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 ForgotPassword() 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_Err = templ_7745c5c3_Buffer.WriteString("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_forgot_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=\"pb-13 pt-lg-0 pt-5\"><h3 class=\"font-weight-bolder text-dark font-size-h4 font-size-h1-lg\">Forgotten Password ?\r</h3><p class=\"text-muted font-weight-bold font-size-h4\">Enter your email to reset your password\r</p></div><!--end::Title--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"email\" placeholder=\"Email\" name=\"email\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group d-flex flex-wrap pb-lg-0\"><button type=\"button\" id=\"kt_login_forgot_submit\" class=\"btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit\">Submit\r</button> <button type=\"button\" id=\"kt_login_forgot_cancel\" class=\"btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel\">Cancel\r</button></div><!--end::Form group--></form>")
+		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
+	})
+}

views/mcu/peserta/mcupeserta.templ

@@ -0,0 +1,132 @@
+package mcupeserta
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+)
+
+templ MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanMcu string, dataKepesertaanMcu string, divPesertaMcuUmur string, dataPesertaMcuUmur string) {
+	<div id="div-chart">
+		@HeaderMcuPeserta()
+		<div class="d-flex flex-column flex-root bg-white mt-25">
+			<div class="d-flex justify-content-center ">
+				<h3 class="mb-3 title">Data Kepesertaan MCU</h3>
+			</div>
+			<div class="row justify-content-center">
+				<div class="col-12 text-center mb-10">
+					@chart.ShowChart(divPesertaMcu, dataPesertaMcu)
+				</div>
+				<div class="col-12 text-center mb-10">
+					@chart.ShowChart(divKepesertaanMcu, dataKepesertaanMcu)
+				</div>
+				<div class="col-12 text-center">
+					@chart.ShowChart(divPesertaMcuUmur, dataPesertaMcuUmur)
+				</div>
+			</div>
+		</div>
+	</div>
+}
+
+templ CssMcuPeserta() {
+	<link
+		rel="stylesheet"
+		href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+	/>
+	<link
+		rel="stylesheet"
+		href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700"
+	/>
+	<link
+		rel="stylesheet"
+		href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+    
+</style>
+}
+
+templ JsMcuPeserta() {
+	// echart
+	<script src="assets/js/echarts-js/echart.min.js"></script>
+}
+
+templ HeaderMcuPeserta() {
+	<!-- breadcrumb & icon tanya START -->
+	<div class="row">
+		<div class="col-11">
+			<h1 class="title text-black" style="margin-bottom: 0">
+				PT. Sadhana Abiyasa Sampoerna
+			</h1>
+			<nav aria-label="breadcrumb">
+				<ol class="breadcrumb" style="margin-bottom: 0">
+					<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
+					<li class="breadcrumb-item">
+						<a href="#">Employee Health Medical Analytic</a>
+					</li>
+					<li class="breadcrumb-item">
+						<a href="#">PT. Sadhana Abiyasa Sampoerna</a>
+					</li>
+					<li class="breadcrumb-item active" aria-current="page">
+						Mcu Karyawan
+					</li>
+				</ol>
+			</nav>
+		</div>
+		<div class="col-1 align-content-center">
+			<!-- align-content-center -->
+			<div class="d-flex justify-content-end">
+				<a href="#">
+					<i class="fas fa-info-circle text-primary"></i>
+				</a>
+			</div>
+		</div>
+	</div>
+	<!-- breadcrumb & icon tanya END -->
+	<div class="mt-10">
+		<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 & Saran</a>
+			</li>
+			<li class="nav-item">
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
+			</li>
+		</ul>
+	</div>
+}
+
+templ ShowMcuPeserta(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}

views/mcu/peserta/mcupeserta_templ.go

@@ -0,0 +1,183 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package mcupeserta
+
+//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 (
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+func MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanMcu string, dataKepesertaanMcu string, divPesertaMcuUmur string, dataPesertaMcuUmur 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=\"div-chart\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = HeaderMcuPeserta().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex flex-column flex-root bg-white mt-25\"><!-- begin::Navbar --><div class=\"d-flex justify-content-center \"><h3 class=\"mb-3 title\">Data Kepesertaan MCU</h3></div><div class=\"row justify-content-center\"><div class=\"col-12 text-center mb-10\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chart.ShowChart(divPesertaMcu, dataPesertaMcu).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-12 text-center mb-10\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chart.ShowChart(divKepesertaanMcu, dataKepesertaanMcu).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-12 text-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chart.ShowChart(divPesertaMcuUmur, dataPesertaMcuUmur).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><!-- end::Navbar --></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 CssMcuPeserta() 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=\"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #div-chart {\r\n        /* overflow-x: scroll; */\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    \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 JsMcuPeserta() 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 src=\"assets/js/echarts-js/echart.min.js\"></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 HeaderMcuPeserta() 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_Err = templ_7745c5c3_Buffer.WriteString("<!-- breadcrumb & icon tanya START --><div class=\"row\"><div class=\"col-11\"><h1 class=\"title text-black\" style=\"margin-bottom: 0\">PT. Sadhana Abiyasa Sampoerna\r</h1><nav aria-label=\"breadcrumb\"><ol class=\"breadcrumb\" style=\"margin-bottom: 0\"><li class=\"breadcrumb-item\"><a href=\"#\">Dashboard</a></li><li class=\"breadcrumb-item\"><a href=\"#\">Employee Health Medical Analytic</a></li><li class=\"breadcrumb-item\"><a href=\"#\">PT. Sadhana Abiyasa Sampoerna</a></li><li class=\"breadcrumb-item active\" aria-current=\"page\">Mcu Karyawan\r</li></ol></nav></div><div class=\"col-1 align-content-center\"><!-- align-content-center --><div class=\"d-flex justify-content-end\"><a href=\"#\"><i class=\"fas fa-info-circle text-primary\"></i></a></div></div></div><!-- breadcrumb & icon tanya END --><div class=\"mt-10\"><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 & Saran</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></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 ShowMcuPeserta(title string, cmp templ.Component, css templ.Component, js 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_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var6 := 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.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), 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
+	})
+}

views/piechart/piechart.templ

@@ -0,0 +1,59 @@
+package piechart
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+)
+
+templ MainPieChart(idDiv string, udata string) {
+	<!-- title -->
+	<div class="row justify-content-center mb-3 mt-3">
+		<div class="col-lg-8 col-xxl-8 col-md-10 text-center">
+			<p class="title">Data Kepesertaan MCU</p>
+		</div>
+	</div>
+	<!-- title -->
+	<div class="row justify-content-center">
+		<div class="col-lg-8 col-xxl-8 col-md-10 text-center" style="margin-bottom: 40px;">
+            @chart.ShowChart(idDiv, udata)
+		</div>
+	</div>
+}
+
+templ CssPieChart() {
+	<link
+		rel="stylesheet"
+		href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+	/>
+	<link
+		rel="stylesheet"
+		href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700"
+	/>
+	<link
+		rel="stylesheet"
+		href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+  </style>
+}
+
+templ JsPieChart() {
+	// echart
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+}
+
+templ ShowPieChart(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}

views/piechart/piechart_templ.go

@@ -0,0 +1,135 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package piechart
+
+//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 (
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+func MainPieChart(idDiv string, udata 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("<!-- title --><div class=\"row justify-content-center mb-3 mt-3\"><div class=\"col-lg-8 col-xxl-8 col-md-10 text-center\"><p class=\"title\">Data Kepesertaan MCU</p></div></div><!-- title --><div class=\"row justify-content-center\"><div class=\"col-lg-8 col-xxl-8 col-md-10 text-center\" style=\"margin-bottom: 40px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chart.ShowChart(idDiv, udata).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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CssPieChart() 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=\"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\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 JsPieChart() 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 src=\"https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js\" integrity=\"sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></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 ShowPieChart(title string, cmp templ.Component, css templ.Component, js 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.PlaygroundLayout(title, css, js).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
+	})
+}