@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/components/modules/dashboard/finance/PanelFinance.vue

@@ -1,146 +0,0 @@
-<template>
-    <div>
-        <div class="div-panel text-left">
-            <br>
-            <span class="title-main">Financeiro</span>
-        </div>
-        <b-row>
-            <b-col xs="12" sm="12" md="12" lg="12" xl="8">
-                <b-row>
-                    <b-col sm="12">
-                        <div class="text-left div-title">Pagar e Receber</div>
-                    </b-col>
-                </b-row>
-                <div class="div-balance">
-                    <Molded>
-                        <BalanceFinance />
-                    </Molded>
-                </div>
-            </b-col>
-            <b-col xs="12" sm="12" md="12" lg="12" xl="4">
-                <div class="div-detail">
-                    <b-row>
-                        <b-col sm="6">
-                            <div class="text-left div-sub-title">Contas a Pagar</div>
-                        </b-col>
-                    </b-row>
-                    <Molded>
-                        <BillsToPay />
-                    </Molded>
-                    <br>
-                    <b-row>
-                        <b-col sm="12">
-                            <div class="text-left div-sub-title">Contas a Receber</div>
-                        </b-col>
-                    </b-row>
-                    <Molded>
-                        <BillsToReceive />
-                    </Molded>
-                    <br>
-                    <b-row>
-                        <b-col sm="12">
-                            <div class="text-left div-sub-title">Saldo Bancário</div>
-                        </b-col>
-                    </b-row>
-                    <Molded>
-                        <BalanceBank />
-                    </Molded>
-                </div>
-            </b-col>
-        </b-row>
-    </div>
-</template>
-<script>
-
-
-import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
-
-import BalanceFinance from './BalanceFinance.vue'
-import BillsToPay from './BillsToPay.vue'
-import BillsToReceive from './BillsToReceive.vue'
-import PaymentByStatus from './PaymentByStatus.vue'
-import BalanceBank from './BalanceBank.vue'
-
-export default {
-    name: "PanelFinance",
-    components: { Molded, BalanceFinance, BalanceBank, PaymentByStatus, BillsToPay, BillsToReceive },
-}
-
-</script>
-<style scoped>
-.div-main {
-    padding-top: 10px;
-    font-size: 15px;
-}
-
-.div-detail {
-    margin-top: 8px;
-}
-
-
-.div-title {
-    margin-left: -4px;
-    margin-bottom: 5px;
-}
-
-.div-sub-title {
-    margin-bottom: 12px;
-}
-
-.div-panel {
-    margin-bottom: 10px;
-    margin-left: -16px;
-}
-
-.div-balance {
-    margin-top: 15px;
-    margin-left: -6px;
-}
-
-.div-value-bank {
-    margin-top: 10px;
-}
-
-.value {
-    font-size: 14px;
-}
-
-.value-bank {
-    font-size: 30px;
-}
-
-.title-main {
-    font-size: 20px;
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-
-.total {
-    font-size: 20px;
-    font-weight: bold;
-}
-
-.finance-delay {
-    color: red;
-}
-
-.finance-today {
-    color: #FF8A1B;
-}
-
-.finance-scheduled {
-    color: #3d4eae;
-}
-
-.finance-paid {
-    color: #009183;
-}
-
-.pay {
-    color: red;
-}
-
-.receive {
-    color: darkblue;
-}
-</style>

package/src/components/modules/dashboard/finance/PaymentByStatus.vue

@@ -1,121 +0,0 @@
-<template>
-    <div class="div-dash-main">
-      <Doughnut
-        :chart-options="chartOptions"
-        :chart-data="chartData"
-        :chart-id="chartId"
-        :dataset-id-key="datasetIdKey"
-        :plugins="plugins"
-        :css-classes="cssClasses"
-        :styles="styles"
-        :width="width"
-        :height="height"
-      />
-    </div>
-  </template>
-  
-  <script>
-  import { Doughnut } from "vue-chartjs/legacy";
-  
-  import { mapActions } from "vuex";
-  
-  import {
-    Chart as ChartJS,
-    Title,
-    Tooltip,
-    Legend,
-    ArcElement,
-    CategoryScale,
-  } from "chart.js";
-  
-  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
-  
-  export default {
-    name: "DoughnutChart",
-    components: {
-      Doughnut,
-    },
-    props: {
-      chartId: {
-        type: String,
-        default: "doughnut-chart",
-      },
-      datasetIdKey: {
-        type: String,
-        default: "label",
-      },
-      width: {
-        type: Number,
-        default: 200,
-      },
-      height: {
-        type: Number,
-        default: 230,
-      },
-      cssClasses: {
-        default: "",
-        type: String,
-      },
-      styles: {
-        type: Object,
-        default: () => {},
-      },
-      plugins: {
-        type: Array,
-        default: () => [],
-      },
-    },
-    data() {
-      return {
-        urlGet: "/api/v1/stock/items-moviment/total-stock-dashboard",
-        chartData: {
-          labels: ["Pendente", "Agendada", "Pago", "Recebido"],
-          datasets: [],
-        },
-        chartOptions: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            tooltip: {
-              enabled: true,
-              callbacks: {
-                label: (tooltipItems) => {
-                  return ` ${tooltipItems.raw}%`;
-                },
-              },
-            },
-          },
-        },
-      };
-    },
-    mounted() {
-      this.getAll();
-    },
-    methods: {
-      ...mapActions("generic", ["getApi"]),
-      getAll() {
-        this.loading = true;
-        let params = {
-          url: this.urlGet,
-        };
-        this.getApi(params).then((response) => {
-          var ret = {
-            backgroundColor: response.content.datasets[0].backgroundColors,
-            data: response.content.datasets[0].data,
-          };
-          this.chartData.datasets.push(ret);
-          this.loading = false;
-        });
-      },
-    },
-  };
-  </script>
-  <style scoped>
-  .div-dash-main {
-    padding: 8px;
-  }
-  
-  .div-title {
-    font-size: 15px;
-  }
-  </style>

