@freteclick/quasar-financial-ui 1.0.113 → 1.0.115

package/src/pages/Invoice/Pay/Details.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page padding>
+  <q-page class="finance-pay-detail-page">
     <InvoiceDetails />
   </q-page>
 </template>
@@ -21,3 +21,20 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.finance-pay-detail-page {
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: clamp(20px, 3vw, 36px);
+  background: #f4f7fb;
+}
+
+@media (max-width: 600px) {
+  .finance-pay-detail-page {
+    padding: 16px 20px 24px;
+  }
+}
+</style>

package/src/pages/Invoice/Pay/Index.vue

@@ -1,40 +1,78 @@
 <template>
-  <q-page padding>
-    <q-card style="min-height: 90vh;" :bordered="false" :flat="true">
-      <q-card-section class="text-h6">
-        {{ $t('Contas a pagar') }}
-      </q-card-section>
-      <div class="row">
-        <div class="col-12">
-          <q-tabs :horizontal="$q.screen.gt.xs" align="justify" v-model="currentTab" class="bg-white text-primary">
-            <q-tab name="expenses" :label="$t('Despesas')" />
-            <q-tab name="categories" :label="$t('Categorias')" />
-          </q-tabs>
-
-          <q-separator />
-
-          <q-tab-panels v-model="currentTab">
-            <q-tab-panel name="expenses" class="q-px-none">
-              <InvoiceSearching />
-            </q-tab-panel>
-
-            <q-tab-panel name="categories" class="q-px-none">
-              <TableCategories :context="'expense'" :api="api" />
-            </q-tab-panel>
-          </q-tab-panels>
-        </div>
+  <q-page class="finance-pay-page">
+    <div class="finance-pay-page__content">
+      <PageHeader
+        title="Contas a pagar"
+        description="Organize despesas, acompanhe vencimentos e mantenha os pagamentos em dia."
+      >
+        <template #actions>
+          <template v-if="currentTab === 'expenses'">
+            <q-btn
+              unelevated
+              no-caps
+              rounded
+              color="white"
+              text-color="primary"
+              icon="add"
+              label="Adicionar despesa"
+              @click="openExpenseDialog"
+            />
+          </template>
+          <template v-else>
+            <q-btn
+              unelevated
+              no-caps
+              rounded
+              color="white"
+              text-color="primary"
+              icon="add"
+              label="Adicionar categoria"
+              @click="openCreateCategory"
+            />
+          </template>
+        </template>
+      </PageHeader>
+
+      <div class="finance-pay-tabs-shell">
+        <q-tabs
+          v-model="currentTab"
+          align="left"
+          no-caps
+          inline-label
+          class="finance-pay-tabs"
+        >
+          <q-tab name="expenses" icon="receipt_long" :label="$t('Despesas')" />
+          <q-tab name="categories" icon="category" :label="$t('Categorias')" />
+        </q-tabs>
       </div>
-    </q-card>
+
+      <q-tab-panels v-model="currentTab" class="finance-pay-panels">
+        <q-tab-panel name="expenses" class="q-pa-none">
+          <InvoiceSearching ref="invoiceSearch" />
+        </q-tab-panel>
+
+        <q-tab-panel name="categories" class="q-pa-none">
+          <TableCategories
+            ref="categoryTable"
+            :context="'expense'"
+            :api="api"
+            appearance="finance"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
   </q-page>
 </template>
 
 <script>
 import Api from '@freteclick/quasar-common-ui/src/utils/api';
+import PageHeader from '@freteclick/quasar-common-ui/src/components/common/PageHeader.vue';
 import InvoiceSearching from '../../../components/invoice/pay/InvoiceSearching.vue';
 import TableCategories from '@freteclick/quasar-common-ui/src/components/categories/Table.vue';
 
 export default {
   components: {
+    PageHeader,
     TableCategories,
     InvoiceSearching,
   },
@@ -46,8 +84,79 @@ export default {
     }
   },
 
