Custom css SAS & layout playground

init route
Merge branch 'andy/layout/canvas'
2024-04-25 16:56:20 +07:00 · 2024-04-23 14:52:16 +07:00 · 2024-04-23 14:28:51 +07:00 · 2024-04-23 14:28:12 +07:00 · 2024-04-23 13:33:25 +07:00 · 2024-04-23 13:33:23 +07:00
23 changed files with 5527 additions and 154 deletions
--- a/assets/andy/coba.html
+++ b/assets/andy/coba.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<!--
+Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: https://1.envato.market/EA4JP
+Renew Support: https://1.envato.market/EA4JP
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en">
+  <!--begin::Head-->
+
+  <head>
+    <base href="../" />
+    <meta charset="utf-8" />
+    <title>Corporate portal | Landing Page</title>
+    <meta name="description" content="Login page example" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!--begin::Fonts-->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+    />
+    <!--end::Fonts-->
+
+    <!--begin::Page Custom Styles(used by this page)-->
+    <link
+      href="assets/css/pages/login/login-1.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Page Custom Styles-->
+
+    <!--begin::Global Theme Styles(used by all pages)-->
+    <link
+      href="assets/plugins/global/plugins.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/plugins/custom/prismjs/prismjs.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
+    <!--end::Global Theme Styles-->
+
+    <!--begin::Layout Themes(used by all pages)-->
+
+    <link
+      href="assets/css/themes/layout/header/base/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/header/menu/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/brand/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/aside/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Layout Themes-->
+    <link
+      href="asset-corporate-portal/css/sas.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+
+    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
+  </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-->
+    <div class="d-flex flex-column flex-root bg-white">
+      <!-- begin::Navbar -->
+      <div
+        class="d-flex flex-lg-row justify-content-between py-5"
+        style="height: 119px; align-items: center"
+      >
+        <img
+          src="asset-corporate-portal/media/logo.png"
+          alt=""
+          style="height: 39px"
+        />
+        <ul class="nav">
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle font-weight-bolder"
+              data-toggle="dropdown"
+              role="button"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Dashboard
+            </a>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Action</a>
+            </div>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link disabled"
+              href="#"
+              tabindex="-1"
+              aria-disabled="true"
+              >Disabled</a
+            >
+          </li>
+        </ul>
+        <img
+          src="asset-corporate-portal/media/logo.png"
+          alt=""
+          style="height: 39px"
+        />
+      </div>
+      <div class="p-10">
+        <button type="button" class="btn">btn</button>
+        <button type="button" class="btn btn-tosca">btn cb</button>
+        <button type="button" class="btn btn-primary">Primary</button>
+        <button type="button" class="btn btn-secondary">Secondary</button>
+        <button type="button" class="btn btn-info">Info</button>
+        <button type="button" class="btn btn-danger">Danger</button>
+        <button type="button" class="btn btn-success">Success</button>
+        <button type="button" class="btn btn-warning">Warning</button>
+      </div>
+      <div class="p-10">
+        <button type="button" class="btn btn-outline-primary">Primary</button>
+        <button type="button" class="btn btn-outline-secondary">
+          Secondary
+        </button>
+        <button type="button" class="btn btn-outline-success">Success</button>
+        <button type="button" class="btn btn-outline-danger">Danger</button>
+        <button type="button" class="btn btn-outline-warning">Warning</button>
+        <button type="button" class="btn btn-outline-info">Info</button>
+        <button type="button" class="btn btn-outline-dark">Dark</button>
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-primary active">Active state</a>
+        <a href="#" class="btn btn-success active">Active state</a>
+        <a href="#" class="btn btn-danger active">Active state</a>
+        <a href="#" class="btn btn-warning active">Active state</a>
+      </div>
+      <div class="p-10">
+        <button class="btn btn-primary" disabled>Disabled state</button>
+        <button class="btn btn-success" disabled>Disabled state</button>
+        <button class="btn btn-danger" disabled>Disabled state</button>
+        <button class="btn btn-warning" disabled>Disabled state</button>
+      </div>
+      <div class="p-10">
+        <div class="btn-group btn-group-toggle" data-toggle="buttons">
+          <label class="btn btn-success active">
+            <input type="radio" name="options" id="option1" checked="checked" />
+            Active
+          </label>
+          <label class="btn btn-success">
+            <input type="radio" name="options" id="option2" /> Radio
+          </label>
+          <label class="btn btn-success">
+            <input type="radio" name="options" id="option3" /> Radio
+          </label>
+        </div>
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-success font-weight-bold btn-pill"
+          >Success</a
+        >
+        <a href="#" class="btn btn-primary font-weight-bold btn-pill"
+          >Primary</a
+        >
+        <a href="#" class="btn btn-danger font-weight-bold btn-pill">Danger</a>
+        <a href="#" class="btn btn-warning font-weight-bold btn-pill"
+          >Warning</a
+        >
+        <a href="#" class="btn btn-dark font-weight-bold btn-pill">Dark</a>
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-success font-weight-bold btn-square"
+          >Success</a
+        >
+        <a href="#" class="btn btn-primary font-weight-bold btn-square"
+          >Primary</a
+        >
+        <a href="#" class="btn btn-danger font-weight-bold btn-square"
+          >Danger</a
+        >
+        <a href="#" class="btn btn-warning font-weight-bold btn-square"
+          >Warning</a
+        >
+        <a href="#" class="btn btn-dark font-weight-bold btn-square">Dark</a>
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-light-success font-weight-bold mr-2"
+          >Success</a
+        >
+        <a href="#" class="btn btn-light-info font-weight-bold mr-2">info</a>
+        <a href="#" class="btn btn-light-primary font-weight-bold mr-2"
+          >Primary</a
+        >
+        <a href="#" class="btn btn-light-secondary font-weight-bold mr-2"
+          >secondary</a
+        >
+        <a href="#" class="btn btn-light-danger font-weight-bold mr-2"
+          >Danger</a
+        >
+        <a href="#" class="btn btn-light-warning font-weight-bold mr-2"
+          >Warning</a
+        >
+        <a href="#" class="btn btn-light-dark font-weight-bold">Dark</a>
+      </div>
+      <div class="p-10">
+        <a
+          href="#"
+          class="btn btn-text-info btn-hover-light-info font-weight-bold mr-2"
+          >info</a
+        >
+        <a
+          href="#"
+          class="btn btn-text-secondary btn-hover-light-secondary font-weight-bold mr-2"
+          >secondary</a
+        >
+        <a
+          href="#"
+          class="btn btn-text-success btn-hover-light-success font-weight-bold mr-2"
+          >Success</a
+        >
+        <a
+          href="#"
+          class="btn btn-text-primary btn-hover-light-primary font-weight-bold mr-2"
+          >Primary</a
+        >
+        <a
+          href="#"
+          class="btn btn-text-danger btn-hover-light-danger font-weight-bold mr-2"
+          >Danger</a
+        >
+        <a
+          href="#"
+          class="btn btn-text-warning btn-hover-light-warning font-weight-bold mr-2"
+          >Warning</a
+        >
+        <a
+          href="#"
+          class="btn btn-text-dark btn-hover-light-dark font-weight-bold mr-2"
+          >Dark</a
+        >
+      </div>
+      <div class="p-10">
+        <a
+          href="#"
+          class="btn btn-hover-bg-success btn-text-success btn-hover-text-white border-0 font-weight-bold mr-2"
+          >Success</a
+        >
+        <a
+          href="#"
+          class="btn btn-hover-bg-info btn-text-info btn-hover-text-white border-0 font-weight-bold mr-2"
+          >info</a
+        >
+        <a
+          href="#"
+          class="btn btn-hover-bg-primary btn-text-primary btn-hover-text-white border-0 font-weight-bold mr-2"
+          >Primary</a
+        >
+        <a
+          href="#"
+          class="btn btn-hover-bg-danger btn-text-danger btn-hover-text-white border-0 font-weight-bold mr-2"
+          >Danger</a
+        >
+        <a
+          href="#"
+          class="btn btn-hover-bg-warning btn-text-warning btn-hover-text-white border-0 font-weight-bold mr-2"
+          >Warning</a
+        >
+        <a
+          href="#"
+          class="btn btn-hover-bg-dark btn-text-dark btn-hover-text-white border-0 font-weight-bold mr-2"
+          >Dark</a
+        >
+      </div>
+      <div class="p-10">
+        <a
+          href="#"
+          class="btn btn-light btn-text-success btn-hover-text-success font-weight-bold"
+          >Success</a
+        >
+        <a
+          href="#"
+          class="btn btn-light btn-text-info btn-hover-text-info font-weight-bold"
+          >info</a
+        >
+        <a
+          href="#"
+          class="btn btn-light btn-text-primary btn-hover-text-primary font-weight-bold"
+          >Primary</a
+        >
+        <a
+          href="#"
+          class="btn btn-light btn-text-danger btn-hover-text-danger font-weight-bold"
+          >Danger</a
+        >
+        <a
+          href="#"
+          class="btn btn-light btn-text-warning btn-hover-text-dark-50 font-weight-bold"
+          >Warning</a
+        >
+        <a
+          href="#"
+          class="btn btn-light btn-text-dark btn-hover-text-dark font-weight-bold"
+          >Dark</a
+        >
+      </div>
+      <div class="p-10">
+        <a
+          href="#"
+          class="btn btn-light btn-hover-success font-weight-bold mr-2"
+          >Success</a
+        >
+        <a href="#" class="btn btn-light btn-hover-info font-weight-bold mr-2"
+          >info</a
+        >
+        <a href="#" class="btn btn-light btn-hover-primary font-weight-bold"
+          >Primary</a
+        >
+        <a href="#" class="btn btn-light btn-hover-danger font-weight-bold"
+          >Danger</a
+        >
+        <a href="#" class="btn btn-light btn-hover-warning font-weight-bold"
+          >Warning</a
+        >
+        <a href="#" class="btn btn-light btn-hover-dark font-weight-bold"
+          >Dark</a
+        >
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-link-success font-weight-bold">Success</a>
+        <a href="#" class="btn btn-link-info font-weight-bold">info</a>
+        <a href="#" class="btn btn-link-primary font-weight-bold">Primary</a>
+        <a href="#" class="btn btn-link-danger font-weight-bold">Danger</a>
+        <a href="#" class="btn btn-link-warning font-weight-bold">Warning</a>
+        <a href="#" class="btn btn-link-dark font-weight-bold">Dark</a>
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-light btn-shadow font-weight-bold mr-2"
+          >Light</a
+        >
+        <a href="#" class="btn btn-info btn-shadow font-weight-bold mr-2"
+          >info</a
+        >
+        <a href="#" class="btn btn-success btn-shadow font-weight-bold mr-2"
+          >Success</a
+        >
+        <a href="#" class="btn btn-primary btn-shadow font-weight-bold mr-2"
+          >Primary</a
+        >
+        <a href="#" class="btn btn-danger btn-shadow font-weight-bold mr-2"
+          >Danger</a
+        >
+        <a href="#" class="btn btn-warning btn-shadow font-weight-bold mr-2"
+          >Warning</a
+        >
+      </div>
+      <div class="p-10">
+        <a href="#" class="btn btn-light btn-shadow-hover font-weight-bold mr-2"
+          >Light</a
+        >
+        <a href="#" class="btn btn-info btn-shadow-hover font-weight-bold mr-2"
+          >info</a
+        >
+        <a
+          href="#"
+          class="btn btn-success btn-shadow-hover font-weight-bold mr-2"
+          >Success</a
+        >
+        <a
+          href="#"
+          class="btn btn-primary btn-shadow-hover font-weight-bold mr-2"
+          >Primary</a
+        >
+        <a
+          href="#"
+          class="btn btn-danger btn-shadow-hover font-weight-bold mr-2"
+          >Danger</a
+        >
+        <a
+          href="#"
+          class="btn btn-warning btn-shadow-hover font-weight-bold mr-2"
+          >Warning</a
+        >
+      </div>
+      <div class="p-10">
+        <ul class="nav">
+          <li class="nav-item">
+            <a class="nav-link active" href="#">Active</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              data-toggle="dropdown"
+              href="#"
+              role="button"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Dropdown
+            </a>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" href="#">Separated link</a>
+            </div>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link disabled"
+              href="#"
+              tabindex="-1"
+              aria-disabled="true"
+              >Disabled</a
+            >
+          </li>
+        </ul>
+      </div>
+      <div class="p-10">
+        <ul class="nav nav-pills" id="myTab" role="tablist">
+          <li class="nav-item">
+            <a class="nav-link active" href="#">Active</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              data-toggle="dropdown"
+              href="#"
+              role="button"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Dropdown
+            </a>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" href="#">Separated link</a>
+            </div>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link disabled"
+              href="#"
+              tabindex="-1"
+              aria-disabled="true"
+              >Disabled</a
+            >
+          </li>
+        </ul>
+        <div class="tab-content mt-5" id="myTabContent">...</div>
+      </div>
+      <div class="p-10">
+        <p class="text-primary">.text-primary</p>
+        <p class="text-secondary">.text-secondary</p>
+        <p class="text-success">.text-success</p>
+        <p class="text-danger">.text-danger</p>
+        <p class="text-warning">.text-warning</p>
+        <p class="text-info">.text-info</p>
+        <p class="text-light bg-dark">.text-light</p>
+        <p class="text-dark">.text-dark</p>
+        <p class="text-body">.text-body</p>
+        <p class="text-muted">.text-muted</p>
+        <p class="text-white bg-dark">.text-white</p>
+        <p class="text-black-50">.text-black-50</p>
+        <p class="text-white-50 bg-dark">.text-white-50</p>
+        <p class="h1 text-disabled">text normal</p>
+      </div>
+      <!-- end::Navbar -->
+    </div>
+    <!--end::Main-->
+
+    <script>
+      var HOST_URL =
+        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
+    </script>
+    <!--begin::Global Config(global config for global JS scripts)-->
+    <script>
+      var KTAppSettings = {
+        breakpoints: {
+          sm: 576,
+          md: 768,
+          lg: 992,
+          xl: 1200,
+          xxl: 1400,
+        },
+        colors: {
+          theme: {
+            base: {
+              white: "#ffffff",
+              primary: "#3699FF",
+              secondary: "#E5EAEE",
+              success: "#1BC5BD",
+              info: "#8950FC",
+              warning: "#FFA800",
+              danger: "#F64E60",
+              light: "#E4E6EF",
+              dark: "#181C32",
+            },
+            light: {
+              white: "#ffffff",
+              primary: "#E1F0FF",
+              secondary: "#EBEDF3",
+              success: "#C9F7F5",
+              info: "#EEE5FF",
+              warning: "#FFF4DE",
+              danger: "#FFE2E5",
+              light: "#F3F6F9",
+              dark: "#D6D6E0",
+            },
+            inverse: {
+              white: "#ffffff",
+              primary: "#ffffff",
+              secondary: "#3F4254",
+              success: "#ffffff",
+              info: "#ffffff",
+              warning: "#ffffff",
+              danger: "#ffffff",
+              light: "#464E5F",
+              dark: "#ffffff",
+            },
+          },
+          gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+          },
+        },
+        "font-family": "Poppins",
+      };
+    </script>
+    <!--end::Global Config-->
+
+    <!--begin::Global Theme Bundle(used by all pages)-->
+    <script src="assets/plugins/global/plugins.bundle.js"></script>
+    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+    <script src="assets/js/scripts.bundle.js"></script>
+    <!--end::Global Theme Bundle-->
+
+    <!--begin::Page Scripts(used by this page)-->
+    <!-- <script src="asset-corporate-portal/js/login-general.js"></script> -->
+    <!--end::Page Scripts-->
+  </body>
+  <!--end::Body-->
+</html>
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
--- a/assets/asset-corporate-portal/media/login/login-company-vector.png
+++ b/assets/asset-corporate-portal/media/login/login-company-vector.png
--- a/assets/asset-corporate-portal/media/login/login-pasien-vector.png
+++ b/assets/asset-corporate-portal/media/login/login-pasien-vector.png
--- a/assets/asset-corporate-portal/media/logo-small.png
+++ b/assets/asset-corporate-portal/media/logo-small.png
--- a/assets/asset-corporate-portal/media/logo/logo-small.jpg
+++ b/assets/asset-corporate-portal/media/logo/logo-small.jpg
--- a/assets/asset-corporate-portal/media/logo/logo.png
+++ b/assets/asset-corporate-portal/media/logo/logo.png
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -38,6 +38,14 @@ func main() {

 	handlers.SetupRoutes(app, h)

+	xStore, err := db.NewXsampleStore(dbName)
+	if err != nil {
+		app.Logger.Fatalf("failed to create store: %s", err)
+	}
+	xs := services.NewServicesXsample(services.Xsample{}, xStore)
+	xh := handlers.NewXsampleHandler(xs)
+	handlers.SetupRoutesXsample(app, xh)
+
 	app.Logger.Fatal(app.Start(":5000"))
 }