package/src/components/modules/dashboard/operational/DeliveryDevolution.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="div-dash-main">
-    <b-row>
-      <b-col sm="6">
-        <div class="text-left div-title">Saída e Retorno</div>
-      </b-col>
-    </b-row>
-    <br />
-    <div class="div-legend text-center">
-      <div class="side-by-side box-calendar delivery-delay"></div>
-      <div class="side-by-side magin">Saída em atraso</div>
-      <div class="side-by-side box-calendar delivery"></div>
-      <div class="side-by-side magin">Saída em dia</div>
-      <div class="side-by-side box-calendar devolution-delay"></div>
-      <div class="side-by-side magin">Retorno em atraso</div>
-      <div class="side-by-side box-calendar devolution"></div>
-      <div class="side-by-side magin">Retorno em dia</div>
-      <div class="side-by-side box-calendar rent"></div>
-    </div>
-    <Loading type="line" :center="false" v-show="loading" />
-    <ScrollBar id="items-rent" :minHeight="280" :maxHeight="280">
-      <table class="table table-responsive-xs">
-        <tbody v-for="item in data">
-          <tr>
-            <td>
-              <div
-                class="side-by-side box-calendar"
-                :style="'background-color:' + item.backgroundColor"
-              ></div>
-            </td>
-            <td class="td-text">
-              {{ item.title }}
-            </td>
-            <td class="text-right">
-              <ButtonMovimentStock
-                :showTitleButton="false"
-                :keyButton="item.keyButton"
-                :rentId="item.rentId"
-                :periodRentId="item.periodRentId"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </ScrollBar>
-  </div>
-</template>
-<script>
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
-import ButtonMovimentStock from "../../operational/ButtonMovimentStock.vue";
-
-import { mapActions } from "vuex";
-
-export default {
-  name: "DeliveryDevolution",
-  components: {
-    ScrollBar,
-    Loading,
-    ButtonMovimentStock,
-  },
-  data() {
-    return {
-      urlGet: "/api/v1/operational/get-all-os-panel",
-      data: [],
-      loading: true,
-    };
-  },
-  mounted() {
-    this.getAll();
-  },
-  methods: {
-    ...mapActions("generic", ["getApi"]),
-    getAll() {
-      this.loading = true;
-      let params = {
-        url: this.urlGet,
-        obj: {
-          showDelivery: true,
-          showDevolution: true,
-        },
-      };
-      this.getApi(params).then((response) => {
-        this.data = response.content;
-        let self = this;
-        setTimeout(function () {
-          self.loading = false;
-        }, 500);
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.div-dash-main {
-  padding: 8px;
-}
-
-.table th,
-.table td {
-  height: 10px !important;
-  padding-left: 5px !important;
-  padding-top: 7px !important;
-  padding-bottom: 5px !important;
-  padding-right: 5px !important;
-  padding-left: 10px !important;
-  border-bottom: 0px !important;
-}
-
-.title-header {
-  font-size: 14px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.box-calendar {
-  width: 10px;
-  height: 10px;
-  border-radius: 20px;
-  margin-right: 3px;
-}
-
-.div-title {
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-top: 5px;
-  margin-bottom: 10px;
-  font-size: 15px;
-}
-
-.delivery-delay {
-  background-color: red;
-}
-
-.delivery {
-  background-color: #009183;
-}
-
-.devolution {
-  background-color: #3d4eae;
-}
-
-.devolution-delay {
-  background-color: #ff8a1b;
-}
-
-.div-legend {
-  margin-bottom: 10px;
-}
-
-.magin {
-  margin-right: 15px;
-}
-
-.td-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 410px;
-}
-</style>

package/src/components/modules/dashboard/operational/PanelOperational.vue

@@ -1,230 +0,0 @@
-<template>
-  <div class="operational-main">
-    <b-row>
-      <b-col sm="9">
-        <div class="div-title text-left">
-          <br />
-          <span class="title-main">Operacional</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-output" @click="navegateTo(filter.id)">
-                <i class="fa-regular fa-truck-ramp-box icon-fontawesome"></i>
-              </div>
-              <div class="total text-center">{{ data.delivery }}</div>
-              <div class="legend text-center">Total Saídas</div>
-            </div>
-          </b-col>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
-            <div class="panel-child panel-danger">
-              <div class="panel-icon panel-icon-danger" @click="navegateTo('delayed')">
-                <i class="fa-solid fa-circle-arrow-up icon-fontawesome"></i>
-              </div>
-              <div class="total text-center">{{ data.deliveryDelayed }}</div>
-              <div class="legend text-center">Saídas atraso</div>
-            </div>
-          </b-col>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
-            <div class="panel-child panel-devolution">
-              <div class="panel-icon panel-icon-devolution" @click="navegateTo(filter.id)">
-                <i class="fa-regular fa-truck-ramp-box icon-fontawesome"></i>
-              </div>
-              <div class="total text-center">{{ data.devolution }}</div>
-              <div class="legend text-center">Total Retorno</div>
-            </div>
-          </b-col>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="2">
-            <div class="panel-child panel-end">
-              <div class="panel-icon panel-icon-end" @click="navegateTo('delayed')">
-                <i class="fa-solid fa-circle-arrow-down icon-fontawesome"></i>
-              </div>
-              <div class="total text-center">{{ data.devolutionDelayed }}</div>
-              <div class="legend text-center">Retornos atraso</div>
-            </div>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-  
-<script>
-import { mapActions, mapGetters } from "vuex";
-
-export default {
-  name: "PanelOperational",
-  components: {},
-  data() {
-    return {
-      urlGet: "/api/v1/operational/operational-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(filter) {
-      this.$router.push({
-        name: "osPanelListFilter",
-        params: { filter: filter }
-      });
-    },
-  },
-  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: 10px;
-}
-
-.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: #009183;
-}
-
-.panel-output {
-  background-color: #d4ebe7;
-}
-
-.panel-icon-danger {
-  background-color: red;
-}
-
-.panel-danger {
-  background-color: #fdf7ea;
-}
-
-.panel-icon-end {
-  background-color: #ff8a1b;
-}
-
-.panel-end {
-  background-color: #fdf7ea;
-}
-
-.panel-icon-devolution {
-  background-color: #3d4eae;
-}
-
-.panel-devolution {
-  background-color: #d0d2e7;
-}
-
-.panel-icon-summary {
-  background-color: #d1d5da;
-}
-
-.panel-summary {
-  background-color: #f8f9fa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-fontawesome {
-  color: #fdfdfd;
-  font-size: 14px;
-}
-
-.title-main {
-  font-size: 20px;
-  margin-left: 20px;
-}
-
-.total {
-  font-size: 22px;
-  font-weight: bold;
-  margin-top: 1px;
-}
-
-.legend {
-  font-size: 16px;
-}
-
-.box-calendar {
-  width: 30px;
-  height: 30px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-
-.legend-summary {
-  height: 10px;
-}
-
-.total-summary {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.delivery-delay {
-  background-color: red;
-}
-
-.delivery {
-  background-color: #009183;
-}
-
-.devolution {
-  background-color: #3d4eae;
-}
-
-.devolution-delay {
-  background-color: #ff8a1b;
-}
-</style>