-  created() {
-    
+  methods: {
+    openExpenseDialog() {
+      this.$refs.invoiceSearch?.openExpenseDialog();
+    },
+
+    openCreateCategory() {
+      this.$refs.categoryTable?.openCreateCategory();
+    },
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.finance-pay-page {
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: clamp(20px, 3vw, 36px);
+  background: #f4f7fb;
+}
+
+.finance-pay-page__content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  gap: 20px;
+  margin: 0;
+}
+
+.finance-pay-tabs-shell {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #e5ebf3;
+  border-radius: 15px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(26, 46, 70, 0.035);
+}
+
+.finance-pay-tabs {
+  min-height: 56px;
+  padding: 0 12px;
+  color: #687d93;
+}
+
+.finance-pay-tabs :deep(.q-tab--active) {
+  color: #245d9c;
+  font-weight: 700;
+}
+
+.finance-pay-tabs :deep(.q-tab__indicator) {
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+}
+
+.finance-pay-panels {
+  min-width: 0;
+  background: transparent;
+}
+
+@media (max-width: 600px) {
+  .finance-pay-page {
+    padding: 16px 20px 24px;
+  }
+
+  .finance-pay-page__content {
+    gap: 14px;
+  }
+
+  .finance-pay-tabs {
+    padding: 0 4px;
+  }
+}
+</style>

package/src/pages/Invoice/Receive/Index.vue

@@ -1,10 +1,6 @@
 <template>
-  <q-page padding>
-    <div class="row">
-      <div class="col-12">
-        <InvoiceSearching />
-      </div>
-    </div>
+  <q-page class="finance-receive-page">
+    <InvoiceSearching />
   </q-page>
 </template>
 
@@ -12,16 +8,24 @@
 import InvoiceSearching from '../../../components/invoice/receive/InvoiceSearching.vue';
 
 export default {
-  name      : 'InvoiceIndexPage',
+  name: 'InvoiceReceiveIndexPage',
 
   components: {
     InvoiceSearching,
   },
+};
+</script>
 
-  data () {
-    return {
+<style lang="scss" scoped>
+.finance-receive-page {
+  min-height: 100%;
+  padding: clamp(18px, 3vw, 36px);
+  background: #f4f7fb;
+}
 
-    }
+@media (max-width: 600px) {
+  .finance-receive-page {
+    padding: 16px 12px 24px;
   }
 }
-</script>
+</style>

package/src/store/modules/invoice/pay/actions.js

@@ -15,6 +15,7 @@ export const getItems = ({ commit }, params = {}) => {
       commit(types.SET_ITEMS, data['hydra:member']);
       commit(types.SET_VIEW, data['hydra:view']);
       commit(types.SET_TOTALITEMS, data['hydra:totalItems']);
+      commit(types.SET_TOTALAMOUNT, data.totalAmount);
 
       return data['hydra:member'];
 
@@ -83,14 +84,14 @@ export const updateInvoiceDuedate = ({ commit }, { id, dueDate, params }) => {
     });
 };
 
-export const deleteInvoiceOrder = ({ commit }, { invoiceId, orderId, params }) => {
+export const deleteInvoiceOrder = ({ commit }, { invoiceId, orderId, params, priceSource = 'dacte' }) => {
   let options = {
     method: 'PUT',
-    body: JSON.stringify({ orderId }),
+    body: JSON.stringify({ orderId, priceSource }),
     params: params
   };
 
-  return fetch(`${invoiceId}/remove-order`, options)
+  return fetch(`${RESOURCE_ENDPOINT}/${invoiceId}/remove-order`, options)
     .then(response => response.json())
     .then(data => {
       if (data.response) {
@@ -98,7 +99,7 @@ export const deleteInvoiceOrder = ({ commit }, { invoiceId, orderId, params }) =
           throw Error(data.response.error);
       }
 
-      return null;
+      return data.response ? data.response.data : null;
     });
 };
 

package/src/store/modules/invoice/pay/getters.js

@@ -4,4 +4,5 @@ export const isLoading  = state => state.isLoading;
 export const violations = state => state.violations;
 export const items      = state => state.items;
 export const view       = state => state.view;
-export const totalItems = state => state.totalItems;
+export const totalItems = state => state.totalItems;
+export const totalAmount = state => state.totalAmount;

package/src/store/modules/invoice/pay/index.js

@@ -10,6 +10,7 @@ export default {
     violations: null,
     retrieved : null,
     totalItems: 10,
+    totalAmount: null,
     items     : [],
     view      : [],
   },

package/src/store/modules/invoice/pay/mutation_types.js

@@ -4,5 +4,6 @@ export const SET_VIOLATIONS = 'SET_VIOLATIONS';
 export const SET_ITEMS      = 'SET_ITEMS';
 export const SET_VIEW       = 'SET_VIEW';
 export const SET_TOTALITEMS = 'SET_TOTALITEMS';
+export const SET_TOTALAMOUNT = 'SET_TOTALAMOUNT';
 export const SET_RETRIEVED  = 'SET_RETRIEVED';
-export const RESET          = 'RESET';
+export const RESET          = 'RESET';

package/src/store/modules/invoice/pay/mutations.js

@@ -29,6 +29,10 @@ export default {
     Object.assign(state, { totalItems });
   },
 
+  [types.SET_TOTALAMOUNT](state, totalAmount) {
+    Object.assign(state, { totalAmount });
+  },
+
   [types.RESET](state) {
     Object.assign(state, {
       isLoading : false,
@@ -36,6 +40,7 @@ export default {
       violations: null,
       retrieved : null,
       totalItems: null,
+      totalAmount: null,
       items     : [],
     });
   },

package/src/store/modules/invoice/receive/actions.js

@@ -15,6 +15,7 @@ export const getItems = ({ commit }, params = {}) => {
             commit(types.SET_ITEMS, data['hydra:member']);
             commit(types.SET_VIEW, data['hydra:view']);
             commit(types.SET_TOTALITEMS, data['hydra:totalItems']);
+            commit(types.SET_TOTALAMOUNT, data.totalAmount);
 
             return data['hydra:member'];
 

package/src/store/modules/invoice/receive/getters.js

@@ -4,4 +4,5 @@ export const isLoading  = state => state.isLoading;
 export const violations = state => state.violations;
 export const items      = state => state.items;
 export const view       = state => state.view;
-export const totalItems = state => state.totalItems;
+export const totalItems = state => state.totalItems;
+export const totalAmount = state => state.totalAmount;

package/src/store/modules/invoice/receive/index.js

@@ -10,6 +10,7 @@ export default {
     violations: null,
     retrieved : null,
     totalItems: 10,
+    totalAmount: null,
     items     : [],
     view      : [],
   },

package/src/store/modules/invoice/receive/mutation_types.js

@@ -4,5 +4,6 @@ export const SET_VIOLATIONS = 'SET_VIOLATIONS';
 export const SET_ITEMS      = 'SET_ITEMS';
 export const SET_VIEW       = 'SET_VIEW';
 export const SET_TOTALITEMS = 'SET_TOTALITEMS';
+export const SET_TOTALAMOUNT = 'SET_TOTALAMOUNT';
 export const SET_RETRIEVED  = 'SET_RETRIEVED';
-export const RESET          = 'RESET';
+export const RESET          = 'RESET';

package/src/store/modules/invoice/receive/mutations.js

@@ -29,6 +29,10 @@ export default {
     Object.assign(state, { totalItems });
   },
 
+  [types.SET_TOTALAMOUNT](state, totalAmount) {
+    Object.assign(state, { totalAmount });
+  },
+
   [types.RESET](state) {
     Object.assign(state, {
       isLoading : false,
@@ -36,6 +40,7 @@ export default {
       violations: null,
       retrieved : null,
       totalItems: null,
+      totalAmount: null,
       items     : [],
     });
   },