@freteclick/quasar-financial-ui 1.0.113 → 1.0.115

package/src/components/invoice/pay/InvoiceDetails.vue

@@ -1,125 +1,134 @@
 <template>
-  <q-card style="min-height: 90vh;">
+  <div class="pay-invoice-detail">
     <q-inner-loading :showing="isLoading">
       <q-spinner-gears size="50px" color="primary" />
     </q-inner-loading>
 
-    <transition-group appear
-      enter-active-class="animated fadeIn"
-      leave-active-class="animated fadeOut"
-    >
-
-    <div v-if="invoice !== null"
-      class="row q-pa-sm q-col-gutter-sm"
-      key  ="status"
-    >
-    <div class="col-xs-12">
-        <div class="text-h5 q-pt-sm q-pb-sm">{{ this.provider.name }}</div>
-      </div>
-      <div class="col-xs-12 col-sm-4">
-        <q-markup-table flat dense
-          separator="none"
-          class    ="bg-grey-4 full-height"
-        >
-          <tbody>
-            <tr>
-              <td class="text-left text-bold">Número da fatura</td>
-              <td class="text-left">
-                {{ `#${this.invoice['@id'].match(/^\/finance\/pay\/([a-z0-9-]*)$/)[1]}` }}
-              </td>
-            </tr>
-            <tr>
-              <td class="text-left text-bold">Valor da fatura</td>
-              <td class="text-left">
-                {{ formatMoney(this.invoice.price) }}
-              </td>
-            </tr>
-            <tr>
-              <td class="text-left text-bold">Vencimento</td>
-              <td class="text-left">
-                {{ this.invoice.dueDate }}
-              </td>
-            </tr>
-          </tbody>
-        </q-markup-table>
-      </div>
-      <div class ="col-xs-12 col-sm-8">
-        <div
-          class ="row items-center justify-center full-height rounded-borders"
-          :style="`background-color: ${this.invoice.status.color}`"
-        >
-          <div class="text-white text-h6">
-            {{ $t(`invoice.statuses.${invoice.status.status}`) }}
+    <template v-if="invoice !== null">
+      <PageHeader
+        eyebrow="CONTAS A PAGAR"
+        icon="receipt_long"
+        :title="`Fatura #${invoiceNumber}`"
+        :description="provider.name || 'Detalhes e pedidos vinculados a esta despesa.'"
+      >
+        <template #actions>
+          <q-btn
+            outline
+            no-caps
+            rounded
+            color="white"
+            icon="arrow_back"
+            label="Voltar às contas a pagar"
+            :to="{ name: 'FinancePayIndex' }"
+          />
+        </template>
+      </PageHeader>
+
+      <section class="pay-invoice-detail__summary">
+        <q-card flat class="pay-invoice-summary-card pay-invoice-summary-card--amount">
+          <div class="pay-invoice-summary-card__icon">
+            <q-icon name="payments" />
           </div>
-        </div>
-      </div>
-    </div>
+          <div class="pay-invoice-summary-card__copy">
+            <span>Valor da fatura</span>
+            <strong>{{ formatMoney(invoice.price) }}</strong>
+          </div>
+        </q-card>
 
-    <div v-if="invoice !== null"
-      class="row"
-      key  ="order_tabs"
-    >
-      <div class="col-12">
-        <q-tabs
-          :horizontal="$q.screen.gt.xs"
-          align      ="justify"
-          v-model    ="currentTab"
-          class      ="bg-white text-primary"
-        >
-          <q-tab
-            name ="details"
-            label="Detalhes"
-          />
-          <q-tab
-            name ="orders"
-            label="Despesa"
-          />
-        </q-tabs>
+        <q-card flat class="pay-invoice-summary-card">
+          <div class="pay-invoice-summary-card__icon pay-invoice-summary-card__icon--date">
+            <q-icon name="event" />
+          </div>
+          <div class="pay-invoice-summary-card__copy">
+            <span>Vencimento</span>
+            <strong>{{ invoice.dueDate || "—" }}</strong>
+          </div>
+        </q-card>
+
+        <q-card flat class="pay-invoice-summary-card">
+          <div class="pay-invoice-summary-card__icon pay-invoice-summary-card__icon--status">
+            <q-icon name="fact_check" />
+          </div>
+          <div class="pay-invoice-summary-card__copy">
+            <span>Status</span>
+            <q-badge
+              class="pay-invoice-status"
+              :style="invoiceStatus.color ? { backgroundColor: invoiceStatus.color } : {}"
+            >
+              {{ invoiceStatus.status ? $t(`invoice.statuses.${invoiceStatus.status}`) : "—" }}
+            </q-badge>
+          </div>
+        </q-card>
+
+        <q-card flat class="pay-invoice-summary-card">
+          <div class="pay-invoice-summary-card__icon pay-invoice-summary-card__icon--orders">
+            <q-icon name="local_shipping" />
+          </div>
+          <div class="pay-invoice-summary-card__copy">
+            <span>Pedidos vinculados</span>
+            <strong>{{ invoiceOrdersCount }}</strong>
+          </div>
+        </q-card>
+      </section>
 
