@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/dashboard/alert/Alert.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="6">
+        <div class="text-left div-title">Notificações</div>
+      </b-col>
+    </b-row>
+    <div class="div-scroll" v-if="notifications.length > 0">
+      <ScrollBar :minHeight="130" :maxHeight="130">
+        <div class="div-notification" v-for="notification in notifications">
+          <i class="fa-solid fa-bell-on" :class="notification.type"></i>
+          <span class="title-notification"> {{ notification.title }}</span>
+        </div>
+      </ScrollBar>
+    </div>
+    <div v-if="notifications.length == 0">
+      <div class="text-description text-center">Nenhuma notificação!</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "Alert",
+  components: {
+    ScrollBar,
+  },
+  data() {
+    return {
+      notifications: [
+        /* {
+          type: "warning",
+          title: "Sua mensalidade está em atraso a 7 dia(s).",
+          routeName: "",
+          rule: "All",
+        },*/
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters("user", ["hasRule"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+  },
+};
+</script>
+
+<style scoped>
+.div-title {
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 15px;
+}
+
+.box-favorite:hover {
+  background-color: #f1f1f3;
+}
+
+.icon-gear {
+  cursor: pointer;
+}
+
+.box-favorite-icon {
+  margin-top: 4px;
+}
+
+.text-description {
+  padding: 15px;
+  font-size: 14px;
+  color: black;
+}
+
+.div-notification {
+  padding-left: 15px;
+  color: #2d4e6e;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.div-notification:hover {
+  text-decoration: underline;
+}
+
+.div-scroll {
+  margin-right: 10px;
+}
+
+.success {
+  color: #52c41a;
+}
+
+.warning {
+  color: #faad14;
+}
+
+.info {
+  color: #1890ff;
+}
+
+.danger {
+  color: red;
+}
+
+.title-notification {
+  font-size: 13px;
+}
+</style>

package/src/components/modules/dashboard/billing/PanelBillet.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="operational-main">
+    <b-row>
+      <b-col sm="9">
+        <div class="div-title text-left">
+          <br />
+          <span class="title-main">Boleto Bancário</span>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="12" xl="12">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-emitted" @click="navegateTo('billetListFilter', 'emitted')">
+                <i class="fa-solid fa-share icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ data.emitido | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">Emitido</div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-money" @click="navegateTo('billetListFilter', 'registered')">
+                <i class="fa-solid fa-chart-mixed-up-circle-dollar icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ data.registrado | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">Registrado</div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-danger" @click="navegateTo('billetListFilter', 'delayed')">
+                <i class="fa-sharp fa-solid fa-triangle-exclamation icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ data.emAtraso | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">Em Atraso</div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-output" @click="navegateTo('billetListFilter', 'paid')">
+                <i class="fa-solid fa-dollar-sign icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ data.liquidado | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">Liquidado</div>
+            </div>
+          </b-col>
+
+          <b-col xs="12" sm="12" md="12" lg="6" xl="4">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-shipping" @click="navegateTo('shipmentReturnList')">
+                <i class="fa-sharp fa-solid fa-barcode icon-fontawesome"></i>
+              </div>
+              <div style="font-size: 18px" class="title text-center">
+                {{ data.pendenteRemessa }}
+              </div>
+              <div class="legend text-center">Remessa pendente</div>
+            </div>
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import HideShow from "@nixweb/nixloc-ui/src/component/layout/HideShow.vue";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "PanelOperational",
+  components: {
+    HideShow,
+  },
+  data() {
+    return {
+      urlGet: "/api/v1/billing/billet/total-dashboard",
+      data: {},
+      filter: { content: "Hoje", id: "today" },
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      this.loading = true;
+      let params = { url: this.urlGet, obj: { any: this.filter.id } };
+      this.getApi(params).then((response) => {
+        this.data = response.content;
+      });
+    },
+    navegateTo(routeName, status) {
+      this.$router.push({
+        name: routeName,
+        params: {
+          filter: this.filter.id, status: status
+        }
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "filterDashboard") {
+          this.filter = event.data;
+          this.getAll();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.operational-main {
+  margin-left: -10px;
+}
+
+.div-title {
+  margin-bottom: 15px;
+}
+
+.panel-child {
+  height: 130px !important;
+  width: 94% !important;
+  border-radius: 20px;
+  margin-left: 18px;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.panel-icon {
+  width: 35px;
+  height: 35px;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.panel-icon-output {
+  background-color: #38a169;
+}
+
+.panel-output {
+  background-color: white;
+  border: 1px solid #e8eaed;
+}
+
+.panel-icon-money {
+  background-color: #0008aa;
+}
+
+.panel-icon-emitted {
+  background-color: #007bff;
+}
+
+.panel-icon-danger {
+  background-color: red;
+}
+
+.panel-icon-shipping {
+  background-color: black;
+}
+
+.icon-fontawesome {
+  color: #fdfdfd;
+  font-size: 14px;
+}
+
+.title-main {
+  font-size: 20px;
+  margin-left: 20px;
+}
+
+.total {
+  font-size: 22px !important;
+  font-weight: bold !important;
+  margin-top: 1px !important;
+}
+
+.legend {
+  font-size: 16px;
+}
+</style>

package/src/components/modules/dashboard/billing/PanelInvoice.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="operational-main">
+    <b-row>
+      <b-col sm="9">
+        <div class="div-title text-left">
+          <br />
+          <span class="title-main">Faturamento</span>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="12" xl="12">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-output" @click="navegateTo('toProfitListFilter', filter.id)">
+                <i class="fa-solid fa-boxes-stacked icon-fontawesome"></i>
+              </div>
+              <div class="total text-center">{{ data.totalProducts }}</div>
+              <div class="legend text-center">Produtos</div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-invoice" @click="navegateTo('toProfitListFilter', filter.id)">
+                <i class="fa-solid fa-dollar-sign icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ data.totalInvoice | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">A Faturar</div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-danger" @click="navegateTo('toProfitListFilter', 'delayed')">
+                <i class="fa-solid fa-dollar-sign icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ data.totalDelayed | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">Em Atraso</div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+            <div class="panel-child panel-output">
+              <div class="panel-icon panel-icon-total" @click="navegateTo('toProfitListFilter', filter.id)">
+                <i class="fa-solid fa-dollar-sign icon-fontawesome"></i>
+              </div>
+              <HideShow :iconSize="18">
+                <div style="font-size: 18px" class="title text-center">
+                  {{ (data.totalInvoice + data.totalDelayed) | currency }}
+                </div>
+              </HideShow>
+              <div class="legend text-center">Total</div>
+            </div>
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import HideShow from "@nixweb/nixloc-ui/src/component/layout/HideShow.vue";
+
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+  name: "PanelOperational",
+  components: {
+    HideShow,
+  },
+  data() {
+    return {
+      urlGet: "/api/v1/billing/invoice/total-dashboard",
+      data: {},
+      filter: { content: "Hoje", id: "today" },
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      this.loading = true;
+      let params = { url: this.urlGet, obj: { any: this.filter.id } };
+      this.getApi(params).then((response) => {
+        this.data = response.content;
+      });
+    },
+    navegateTo(routeName, status) {
+      this.$router.push({
+        name: routeName,
+        params: { status: status }
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "filterDashboard") {
+          this.filter = event.data;
+          this.getAll();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.operational-main {
+  margin-left: -10px;
+}
+
+.div-title {
+  margin-bottom: 15px;
+}
+
+.panel-child {
+  height: 130px !important;
+  width: 95% !important;
+  border-radius: 20px;
+  margin-left: 18px;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.panel-icon {
+  width: 35px;
+  height: 35px;
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.panel-icon-output {
+  background-color: darkblue;
+}
+
+.panel-output {
+  background-color: white;
+  border: 1px solid #e8eaed;
+}
+
+.panel-icon-invoice {
+  background-color: #006400;
+}
+
+.panel-icon-danger {
+  background-color: red;
+}
+
+.panel-icon-total {
+  background-color: blue;
+}
+
+.icon-fontawesome {
+  color: #fdfdfd;
+  font-size: 14px;
+}
+
+.title-main {
+  font-size: 20px;
+  margin-left: 20px;
+}
+
+.total {
+  font-size: 22px !important;
+  font-weight: bold !important;
+  margin-top: 1px !important;
+}
+
+.legend {
+  font-size: 16px;
+}
+</style>