diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
index 5a2341440..9098f7123 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
@@ -12,6 +12,7 @@ import PaymentReceiveFormBody from './PaymentReceiveFormBody';
import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
+import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs';
import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
import withSettings from 'containers/Settings/withSettings';
@@ -164,7 +165,9 @@ function PaymentReceiveForm({
+ {/* Alerts & Dialogs */}
+
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js
new file mode 100644
index 000000000..6a4f24708
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog';
+import { transactionNumber } from 'utils';
+
+/**
+ * Payment receive form dialogs.
+ */
+export default function PaymentReceiveFormDialogs() {
+ const { setFieldValue } = useFormikContext();
+
+ const handleUpdatePaymentNumber = (values) => {
+ setFieldValue(
+ 'payment_receive_no',
+ transactionNumber(values.number_prefix, values.next_number),
+ );
+ };
+
+ return (
+ <>
+
+
+ );
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
index a055f72c5..60d14dc05 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -32,7 +32,7 @@ import {
Money,
} from 'components';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-
+import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettings from 'containers/Settings/withSettings';
import { amountPaymentEntries, fullAmountPaymentEntries } from './utils';
@@ -41,7 +41,12 @@ import { toSafeInteger } from 'lodash';
/**
* Payment receive header fields.
*/
-function PaymentReceiveHeaderFields({ baseCurrency }) {
+function PaymentReceiveHeaderFields({
+ baseCurrency,
+
+ // #withDialogActions
+ openDialog,
+}) {
// Payment receive form context.
const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
@@ -73,6 +78,12 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
setFieldValue('entries', newEntries);
};
+
+ // Handle click open payment receive number dialog.
+ const handleClickOpenDialog = () => {
+ openDialog('payment-receive-number-form')
+ };
+
return (
{/* ------------- Customer name ------------- */}
@@ -185,7 +196,7 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
/>
,
}}
tooltip={true}
@@ -253,4 +264,5 @@ export default compose(
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),
+ withDialogActions
)(PaymentReceiveHeaderFields);
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
index 12b892a79..d2dc8b8f1 100644
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
@@ -21,6 +21,7 @@ import ReceiptFromHeader from './ReceiptFormHeader';
import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
import ReceiptFormFooter from './ReceiptFormFooter';
+import ReceiptFormDialogs from './ReceiptFormDialogs';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
@@ -170,6 +171,8 @@ function ReceiptForm({
+
+
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js
new file mode 100644
index 000000000..839a753e4
--- /dev/null
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
+import { transactionNumber } from 'utils';
+
+/**
+ * Receipt form dialogs.
+ */
+export default function ReceiptFormDialogs() {
+ const { setFieldValue } = useFormikContext();
+
+ // Update the form once the receipt number form submit confirm.
+ const handleReceiptNumberFormConfirm = (values) => {
+ setFieldValue(
+ 'receipt_number',
+ transactionNumber(values.number_prefix, values.next_number),
+ );
+ };
+
+ return (
+ <>
+
+
+ );
+}
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js
index 2afd043d0..fc050b123 100644
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js
@@ -39,7 +39,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
} = useItems();
// Fetch receipt settings.
- const { isFetching: isSettingLoading } = useSettings();
+ const { isLoading: isSettingLoading } = useSettings();
const { mutateAsync: createReceiptMutate } = useCreateReceipt();
const { mutateAsync: editReceiptMutate } = useEditReceipt();
diff --git a/client/src/hooks/query/bills.js b/client/src/hooks/query/bills.js
index 809ffd285..34d762866 100644
--- a/client/src/hooks/query/bills.js
+++ b/client/src/hooks/query/bills.js
@@ -11,9 +11,11 @@ export function useCreateBill(props) {
const apiRequest = useApiRequest();
return useMutation((values) => apiRequest.post('purchases/bills', values), {
- onSuccess: () => {
+ onSuccess: (res, values) => {
queryClient.invalidateQueries('BILLS');
queryClient.invalidateQueries('BILL');
+ queryClient.invalidateQueries(['VENDORS']);
+ queryClient.invalidateQueries(['VENDOR', values.vendor_id]);
},
...props,
});
@@ -29,9 +31,11 @@ export function useEditBill(props) {
return useMutation(
([id, values]) => apiRequest.post(`purchases/bills/${id}`, values),
{
- onSuccess: () => {
+ onSuccess: (res, [id, values]) => {
queryClient.invalidateQueries('BILLS');
queryClient.invalidateQueries('BILL');
+ queryClient.invalidateQueries(['VENDORS']);
+ queryClient.invalidateQueries(['VENDOR', values.vendor_id]);
},
...props,
},
@@ -46,9 +50,10 @@ export function useDeleteBill(props) {
const apiRequest = useApiRequest();
return useMutation((id) => apiRequest.delete(`purchases/bills/${id}`), {
- onSuccess: () => {
+ onSuccess: (res, id) => {
queryClient.invalidateQueries('BILLS');
queryClient.invalidateQueries('BILL');
+ queryClient.invalidateQueries(['VENDORS']);
},
...props,
});
@@ -122,6 +127,7 @@ export function useOpenBill(props) {
{
onSuccess: () => {
queryClient.invalidateQueries('BILLS');
+ queryClient.invalidateQueries(['VENDORS']);
},
...props,
},
diff --git a/client/src/hooks/query/estimates.js b/client/src/hooks/query/estimates.js
index b35162687..7c833f55e 100644
--- a/client/src/hooks/query/estimates.js
+++ b/client/src/hooks/query/estimates.js
@@ -13,6 +13,7 @@ export function useCreateEstimate(props) {
return useMutation((values) => apiRequest.post('sales/estimates', values), {
onSuccess: () => {
queryClient.invalidateQueries('SALE_ESTIMATES');
+ queryClient.invalidateQueries(['SETTINGS', 'ESTIMATES']);
},
...props,
});
diff --git a/client/src/hooks/query/invite.js b/client/src/hooks/query/invite.js
index f547fff0c..0318c12d1 100644
--- a/client/src/hooks/query/invite.js
+++ b/client/src/hooks/query/invite.js
@@ -10,7 +10,7 @@ export const useAuthInviteAccept = (props) => {
return useMutation(
([values, token]) => apiRequest.post(`invite/accept/${token}`, values),
props,
- )
+ );
}
/**
diff --git a/client/src/hooks/query/invoices.js b/client/src/hooks/query/invoices.js
index 0ab447626..d60ec0e71 100644
--- a/client/src/hooks/query/invoices.js
+++ b/client/src/hooks/query/invoices.js
@@ -11,8 +11,11 @@ export function useCreateInvoice(props) {
const apiRequest = useApiRequest();
return useMutation((values) => apiRequest.post('sales/invoices', values), {
- onSuccess: () => {
+ onSuccess: (values) => {
queryClient.invalidateQueries('SALE_INVOICES');
+ queryClient.invalidateQueries(['SETTINGS', 'INVOICES']);
+ queryClient.invalidateQueries('CUSTOMERS');
+ queryClient.invalidateQueries(['CUSTOMER', values.customer_id]);
},
...props,
});
@@ -28,9 +31,11 @@ export function useEditInvoice(props) {
return useMutation(
([id, values]) => apiRequest.post(`sales/invoices/${id}`, values),
{
- onSuccess: (res, id) => {
+ onSuccess: (res, [id, values]) => {
queryClient.invalidateQueries('SALE_INVOICES');
queryClient.invalidateQueries(['SALE_INVOICE', id]);
+ queryClient.invalidateQueries('CUSTOMERS');
+ queryClient.invalidateQueries(['CUSTOMER', values.customer_id]);
},
...props,
},
@@ -48,6 +53,7 @@ export function useDeleteInvoice(props) {
onSuccess: (res, id) => {
queryClient.invalidateQueries('SALE_INVOICES');
queryClient.invalidateQueries(['SALE_INVOICE', id]);
+ queryClient.invalidateQueries('CUSTOMERS');
},
...props,
});
@@ -97,6 +103,7 @@ export function useDeliverInvoice(props) {
onSuccess: (res, id) => {
queryClient.invalidateQueries('SALE_INVOICES');
queryClient.invalidateQueries(['SALE_INVOICE', id]);
+ queryClient.invalidateQueries('CUSTOMERS');
},
...props,
});
diff --git a/client/src/hooks/query/settings.js b/client/src/hooks/query/settings.js
index 447c3f67f..00c1e5a1a 100644
--- a/client/src/hooks/query/settings.js
+++ b/client/src/hooks/query/settings.js
@@ -3,34 +3,6 @@ import { useDispatch } from 'react-redux';
import useApiRequest from '../useRequest';
import t from 'store/types';
-/**
- * Retrieve settings.
- */
-export function useSettings(query, props) {
- const dispatch = useDispatch();
- const apiRequest = useApiRequest();
-
- const settings = useQuery(
- ['SETTINGS', query],
- async () => {
- const {
- data: { settings },
- } = await apiRequest.get('settings', { params: query });
-
- return settings;
- },
- {
- initialData: [],
- ...props,
- },
- );
- dispatch({
- type: t.SETTING_SET,
- options: settings.data,
- });
- return settings;
-}
-
/**
* Saves the settings.
*/
@@ -45,3 +17,90 @@ export function useSaveSettings(props) {
...props,
});
}
+
+function useSettingsQuery(key, query, props) {
+ const dispatch = useDispatch();
+ const apiRequest = useApiRequest();
+
+ return useQuery(
+ key,
+ () => apiRequest.get('settings', { params: query }),
+ {
+ select: (res) => res.data.settings,
+ initialDataUpdatedAt: 0,
+ initialData: {
+ data: {
+ settings: [],
+ },
+ },
+ onSuccess: (settings) => {
+ dispatch({ type: t.SETTING_SET, options: settings });
+ },
+ ...props,
+ },
+ );
+}
+
+/**
+ * Retrieve the all settings of the organization.
+ */
+export function useSettings() {
+ return useSettingsQuery(['SETTINGS', 'ALL'], {});
+}
+
+/**
+ * Retrieve invoices settings.
+ */
+export function useSettingsInvoices(props) {
+ return useSettingsQuery(
+ ['SETTINGS', 'INVOICES'],
+ { group: 'sale_invoices' },
+ props,
+ );
+}
+
+/**
+ * Retrieve invoices settings.
+ */
+export function useSettingsEstimates(props) {
+ return useSettingsQuery(
+ ['SETTINGS', 'ESTIMATES'],
+ { group: 'sale_estimates' },
+ props,
+ );
+}
+
+/**
+ * Retrieve payment receives settings.
+ */
+export function useSettingsPaymentReceives(props) {
+ return useSettingsQuery(
+ ['SETTINGS', 'PAYMENT_RECEIVES'],
+ { group: 'payment_receives' },
+ props,
+ );
+}
+
+/**
+ * Retrieve sale receipts settings.
+ * @param {*} props
+ */
+export function useSettingsReceipts(props) {
+ return useSettingsQuery(
+ ['SETTINGS', 'RECEIPTS'],
+ { group: 'sale_receipts' },
+ props,
+ );
+}
+
+/**
+ * Retrieve sale receipts settings.
+ * @param {*} props
+ */
+export function useSettingsManualJournals(props) {
+ return useSettingsQuery(
+ ['SETTINGS', 'MANUAL_JOURNALS'],
+ { group: 'sale_receipts' },
+ props,
+ );
+}
\ No newline at end of file
diff --git a/client/src/style/pages/HomePage/HomePage.scss b/client/src/style/pages/HomePage/HomePage.scss
index d675a31fe..c58e93e38 100644
--- a/client/src/style/pages/HomePage/HomePage.scss
+++ b/client/src/style/pages/HomePage/HomePage.scss
@@ -1,9 +1,10 @@
.homepage {
&__container {
display: flex;
- height: 100%;
+
margin: 22px 32px;
background-color: transparent;
+ align-items: flex-start;
.shortcut-boxes {
flex: 2;
@@ -12,23 +13,27 @@
background-color: #fff;
border-bottom: 1px solid #d2dce2;
border-right: 1px solid #d2dce2;
+ max-width: 800px;
.shortcut-box {
width: 50%;
- // height: 174px;
padding: 16px;
border-left: 1px solid #d2dce2;
border-top: 1px solid #d2dce2;
background-color: transparent;
transition: 0.2s;
+ a{
+ text-decoration: none;
+ }
+
&__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
- span > a {
+ span {
color: #d6d6e0;
}
.header--icon {
@@ -62,7 +67,7 @@
display: flex;
flex-direction: column;
padding-bottom: 32px;
- width: 100%;
+ max-width: 400px;
&__title {
font-size: 16px;
diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss
index b9144e1d8..d9638acb9 100644
--- a/client/src/style/variables.scss
+++ b/client/src/style/variables.scss
@@ -34,7 +34,7 @@ $sidebar-width: 100%;
$sidebar-menu-item-color: rgb(255, 255, 255);
$sidebar-menu-item-color-active: rgb(255, 255, 255);
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
-$sidebar-menu-label-color: rgba(255, 255, 255, 0.45);
+$sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
$sidebar-submenu-item-color: rgba(255, 255, 255, 0.85);
$sidebar-submenu-item-hover-color: rgb(255, 255, 255);
$sidebar-logo-opacity: 0.5;