--- a/db/xsample.store.go
+++ b/db/xsample.store.go
@@ -0,0 +1,26 @@
+package db
+
+import (
+	"database/sql"
+
+	_ "github.com/glebarez/go-sqlite"
+)
+
+type XsampleStore struct {
+	Db *sql.DB
+}
+
+func NewXsampleStore(dbName string) (XsampleStore, error) {
+	Db, err := getConnection(dbName)
+	if err != nil {
+		return XsampleStore{}, err
+	}
+
+	if err := createMigrations(dbName, Db); err != nil {
+		return XsampleStore{}, err
+	}
+
+	return XsampleStore{
+		Db,
+	}, nil
+}
--- a/go.mod
+++ b/go.mod
@@ -3,7 +3,7 @@ module github.com/emarifer/go-templ-project-structure
 go 1.21.0

 require (
-	github.com/a-h/templ v0.2.476
+	github.com/a-h/templ v0.2.663
 	github.com/labstack/echo/v4 v4.11.3
 	github.com/mattn/go-sqlite3 v1.14.19
 	golang.org/x/text v0.14.0
@@ -20,8 +20,8 @@ require (
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.14.0 // indirect
-	golang.org/x/net v0.17.0 // indirect
+	golang.org/x/crypto v0.16.0 // indirect
+	golang.org/x/net v0.19.0 // indirect
 	golang.org/x/sys v0.15.0 // indirect
 	golang.org/x/time v0.3.0 // indirect
 	modernc.org/libc v1.37.6 // indirect
--- a/go.sum
+++ b/go.sum
@@ -1,5 +1,7 @@
 github.com/a-h/templ v0.2.476 h1:+H4hP4CwK4kfJwXsE6kHeFWMGtcVOVoOm/I64uzARBk=
 github.com/a-h/templ v0.2.476/go.mod h1:zQ95mSyadNTGHv6k5Fm+wQU8zkBMMbHCHg7eAvUZKNM=
+github.com/a-h/templ v0.2.663 h1:aa0WMm27InkYHGjimcM7us6hJ6BLhg98ZbfaiDPyjHE=
+github.com/a-h/templ v0.2.663/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -43,8 +45,12 @@ github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQ
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 golang.org/x/crypto v0.14.0 h1:wBqGXzWJW6m1XrIKlAH0Hs1JJ7+9KBwnIO8v66Q9cHc=
 golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf4=
+golang.org/x/crypto v0.16.0 h1:mMMrFzRSCF0GvB7Ne27XVtVAaXLrPmgPC7/v0tkwHaY=
+golang.org/x/crypto v0.16.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
 golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
 golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
+golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
+golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -7,4 +7,14 @@ func SetupRoutes(app *echo.Echo, h *UserHandler) {

 	group.GET("", h.HandlerShowUsers)
 	group.GET("/details/:id", h.HandlerShowUserById)
+
+}
+
+//PLAYGROUND TESTING
+func SetupRoutesXsample(app *echo.Echo, h *XsampleHandler) {
+	xSample := app.Group("/xsample")
+	xSample.GET("/xsample01", h.Hello)
+}
+func SetupRoutesProject(app *echo.Echo) {
+
 }
--- a/handlers/xsample.handlers.go
+++ b/handlers/xsample.handlers.go
@@ -0,0 +1,32 @@
+package handlers
+
+import (
+	"github.com/a-h/templ"
+	"github.com/emarifer/go-templ-project-structure/views/xsample"
+
+	"github.com/labstack/echo/v4"
+)
+
+type XsampleService interface {
+}
+
+func NewXsampleHandler(us XsampleService) *XsampleHandler {
+	return &XsampleHandler{
+		XsampleService: us,
+	}
+}
+
+type XsampleHandler struct {
+	XsampleService XsampleService
+}
+
+func (uh *XsampleHandler) Hello(c echo.Context) error {
+	helo := xsample.ShowHelo("Hello World", xsample.HelloWorld("Hello World"), xsample.CssHelo(), xsample.JsHelo())
+	return uh.View(c, helo)
+}
+
+func (uh *XsampleHandler) 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)
+}
--- a/services/xsample.services.go
+++ b/services/xsample.services.go
@@ -0,0 +1,80 @@
+package services
+
+import (
+	"time"
+
+	"github.com/emarifer/go-templ-project-structure/db"
+)
+
+func NewServicesXsample(u Xsample, uStore db.XsampleStore) *ServicesXsample {
+
+	return &ServicesXsample{
+		Xsample:      u,
+		XsampleStore: uStore,
+	}
+}
+
+type Xsample struct {
+	ID          int       `json:"id"`
+	Xsamplename string    `json:"Xsamplename"`
+	Email       string    `json:"email"`
+	CreatedAt   time.Time `json:"created_at,omitempty"`
+}
+
+type ServicesXsample struct {
+	Xsample      Xsample
+	XsampleStore db.XsampleStore
+}
+
+func (su *ServicesXsample) GetAllXsamples() ([]Xsample, error) {
+	query := `SELECT id, Xsamplename, email, created_at FROM Xsamples ORDER BY created_at DESC`
+
+	rows, err := su.XsampleStore.Db.Query(query)
+	if err != nil {
+		return []Xsample{}, err
+	}
+	// We close the resource
+	defer rows.Close()
+
+	Xsamples := []Xsample{}
+	for rows.Next() {
+		rows.Scan(
+			&su.Xsample.ID,
+			&su.Xsample.Xsamplename,
+			&su.Xsample.Email,
+			&su.Xsample.CreatedAt,
+		)
+
+		Xsamples = append(Xsamples, su.Xsample)
+	}
+
+	return Xsamples, nil
+}
+
+func (su *ServicesXsample) GetXsampleById(id int) (Xsample, error) {
+
+	query := `SELECT id, Xsamplename, email, created_at FROM Xsamples
+		WHERE id = ?`
+
+	stmt, err := su.XsampleStore.Db.Prepare(query)
+	if err != nil {
+		return Xsample{}, err
+	}
+
+	defer stmt.Close()
+
+	su.Xsample.ID = id
+	err = stmt.QueryRow(
+		su.Xsample.ID,
+	).Scan(
+		&su.Xsample.ID,
+		&su.Xsample.Xsamplename,
+		&su.Xsample.Email,
+		&su.Xsample.CreatedAt,
+	)
+	if err != nil {
+		return Xsample{}, err
+	}
+
+	return su.Xsample, nil
+}
--- a/views/layout/base.layout_templ.go
+++ b/views/layout/base.layout_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.

