create-nexwire 4.3.0 → 4.4.0

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

@@ -0,0 +1,75 @@
+import axios from "axios";
+import { DateTime } from "luxon";
+
+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);
+}
+
+export function formatTaxPeriod(value: string): string {
+  if (!value) return "";
+  const date = DateTime.fromFormat(value, "yyyy-MM");
+  return date.isValid ? date.toFormat("MMM yyyy") : value;
+}
+
+export function formatDate(value: string | null): string {
+  if (!value) return "";
+  const date = DateTime.fromISO(value);
+  return date.isValid ? date.toFormat("dd MMM yyyy") : value;
+}

package/fastify/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/fastify/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">
+      © nexwire {{ 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/fastify/src/resources/src/layouts/Layout/Header.vue

@@ -0,0 +1,124 @@
+<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-2"></div>
+        <template v-for="btn in featureButtons" :key="btn.id">
+          <button
+            v-if="!btn.render"
+            type="button"
+            class="nav-btn order-3 order-sm-3"
+            :class="btn.class"
+            :title="btn.title || undefined"
+            :aria-label="btn.label || 'button'"
+            v-bind="btn.attrs"
+            @click="btn.onClick"
+          >
+            <i v-if="btn.icon" :class="btn.icon"></i>
+            <span v-if="btn.label" class="ms-1">{{ btn.label }}</span>
+          </button>
+          <template v-else>
+            <component :is="featureComponent(btn)" />
+          </template>
+        </template>
+        <div class="btn-group order-4 order-sm-4">
+          <button
+            type="button"
+            class="nav-btn w-100"
+            title="user"
+            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>
+              <router-link class="dropdown-item" to="#">
+                <i class="bi bi-person-check me-3"></i><span>My Profile</span>
+              </router-link>
+            </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"
+          title="theme"
+          class="nav-btn order-1 order-sm-5"
+          aria-label="button"
+          @click="props.onToggleTheme"
+        >
+          <i :class="themeIconClass"></i>
+        </button>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, h, inject } from "vue";
+import { authUser } from "@/composables/useAuth";
+
+interface ButtonEntry {
+  id: symbol;
+  icon?: string;
+  label: string;
+  title: string;
+  attrs?: Record<string, string>;
+  class?: any;
+  onClick: () => void;
+  render?: () => any[];
+}
+
+const featureButtons = inject<ButtonEntry[]>("featureButtons")!;
+
+function featureComponent(btn: ButtonEntry) {
+  return {
+    name: "FeatureSlot",
+    render: () => h("div", { class: ["order-3 order-sm-4", btn.class] }, btn.render!())
+  };
+}
+
+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/fastify/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="#" aria-label="logo">
+        <img src="@/assets/images/logo.png" alt="nexwire" />
+      </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/fastify/src/resources/src/layouts/Layout/index.vue

@@ -0,0 +1,87 @@
+<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 { storeToRefs } from "pinia";
+import { onBeforeUnmount, onMounted, provide, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import Footer from "@/layouts/Layout/Footer.vue";
+import Header from "@/layouts/Layout/Header.vue";
+import Sidebar from "@/layouts/Layout/Sidebar.vue";
+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);
+const featureButtons = reactive<
+  Array<{
+    id: symbol;
+    icon?: string;
+    label: string;
+    title: string;
+    attrs?: Record<string, string>;
+    onClick: () => void;
+  }>
+>([]);
+provide("featureButtons", featureButtons);
+
+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/fastify/src/resources/src/main.ts

@@ -0,0 +1,28 @@
+import "@/plugins/axios";
+import { createHead } from "@unhead/vue/client";
+import { createPinia } from "pinia";
+import { createApp } from "vue";
+import { DialogPlugin } from "@/plugins/dialog";
+import { GumPlugin } from "@/plugins/gum";
+import { PulsePlugin } from "@/plugins/pulse";
+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({
+  init: [{ titleTemplate: (title) => (title ? `${title} | nexwire` : "nexwire") }],
+});
+
+app.use(pinia);
+app.use(router);
+app.use(head);
+app.use(DialogPlugin);
+app.use(GumPlugin);
+app.use(PulsePlugin);
+app.mount("#app");

package/fastify/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 text-center">
+          <img src="@/assets/images/logo.png" alt="nexwire" style="max-height: 60px;">
+        </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.data.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="form.errors.email"
+              focus
+              must
+            />
+          </div>
+          <Button type="submit" label="Send Reset Link" class="btn btn-primary w-100" icon="bi bi-send ms-2" :disabled="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 { useHead } from "@unhead/vue";
+import { ref } from "vue";
+import Button from "@/components/Button.vue";
+import Input from "@/components/Input.vue";
+import { useGum } from "@/plugins/gum";
+import { type ForgotPayload, useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Forget Password" });
+
+const auth = useAuthStore();
+const gum = useGum({ email: "" });
+const form = gum.form;
+const processing = form.processing;
+const message = ref("");
+const isError = ref(false);
+
+const onSubmit = async () => {
+  message.value = "";
+  isError.value = false;
+  await form.postWith({
+    fetcher: (body) => auth.forgotPassword(body as ForgotPayload),
+    transform: (data) => ({
+      email: String(data.email || "").trim()
+    }),
+    onSuccess: (res) => {
+      isError.value = false;
+      message.value = String(res.data || "If this email exists, a reset link has been sent");
+      form.reset();
+    },
+    onError: (_errors, error) => {
+      isError.value = true;
+      message.value = error instanceof Error ? error.message : "Failed to process request";
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,96 @@
+<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 text-center">
+          <img src="@/assets/images/logo.png" alt="nexwire" style="max-height: 60px;">
+        </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.data.email"
+              type="email"
+              label="email"
+              placeholder="Enter your email..."
+              :err="form.errors.email"
+              focus
+              must
+            />
+          </div>
+          <div class="mb-4">
+            <input-password-toggle
+              id="password"
+              v-model="form.data.password"
+              label="password"
+              placeholder="Enter your password..."
+              :err="form.errors.password"
+              must
+            />
+          </div>
+          <div class="mb-4 d-flex align-items-center justify-content-between">
+            <Checkbox id="remember-me" v-model="form.data.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" label="Login" icon="bi bi-box-arrow-in-right" :disabled="processing" />
+          <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 { useHead } from "@unhead/vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import Button from "@/components/Button.vue";
+import Checkbox from "@/components/Checkbox.vue";
+import Input from "@/components/Input.vue";
+import InputPasswordToggle from "@/components/InputPasswordToggle.vue";
+import { useGum } from "@/plugins/gum";
+import { type LoginPayload, useAuthStore } from "@/stores/auth";
+
+useHead({ title: "Login" });
+
+const router = useRouter();
+const auth = useAuthStore();
+const errorMessage = ref("");
+
+const gum = useGum({
+  email: "",
+  password: "",
+  remember: false
+});
+
+const form = gum.form;
+const processing = form.processing;
+
+const onSubmit = async () => {
+  errorMessage.value = "";
+  await form.postWith({
+    fetcher: (body) => auth.login(body as LoginPayload),
+    transform: (data) => ({
+      email: String(data.email || "").trim(),
+      password: data.password,
+      remember: !!data.remember
+    }),
+    onSuccess: async () => {
+      form.reset("password");
+      await router.push("/");
+    },
+    onError: (_errors, error) => {
+      errorMessage.value = error instanceof Error ? error.message : "Unable to login right now";
+      form.reset("password");
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>