create-nexwire 4.0.0

package/hono/src/resources/src/components/datatable/DataTableSkeleton.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="skeleton card border">
+    <div class="card-header border-bottom-0 pb-0 px-2 px-sm-3">
+      <div class="row align-items-center">
+        <div class="col-12 col-sm-6 col-lg-3 col-xl-3 mb-2 mb-lg-0 d-flex">
+          <div class="py-2 rounded-1 border bg-custom ps-3 me-2"></div>
+          <div class="form-control py-2 bg-custom"></div>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-5 mb-2 mb-lg-0">
+          <slot name="extra-option"></slot>
+        </div>
+        <div class="col-12 col-lg-5 col-xl-4">
+          <div class="row gx-1">
+            <div class="col-2 col-sm-4 col-md-6 col-lg-2 text-start text-lg-end">
+              <span class="form-control py-2 bg-custom"></span>
+            </div>
+            <div class="mb-2 mb-sm-0 text-start col-6 col-sm-6 col-md-4 col-lg-7">
+              <span class="form-control py-2 bg-custom"></span>
+            </div>
+            <div class="col-4 col-sm-2 col-md-2 col-lg-3 text-end">
+              <span class="bg-custom form-control py-2"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body py-3 px-2 px-sm-3">
+      <div class="table-responsive rounded-1">
+        <table class="table table-bordered table-striped table-sm align-middle m-0">
+          <thead>
+            <tr>
+              <th v-for="dt in colCount" :key="`h-${dt}`" class="bg-custom py-2"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="r in rowCount" :key="`r-${r}`">
+              <td v-for="c in colCount" :key="`c-${r}-${c}`" class="bg-custom py-2"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="card-footer border-top-0 pt-0 px-2 px-sm-3">
+      <div class="row align-items-center">
+        <div class="col-12 col-md-5 mb-2 mb-md-0"></div>
+        <div class="col-12 col-md-7 text-center text-md-end">
+          <span class="form-control bg-custom py-2"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const $attrs = useAttrs();
+const colCount = computed(() => Number($attrs.col ?? 1));
+const rowCount = computed(() => Number($attrs.row ?? 1));
+</script>
+
+<style lang="scss" scoped>
+table,
+tr,
+th,
+td {
+  border-color: #cccccc;
+  animation: anim 3s infinite;
+}
+
+.bg-custom {
+  animation: anim 3s infinite;
+}
+
+@keyframes anim {
+  0% {
+    background-color: #efefef;
+  }
+
+  25% {
+    background-color: #f8f8f8;
+  }
+
+  50% {
+    background-color: #efefef;
+  }
+
+  75% {
+    background-color: #f8f8f8;
+  }
+
+  100% {
+    background-color: #efefef;
+  }
+}
+</style>

