@freteclick/quasar-financial-ui 1.0.113 → 1.0.114

package/src/components/invoice/receive/InvoiceSearching.vue

@@ -1,61 +1,225 @@
 <template>
-  <div>
-    <Filters :filters="filters" @onRequest="onRequest" />
-    <q-table :loading="isLoading" :rows="data" :columns="settings.columns" v-model:pagination="pagination"
-      @request="onRequest" row-key="id" :visible-columns="settings.visibleColumns" style="min-height: 90vh">
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td key="id" :props="props">
-            <q-btn outline dense :to="{ name: 'ReceiveDetails', params: { id: props.row.id } }"
-              :label="props.cols[0].value" :style="{ color: props.row.color_status }" class="full-width" />
-          </q-td>
-          <q-td key="tipo" :props="props">{{ props.cols[1].value }}</q-td>
-          <q-td key="pedidos" :props="props">
-            <q-btn outline dense :label="
-              props.row.pedidos.length > 1
-                ? `${props.row.pedidos.length} Pedidos`
-                : '1 Pedido'
-            " color="primary" @click="seeOrdersList(props.row.pedidos, props.row.id)" class="full-width" />
-          </q-td>
-          <q-td key="dataVencimento" :props="props">{{
-              props.cols[3].value
-          }}</q-td>
-          <q-td key="payer" :props="props">{{ props.cols[4].value }}</q-td>
-          <q-td key="client" :props="props">{{ props.cols[5].value }}</q-td>
-          <q-td key="status" :props="props" :style="{ color: props.row.color_status }">
-            {{ $t(`invoice.statuses.${props.row.status}`) }}
-          </q-td>
-          <q-td key="preco" :props="props">{{ props.cols[7].value }}</q-td>
-        </q-tr>
-      </template>
-    </q-table>
+  <div class="receivables-page">
+    <div class="receivables-page__content">
+      <PageHeader
+        title="Contas a receber"
+        description="Acompanhe faturas, vencimentos e valores da sua empresa."
+      >
+        <template #actions>
+          <q-btn
+            outline
+            no-caps
+            rounded
+            color="white"
+            icon="tune"
+            label="Filtros"
+            @click="filtersDrawerOpen = true"
+          />
+        </template>
+      </PageHeader>
+
+      <section class="receivables-table-panel">
+        <div class="receivables-table-panel__heading">
+          <div>
+            <span class="receivables-section-eyebrow">LANÇAMENTOS</span>
+            <h2>Faturas de recebimento</h2>
+          </div>
+          <q-card flat class="receivables-summary__card" aria-label="Valor total dos recebíveis">
+            <div class="receivables-summary__icon receivables-summary__icon--green">
+              <q-icon name="payments" />
+            </div>
+            <div class="receivables-summary__copy">
+              <span>Valor total dos recebíveis</span>
+              <strong class="receivables-summary__amount">{{ filteredTotalAmount }}</strong>
+              <small>Soma de todas as faturas filtradas</small>
+            </div>
+          </q-card>
+        </div>
+
+        <q-table
+          flat
+          class="receivables-table"
+          :loading="isLoading"
+          :rows="data"
+          :columns="settings.columns"
+          v-model:pagination="pagination"
+          @request="onRequest"
+          row-key="id"
+          :visible-columns="settings.visibleColumns"
+          :rows-per-page-options="[10, 25, 50]"
+          :grid="$q.screen.lt.sm"
+          no-data-label="Nenhuma fatura encontrada"
+          no-results-label="Nenhuma fatura corresponde aos filtros"
+          loading-label="Carregando recebíveis..."
+          rows-per-page-label="Linhas por página"
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" class="receivables-table__row">
+              <q-td key="id" :props="props">
+                <q-btn
+                  flat
+                  dense
+                  no-caps
+                  icon="receipt_long"
+                  :label="`#${props.row.id}`"
+                  :to="{ name: 'ReceiveDetails', params: { id: props.row.id } }"
+                  class="receivables-invoice-link"
+                />
+              </q-td>
+              <q-td key="tipo" :props="props">
+                <q-badge class="receivables-type-badge">{{ props.row.tipo }}</q-badge>
+              </q-td>
+              <q-td key="pedidos" :props="props">
+                <q-btn
+                  flat
+                  dense
+                  no-caps
+                  icon="link"
+                  color="primary"
+                  :label="ordersLabel(props.row.pedidos)"
+                  :disable="!props.row.pedidos.length"
+                  @click="seeOrdersList(props.row.pedidos, props.row.id)"
+                  class="receivables-orders-link"
+                />
+              </q-td>
+              <q-td key="dataVencimento" :props="props">
+                <div class="receivables-date-cell">
+                  <q-icon name="event" />
+                  <span>{{ props.row.dataVencimentoLabel }}</span>
+                </div>
+              </q-td>
+              <q-td key="payer" :props="props">{{ props.row.payer }}</q-td>
+              <q-td key="client" :props="props">{{ props.row.client }}</q-td>
+              <q-td key="status" :props="props">
+                <q-badge
+                  rounded
+                  class="receivables-status-badge"
+                  :style="statusStyle(props.row.color_status)"
+                >
+                  <span class="receivables-status-badge__dot" />
+                  {{ statusLabel(props.row.status) }}
+                </q-badge>
+              </q-td>
+              <q-td key="preco" :props="props" class="receivables-price-cell">
+                {{ props.cols[7].value }}
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:item="props">
+            <div class="col-12">
+              <q-card flat bordered class="receivables-mobile-card">
+                <div class="receivables-mobile-card__top">
+                  <q-btn
+                    flat
+                    dense
+                    no-caps
+                    icon="receipt_long"
+                    :label="`#${props.row.id}`"
+                    :to="{ name: 'ReceiveDetails', params: { id: props.row.id } }"
+                    class="receivables-invoice-link"
+                  />
+                  <q-badge
+                    rounded
+                    class="receivables-status-badge"
+                    :style="statusStyle(props.row.color_status)"
+                  >
+                    <span class="receivables-status-badge__dot" />
+                    {{ statusLabel(props.row.status) }}
+                  </q-badge>
+                </div>
+                <div class="receivables-mobile-card__type">{{ props.row.tipo }}</div>
+                <div class="receivables-mobile-card__grid">
+                  <div>
+                    <span>Vencimento</span>
+                    <strong>{{ props.row.dataVencimentoLabel }}</strong>
+                  </div>
+                  <div>
+                    <span>Valor</span>
+                    <strong>{{ props.cols[7].value }}</strong>
+                  </div>
+                  <div>
+                    <span>Pagador</span>
+                    <strong>{{ props.row.payer }}</strong>
+                  </div>
+                  <div>
+                    <span>Cliente</span>
+                    <strong>{{ props.row.client }}</strong>
+                  </div>
+                </div>
+                <div class="receivables-mobile-card__actions">
+                  <q-btn
+                    flat
+                    dense
+                    no-caps
+                    icon="link"
+                    color="primary"
+                    :label="ordersLabel(props.row.pedidos)"
+                    :disable="!props.row.pedidos.length"
+                    @click="seeOrdersList(props.row.pedidos, props.row.id)"
+                  />
+                  <q-btn
+                    unelevated
+                    dense
+                    no-caps
+                    color="primary"
+                    label="Abrir fatura"
+                    :to="{ name: 'ReceiveDetails', params: { id: props.row.id } }"
+                  />
+                </div>
+              </q-card>
+            </div>
+          </template>
+        </q-table>
+      </section>
+    </div>
 
     <q-dialog v-model="dialogs.orders.visible" transition-show="scale" transition-hide="scale">
