build version 400

resources/assets/js/views/reports/layout/Index.vue

@@ -1,78 +1,93 @@
 <template>
-  <div class="profit-loss-reports reports main-content">
-    <div class="page-header">
-      <h3 class="page-title"> {{ $tc('reports.report', 2) }}</h3>
-      <ol class="breadcrumb">
-        <li class="breadcrumb-item">
-          <router-link
-            slot="item-title"
-            to="dashboard">
-            {{ $t('general.home') }}
-          </router-link>
-        </li>
-        <li class="breadcrumb-item">
-          <router-link
-            slot="item-title"
-            to="/admin/reports/sales">
-            {{ $tc('reports.report', 2) }}
-          </router-link>
-        </li>
-      </ol>
-      <div class="page-actions row">
-        <div class="col-xs-2">
-          <base-button icon="download" size="large" color="theme" @click="onDownload()">
-            {{ $t('reports.download_pdf') }}
-          </base-button>
-        </div>
-      </div>
-    </div>
+  <base-page class="profit-loss-reports reports">
+    <sw-page-header :title="$tc('reports.report', 2)">
+      <sw-breadcrumb slot="breadcrumbs">
+        <sw-breadcrumb-item
+          :title="$t('general.home')"
+          :to="`/admin/dashboard`"
+        />
+        <sw-breadcrumb-item
+          :title="$tc('reports.report', 2)"
+          :to="`/admin/reports`"
+          active
+        />
+      </sw-breadcrumb>
+      <template slot="actions">
+        <sw-button size="lg" variant="primary" @click="onDownload()">
+          <download-icon class="h-5 mr-1 -ml-2" />
+          {{ $t('reports.download_pdf') }}
+        </sw-button>
+      </template>
+    </sw-page-header>
     <div class="row">
-      <div class="col-sm-12">
-        <!-- Tabs -->
-        <ul class="tabs">
-          <li class="tab">
-            <router-link class="tab-link" to="/admin/reports/sales">{{ $t('reports.sales.sales') }}</router-link>
-          </li>
-          <li class="tab">
-            <router-link class="tab-link" to="/admin/reports/profit-loss">{{ $t('reports.profit_loss.profit_loss') }}</router-link>
-          </li>
-          <li class="tab">
-            <router-link class="tab-link" to="/admin/reports/expenses">{{ $t('reports.expenses.expenses') }}</router-link>
-          </li>
-          <li class="tab">
-            <router-link class="tab-link" to="/admin/reports/taxes">{{ $t('reports.taxes.taxes') }}</router-link>
-          </li>
-        </ul>
-      </div>
+      <!-- Tabs -->
+      <sw-tabs>
+        <sw-tab-item
+          :title="$t('reports.sales.sales')"
+          route="/admin/reports/sales"
+        >
+        </sw-tab-item>
+
+        <sw-tab-item
+          :title="$t('reports.profit_loss.profit_loss')"
+          route="/admin/reports/profit-loss"
+        >
+        </sw-tab-item>
+
+        <sw-tab-item
+          :title="$t('reports.expenses.expenses')"
+          route="/admin/reports/expenses"
+        >
+        </sw-tab-item>
+
+        <sw-tab-item
+          :title="$t('reports.taxes.taxes')"
+          route="/admin/reports/taxes"
+        >
+        </sw-tab-item>
+      </sw-tabs>
     </div>
-    <transition
-      name="fade"
-      mode="out-in">
-      <router-view ref="report"/>
+    <transition name="fade" mode="out-in">
+      <div
+        v-if="activeTab === 'SALES' || 'PROFIT_LOSS' || 'EXPENSES' || 'TAXES'"
+      >
+        <router-view ref="report" />
+      </div>
     </transition>
-  </div>
+  </base-page>
 </template>
 
 <script>
+import { DownloadIcon } from '@vue-hero-icons/solid'
 export default {
+  components: {
+    DownloadIcon,
+  },
+  data() {
+    return {
+      activeTab: 'SALES',
+    }
+  },
   watch: {
-    '$route.path' (newValue) {
+    '$route.path'(newValue) {
       if (newValue === '/admin/reports') {
         this.$router.push('/admin/reports/sales')
       }
-    }
+    },
   },
-  created () {
+  created() {
     if (this.$route.path === '/admin/reports') {
       this.$router.push('/admin/reports/sales')
     }
   },
   methods: {
-    onDownload () {
+    onDownload() {
       this.$refs.report.downloadReport()
-    }
-  }
-
+    },
+    setActiveTab(val) {
+      this.activeTab = val
+    },
+  },
 }
 </script>
 
@@ -83,6 +98,6 @@ export default {
 
 .tab-link {
   padding: 10px 30px;
-  display: block
+  display: block;
 }
 </style>