package/hono/src/resources/src/components/datatable/Pagination.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-6 mb-3 mb-md-0">
+      <div class="py-2 text-black-50 text-center text-md-start">
+        Showing {{ page.from }} to {{ page.to }} of {{ nFormatter(page.total) }} entries
+      </div>
+    </div>
+    <div class="col-12 col-md-6">
+      <nav :class="['datatable-pagination', `pagination-${variant}`]" aria-label="Page navigation">
+        <ul class="pagination justify-content-center justify-content-md-end">
+          <!-- First -->
+          <li :class="['page-item', { disabled: noPreviousPage }]">
+            <button type="button" class="page-link" :aria-disabled="noPreviousPage ? 'true' : 'false'"
+              :tabindex="noPreviousPage ? -1 : 0" @click.prevent="!noPreviousPage && loadPage(1)">
+              <i class="bi bi-chevron-double-left"></i>
+            </button>
+          </li>
+
+          <!-- Prev -->
+          <li :class="['page-item', { disabled: noPreviousPage }]">
+            <button type="button" class="page-link" :aria-disabled="noPreviousPage ? 'true' : 'false'"
+              :tabindex="noPreviousPage ? -1 : 0"
+              @click.prevent="!noPreviousPage && loadPage(props.data.current_page - 1)">
+              <i class="bi bi-chevron-left"></i>
+            </button>
+          </li>
+
+          <li class="page-item">
+            <div class="input-group input-group-sm">
+              <Input v-model="page.page" type="text" category="number" topclass="m-0" class="text-center"
+                style="width: 100px" @keyup.enter="loadPage(page.page)" />
+            </div>
+          </li>
+
+          <li class="page-item">
+            <span class="page-link text-nowrap"> of {{ nFormatter(props.data.last_page) }} </span>
+          </li>
+
+          <!-- Next -->
+          <li :class="['page-item', { disabled: noNextPage }]">
+            <button type="button" class="page-link" :aria-disabled="noNextPage ? 'true' : 'false'"
+              :tabindex="noNextPage ? -1 : 0" @click.prevent="!noNextPage && loadPage(props.data.current_page + 1)">
+              <i class="bi bi-chevron-right"></i>
+            </button>
+          </li>
+
+          <!-- Last -->
+          <li :class="['page-item', { disabled: noNextPage }]">
+            <button type="button" class="page-link" :aria-disabled="noNextPage ? 'true' : 'false'"
+              :tabindex="noNextPage ? -1 : 0" @click.prevent="!noNextPage && loadPage(props.data.last_page)">
+              <i class="bi bi-chevron-double-right"></i>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+import Input from "@/components/Input.vue";
+import { formatCompactNumber } from "@/helpers/nformatter";
+import { useGum } from "@/plugins/gum";
+
+interface PaginationData {
+  current_page: number;
+  last_page: number;
+  per_page: number;
+  total: number;
+  path: string;
+}
+
+interface PaginationProps {
+  data: PaginationData;
+  selectedoption?: string | number;
+  search?: string;
+  variant?: string;
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  search: "",
+  variant: "dark"
+});
+
+const gum = useGum();
+const route = useRoute();
+
+const page = reactive({ page: 1, from: 0, to: 0, total: 0 });
+
+const noPreviousPage = computed(() => props.data.current_page - 1 <= 0);
+const noNextPage = computed(() => props.data.current_page + 1 > props.data.last_page);
+
+const loadPage = (pageNo: string | number) => {
+  let p = parseInt(String(pageNo), 10);
+
+  // fallback if NaN
+  if (Number.isNaN(p)) p = props.data.current_page;
+
+  const last = Number(props.data.last_page) || 1;
+
+  // clamp between 1 and last
+  if (p < 1) p = 1;
+  if (p > last) p = last;
+
+  return gum.get(props.data.path, {
+    query: { page: p, size: props.selectedoption, search: props.search },
+    routePath: route.path,
+    preserveState: true,
+    preserveScroll: true,
+    skipFetch: true
+  });
+};
+
+const nFormatter = formatCompactNumber;
+
+watchEffect(() => {
+  // "Showing {$from} to {$to} of {$total} entries"
+  page.page = props.data.current_page;
+  page.from = (props.data.current_page - 1) * props.data.per_page + 1;
+  page.to = Math.min(props.data.current_page * props.data.per_page, props.data.total);
+  page.total = props.data.total;
+});
+</script>
+
+<style lang="scss" scoped>
+ul.pagination {
+  margin: 0;
+
+  :deep(.page-item.disabled .page-link),
+  :deep(.page-link:disabled),
+  :deep(.page-link[aria-disabled="true"]) {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .page-link {
+    border-radius: 5px !important;
+    margin-left: 0;
+    border-color: #cdcdcd !important;
+    color: inherit;
+    box-shadow: none;
+  }
+}
+</style>

package/hono/src/resources/src/components/datatable/SelectOpption.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2 mb-md-0" :class="{ 'd-none': !props.isOptions }">
+    Show
+    <select
+      v-model="selectedoption"
+      class="form-select shadow-none w-auto mx-2"
+      @change="selectOption">
+      <option v-for="(val, i) in props.option" :key="i" :value="val">{{ val }}</option>
+    </select>
+    entries
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useGum } from "@/plugins/gum";
+
+interface DataPage {
+  path: string;
+  current_page: number;
+}
+
+interface SelectOptionProps {
+  data: DataPage;
+  search?: string;
+  isOptions?: boolean;
+  option?: Array<string | number>;
+  selectedoption?: string | number;
+}
+
+const props = withDefaults(defineProps<SelectOptionProps>(), {
+  search: "",
+  isOptions: true,
+  option: () => []
+});
+const gum = useGum();
+const route = useRoute();
+
+// select option and pass SelectOption component
+const selectedoption = ref<string | number | undefined>(props.selectedoption);
+
+watch(
+  () => props.selectedoption,
+  (value) => {
+    selectedoption.value = value;
+  }
+);
+
+const selectOption = (e: Event) => {
+  const target = e.target as HTMLSelectElement;
+  selectedoption.value = target.value;
+
+  return gum.get(props.data.path, {
+    query: { page: props.data.current_page, size: selectedoption.value, search: props.search },
+    routePath: route.path,
+    preserveState: true,
+    preserveScroll: true,
+    skipFetch: true
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>

package/hono/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/hono/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/hono/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/hono/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/hono/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/hono/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>