diff --git a/.vscode/settings.json b/.vscode/settings.json index 7feab10..880ab13 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,12 +1,30 @@ { "editor.codeActionsOnSave": { - "source.fixAll": true, - "source.fixAll.eslint": true, - "source.fixAll.stylelint": true + "source.fixAll": "explicit", + "source.fixAll.eslint": "explicit", + "source.fixAll.stylelint": "explicit" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnPaste": true, "editor.formatOnSave": true, "files.eol": "\n", - "stylelint.validate": ["scss"] + "stylelint.validate": ["scss"], + "eslint.nodePath": "", + + // ESLint configuration for the frontend folder + "[/Users/dejanbrsakoski/src/docker/bmim-cashflow-project/frontend]": { + // "eslint.nodePath": "/Users/dejanbrsakoski/src/docker/bmim-cashflow-project/frontend/node_modules/eslint/bin/eslint.js" + "eslint.nodePath": "./frontend/node_modules/eslint/bin/eslint.js" + }, + + // ESLint configuration for the backend folder + "[/Users/dejanbrsakoski/src/docker/bmim-cashflow-project/backend]": { + // "eslint.nodePath": "/Users/dejanbrsakoski/src/docker/bmim-cashflow-project/backend/node_modules/eslint/bin/eslint.js" + "eslint.nodePath": "./backend/node_modules/eslint/bin/eslint.js" + }, + "eslint.options": { + "parserOptions": { + "project": "./frontend/tsconfig.json" + } + } } diff --git a/frontend/src/Pages/Financials/Components/FinancialsForm/FinancialsForm.tsx b/frontend/src/Pages/Financials/Components/FinancialsForm/FinancialsForm.tsx index 8d65854..6dd65d0 100644 --- a/frontend/src/Pages/Financials/Components/FinancialsForm/FinancialsForm.tsx +++ b/frontend/src/Pages/Financials/Components/FinancialsForm/FinancialsForm.tsx @@ -120,7 +120,33 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem const [editMode, setEditMode] = useState(false); const [itemForEdit, setItemForEdit] = useState(props.itemForEdit); - console.log(';;;; on load props.itemForEdit', props.itemForEdit); + // console.log(';;;; on load props.itemForEdit', props.itemForEdit); + + const defaultValue = + typeof selectedCompany?.currency_symbol === 'string' + ? selectedCompany?.currency_symbol + : selectedCompany?.currency_symbol.label + '0.00'; + const formatValueToCurrency = (value: string): string => { + return value; + // console.log( + // 'converting', + // value, + // new Intl.NumberFormat('en-GB', { + // style: 'currency', + // currency: + // typeof selectedCompany?.currency_symbol === 'string' + // ? selectedCompany?.currency_symbol + // : selectedCompany?.currency_symbol.value + // }).format(parseFloat(value)) + // ); + // return new Intl.NumberFormat('en-GB', { + // style: 'currency', + // currency: + // typeof selectedCompany?.currency_symbol === 'string' + // ? selectedCompany?.currency_symbol + // : selectedCompany?.currency_symbol.value + // }).format(+value); + }; // useEffect(() => { // setItemForEdit('new val'); @@ -279,11 +305,11 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem className={errorMessage.errorRevenue} disabled={isDemoPlan()} id="Revenue" - min="0" onChange={financialsForm.getRevenueHandler} - placeholder="0.00" - step={1} - type="number" + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" value={financialsForm.Revenue} /> @@ -310,12 +336,12 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem className={errorMessage.errorCogs} disabled={isDemoPlan()} id="COGS" - min="0" onChange={financialsForm.getCogsHandler} - placeholder="0.00" - step={1} - type="number" - value={financialsForm.COGS} + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" + value={formatValueToCurrency(financialsForm.COGS)} /> {isPaidPlan() && ( @@ -341,12 +367,12 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem className={errorMessage.errorGrossProfit} disabled={isDemoPlan()} id="GROSS_PROFIT" - min="0" onChange={financialsForm.getGrossProfitHandler} - placeholder="0.00" - step={1} - type="number" - value={financialsForm.GrossProfit} + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" + value={formatValueToCurrency(financialsForm.GrossProfit)} /> {isPaidPlan() && ( @@ -372,12 +398,12 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem className={errorMessage.errorEbit} disabled={isDemoPlan()} id="EBIT" - min="0" onChange={financialsForm.getEbitHandler} - placeholder="0.00" - step={1} - type="number" - value={financialsForm.EBIT} + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" + value={formatValueToCurrency(financialsForm.EBIT)} /> {isPaidPlan() && ( @@ -403,12 +429,12 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem className={errorMessage.errorNetProfit} disabled={isDemoPlan()} id="NET_PROFIT" - min="0" onChange={financialsForm.getNetProfitHandler} - placeholder="0.00" - step={1} - type="number" - value={financialsForm.NetProfit} + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" + value={formatValueToCurrency(financialsForm.NetProfit)} /> {isPaidPlan() && ( @@ -437,12 +463,12 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem className={errorMessage.errorDepreciation} disabled={isDemoPlan()} id="DEPRECIATION" - min="0" onChange={financialsForm.getDepreciationAmortisationHandler} - placeholder="0.00" - step={1} - type="number" - value={financialsForm.Depreciation} + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" + value={formatValueToCurrency(financialsForm.Depreciation)} /> {isPaidPlan() && ( @@ -469,10 +495,11 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem disabled={isDemoPlan()} id="INTEREST_PAID" onChange={financialsForm.getInterestPaidHandler} - placeholder="0.00" - step={1} - type="number" - value={financialsForm.InterestPaid} + onFocus={(event) => financialsForm.handleInputData(event)} + onBlur={(event) => financialsForm.handleInputData(event)} + placeholder={defaultValue} + type="text" + value={formatValueToCurrency(financialsForm.InterestPaid)} /> {isPaidPlan() && ( @@ -503,7 +530,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.OtherIncome} + value={formatValueToCurrency(financialsForm.OtherIncome)} /> {isPaidPlan() && ( @@ -534,7 +561,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.Dividends} + value={formatValueToCurrency(financialsForm.Dividends)} /> {isPaidPlan() && ( @@ -569,7 +596,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.CashAtBank} + value={formatValueToCurrency(financialsForm.CashAtBank)} /> {isPaidPlan() && ( @@ -600,7 +627,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.TradeDebtors} + value={formatValueToCurrency(financialsForm.TradeDebtors)} /> {isPaidPlan() && ( @@ -631,7 +658,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.Stock} + value={formatValueToCurrency(financialsForm.Stock)} /> {isPaidPlan() && ( @@ -662,7 +689,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.totalCurrentAssets} + value={formatValueToCurrency(financialsForm.totalCurrentAssets)} /> {isPaidPlan() && ( @@ -693,7 +720,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.fixedAssets} + value={formatValueToCurrency(financialsForm.fixedAssets)} /> {isPaidPlan() && ( @@ -724,7 +751,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.totalAssets} + value={formatValueToCurrency(financialsForm.totalAssets)} /> {isPaidPlan() && ( @@ -758,7 +785,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.TradeCreditors} + value={formatValueToCurrency(financialsForm.TradeCreditors)} /> {isPaidPlan() && ( @@ -789,7 +816,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.deferredRevenue} + value={formatValueToCurrency(financialsForm.deferredRevenue)} /> {isPaidPlan() && ( @@ -820,7 +847,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.totalCurrentLiabilities} + value={formatValueToCurrency(financialsForm.totalCurrentLiabilities)} /> {isPaidPlan() && ( @@ -851,7 +878,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.totalLiabilities} + value={formatValueToCurrency(financialsForm.totalLiabilities)} /> {isPaidPlan() && ( @@ -885,7 +912,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.bankLoansCurrent} + value={formatValueToCurrency(financialsForm.bankLoansCurrent)} /> {isPaidPlan() && ( @@ -916,7 +943,7 @@ const FinancialsForm: React.FC = (props: FormInterface): JSX.Elem placeholder="0.00" step={1} type="number" - value={financialsForm.bankLoansNonCurrent} + value={formatValueToCurrency(financialsForm.bankLoansNonCurrent)} /> {isPaidPlan() && ( diff --git a/frontend/src/Store/Financials/financials-form-context-helper.ts b/frontend/src/Store/Financials/financials-form-context-helper.ts index 18ccf22..e2d67b4 100644 --- a/frontend/src/Store/Financials/financials-form-context-helper.ts +++ b/frontend/src/Store/Financials/financials-form-context-helper.ts @@ -68,11 +68,19 @@ export const emptyErrorMessageObject = { errorMonthEnding: '' }; +function formatCurrency(value: number): string { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' + }).format(value); +} + export default function financialsFormContextHelper( state: FinancialsFormInterface, action: Action, initialState: FinancialsFormInterface ): FinancialsFormInterface { + console.log('this is the action', action); switch (action.type) { case 'FIRST_MONTH': return { @@ -101,6 +109,7 @@ export default function financialsFormContextHelper( case 'REVENUE': return { ...state, + // Revenue: formatCurrency(+action.value) Revenue: action.value.toString() }; @@ -277,6 +286,7 @@ export type FinancialsTypeContextModel = { getBankLoansCurrentHandler: (event: ChangeEvent) => void; getBankLoansNonCurrentHandler: (event: ChangeEvent) => void; getIncreaseRevenueByHandler: (event: ChangeEvent) => void; + handleInputData: (event: ChangeEvent) => void; bankLoansCurrent: string; bankLoansNonCurrent: string; fixedAssets: string; @@ -348,6 +358,7 @@ export const FinancialsFormDefaultValues = { getBankLoansCurrentHandler: (): void => {}, getBankLoansNonCurrentHandler: (): void => {}, getIncreaseRevenueByHandler: (): void => {}, + handleInputData: (): void => {}, bankLoansCurrent: '', bankLoansNonCurrent: '', fixedAssets: '', diff --git a/frontend/src/Store/Financials/financialsForm-context.tsx b/frontend/src/Store/Financials/financialsForm-context.tsx index f7225f9..8b8df33 100644 --- a/frontend/src/Store/Financials/financialsForm-context.tsx +++ b/frontend/src/Store/Financials/financialsForm-context.tsx @@ -289,8 +289,27 @@ const FinancialsFormProvider: React.FC<{ children: ReactNode }> = (props: { }); } + function handleInputData(event: ChangeEvent): void { + console.log('event', event, 'event value', event.target.value); + if (event.type === 'focus') { + const cleanedValue = event.target.value.toString().replace(/[^0-9.-]+/g, ''); + event.target.value = parseFloat(cleanedValue) ? parseFloat(cleanedValue).toString() : ''; + } else if (event.type === 'blur') { + event.target.value = new Intl.NumberFormat('en-GB', { + style: 'currency', + currency: + typeof selectedCompany?.currency_symbol === 'string' + ? selectedCompany?.currency_symbol + : selectedCompany?.currency_symbol.value + }).format(+event.target.value); + } + } + function incrementHandler(event: FormEvent): void { - const elementInput = event.currentTarget.parentElement?.children.item(2); + const elementInput = event.currentTarget.parentElement?.children + .item(2) + ?.children.item(0) as HTMLInputElement; + console.log('elementInput', elementInput); switch (elementInput?.id) { case 'Revenue': return dispatchFinancialsInputs({ @@ -411,7 +430,10 @@ const FinancialsFormProvider: React.FC<{ children: ReactNode }> = (props: { } function decrementHandler(event: FormEvent): void { - const elementInput = event.currentTarget.parentElement?.children.item(2); + const elementInput = event.currentTarget.parentElement?.children + .item(2) + ?.children.item(0) as HTMLInputElement; + const { bankLoansCurrent, bankLoansNonCurrent, @@ -1124,6 +1146,7 @@ const FinancialsFormProvider: React.FC<{ children: ReactNode }> = (props: { getBankLoansCurrentHandler, getBankLoansNonCurrentHandler, getIncreaseRevenueByHandler, + handleInputData, bankLoansCurrent, bankLoansNonCurrent, fixedAssets, diff --git a/microservices/pdf-generator b/microservices/pdf-generator --- a/microservices/pdf-generator +++ b/microservices/pdf-generator @@ -1 +1 @@ -Subproject commit 1a2a4ebacb1046f7b00833ecbb8bc1784b8fadd8 +Subproject commit 1a2a4ebacb1046f7b00833ecbb8bc1784b8fadd8-dirty