create-nexwire 4.0.0

package/express/src/resources/src/components/datatable/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="card border">
+    <div class="card-header" :class="{ 'd-none': !(props.removable || props.searchable || props.optionable) }">
+      <div class="row align-items-center gx-1">
+        <div class="col-12 col-md-3">
+          <SelectOption :is-options="props.optionable" :option="props.option" :data="dataForOption"
+            :selectedoption="selectedoption" :search="searchdata" />
+        </div>
+        <div class="col-12 col-md-9">
+          <slot name="extra-tools"></slot>
+          <div class="d-flex align-items-center justify-content-center justify-content-md-end">
+            <div v-if="checked.checkcolumn.length > 0" class="me-1" :class="{ 'd-none': !props.removable }">
+              <Button type="button" class="btn btn-outline-danger" @click.prevent="remove">
+                <i class="bi bi-trash"></i>
+              </Button>
+            </div>
+            <div class="d-flex align-items-center" :class="{ 'd-none': !props.searchable }">
+              <Button class="btn btn-outline-secondary rounded-0 rounded-start" type="button" @click="searchMe">
+                <i class="bi bi-search"></i>
+              </Button>
+              <Input v-model="searchdata" type="text" class="w-auto rounded-0 rounded-end" topclass="mb-0"
+                placeholder="Search..." @keyup.enter="searchMe" @keyup.delete="searchMe" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <slot name="extra"></slot>
+      <div class="table-responsive">
+        <table
+          class="table table-bordered table-striped border-custom table-sm align-middle m-0 datatable no-shrink-table">
+          <slot name="customhead"></slot>
+          <thead :class="{ 'd-none': slots.customhead }">
+            <tr>
+              <th class="align-middle" :class="{ 'd-none': !props.removable || !props.data.current_page }">
+                <Checkbox v-model="checked.check" topclass="ms-2" :value="checked.check" :disabled="props.disabled"
+                  @click="checkAll" />
+              </th>
+              <th class="text-center align-middle" :class="{ 'd-none': !props.countable }">#</th>
+              <slot name="thead"></slot>
+            </tr>
+          </thead>
+
+          <slot name="custombody"></slot>
+          <tbody :class="{ 'd-none': slots.custombody }">
+            <tr v-for="(dt, i) in tableRows" :key="`${dt.id}-${i}`">
+              <td class="align-middle" :class="{ 'd-none': !props.removable || !props.data.current_page }">
+                <Checkbox v-model="checked.checkcolumn" topclass="ms-2" :value="dt.id" :disabled="props.disabled"
+                  @change="updateChecked" />
+              </td>
+              <td class="text-center align-middle" :class="{ 'd-none': !props.countable }">
+                {{
+                  props.data.current_page
+                    ? props.data.per_page * (props.data.current_page - 1) + (i + 1)
+                    : i + 1
+                }}
+              </td>
+              <slot name="tbody" :td="dt"></slot>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="card-footer" :class="{ 'd-none': props.data.total <= props.data.data?.length }">
+      <Pagination :data="props.data" :selectedoption="selectedoption" :search="searchdata" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from "lodash-es";
+import { computed, reactive, ref, useSlots, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+import Button from "@/components/Button.vue";
+import Checkbox from "@/components/Checkbox.vue";
+import Input from "@/components/Input.vue";
+import { useGum } from "@/plugins/gum";
+import Pagination from "./Pagination.vue";
+import SelectOption from "./SelectOpption.vue";
+
+interface DataRow {
+  id: string | number;
+  [key: string]: any;
+}
+
+interface DataPage {
+  path: string;
+  current_page: number;
+}
+
+interface DataTableProps {
+  data: any;
+  search?: string;
+  loop?: DataRow[] | false;
+  option?: Array<string | number>;
+  removable?: boolean;
+  countable?: boolean;
+  searchable?: boolean;
+  optionable?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<DataTableProps>(), {
+  search: "",
+  option: () => [],
+  removable: true,
+  countable: true,
+  searchable: true,
+  optionable: true,
+  disabled: false
+});
+const gum = useGum();
+const route = useRoute();
+
+const slots = useSlots();
+
+const emit = defineEmits<(event: "remove", value: Array<string | number>) => void>();
+
+// checkbox select
+let checked = reactive<{ check: boolean; checkcolumn: Array<string | number> }>({
+  check: false,
+  checkcolumn: []
+});
+const checkAll = () => {
+  if (!checked.check) {
+    props.data.data.forEach((dt: DataRow) => {
+      if (!checked.checkcolumn.includes(dt.id)) {
+        checked.checkcolumn.push(dt.id);
+      }
+    });
+  } else {
+    checked.checkcolumn = [];
+  }
+};
+const updateChecked = () => (checked.checkcolumn.length === props.data.data.length ? (checked.check = true) : (checked.check = false));
+
+// remove from parent
+const remove = () => {
+  emit("remove", checked.checkcolumn);
+  checked.check = false;
+};
+
+// for change data size show
+const selectedoption = ref<string | number | undefined>(undefined);
+const dataForOption = computed<DataPage>(() => ({
+  path: props.data.path,
+  current_page: props.data.current_page
+}));
+const tableRows = computed<DataRow[]>(() => (props.loop ? props.loop : props.data.data));
+
+// search data
+const searchdata = ref(props.search || "");
+const searchMe = debounce(() => {
+  const isSearching = !!searchdata.value && searchdata.value.trim() !== "";
+  gum.get(props.data.path, {
+    query: {
+      page: isSearching ? 1 : props.data.current_page,
+      size: selectedoption.value,
+      search: searchdata.value
+    },
+    routePath: route.path,
+    preserveState: true,
+    preserveScroll: true,
+    skipFetch: true
+  });
+}, 500);
+
+// watch instantce
+watchEffect(() => {
+  selectedoption.value = props.option.find((x) => Number(x) === Number(props.data.per_page));
+  searchdata.value = props.search || "";
+});
+</script>
+
+<style lang="scss" scoped>
+.border-custom {
+  border-color: #cccccc !important;
+}
+
+.no-shrink-table th,
+.no-shrink-table td {
+  white-space: nowrap;
+}
+
+/* By default (large screens and up) do not force a min-width:
+   allow table to size normally so no horizontal scrollbar on large screens */
+@media (min-width: 992px) {
+  .no-shrink-table {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .no-shrink-table {
+    min-width: 1000px;
+  }
+}
+</style>

package/express/src/resources/src/composables/useAuth.ts

@@ -0,0 +1,52 @@
+import { computed, type Ref, readonly, ref } from "vue";
+
+type UnknownRecord = Record<string, unknown>;
+
+export type RoleLike = {
+  id?: string | number;
+  name?: string;
+  title?: string;
+  slug?: string;
+} & UnknownRecord;
+
+export type AuthUser = UnknownRecord & {
+  id?: string | number;
+  name?: string;
+  role?: RoleLike | null;
+  roles?: RoleLike[] | null;
+};
+
+const userRef: Ref<AuthUser | null> = ref(null);
+
+export function setUser(user: AuthUser | null) {
+  userRef.value = user;
+}
+
+export function clearUser() {
+  userRef.value = null;
+}
+
+export function useAuth() {
+  return {
+    user: readonly(userRef),
+    isAuthenticated: computed(() => !!userRef.value),
+    setUser,
+    clearUser
+  };
+}
+
+export const authUser = computed<AuthUser>(() => userRef.value ?? {});
+
+export function hasRole(...wanted: string[]): boolean {
+  const subject = userRef.value;
+  if (!subject) return false;
+
+  const current = (subject.roles ?? (subject.role ? [subject.role] : []))
+    .map((item) => (item.name || item.title || item.slug || "").toLowerCase().trim())
+    .filter(Boolean);
+
+  if (!wanted.length) return current.length > 0;
+
+  const expected = wanted.map((item) => item.toLowerCase().trim()).filter(Boolean);
+  return current.some((item) => expected.includes(item));
+}

package/express/src/resources/src/helpers/nformatter.ts

@@ -0,0 +1,10 @@
+const compactFormatter = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1
+});
+
+export function formatCompactNumber(value: number): string | number {
+  if (!Number.isFinite(value)) return String(value);
+  if (Math.abs(value) < 1000) return value;
+  return compactFormatter.format(value).replace(/\s/g, "");
+}

package/express/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/express/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/express/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/express/src/resources/src/layouts/Layout/Header.vue

@@ -0,0 +1,105 @@
+<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="/profile">
+                <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/express/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>