-// templ: version: 0.2.476
+// templ: version: v0.2.663
 package layout

 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -23,39 +23,20 @@ func Base(title string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" data-theme=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Go/Echo+Templ: User List App as an example of a project structured in layers, use of &#39;Templ&#39; Template language and frontend with HTMx technology\"><meta name=\"google\" content=\"notranslate\"><link rel=\"shortcut icon\" href=\"/img/templ.png\" type=\"image/png\"><script src=\"https://cdn.tailwindcss.com\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" data-theme=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Go/Echo+Templ: User List App as an example of a project structured in layers, use of &#39;Templ&#39; Template language and frontend with HTMx technology\"><meta name=\"google\" content=\"notranslate\"><link rel=\"shortcut icon\" href=\"/img/templ.png\" type=\"image/png\"><script src=\"https://cdn.tailwindcss.com\"></script><link href=\"https://cdn.jsdelivr.net/npm/daisyui@4.4.10/dist/full.min.css\" rel=\"stylesheet\" type=\"text/css\"><link rel=\"stylesheet\" href=\"/css/styles.css\"><title>Project Structure Demo ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var2 := ``
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\layout\base.layout.templ`, Line: 18, Col: 40}
+		}
+		_, 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("</script><link href=\"https://cdn.jsdelivr.net/npm/daisyui@4.4.10/dist/full.min.css\" rel=\"stylesheet\" type=\"text/css\"><link rel=\"stylesheet\" href=\"/css/styles.css\"><title>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var3 := `Project Structure Demo `
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var4 string = title
-		_, 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("</title><script src=\"https://unpkg.com/htmx.org@1.9.9\" integrity=\"sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX\" crossorigin=\"anonymous\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var5 := ``
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</script></head><body class=\"sample-transition\" hx-boost=\"true\"><main class=\"pt-40\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><script src=\"https://unpkg.com/htmx.org@1.9.9\" integrity=\"sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX\" crossorigin=\"anonymous\"></script></head><body class=\"sample-transition\" hx-boost=\"true\"><main class=\"pt-40\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/layout/canvas_layout.templ
+++ b/views/layout/canvas_layout.templ
@@ -0,0 +1,173 @@
+package layout
+
+templ CanvasLayout(title string, css templ.Component, js templ.Component) {
+	<!DOCTYPE html>
+	<!--
+		Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
+		Author: KeenThemes
+		Website: http://www.keenthemes.com/
+		Contact: support@keenthemes.com
+		Follow: www.twitter.com/keenthemes
+		Dribbble: www.dribbble.com/keenthemes
+		Like: www.facebook.com/keenthemes
+		Purchase: https://1.envato.market/EA4JP
+		Renew Support: https://1.envato.market/EA4JP
+		License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+		-->
+	<html lang="en">
+		<!--begin::Head-->
+		<head>
+			<base href="../"/>
+			<meta charset="utf-8"/>
+			<title>Company Portal | { title }</title>
+			<meta name="description" content="Company Portal"/>
+			<meta
+				name="viewport"
+				content="width=device-width, initial-scale=1, shrink-to-fit=no"
+			/>
+			<!--begin::Fonts-->
+			<link
+				rel="stylesheet"
+				href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+			/>
+			<!--end::Fonts-->
+			<!--begin::Page Custom Styles(used by this page)-->
+			<link
+				href="assets/css/pages/login/login-1.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<!--end::Page Custom Styles-->
+			<!--begin::Global Theme Styles(used by all pages)-->
+			<link
+				href="assets/plugins/global/plugins.bundle.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/plugins/custom/prismjs/prismjs.bundle.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
+			<!--end::Global Theme Styles-->
+			<!--begin::Layout Themes(used by all pages)-->
+			<link
+				href="assets/css/themes/layout/header/base/light.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/css/themes/layout/header/menu/light.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/css/themes/layout/brand/dark.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/css/themes/layout/aside/dark.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<!--end::Layout Themes-->
+			<link
+				rel="shortcut icon"
+				href="asset-corporate-portal/media/logo/logo-small.jpg"
+			/>
+			<!--end::Layout Themes SAS-->
+			<link
+				href="asset-corporate-portal/css/sas.bundle.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			@css
+		</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-->
+			{ children... }
+			<!--end::Main-->
+			<script>
+      var HOST_URL =
+        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
+    </script>
+			<!--begin::Global Config(global config for global JS scripts)-->
+			<script>
+      var KTAppSettings = {
+        breakpoints: {
+          sm: 576,
+          md: 768,
+          lg: 992,
+          xl: 1200,
+          xxl: 1400,
+        },
+        colors: {
+          theme: {
+            base: {
+              white: "#ffffff",
+              primary: "#3699FF",
+              secondary: "#E5EAEE",
+              success: "#1BC5BD",
+              info: "#8950FC",
+              warning: "#FFA800",
+              danger: "#F64E60",
+              light: "#E4E6EF",
+              dark: "#181C32",
+            },
+            light: {
+              white: "#ffffff",
+              primary: "#E1F0FF",
+              secondary: "#EBEDF3",
+              success: "#C9F7F5",
+              info: "#EEE5FF",
+              warning: "#FFF4DE",
+              danger: "#FFE2E5",
+              light: "#F3F6F9",
+              dark: "#D6D6E0",
+            },
+            inverse: {
+              white: "#ffffff",
+              primary: "#ffffff",
+              secondary: "#3F4254",
+              success: "#ffffff",
+              info: "#ffffff",
+              warning: "#ffffff",
+              danger: "#ffffff",
+              light: "#464E5F",
+              dark: "#ffffff",
+            },
+          },
+          gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+          },
+        },
+        "font-family": "Poppins",
+      };
+    </script>
+			<!--end::Global Config-->
+			<!--begin::Global Theme Bundle(used by all pages)-->
+			<script src="assets/plugins/global/plugins.bundle.js"></script>
+			<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+			<script src="assets/js/scripts.bundle.js"></script>
+			<!--end::Global Theme Bundle-->
+			@js
+			<!--end::Page Scripts-->
+		</body>
+		<!--end::Body-->
+	</html>
+}
--- a/views/layout/canvas_layout_templ.go
+++ b/views/layout/canvas_layout_templ.go
@@ -0,0 +1,72 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package layout
+
+//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 CanvasLayout(title string, 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_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("<!doctype html><!--\r\n\t\tTemplate Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme\r\n\t\tAuthor: KeenThemes\r\n\t\tWebsite: http://www.keenthemes.com/\r\n\t\tContact: support@keenthemes.com\r\n\t\tFollow: www.twitter.com/keenthemes\r\n\t\tDribbble: www.dribbble.com/keenthemes\r\n\t\tLike: www.facebook.com/keenthemes\r\n\t\tPurchase: https://1.envato.market/EA4JP\r\n\t\tRenew Support: https://1.envato.market/EA4JP\r\n\t\tLicense: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.\r\n\t\t--><html lang=\"en\"><!--begin::Head--><head><base href=\"../\"><meta charset=\"utf-8\"><title>Company Portal | ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\layout\canvas_layout.templ`, Line: 22, Col: 34}
+		}
+		_, 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("</title><meta name=\"description\" content=\"Company Portal\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><!--begin::Fonts--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700\"><!--end::Fonts--><!--begin::Page Custom Styles(used by this page)--><link href=\"assets/css/pages/login/login-1.css\" rel=\"stylesheet\" type=\"text/css\"><!--end::Page Custom Styles--><!--begin::Global Theme Styles(used by all pages)--><link href=\"assets/plugins/global/plugins.bundle.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/plugins/custom/prismjs/prismjs.bundle.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/style.bundle.css\" rel=\"stylesheet\" type=\"text/css\"><!--end::Global Theme Styles--><!--begin::Layout Themes(used by all pages)--><link href=\"assets/css/themes/layout/header/base/light.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/themes/layout/header/menu/light.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/themes/layout/brand/dark.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/themes/layout/aside/dark.css\" rel=\"stylesheet\" type=\"text/css\"><!--end::Layout Themes--><link rel=\"shortcut icon\" href=\"asset-corporate-portal/media/logo/logo-small.jpg\"><!--end::Layout Themes SAS--><link href=\"asset-corporate-portal/css/sas.bundle.css\" rel=\"stylesheet\" type=\"text/css\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = css.Render(ctx, templ_7745c5c3_Buffer)
+		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-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = js.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Page Scripts--></body><!--end::Body--></html>")
+		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/layout/playground_layout.templ
+++ b/views/layout/playground_layout.templ
@@ -0,0 +1,174 @@
+package layout
+
+// LAYOUT PLAYGROUND
+templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
+	<!DOCTYPE html>
+	<!--
+		Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
+		Author: KeenThemes
+		Website: http://www.keenthemes.com/
+		Contact: support@keenthemes.com
+		Follow: www.twitter.com/keenthemes
+		Dribbble: www.dribbble.com/keenthemes
+		Like: www.facebook.com/keenthemes
+		Purchase: https://1.envato.market/EA4JP
+		Renew Support: https://1.envato.market/EA4JP
+		License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+		-->
+	<html lang="en">
+		<!--begin::Head-->
+		<head>
+			<base href="../"/>
+			<meta charset="utf-8"/>
+			<title>Company Portal | { title }</title>
+			<meta name="description" content="Company Portal"/>
+			<meta
+				name="viewport"
+				content="width=device-width, initial-scale=1, shrink-to-fit=no"
+			/>
+			<!--begin::Fonts-->
+			<link
+				rel="stylesheet"
+				href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+			/>
+			<!--end::Fonts-->
+			<!--begin::Page Custom Styles(used by this page)-->
+			<link
+				href="assets/css/pages/login/login-1.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<!--end::Page Custom Styles-->
+			<!--begin::Global Theme Styles(used by all pages)-->
+			<link
+				href="assets/plugins/global/plugins.bundle.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/plugins/custom/prismjs/prismjs.bundle.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
+			<!--end::Global Theme Styles-->
+			<!--begin::Layout Themes(used by all pages)-->
+			<link
+				href="assets/css/themes/layout/header/base/light.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/css/themes/layout/header/menu/light.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/css/themes/layout/brand/dark.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<link
+				href="assets/css/themes/layout/aside/dark.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			<!--end::Layout Themes-->
+			<link
+				rel="shortcut icon"
+				href="asset-corporate-portal/media/logo/logo-small.jpg"
+			/>
+			<!--end::Layout Themes SAS-->
+			<link
+				href="asset-corporate-portal/css/sas.bundle.css"
+				rel="stylesheet"
+				type="text/css"
+			/>
+			@css
+		</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-->
+			{ children... }
+			<!--end::Main-->
+			<script>
+      var HOST_URL =
+        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
+    </script>
+			<!--begin::Global Config(global config for global JS scripts)-->
+			<script>
+      var KTAppSettings = {
+        breakpoints: {
+          sm: 576,
+          md: 768,
+          lg: 992,
+          xl: 1200,
+          xxl: 1400,
+        },
+        colors: {
+          theme: {
+            base: {
+              white: "#ffffff",
+              primary: "#3699FF",
+              secondary: "#E5EAEE",
+              success: "#1BC5BD",
+              info: "#8950FC",
+              warning: "#FFA800",
+              danger: "#F64E60",
+              light: "#E4E6EF",
+              dark: "#181C32",
+            },
+            light: {
+              white: "#ffffff",
+              primary: "#E1F0FF",
+              secondary: "#EBEDF3",
+              success: "#C9F7F5",
+              info: "#EEE5FF",
+              warning: "#FFF4DE",
+              danger: "#FFE2E5",
+              light: "#F3F6F9",
+              dark: "#D6D6E0",
+            },
+            inverse: {
+              white: "#ffffff",
+              primary: "#ffffff",
+              secondary: "#3F4254",
+              success: "#ffffff",
+              info: "#ffffff",
+              warning: "#ffffff",
+              danger: "#ffffff",
+              light: "#464E5F",
+              dark: "#ffffff",
+            },
+          },
+          gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+          },
+        },
+        "font-family": "Poppins",
+      };
+    </script>
+			<!--end::Global Config-->
+			<!--begin::Global Theme Bundle(used by all pages)-->
+			<script src="assets/plugins/global/plugins.bundle.js"></script>
+			<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+			<script src="assets/js/scripts.bundle.js"></script>
+			<!--end::Global Theme Bundle-->
+			@js
+			<!--end::Page Scripts-->
+		</body>
+		<!--end::Body-->
+	</html>
+}
--- a/views/layout/playground_layout_templ.go
+++ b/views/layout/playground_layout_templ.go
@@ -0,0 +1,73 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package layout
+
+//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"
+
+// LAYOUT PLAYGROUND
+func PlaygroundLayout(title string, 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_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("<!doctype html><!--\r\n\t\tTemplate Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme\r\n\t\tAuthor: KeenThemes\r\n\t\tWebsite: http://www.keenthemes.com/\r\n\t\tContact: support@keenthemes.com\r\n\t\tFollow: www.twitter.com/keenthemes\r\n\t\tDribbble: www.dribbble.com/keenthemes\r\n\t\tLike: www.facebook.com/keenthemes\r\n\t\tPurchase: https://1.envato.market/EA4JP\r\n\t\tRenew Support: https://1.envato.market/EA4JP\r\n\t\tLicense: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.\r\n\t\t--><html lang=\"en\"><!--begin::Head--><head><base href=\"../\"><meta charset=\"utf-8\"><title>Company Portal | ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\layout\playground_layout.templ`, Line: 23, Col: 34}
+		}
+		_, 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("</title><meta name=\"description\" content=\"Company Portal\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><!--begin::Fonts--><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700\"><!--end::Fonts--><!--begin::Page Custom Styles(used by this page)--><link href=\"assets/css/pages/login/login-1.css\" rel=\"stylesheet\" type=\"text/css\"><!--end::Page Custom Styles--><!--begin::Global Theme Styles(used by all pages)--><link href=\"assets/plugins/global/plugins.bundle.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/plugins/custom/prismjs/prismjs.bundle.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/style.bundle.css\" rel=\"stylesheet\" type=\"text/css\"><!--end::Global Theme Styles--><!--begin::Layout Themes(used by all pages)--><link href=\"assets/css/themes/layout/header/base/light.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/themes/layout/header/menu/light.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/themes/layout/brand/dark.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"assets/css/themes/layout/aside/dark.css\" rel=\"stylesheet\" type=\"text/css\"><!--end::Layout Themes--><link rel=\"shortcut icon\" href=\"asset-corporate-portal/media/logo/logo-small.jpg\"><!--end::Layout Themes SAS--><link href=\"asset-corporate-portal/css/sas.bundle.css\" rel=\"stylesheet\" type=\"text/css\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = css.Render(ctx, templ_7745c5c3_Buffer)
+		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-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = js.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Page Scripts--></body><!--end::Body--></html>")
+		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/user/details_templ.go
+++ b/views/user/details_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.

-// templ: version: 0.2.476
+// templ: version: v0.2.663
 package user

 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -33,7 +33,11 @@ func Details(tz string, user services.User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var2 string = fmt.Sprintf("User details %s", user.Username)
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("User details %s", user.Username))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\details.templ`, Line: 11, Col: 49}
+		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -42,57 +46,42 @@ func Details(tz string, user services.User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var3 string = user.Username
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\details.templ`, Line: 16, Col: 19}
+		}
 		_, 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("</h1><ul class=\"flex flex-col gap-2 list-disc marker:text-secondary text-sm text-secondary font-semibold\"><li>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><ul class=\"flex flex-col gap-2 list-disc marker:text-secondary text-sm text-secondary font-semibold\"><li>Email:&nbsp;&nbsp;\r <span class=\"text-neutral-content font-light\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var4 := `Email:&nbsp;&nbsp;`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(user.Email)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\details.templ`, Line: 22, Col: 18}
+		}
+		_, 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(" <span class=\"text-neutral-content font-light\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></li><li>Created At:&nbsp;&nbsp;\r <span class=\"text-neutral-content font-light\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var5 string = user.Email
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(services.ConverDateTime(tz, user.CreatedAt))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\details.templ`, Line: 28, Col: 51}
+		}
 		_, 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("</span></li><li>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var6 := `Created At:&nbsp;&nbsp;`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <span class=\"text-neutral-content font-light\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var7 string = services.ConverDateTime(tz, user.CreatedAt)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></li></ul><div class=\"divider divider-secondary -m-4\"></div><div class=\"card-actions justify-end\"><a hx-swap=\"transition:true\" class=\"block w-fit h-fit badge badge-outline hover:scale-[1.03] ease-in duration-300\" href=\"/user\"><p class=\"m-1\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var8 := `&larr; Back to User List`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></a></div></div></section>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></li></ul><div class=\"divider divider-secondary -m-4\"></div><div class=\"card-actions justify-end\"><a hx-swap=\"transition:true\" class=\"block w-fit h-fit badge badge-outline hover:scale-[1.03] ease-in duration-300\" href=\"/user\"><p class=\"m-1\">&larr; Back to User List\r</p></a></div></div></section>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -111,12 +100,12 @@ func DetailsIndex(title string, cmp templ.Component) templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var9 == nil {
-			templ_7745c5c3_Var9 = templ.NopComponent
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var10 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var7 := 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()
@@ -131,7 +120,7 @@ func DetailsIndex(title string, cmp templ.Component) templ.Component {
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = layout.Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var10), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var7), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/user/show_templ.go
+++ b/views/user/show_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.

-// templ: version: 0.2.476
+// templ: version: v0.2.663
 package user

 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -31,52 +31,7 @@ func Show(users []services.User) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h1 class=\"text-3xl text-center font-bold\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var2 := `Users List`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><section class=\"overflow-auto max-w-2xl max-h-96 mx-auto mt-12 bg-slate-600 rounded-lg shadow-xl\"><table class=\"table table-zebra\"><!--")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var3 := ` head `
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("--><thead class=\"bg-slate-700\"><tr><th></th><th>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var4 := `Username`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th class=\"text-center\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var5 := `Email`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><!--")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var6 := ` <th class="text-center">Created At</th> `
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("--></tr></thead> ")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h1 class=\"text-3xl text-center font-bold\">Users List\r</h1><section class=\"overflow-auto max-w-2xl max-h-96 mx-auto mt-12 bg-slate-600 rounded-lg shadow-xl\"><table class=\"table table-zebra\"><!-- head --><thead class=\"bg-slate-700\"><tr><th></th><th>Username</th><th class=\"text-center\">Email</th><!-- <th class=\"text-center\">Created At</th> --></tr></thead> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -90,8 +45,12 @@ func Show(users []services.User) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var7 string = strconv.Itoa(int(user.ID))
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(user.ID)))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\show.templ`, Line: 30, Col: 39}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -99,11 +58,11 @@ func Show(users []services.User) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var8 templ.SafeURL = templ.URL(
+				var templ_7745c5c3_Var3 templ.SafeURL = templ.URL(
 					fmt.Sprintf(
 						"/user/details/%d", user.ID,
 					))
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var3)))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -111,8 +70,12 @@ func Show(users []services.User) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var9 string = user.Username
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\show.templ`, Line: 41, Col: 24}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -120,23 +83,16 @@ func Show(users []services.User) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var10 string = user.Email
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(user.Email)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\user\show.templ`, Line: 49, Col: 23}
+				}
+				_, 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("</td><!--")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Var11 := ` <td class="flex justify-center gap-2">
-								Created At
-							</td> `
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("--></tr>")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><!-- <td class=\"flex justify-center gap-2\">\r\n\t\t\t\t\t\t\t\tCreated At\r\n\t\t\t\t\t\t\t</td> --></tr>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -146,16 +102,7 @@ func Show(users []services.User) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tbody><tr><td colspan=\"4\" align=\"center\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Var12 := `There are no users to show yet`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td></tr></tbody>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tbody><tr><td colspan=\"4\" align=\"center\">There are no users to show yet\r</td></tr></tbody>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -179,12 +126,12 @@ func ShowIndex(title string, cmp templ.Component) templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var14 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var7 := 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()
@@ -199,7 +146,7 @@ func ShowIndex(title string, cmp templ.Component) templ.Component {
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = layout.Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var14), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var7), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/xsample/xsample.templ
+++ b/views/xsample/xsample.templ
@@ -0,0 +1,21 @@
+package xsample
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+templ HelloWorld(title string) {
+	<div>{ title }</div>
+}
+
+templ CssHelo() {
+}
+
+templ JsHelo() {
+}
+
+templ ShowHelo(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}
--- a/views/xsample/xsample_templ.go
+++ b/views/xsample/xsample_templ.go
@@ -0,0 +1,131 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package xsample
+
+//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 (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+func HelloWorld(title 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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\xsample\xsample.templ`, Line: 8, Col: 13}
+		}
+		_, 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("</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 CssHelo() 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 JsHelo() 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)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowHelo(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
+	})
+}
Author	SHA1	Message	Date
Sas Andy	da95e5b89f	Custom css SAS & layout playground	2024-04-25 16:56:20 +07:00
Sas Andy	34be7a29a1	init route	2024-04-23 14:52:16 +07:00
Sas Andy	b00c52ce42	Merge branch 'andy/layout/canvas'	2024-04-23 14:28:51 +07:00
Sas Andy	a35e8e69d3	canvas layout	2024-04-23 14:28:12 +07:00
Sas Andy	30c18bb14b	Merge branch 'main' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo	2024-04-23 13:33:25 +07:00
Sas Andy	3ca74edcea	foldering asset media	2024-04-23 13:33:23 +07:00