-      <q-card class="text-white" style="background-color: #00519b; width: 300px">
-        <q-card-section>
-          <div class="row items-center">
-            <div class="text-h6">
-              Pedidos da Fatura #{{ dialogs.orders.invoice }}
-            </div>
-            <q-space />
-            <q-btn icon="close" color="white" flat round dense v-close-popup />
+      <q-card class="receivables-orders-dialog">
+        <q-card-section class="receivables-orders-dialog__header">
+          <div>
+            <span>DETALHES DA FATURA</span>
+            <h3>Pedidos da fatura #{{ dialogs.orders.invoice }}</h3>
           </div>
+          <q-btn icon="close" flat round dense v-close-popup aria-label="Fechar" />
         </q-card-section>
-
-        <q-card-section class="q-pt-none">
-          <q-markup-table>
-            <tbody>
-              <tr v-for="(orderId, index) in dialogs.orders.items" :key="index">
-                <td class="text-center">
-                  <q-btn flat color="primary" :label="`Ver pedido #${orderId}`"
-                    :to="{ name: 'OrderDetails', params: { id: orderId } }" />
-                </td>
-              </tr>
-            </tbody>
-          </q-markup-table>
-        </q-card-section>
+        <div class="receivables-orders-dialog__list">
+          <q-list separator>
+            <q-item v-for="(orderId, index) in dialogs.orders.items" :key="index">
+              <q-item-section avatar>
+                <q-avatar color="blue-1" text-color="primary" icon="receipt" />
+              </q-item-section>
+              <q-item-section>Pedido #{{ orderId }}</q-item-section>
+              <q-item-section side>
+                <q-btn
+                  flat
+                  dense
+                  no-caps
+                  color="primary"
+                  label="Abrir"
+                  :to="{ name: 'OrderDetails', params: { id: orderId } }"
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
       </q-card>
     </q-dialog>
