create-nexgen 1.0.4

package/template/src/resources/src/helpers/utils.ts

@@ -0,0 +1,68 @@
+import axios from "axios";
+
+declare const route: (name: string, params?: Record<string, unknown>) => string;
+
+export function inArray<T>(needle: T, haystack: T[], strict = false): boolean {
+  if (!Array.isArray(haystack)) {
+    throw new TypeError("haystack must be an array");
+  }
+
+  if (strict) {
+    return haystack.includes(needle);
+  }
+
+  for (const value of haystack) {
+    if (value == needle) {
+      return true;
+    }
+
+    if (
+      typeof value === "number" &&
+      typeof needle === "number" &&
+      Number.isNaN(value) &&
+      Number.isNaN(needle)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function empty(v: unknown): boolean {
+  if (v == null) return true;
+  if (typeof v === "boolean") return v === false;
+  if (typeof v === "number") return v === 0 || Number.isNaN(v);
+  if (typeof v === "bigint") return v === 0n;
+  if (typeof v === "string") return v === "" || v === "0";
+  if (Array.isArray(v)) return v.length === 0;
+  if (v instanceof Map || v instanceof Set) return v.size === 0;
+  if (typeof v === "object") return Object.keys(v).length === 0;
+
+  return false;
+}
+
+export async function downloadFile(url: string, fileName: string): Promise<void> {
+  try {
+    const isDirectUrl =
+      url.startsWith("/") || url.startsWith("http://") || url.startsWith("https://");
+    const targetUrl = isDirectUrl ? url : route(url, { file_name: fileName });
+    const res = await axios.get(targetUrl, { responseType: "blob" });
+    if (res.data) {
+      const objectUrl = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = objectUrl;
+      link.setAttribute("download", fileName);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(objectUrl);
+    }
+  } catch (e) {
+    console.error("Export failed:", e);
+  }
+}
+
+export async function downloadExcel(url: string, fileName: string): Promise<void> {
+  await downloadFile(url, fileName);
+}

package/template/src/resources/src/layouts/AuthLayout.vue

@@ -0,0 +1,20 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from "vue";
+import { useAdminUiStore } from "@/stores/admin-ui";
+
+const ui = useAdminUiStore();
+
+onMounted(() => {
+  ui.initTheme();
+});
+
+onBeforeUnmount(() => {
+  ui.cleanupTheme();
+});
+</script>
+
+<style scoped></style>

package/template/src/resources/src/layouts/Layout/Footer.vue

@@ -0,0 +1,23 @@
+<template>
+  <!-- footer start -->
+  <footer
+    class="d-flex flex-column flex-sm-row row-gap-2 align-items-center justify-content-center justify-content-sm-between py-3 fst-italic">
+    <div class="text-secondary">
+      © nexgen {{ startYear }} - {{ currentYear }} ❤️ created by
+      <a href="#" target="_blank" class="text-decoration-none">niYam</a>
+    </div>
+    <div class="d-block">
+      <a href="#" target="_blank" class="text-decoration-none me-2">About</a>
+      <a href="#" target="_blank" class="text-decoration-none me-2">Support</a>
+      <a href="#" target="_blank" class="text-decoration-none me-2">Contact Us</a>
+    </div>
+  </footer>
+  <!-- footer end -->
+</template>
+
+<script setup lang="ts">
+const startYear: number = 2026;
+const currentYear: number = new Date().getFullYear();
+</script>
+
+<style scoped></style>

package/template/src/resources/src/layouts/Layout/Header.vue

@@ -0,0 +1,90 @@
+<template>
+  <header :class="{ scrolled: isScrolled }">
+    <nav class="navbar bg-transparent p-0">
+      <div class="container-fluid p-0 row-gap-2 column-gap-1">
+        <button
+          id="off-canvas"
+          type="button"
+          class="nav-btn order-0"
+          title="Toggle Button"
+          @click="props.onToggleSidebar">
+          <i class="bi bi-layout-text-sidebar-reverse"></i>
+        </button>
+        <div id="pagebar" class="card card-body nav-card order-5 order-sm-1"></div>
+        <!-- <button id="refresh" type="button" class="nav-btn order-3 order-sm-2" aria-label="button">
+          <i class="bi bi-arrow-repeat"></i>
+        </button> -->
+        <div class="btn-group order-4 order-sm-3">
+          <button
+            type="button"
+            class="nav-btn w-100"
+            data-bs-toggle="dropdown"
+            data-bs-display="static"
+            aria-expanded="false"
+            aria-label="button">
+            <i class="bi bi-person-circle"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <a class="dropdown-item" href="#">
+                <div class="d-flex align-items-center">
+                  <div class="flex-shrink-0 me-3">
+                    <i class="bi bi-person-circle fs-1"></i>
+                  </div>
+                  <div class="flex-grow-1 text-capitalize">
+                    <h6 class="mb-0">{{ authUser?.name }}</h6>
+                    <small class="text-muted">{{ authUser.role?.name }}</small>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+              <div class="dropdown-divider my-1"></div>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#">
+                <i class="bi bi-person-check me-3"></i><span>My Profile</span>
+              </a>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item" @click="props.onLogout">
+                <i class="bi bi-power me-3"></i><span>Log Out</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <button
+          id="theme-switch"
+          type="button"
+          class="nav-btn order-1 order-sm-4"
+          aria-label="button"
+          @click="props.onToggleTheme">
+          <i :class="themeIconClass"></i>
+        </button>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { authUser } from "@/composables/useAuth";
+
+interface HeaderProps {
+  isScrolled: boolean;
+  themeMode: "light" | "dark" | "auto";
+  onLogout: () => void | Promise<void>;
+  onToggleSidebar: () => void;
+  onToggleTheme: () => void;
+}
+
+const props = defineProps<HeaderProps>();
+
+const themeIconClass = computed(() => {
+  if (props.themeMode === "light") return "bi bi-brightness-high-fill";
+  if (props.themeMode === "dark") return "bi bi-moon-stars";
+  return "bi bi-circle-half";
+});
+</script>
+
+<style lang="scss" scoped></style>

package/template/src/resources/src/layouts/Layout/Sidebar.vue

@@ -0,0 +1,137 @@
+<template>
+  <!-- sidebar start -->
+  <div class="sidebar">
+    <a
+      href="#"
+      role="button"
+      class="sidebar-toggle card card-body rounded-circle position-absolute top-0 end-0 d-xl-none"
+      title="sidebar-toggle"
+      @click.prevent="props.onToggleSidebar">
+      <i class="bi bi-chevron-left fw-bold"></i>
+    </a>
+
+    <div class="app-brand">
+      <a href="#" class="fw-semibold fs-2" aria-label="logo">
+        <h2 class="m-0 fw-semibold">NEXGEN</h2>
+      </a>
+    </div>
+    <div id="accordion-sidebar" class="accordion accordion-flush">
+      <ul class="list-group px-3">
+        <li class="list-group-item" :class="{ active: isActive('/') }">
+          <router-link to="/">
+            <div class="menu-icon">
+              <i class="bi bi-house"></i>
+            </div>
+            <span>Dashboard</span>
+          </router-link>
+        </li>
+        <li class="split-label">
+          <span class="text-uppercase">setup</span>
+        </li>
+        <li class="list-group-item accordion-item">
+          <a
+            href="#"
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#flush-collapseOne"
+            aria-expanded="false"
+            aria-controls="flush-collapseOne">
+            <div class="menu-icon">
+              <i class="bi bi-shield-check"></i>
+            </div>
+            <span>Content</span>
+          </a>
+          <ul
+            id="flush-collapseOne"
+            class="list-group accordion-collapse collapse"
+            data-bs-parent="#accordion-sidebar">
+            <li class="list-group-item">
+              <a href="#">Posts</a>
+            </li>
+            <li class="list-group-item">
+              <a href="#">Pages</a>
+            </li>
+            <li class="list-group-item accordion-item">
+              <a
+                href="#"
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#flush-collapseTwo"
+                aria-expanded="false"
+                aria-controls="flush-collapseTwo">
+                <span>Media</span>
+              </a>
+              <ul id="flush-collapseTwo" class="list-group accordion-collapse collapse">
+                <li class="list-group-item">
+                  <a href="#">Image</a>
+                </li>
+                <li class="list-group-item active">
+                  <a href="#">Audio</a>
+                </li>
+                <li class="list-group-item accordion-item">
+                  <a
+                    href="#"
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseThree"
+                    aria-expanded="false"
+                    aria-controls="flush-collapseThree">
+                    <span>Settings</span>
+                  </a>
+                  <ul id="flush-collapseThree" class="list-group accordion-collapse collapse">
+                    <li class="list-group-item">
+                      <a href="#">Users</a>
+                    </li>
+                    <li class="list-group-item">
+                      <a href="#">Roles</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="list-group-item">
+          <a href="#">
+            <div class="menu-icon">
+              <i class="bi bi-chat"></i>
+            </div>
+            <span>Comments</span>
+          </a>
+        </li>
+        <li class="list-group-item">
+          <a href="#">
+            <div class="menu-icon">
+              <i class="bi bi-gear"></i>
+            </div>
+            <span>Tools</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- sidebar end -->
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useAdminUiStore } from "@/stores/admin-ui";
+
+const props = defineProps<{ onToggleSidebar: () => void; }>();
+
+const ui = useAdminUiStore();
+const route = useRoute();
+
+function isActive(path: string) {
+  return route.path === path;
+}
+
+onMounted(() => ui.initSidebarCollapsePersistence());
+onBeforeUnmount(() => ui.cleanupSidebarCollapsePersistence());
+</script>
+
+<style lang="scss" scoped></style>

package/template/src/resources/src/layouts/Layout/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <Sidebar :class="{ tgl: sidebarOpen }" :on-toggle-sidebar="ui.toggleSidebar" />
+  <!-- main start -->
+  <div class="main" :class="{ tgl: sidebarOpen, 'no-transition': disableTransition }">
+    <div class="content-wrapper container-xxl px-0">
+      <Header
+        :is-scrolled="headerScrolled"
+        :theme-mode="themeMode"
+        :on-logout="logout"
+        :on-toggle-sidebar="ui.toggleSidebar"
+        :on-toggle-theme="ui.cycleTheme" />
+      <!-- content start -->
+      <div class="content">
+        <router-view />
+      </div>
+      <!-- content end -->
+      <Footer />
+    </div>
+  </div>
+  <!-- main end -->
+  <div class="backdrop" :class="{ 'off-canvas': sidebarOpen }" @click="ui.toggleSidebar"></div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import Footer from "./Footer.vue";
+import Header from "./Header.vue";
+import Sidebar from "./Sidebar.vue";
+import { storeToRefs } from "pinia";
+import { useAdminUiStore } from "@/stores/admin-ui";
+import { useAuthStore } from "@/stores/auth";
+
+const ui = useAdminUiStore();
+const auth = useAuthStore();
+const router = useRouter();
+const { themeMode, sidebarOpen } = storeToRefs(ui);
+const headerScrolled = ref(false);
+const disableTransition = ref(true);
+
+async function logout() {
+  await auth.logout();
+  await router.push("/login");
+}
+
+function onScroll() {
+  const y = window.scrollY;
+  if (y > 20) {
+    headerScrolled.value = true;
+  } else if (y < 5) {
+    headerScrolled.value = false;
+  }
+}
+
+onMounted(() => {
+  ui.initTheme();
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+
+  // Force reflow then enable transitions on next frame
+  void document.body.offsetHeight;
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      disableTransition.value = false;
+    });
+  });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", onScroll);
+  ui.cleanupTheme();
+});
+</script>
+
+<style scoped></style>