-        <q-separator />
+      <section class="pay-invoice-detail__workspace">
+        <div class="pay-invoice-detail__tabs-shell">
+          <q-tabs
+            v-model="currentTab"
+            align="left"
+            no-caps
+            inline-label
+            class="pay-invoice-detail__tabs"
+          >
+            <q-tab name="details" icon="description" label="Detalhes da despesa" />
+            <q-tab name="orders" icon="local_shipping" label="Pedidos" />
+          </q-tabs>
+        </div>
 
-        <q-tab-panels
-          v-model="currentTab"
-        >
-          <q-tab-panel name="details" class="q-pa-none">
+        <q-tab-panels v-model="currentTab" class="pay-invoice-detail__panels">
+          <q-tab-panel name="details" class="pay-invoice-detail__panel">
             <InvoiceInvoice
               :invoiceId="invoiceId"
-              @updated  ="requestInvoice(invoiceId)"
+              @updated="requestInvoice(invoiceId)"
             />
           </q-tab-panel>
-          <q-tab-panel name="orders" class="q-pa-none">
-            <InvoiceOrders
-              :invoiceId="invoiceId"
-            />
+          <q-tab-panel name="orders" class="pay-invoice-detail__panel">
+            <InvoiceOrders :invoiceId="invoiceId" />
           </q-tab-panel>
         </q-tab-panels>
-      </div>
-    </div>
-
-    </transition-group>
+      </section>
+    </template>
 
-    <div v-if="invoice === null && notFound"
-      class="row items-center justify-center"
-      style="min-height: 90vh;"
-    >
-      <q-banner class="text-white bg-red text-center text-h3" rounded>
-        <template v-slot:avatar>
-          <q-icon name="error" color="white" />
-        </template>
-        A fatura não foi encontrada
-      </q-banner>
+    <div v-else-if="notFound" class="pay-invoice-detail__not-found">
+      <q-card flat class="pay-invoice-not-found-card">
+        <div class="pay-invoice-not-found-card__icon">
+          <q-icon name="receipt_long" />
+        </div>
+        <h2>Fatura não encontrada</h2>
+        <p>Não foi possível carregar os detalhes desta conta a pagar.</p>
+        <q-btn
+          unelevated
+          no-caps
+          color="primary"
+          icon="arrow_back"
+          label="Voltar às contas a pagar"
+          :to="{ name: 'FinancePayIndex' }"
+        />
+      </q-card>
     </div>
-  </q-card>
+  </div>
 </template>
 
 <script>
 import { mapActions, mapGetters }          from 'vuex';