+
+    <FilterDrawer
+      v-model="filtersDrawerOpen"
+      eyebrow="CONTAS A RECEBER"
+      title="Refinar recebíveis"
+      description="Escolha os critérios para atualizar a listagem."
+      :show-apply="false"
+      @clear="clearFilters"
+    >
+      <Filters
+        :filters="filters"
+        variant="receivables-drawer"
+        @onRequest="onFilterRequest"
+      />
+    </FilterDrawer>
   </div>
 </template>
 
@@ -67,6 +231,8 @@ import {
 } from "@freteclick/quasar-common-ui/src/utils/formatter";
 
 import { date } from "quasar";
+import PageHeader from "@freteclick/quasar-common-ui/src/components/common/PageHeader.vue";
+import FilterDrawer from "@freteclick/quasar-common-ui/src/components/common/FilterDrawer.vue";
 import Filters from "../../common/Filters.vue";
 
 const SETTINGS = {
@@ -89,18 +255,21 @@ const SETTINGS = {
         return `#${val}`;
       },
       label: "ID",
+      sortable: false,
     },
     {
       name: "tipo",
       align: "left",
       field: "tipo",
       label: "Tipo",
+      sortable: false,
     },
     {
       name: "pedidos",
       align: "left",
       field: "pedidos",
       label: "Pedidos",
+      sortable: false,
     },
     {
       name: "dataVencimento",
@@ -110,33 +279,38 @@ const SETTINGS = {
         return formatDateYmdTodmY(val);
       },
       label: "Data vencimento",
+      sortable: false,
     },
     {
       name: "payer",
       field: "payer",
       align: "left",
       label: "Pagador",
+      sortable: false,
     },
     {
       name: "client",
       field: "client",
       align: "left",
       label: "Cliente",
+      sortable: false,
     },
     {
       name: "status",
       field: "status",
       align: "left",
       label: "Status",
+      sortable: false,
     },
     {
       name: "preco",
       field: "preco",
-      align: "left",
+      align: "right",
       format: (val, row) => {
         return formatMoney(val, "BRL", "pt-br");
       },
       label: "Preço",
+      sortable: false,
     },
   ],
 };
