grey-dev-0

// proejct_root/resources/js/common.js
import 'bootstrap';
import breadcrumb from "../components/breadcrumb";
import bootbox from "bootbox";
import navbar from "../components/navbar"
import jQuery from "jquery";
import {defineAsyncComponent} from "vue";

jQuery.ajaxSettings.headers = {'X-CSRF-TOKEN': jQuery('[name="csrf-token"]').attr('content')};

grey-dev-0

// project_root/resources/components/datatables/index.js
import DtColumn from "./column.vue";
import DtFilter from "./filter-input.vue";
import VueDataFilter from "./datafilter.vue";
import VueDatatable from "./datatable.vue";

function load(app){
    app.component('DtColumn', DtColumn);
    app.component('VueDatatable', VueDatatable);
    app.component('VueDatafilter', VueDataFilter);

grey-dev-0

@extends('master')

@section('title')
    <title>Dashboard</title>
@stop

@push('styles')
    @vite(['resources/scss/dashboard.scss'])
@endpush

grey-dev-0

// project_root/resources/components/chart.vue
<template>
    <div :class="cardClass">
        <div v-if="ranged" :class="headerClass">
            <h4 :class="'float-left mb-0 pt-1' + (whiteTitle? ' text-white' : '')">{{title}}</h4>
            <input autocomplete="off" type="text" :id="id + '-range'" class="form-control float-right" :placeholder="rangeTitle || title" :value="defaultRange">
        </div>
        <h4 v-else :class="headerClass + (whiteTitle? ' text-white' : '')">{{title}}</h4>
        <div v-if="loading" :class="bodyClass">
            <h1 class="text-center chart-loader"><i class="fas fa-spin fa-spinner fa-pulse"></i></h1>

grey-dev-0

{
  "private": true,
  "type": "module",
  "scripts": {
    "development": "NODE_ENV=development vite build -m development",
    "prodcution": "vite build"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "axios": "^1.6.4",

grey-dev-0

// project_root/vite.config.js
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";
import {globSync} from "glob";

let files = globSync(['resources/js/*.js', 'resources/scss/*.scss']), input = [];
files.forEach(file => {
    input.push(file.replace(/[\\\/]+/g, '/'));
});

grey-dev-0

// /resources/components/common.js
import Sidebar from "./navbar";
import Breadcrumb from "./breadcrumb";
import Avatar from "./avatar";
import Notifications from "./notifications";

export function load(app){
    let components = {Navbar, Breadcrumb, Avatar, Notifications};
    for(var library in components)
        if(components[library].name === undefined)

grey-dev-0

@extends('master')

@section('title', 'Dashboard')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@section('content')
    <div class="row card-deck">

grey-dev-0

@props(['inModal' => false])

<vue-datatable datatable-id="payments-table" ref="paymentsTable" url="{{url('sa/payments')}}" :sort="[[{{$inModal? 3 : 4}}, 'desc']]" @if($inModal) :ajax-data="{tenant_id: openUser.id}" deferred @endif>
    @if(!$inModal)
        <dt-column name="t.name" data="name">{{trans('admin.payments.payer')}}</dt-column>
    @endif
    <dt-column name="amount" data="amount" :render="renderAmount" :searchable="false">{{trans('words.amount')}}</dt-column>
    <dt-column name="executed" data="executed" :render="renderExecuted" :searchable="false">{{trans('words.executed')}}</dt-column>
    <dt-column name="purchases.created_at" data="created_at" :searchable="false">{{trans('words.created_at')}}</dt-column>
    <dt-column name="purchases.updated_at" :data="renderPaidAt" :searchable="false">{{trans('words.paid_at')}}</dt-column>

grey-dev-0

<template>
    <div :class="cardClass">
        <div v-if="ranged" :class="headerClass">
            <h4 class="float-left mb-0">{{title}}</h4>
            <input autocomplete="off" type="text" :id="id + '-range'" class="form-control float-right" :placeholder="rangeTitle || title" :value="defaultRange">
        </div>
        <h4 v-else :class="headerClass">{{title}}</h4>
        <div v-if="loading" :class="bodyClass">
            <h1 class="text-center chart-loader"><i v-html="loadingIcon"></i></h1>
        </div>