package/template/src/resources/src/main.ts

@@ -0,0 +1,27 @@
+import "@/plugins/axios";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import { createHead } from "@vueuse/head";
+import { DialogPlugin } from "@/plugins/dialog";
+import { PulsePlugin } from "@/plugins/pulse";
+import { GumPlugin } from "@/plugins/gum";
+
+import App from "./App.vue";
+import router from "./router";
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "@/assets/scss/custom.scss";
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+
+const app = createApp(App);
+const pinia = createPinia();
+const head = createHead({ titleTemplate: (title) => (title ? `${title} | Nexgen` : "Nexgen") });
+
+app.use(pinia);
+app.use(router);
+app.use(head);
+app.use(DialogPlugin);
+app.use(GumPlugin);
+app.use(PulsePlugin);
+app.mount("#app");

package/template/src/resources/src/pages/auth/forgetPassword.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="container position-absolute start-50 top-50 translate-middle">
+    <div class="auth col-12 col-sm-9 col-md-7 col-lg-5 col-xl-4 mx-auto py-5">
+      <div class="card card-body border-0">
+        <div class="d-block mb-2">
+          <h3 class="m-0 text-uppercase text-center fw-semibold">nexgen</h3>
+        </div>
+        <h4 class="text-center">Forget Password</h4>
+        <p
+          v-if="message"
+          class="text-center alert py-1 mt-2"
+          :class="isError ? 'alert-danger text-danger' : 'alert-success text-success'">
+          {{ message }}
+        </p>
+        <form id="formAuthentication" @submit.prevent="onSubmit">
+          <div class="mb-4">
+            <Input
+              id="email"
+              v-model="form.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="false"
+              focus
+              must />
+          </div>
+          <Button
+            type="submit"
+            label="Send Reset Link"
+            class="btn btn-primary d-grid w-100"
+            icon="bi bi-send ms-2"
+            :disabled="auth.processing" />
+        </form>
+        <div class="text-center mt-2">
+          <router-link to="/login">
+            <i class="bx bx-chevron-left scaleX-n1-rtl me-1"></i>
+            <span>Back to login</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useHead } from "@vueuse/head";
+import Input from "../../components/Input.vue";
+import Button from "../../components/Button.vue";
+import { useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Forget Password" });
+
+const auth = useAuthStore();
+
+interface ForgotPasswordForm {
+  email: string;
+}
+
+const form = reactive<ForgotPasswordForm>({ email: "" });
+const message = ref("");
+const isError = ref(false);
+
+const onSubmit = async () => {
+  message.value = "";
+  isError.value = false;
+  try {
+    message.value = await auth.forgotPassword({ email: form.email.trim() });
+  } catch (error: unknown) {
+    isError.value = true;
+    message.value = error instanceof Error ? error.message : "Failed to process request";
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/template/src/resources/src/pages/auth/login.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container position-absolute start-50 top-50 translate-middle">
+    <div class="auth col-12 col-sm-9 col-md-7 col-lg-5 col-xl-4 mx-auto py-5">
+      <div class="card card-body border-0">
+        <div class="d-block mb-2">
+          <h3 class="m-0 text-uppercase text-center fw-semibold">nexgen</h3>
+        </div>
+        <p v-if="errorMessage" class="text-center alert alert-danger text-danger py-1 mt-2">
+          {{ errorMessage }}
+        </p>
+        <form @submit.prevent="onSubmit">
+          <div class="mb-4">
+            <Input
+              id="email"
+              v-model="form.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="false"
+              focus
+              must />
+          </div>
+          <div class="mb-4">
+            <input-password-toggle
+              id="password"
+              v-model="form.password"
+              label="password"
+              placeholder="Enter your password..."
+              :err="false"
+              must />
+          </div>
+          <div class="mb-4 d-flex align-items-center justify-content-between">
+            <Checkbox id="remember-me" v-model="form.remember" label="Remember me" />
+            <router-link to="/forget-password" class="text-decoration-none mb-1">Forget Password?</router-link>
+          </div>
+          <button type="submit" class="btn btn-primary w-100" :disabled="auth.processing">
+            <span>Login</span>
+            <i class="bi bi-box-arrow-in-right ms-2"></i>
+          </button>
+          <div class="text-center mt-3">
+            <span class="text-muted">Don't have an account?</span>
+            <router-link to="/register" class="ms-1 text-decoration-none">Register</router-link>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { useAuthStore } from "@/stores/auth";
+
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import Checkbox from "@/components/Checkbox.vue";
+
+useHead({ title: "Login" });
+
+const router = useRouter();
+const auth = useAuthStore();
+const errorMessage = ref("");
+
+interface LoginForm {
+  email: string;
+  password: string;
+  remember: boolean;
+}
+
+const form = reactive<LoginForm>({
+  email: "",
+  password: "",
+  remember: false
+});
+
+const onSubmit = async () => {
+  errorMessage.value = "";
+  try {
+    await auth.login({
+      email: form.email.trim(),
+      password: form.password,
+      remember: form.remember
+    });
+    await router.push("/");
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : "Unable to login right now";
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>