+import PageHeader                          from '@freteclick/quasar-common-ui/src/components/common/PageHeader.vue';
 import InvoiceOrders                       from './details/InvoiceOrders';
 import InvoiceInvoice                      from './details/InvoiceInvoice';
 import { formatMoney, formatDateYmdTodmY } from '@freteclick/quasar-common-ui/src/utils/formatter';
 
 export default {
   components: {
+    PageHeader,
     InvoiceInvoice,
     InvoiceOrders ,
   },
@@ -151,6 +160,23 @@ export default {
     ...mapGetters({
       myCompany: 'people/currentCompany',
     }),
+
+    invoiceNumber() {
+      const invoiceUri = this.invoice && this.invoice['@id'] ? this.invoice['@id'] : '';
+      const match = invoiceUri.match(/^\/finance\/pay\/([a-z0-9-]*)$/i);
+
+      return match ? match[1] : (this.invoiceId || '—');
+    },
+
+    invoiceStatus() {
+      return (this.invoice && this.invoice.status) || {};
+    },
+
+    invoiceOrdersCount() {
+      return this.invoice && Array.isArray(this.invoice.order)
+        ? this.invoice.order.length
+        : 0;
+    },
   },
 
   watch: {
@@ -208,3 +234,209 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.pay-invoice-detail {
+  position: relative;
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  min-height: 72vh;
+  gap: 20px;
+  color: #1b2d43;
+}
+
+.pay-invoice-detail__summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.pay-invoice-summary-card {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 13px;
+  padding: 18px;
+  border: 1px solid #e5ebf3;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 22px rgba(26, 46, 70, 0.035);
+}
+
+.pay-invoice-summary-card__icon {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 13px;
+  color: #245d9c;
+  background: #eaf2fb;
+  font-size: 21px;
+}
+
+.pay-invoice-summary-card--amount .pay-invoice-summary-card__icon {
+  color: #27805a;
+  background: #e8f7ef;
+}
+
+.pay-invoice-summary-card__icon--date {
+  color: #9b6b17;
+  background: #fff5df;
+}
+
+.pay-invoice-summary-card__icon--status {
+  color: #7357a6;
+  background: #f0ebfb;
+}
+
+.pay-invoice-summary-card__icon--orders {
+  color: #287f91;
+  background: #e6f5f7;
+}
+
+.pay-invoice-summary-card__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.pay-invoice-summary-card__copy > span {
+  color: #7b8b9c;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.pay-invoice-summary-card__copy > strong {
+  overflow: hidden;
+  color: #1a2e45;
+  font-size: 18px;
+  font-weight: 750;
+  letter-spacing: -0.025em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pay-invoice-status {
+  width: fit-content;
+  max-width: 100%;
+  padding: 6px 10px;
+  border-radius: 20px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.pay-invoice-detail__workspace {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #e5ebf3;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 12px 30px rgba(25, 48, 78, 0.045);
+}
+
+.pay-invoice-detail__tabs-shell {
+  border-bottom: 1px solid #e9eef4;
+  background: #fbfcfe;
+}
+
+.pay-invoice-detail__tabs {
+  min-height: 58px;
+  padding: 0 18px;
+  color: #718398;
+}
+
+.pay-invoice-detail__tabs :deep(.q-tab--active) {
+  color: #245d9c;
+  font-weight: 700;
+}
+
+.pay-invoice-detail__tabs :deep(.q-tab__indicator) {
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+}
+
+.pay-invoice-detail__panels {
+  min-width: 0;
+  background: transparent;
+}
+
+.pay-invoice-detail__panel {
+  min-width: 0;
+  padding: 20px;
+}
+
+.pay-invoice-detail__not-found {
+  display: grid;
+  min-height: 60vh;
+  place-items: center;
+}
+
+.pay-invoice-not-found-card {
+  display: flex;
+  width: min(100%, 440px);
+  align-items: center;
+  flex-direction: column;
+  padding: 36px 28px;
+  border: 1px solid #e5ebf3;
+  border-radius: 20px;
+  background: #fff;
+  text-align: center;
+}
+
+.pay-invoice-not-found-card__icon {
+  display: grid;
+  width: 62px;
+  height: 62px;
+  place-items: center;
+  border-radius: 18px;
+  color: #b84949;
+  background: #fff0f0;
+  font-size: 30px;
+}
+
+.pay-invoice-not-found-card h2 {
+  margin: 18px 0 0;
+  color: #1a2e45;
+  font-size: 22px;
+  font-weight: 750;
+}
+
+.pay-invoice-not-found-card p {
+  margin: 8px 0 20px;
+  color: #7b8b9c;
+  font-size: 13px;
+}
+
+@media (max-width: 1024px) {
+  .pay-invoice-detail__summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 600px) {
+  .pay-invoice-detail {
+    gap: 14px;
+  }
+
+  .pay-invoice-detail__summary {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+  }
+
+  .pay-invoice-summary-card {
+    padding: 15px;
+  }
+
+  .pay-invoice-detail__tabs {
+    padding: 0 4px;
+  }
+
+  .pay-invoice-detail__panel {
+    padding: 12px;
+  }
+}
+</style>