@@ -145,6 +319,8 @@ Object.freeze(SETTINGS);
 
 export default {
   components: {
+    PageHeader,
+    FilterDrawer,
     Filters,
   },
   props: {
@@ -203,6 +379,7 @@ export default {
           invoice: null,
         },
       },
+      filtersDrawerOpen: false,
       data: [],
       filters: {
         orderType: {
@@ -219,7 +396,7 @@ export default {
       },
       pagination: {
         sortBy: "dataVencimento",
-        descending: false,
+        descending: true,
         page: 1,
         rowsPerPage: 10,
         rowsNumber: 10,
@@ -234,8 +411,16 @@ export default {
       violations: "receiveInvoice/violations",
       items: "receiveInvoice/items",
       totalItems: "receiveInvoice/totalItems",
+      totalAmount: "receiveInvoice/totalAmount",
       myCompany: "people/currentCompany",
     }),
+
+    filteredTotalAmount() {
+      if (this.totalAmount === null || this.totalAmount === undefined) return "—";
+
+      return formatMoney(Number(this.totalAmount) || 0, "BRL", "pt-br");
+    },
+
   },
 
   watch: {
@@ -256,34 +441,34 @@ export default {
     items(items) {
       if (!items) return;
 
-      let data = [];
-
-      for (let i in items) {
-        let item = items[i];
-        let orders = [];
-
-        for (let o in item.order) {
-          orders.push(item.order[o].order["@id"].replace(/[^0-9]/g, ""));
-        }
-
-        var clientName = item.order[0].order.client.name;
-        var payerName = item.order[0].order.payer.name;
-
-        data.push({
-          "@id": item["@id"],
-          id: item["@id"].replace(/[^0-9]/g, ""),
-          tipo: this.$t(item.invoice_type),
+      this.data = items.map((item) => {
+        const orderEntries = Array.isArray(item.order) ? item.order : [];
+        const orders = orderEntries
+          .map((entry) => {
+            const orderUri = entry && entry.order && entry.order["@id"];
+            return orderUri ? String(orderUri).replace(/[^0-9]/g, "") : null;
+          })
+          .filter(Boolean);
+        const firstOrder =
+          (orderEntries.find((entry) => entry && entry.order) || {}).order || {};
+        const invoiceUri = item["@id"] || "";
+
+        return {
+          "@id": invoiceUri,
+          id: String(invoiceUri).replace(/[^0-9]/g, "") || item.id,
+          tipo: item.invoice_type ? this.$t(item.invoice_type) : "—",
           pedidos: orders,
-          color_status: item.status.color,
-          dataVencimento: item.dueDate,
-          payer: payerName,
-          client: clientName,
-          status: item.status.status,
-          preco: item.price,
-        });
-      }
-
-      this.data = data;
+          color_status: (item.status && item.status.color) || "",
+          dataVencimento: item.dueDate || "",
+          dataVencimentoLabel: item.dueDate
+            ? formatDateYmdTodmY(item.dueDate)
+            : "—",
+          payer: (firstOrder.payer && firstOrder.payer.name) || "—",
+          client: (firstOrder.client && firstOrder.client.name) || "—",
+          status: (item.status && item.status.status) || "",
+          preco: item.price || 0,
+        };
+      });
     },
   },
 
@@ -300,6 +485,33 @@ export default {
       this.dialogs.orders.visible = true;
     },
 
+    ordersLabel(orders) {
+      const count = Array.isArray(orders) ? orders.length : 0;
+      return count === 1 ? "1 pedido" : `${count} pedidos`;
+    },
+
+    statusLabel(status) {
+      return status ? this.$t(`invoice.statuses.${status}`) : "—";
+    },
+
+    statusStyle(color) {
+      return color ? { color } : {};
+    },
+
+    clearFilters() {
+      this.filters.text = null;
+      this.filters.orderType = { label: "Todos", value: null };
+      this.filters.status = { label: "Todos", value: null };
+      this.filters.date = { from: "", to: "" };
+      this.pagination.page = 1;
+      this.onRequest({ pagination: this.pagination });
+    },
+
+    onFilterRequest() {
+      this.pagination.page = 1;
+      this.onRequest({ pagination: this.pagination });
+    },
+
     formatDate(dateString) {
       if (dateString)
         return date.formatDate(
@@ -311,20 +523,21 @@ export default {
     onRequest(props) {
       if (this.isLoading) return;
 
-      let pagination = props ? props.pagination : this.pagination;
-
-      let { page, rowsPerPage, sortBy, descending } = pagination;
+      const requestedPagination =
+        props && props.pagination ? props.pagination : this.pagination;
+      const page = Number(requestedPagination.page) || 1;
+      const rowsPerPage = Number(requestedPagination.rowsPerPage) || 10;
 
-      let params = { itemsPerPage: rowsPerPage, page };
+      const params = { itemsPerPage: rowsPerPage, page };
 
       params.from = this.formatDate(this.filters.date.from) || "";
       params.to = this.formatDate(this.filters.date.to) || "";
-      params.orderType = this.filters.orderType.value || "";
+      params.orderType = (this.filters.orderType && this.filters.orderType.value) || "";
 
       if (this.filters.text != null && this.filters.text.length > 0) {
         if (this.filters.text.length < 2) return;
 
-        params["searchBy"] = this.filters.text;
+        params.searchBy = this.filters.text.trim();
       }
 
       if (this.filters.status != null) {
@@ -345,15 +558,357 @@ export default {
         params["order.order"] = this.orderId;
       }
 
-      params["invoice[dueDate]"] = "desc";
-
       this.getItems(params).then(() => {
-        this.pagination.page = page;
-        this.pagination.rowsPerPage = rowsPerPage;
-        this.pagination.sortBy = sortBy;
-        this.pagination.descending = descending;
+        this.pagination = {
+          ...this.pagination,
+          page,
+          rowsPerPage,
+          sortBy: "dataVencimento",
+          descending: true,
+        };
       });
     },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.receivables-page {
+  width: 100%;
+  color: #1b2d43;
+}
+
+.receivables-page__content {
+  display: grid;
+  width: min(100%, 1480px);
+  gap: 20px;
+  margin: 0 auto;
+}
+
+.receivables-summary__card {
+  display: flex;
+  width: min(100%, 410px);
+  min-width: 280px;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  padding: 12px 16px;
+  border: 1px solid #e7edf4;
+  border-radius: 14px;
+  background: #fbfdff;
+}
+
+.receivables-summary__icon {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 14px;
+  font-size: 22px;
+}
+
+.receivables-summary__icon--green {
+  color: #27805a;
+  background: #e8f7ef;
+}
+
+.receivables-summary__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.receivables-summary__copy > span {
+  color: #6f7f91;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.receivables-summary__copy strong {
+  overflow: hidden;
+  margin-top: 2px;
+  color: #1a2e45;
+  font-size: 24px;
+  font-weight: 750;
+  letter-spacing: -0.035em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.receivables-summary__copy strong.receivables-summary__amount {
+  font-size: clamp(17px, 1.5vw, 22px);
+}
+
+.receivables-summary__copy small {
+  margin-top: 1px;
+  color: #93a0af;
+  font-size: 11px;
+}
+
+.receivables-table-panel {
+  overflow: hidden;
+  border: 1px solid #e5ebf3;
+  border-radius: 19px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(25, 48, 78, 0.05);
+}
+
+.receivables-table-panel__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 23px 25px 19px;
+  border-bottom: 1px solid #edf1f6;
+}
+
+.receivables-section-eyebrow {
+  color: #7890aa;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.13em;
+}
+
+.receivables-table-panel__heading h2 {
+  margin: 5px 0 0;
+  color: #1a2e45;
+  font-size: 19px;
+  font-weight: 720;
+  letter-spacing: -0.02em;
+}
+
+.receivables-table {
+  color: #33465b;
+}
+
+.receivables-table :deep(.q-table thead tr) {
+  height: 48px;
+  background: #f8fafc;
+}
+
+.receivables-table :deep(.q-table thead th) {
+  padding: 0 16px;
+  color: #7b8b9c;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.receivables-table :deep(.q-table tbody td) {
+  height: 64px;
+  padding: 10px 16px;
+  border-color: #edf1f5;
+  font-size: 12px;
+}
+
+.receivables-table :deep(.q-table tbody tr) {
+  transition: background-color 0.15s ease;
+}
+
+.receivables-table :deep(.q-table tbody tr:hover) {
+  background: #f8fbff;
+}
+
+.receivables-table :deep(.q-table__bottom) {
+  min-height: 58px;
+  padding: 8px 18px;
+  border-top: 1px solid #edf1f5;
+  color: #718096;
+  font-size: 12px;
+}
+
+.receivables-invoice-link {
+  border-radius: 8px;
+  color: #245d9c;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.receivables-invoice-link :deep(.q-icon) {
+  font-size: 17px;
+}
+
+.receivables-type-badge {
+  padding: 6px 9px;
+  border-radius: 7px;
+  color: #526b86;
+  background: #eef3f8;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.receivables-orders-link {
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.receivables-date-cell {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  white-space: nowrap;
+}
+
+.receivables-date-cell .q-icon {
+  color: #8294a8;
+  font-size: 16px;
+}
+
+.receivables-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 9px;
+  border-radius: 20px;
+  background: #f0f4f7;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.receivables-status-badge__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.receivables-price-cell {
+  color: #1e3e5e;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.receivables-mobile-card {
+  margin: 4px 0;
+  padding: 16px;
+  border-color: #e7edf4;
+  border-radius: 15px;
+  background: #fff;
+}
+
+.receivables-mobile-card__top,
+.receivables-mobile-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.receivables-mobile-card__type {
+  margin: 6px 0 14px;
+  color: #728398;
+  font-size: 11px;
+}
+
+.receivables-mobile-card__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 13px 10px;
+}
+
+.receivables-mobile-card__grid > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.receivables-mobile-card__grid span {
+  color: #8795a5;
+  font-size: 10px;
+}
+
+.receivables-mobile-card__grid strong {
+  overflow: hidden;
+  color: #263b52;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.receivables-mobile-card__actions {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #edf1f5;
+}
+
+.receivables-orders-dialog {
+  display: flex;
+  width: min(100%, 520px);
+  max-height: min(82vh, 760px);
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 18px;
+}
+
+.receivables-orders-dialog__list {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.receivables-orders-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 22px;
+  color: #fff;
+  background: #173f68;
+}
+
+.receivables-orders-dialog__header span {
+  color: #c7d9eb;
+  font-size: 9px;
+  font-weight: 750;
+  letter-spacing: 0.12em;
+}
+
+.receivables-orders-dialog__header h3 {
+  margin: 5px 0 0;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.receivables-orders-dialog__header .q-btn {
+  color: #fff;
+}
+
+@media (max-width: 600px) {
+  .receivables-page__content {
+    gap: 14px;
+  }
+
+  .receivables-summary__card {
+    padding: 14px 16px;
+  }
+
+  .receivables-summary__icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .receivables-table-panel {
+    border-radius: 16px;
+  }
+
+  .receivables-table-panel__heading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+    padding: 18px 17px 14px;
+  }
+
+  .receivables-summary__card {
+    width: 100%;
+    min-width: 0;
+    margin-left: 0;
+  }
+
+}
+</style>