From ee92c2815b23c7edfc8b5b0513d8d6167f6a6ed9 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 3 Jan 2026 18:24:33 +0200 Subject: [PATCH] fix: darkmode ui bugs --- .../Warehouses/WarehouseItems.controller.ts | 37 ++++ .../Warehouses/Warehouses.controller.ts | 6 - .../modules/Warehouses/Warehouses.module.ts | 5 +- .../BillNumberDialogContent.tsx | 6 +- .../ContactDuplicateForm.tsx | 1 - .../DecrementAdjustmentFields.tsx | 140 ++++++-------- .../InventoryAdjustmentFormDialogContent.tsx | 4 +- .../InventoryAdjustmentFormDialogFields.tsx | 13 +- .../ItemsCategories/ItemCategoriesList.tsx | 6 +- .../PaymentMethods/PaymentMethodSelect.tsx | 21 ++- .../SelectPaymentMethodPopover.tsx | 2 +- .../Bills/BillsLanding/BillsActionsBar.tsx | 2 +- .../Bills/BillsLanding/BillsTable.tsx | 4 +- .../Bills/BillsLanding/BillsViewsTabs.tsx | 6 +- .../InvoiceForm/AdjustmentTotalLine.tsx | 1 - .../InvoiceForm/DiscountTotalLine.tsx | 1 - .../InvoiceForm/InvoiceFormFooterLeft.tsx | 2 +- .../WarehouseTransferFloatingActions.tsx | 172 +++++++++--------- .../WarehouseTransferFormHeaderFields.tsx | 1 + .../src/style/pages/Customers/List.scss | 11 +- .../webapp/src/style/pages/Vendors/List.scss | 11 +- 21 files changed, 246 insertions(+), 206 deletions(-) create mode 100644 packages/server/src/modules/Warehouses/WarehouseItems.controller.ts diff --git a/packages/server/src/modules/Warehouses/WarehouseItems.controller.ts b/packages/server/src/modules/Warehouses/WarehouseItems.controller.ts new file mode 100644 index 000000000..b5e1cacf9 --- /dev/null +++ b/packages/server/src/modules/Warehouses/WarehouseItems.controller.ts @@ -0,0 +1,37 @@ +import { Controller, Get, Param } from '@nestjs/common'; +import { WarehousesApplication } from './WarehousesApplication.service'; +import { + ApiOperation, + ApiParam, + ApiResponse, + ApiTags, +} from '@nestjs/swagger'; +import { ApiCommonHeaders } from '@/common/decorators/ApiCommonHeaders'; + +@Controller('items') +@ApiTags('Warehouses') +@ApiCommonHeaders() +export class WarehouseItemsController { + constructor(private warehousesApplication: WarehousesApplication) { } + + @Get(':id/warehouses') + @ApiOperation({ + summary: 'Retrieves the item associated warehouses.', + }) + @ApiResponse({ + status: 200, + description: + 'The item associated warehouses have been successfully retrieved.', + }) + @ApiResponse({ status: 404, description: 'The item not found.' }) + @ApiParam({ + name: 'id', + required: true, + type: Number, + description: 'The item id', + }) + getItemWarehouses(@Param('id') itemId: string) { + return this.warehousesApplication.getItemWarehouses(Number(itemId)); + } +} + diff --git a/packages/server/src/modules/Warehouses/Warehouses.controller.ts b/packages/server/src/modules/Warehouses/Warehouses.controller.ts index c77e89393..825b5a572 100644 --- a/packages/server/src/modules/Warehouses/Warehouses.controller.ts +++ b/packages/server/src/modules/Warehouses/Warehouses.controller.ts @@ -85,10 +85,4 @@ export class WarehousesController { markWarehousePrimary(@Param('id') warehouseId: string) { return this.warehousesApplication.markWarehousePrimary(Number(warehouseId)); } - - @Get('items/:itemId') - @ApiOperation({ summary: 'Get item warehouses' }) - getItemWarehouses(@Param('itemId') itemId: string) { - return this.warehousesApplication.getItemWarehouses(Number(itemId)); - } } diff --git a/packages/server/src/modules/Warehouses/Warehouses.module.ts b/packages/server/src/modules/Warehouses/Warehouses.module.ts index aa899f2dc..c3a6e2a0b 100644 --- a/packages/server/src/modules/Warehouses/Warehouses.module.ts +++ b/packages/server/src/modules/Warehouses/Warehouses.module.ts @@ -7,6 +7,7 @@ import { CreateWarehouse } from './commands/CreateWarehouse.service'; import { EditWarehouse } from './commands/EditWarehouse.service'; import { DeleteWarehouseService } from './commands/DeleteWarehouse.service'; import { WarehousesController } from './Warehouses.controller'; +import { WarehouseItemsController } from './WarehouseItems.controller'; import { GetWarehouse } from './queries/GetWarehouse'; import { WarehouseMarkPrimary } from './commands/WarehouseMarkPrimary.service'; import { GetWarehouses } from './queries/GetWarehouses'; @@ -47,7 +48,7 @@ const models = [RegisterTenancyModel(Warehouse)]; @Module({ imports: [TenancyDatabaseModule, ...models], - controllers: [WarehousesController], + controllers: [WarehousesController, WarehouseItemsController], providers: [ CreateWarehouse, EditWarehouse, @@ -90,6 +91,6 @@ const models = [RegisterTenancyModel(Warehouse)]; InventoryTransactionsWarehouses, ValidateWarehouseExistance ], - exports: [WarehousesSettings, WarehouseTransactionDTOTransform, ...models], + exports: [WarehousesSettings, WarehouseTransactionDTOTransform, WarehousesApplication, ...models], }) export class WarehousesModule {} diff --git a/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx b/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx index 851a9586e..f93ce0116 100644 --- a/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx +++ b/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx @@ -8,7 +8,7 @@ import ReferenceNumberForm from '@/containers/JournalNumber/ReferenceNumberForm' import { withDialogActions } from '@/containers/Dialog/withDialogActions'; import { withSettingsActions } from '@/containers/Settings/withSettingsActions'; import { withSettings } from '@/containers/Settings/withSettings'; -import { withBillActions } from '@/containers/Purchases/Bills/BillsLanding/withBillsActions'; +import { withBillsActions } from '@/containers/Purchases/Bills/BillsLanding/withBillsActions'; import { compose, optionsMapToArray } from '@/utils'; @@ -28,7 +28,7 @@ function BillNumberDialogContent({ // #withDialogActions closeDialog, - // #withBillActions + // #withBillsActions setBillNumberChanged, }) { const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); @@ -76,5 +76,5 @@ export default compose( nextNumber: billsettings?.next_number, numberPrefix: billsettings?.number_prefix, })), - withBillActions, + withBillsActions, )(BillNumberDialogContent); diff --git a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx index f6a4f5497..f77c1beab 100644 --- a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx +++ b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx @@ -63,7 +63,6 @@ function ContactDuplicateForm({ name={'contact_type'} label={} labelInfo={} - className={'form-group--select-list'} > {/*------------ Quantity on hand -----------*/} - - {({ field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - > - - - )} - + }> + + @@ -41,40 +41,23 @@ function DecrementAdjustmentFields() { {/*------------ Decrement -----------*/} - - {({ - form: { values, setFieldValue }, - field, - meta: { error, touched }, - }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - fill={true} - > - (decrementFieldRef.current = ref)} - onChange={(value) => { - setFieldValue('quantity', value); - }} - onBlurValue={(value) => { - setFieldValue( - 'new_quantity', - decrementQuantity( - toSafeNumber(value), - toSafeNumber(values.quantity_on_hand), - ), - ); - }} - intent={inputIntent({ error, touched })} - /> - - )} - + } fill> + (decrementFieldRef.current = ref)} + onBlurValue={(value) => { + setFieldValue( + 'new_quantity', + decrementQuantity( + toSafeNumber(value), + toSafeNumber(values.quantity_on_hand), + ), + ); + }} + /> + @@ -82,38 +65,27 @@ function DecrementAdjustmentFields() { {/*------------ New quantity -----------*/} - - {({ - form: { values, setFieldValue }, - field, - meta: { error, touched }, - }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - > - { - setFieldValue('new_quantity', value); - }} - onBlurValue={(value) => { - setFieldValue( - 'quantity', - decrementQuantity( - toSafeNumber(value), - toSafeNumber(values.quantity_on_hand), - ), - ); - }} - intent={inputIntent({ error, touched })} - /> - - )} - + } + fill + fastField + > + { + setFieldValue( + 'quantity', + decrementQuantity( + toSafeNumber(value), + toSafeNumber(values.quantity_on_hand), + ), + ); + }} + /> + ); diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx index a04c98885..5fdc51667 100644 --- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx +++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx @@ -1,8 +1,8 @@ // @ts-nocheck import React from 'react'; - + import '@/style/pages/Items/ItemAdjustmentDialog.scss'; - + import { InventoryAdjustmentFormProvider } from './InventoryAdjustmentFormProvider'; import InventoryAdjustmentForm from './InventoryAdjustmentForm'; diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx index 0ac804d71..b9cdbf9e4 100644 --- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx +++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx @@ -160,7 +160,7 @@ export default function InventoryAdjustmentFormDialogFields() { name={'adjustment_account_id'} label={} labelInfo={} - className={'form-group--adjustment-account'} + fill > @@ -185,16 +187,21 @@ export default function InventoryAdjustmentFormDialogFields() { name={'reason'} label={} labelInfo={} + fill fastField > - + ); } export const FeatureRowDivider = styled.div` + --x-color-background: #e9e9e9; + .bp4-dark & { + --x-color-background: rgba(255, 255, 255, 0.1); + } height: 2px; - background: #e9e9e9; + background: var(--x-color-background); margin-bottom: 15px; `; diff --git a/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx b/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx index 3750345ce..78e1eeea5 100644 --- a/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx +++ b/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx @@ -9,13 +9,13 @@ import { ItemsCategoriesProvider } from './ItemsCategoriesProvider'; import ItemCategoriesTable from './ItemCategoriesTable'; import ItemsCategoryActionsBar from './ItemsCategoryActionsBar'; -import { withItemsCategories } from './withItemCategories'; +import { withItemCategories } from './withItemCategories'; /** * Item categories list. */ function ItemCategoryList({ - // #withItemsCategories + // #withItemCategories itemsCategoriesTableState }) { return ( @@ -32,7 +32,7 @@ function ItemCategoryList({ } export default R.compose( - withItemsCategories(({ itemsCategoriesTableState }) => ({ + withItemCategories(({ itemsCategoriesTableState }) => ({ itemsCategoriesTableState, })), )(ItemCategoryList); diff --git a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx index 89ad30966..0497c493d 100644 --- a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx +++ b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx @@ -63,7 +63,12 @@ export function PaymentMethodSelectField({ } const PaymentMethodSelectRoot = styled(Group)` - border: 1px solid #d3d8de; + --x-color-border: #d3d8de; + + .bp4-dark & { + --x-color-border: rgba(255, 255, 255, 0.2); + } + border: 1px solid var(--x-color-border); border-radius: 3px; padding: 8px; gap: 0; @@ -72,13 +77,23 @@ const PaymentMethodSelectRoot = styled(Group)` `; const PaymentMethodCheckbox = styled(Checkbox)` + --x-color-border: #c5cbd3; + + .bp4-dark & { + --x-color-border: rgba(255, 255, 255, 0.2); + } margin: 0; &.bp4-control .bp4-control-indicator { - box-shadow: 0 0 0 1px #c5cbd3; + box-shadow: 0 0 0 1px var(--x-color-border); } `; const PaymentMethodText = styled(Text)` - color: #404854; + --x-color-text: #404854; + + .bp4-dark & { + --x-color-text: var(--color-light-gray4); + } + color: var(--x-color-text); `; diff --git a/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx b/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx index d89277c04..5b18ab254 100644 --- a/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx +++ b/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx @@ -48,5 +48,5 @@ const PaymentMethodsTitle = styled('h6')` font-size: 12px; font-weight: 500; margin: 0; - color: rgb(95, 107, 124); + color: var(--color-muted-text); `; diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx index f5b2a27f8..8cc3084cb 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx @@ -45,7 +45,7 @@ import { isEmpty } from 'lodash'; * Bills actions bar. */ function BillActionsBar({ - // #withBillActions + // #withBillsActions setBillsTableState, // #withBills diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx index b65722022..30ac5b37d 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx @@ -13,7 +13,7 @@ import { import BillsEmptyStatus from './BillsEmptyStatus'; import { withBills } from './withBills'; -import { withBillActions } from './withBillsActions'; +import { withBillsActions } from './withBillsActions'; import { withAlertActions } from '@/containers/Alert/withAlertActions'; import { withDialogActions } from '@/containers/Dialog/withDialogActions'; import { withDrawerActions } from '@/containers/Drawer/withDrawerActions'; @@ -163,7 +163,7 @@ function BillsDataTable({ export default compose( withBills(({ billsTableState }) => ({ billsTableState })), - withBillActions, + withBillsActions, withAlertActions, withDrawerActions, withDialogActions, diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx index 264b02e0a..df90ae1f8 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx @@ -6,7 +6,7 @@ import { DashboardViewsTabs } from '@/components'; import { useBillsListContext } from './BillsListProvider'; import { withBills } from './withBills'; -import { withBillActions } from './withBillsActions'; +import { withBillsActions } from './withBillsActions'; import { compose, transfromViewsToTabs } from '@/utils'; @@ -14,7 +14,7 @@ import { compose, transfromViewsToTabs } from '@/utils'; * Bills view tabs. */ function BillViewTabs({ - // #withBillActions + // #withBillsActions setBillsTableState, // #withBills @@ -47,7 +47,7 @@ function BillViewTabs({ } export default compose( - withBillActions, + withBillsActions, withBills(({ billsTableState }) => ({ billsCurrentView: billsTableState.viewSlug, })), diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx index f0507cc70..ccfc9a4aa 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx @@ -12,7 +12,6 @@ import { useIsDarkMode } from '@/hooks/useDarkMode'; const inputGroupCss = css` & .bp4-input { max-width: 110px; - color: rgb(17, 17, 17); padding-left: 8px; } `; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx index da5d09127..767ab90ea 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx @@ -13,7 +13,6 @@ import { useIsDarkMode } from '@/hooks/useDarkMode'; const inputGroupCss = css` & .bp4-input { max-width: 110px; - color: rgb(17, 17, 17); padding-left: 8px; } `; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx index 50691906c..cd24d261c 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx @@ -127,7 +127,7 @@ const PaymentOptionsText = styled(Box)` font-size: 13px; display: inline-flex; align-items: center; - color: #5f6b7c; + color: var(--color-muted-text); `; const PaymentOptionsButton = styled(Button)` diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx index 7e4d1e6b0..8b4b26c76 100644 --- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx +++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx @@ -11,12 +11,11 @@ import { Menu, MenuItem, } from '@blueprintjs/core'; -import { If, Icon, FormattedMessage as T } from '@/components'; +import { If, Icon, FormattedMessage as T, Group } from '@/components'; import classNames from 'classnames'; import { useFormikContext } from 'formik'; -import { CLASSES } from '@/constants/classes'; - import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider'; +import { CLASSES } from '@/constants/classes'; /** * Warehouse transfer floating actions bar. @@ -77,98 +76,101 @@ export default function WarehouseTransferFloatingActions() { return (
- {/* ----------- Save Intitate & transferred ----------- */} - - + + {/* ----------- Save Intitate & transferred ----------- */} + + +
); } diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx index 6f10b194c..4c1de2909 100644 --- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx +++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx @@ -80,6 +80,7 @@ function WarehouseTransferFormHeaderFields({ inputProps={{ leftIcon: , }} + fill fastField /> diff --git a/packages/webapp/src/style/pages/Customers/List.scss b/packages/webapp/src/style/pages/Customers/List.scss index 57ceabc3c..66ce5677d 100644 --- a/packages/webapp/src/style/pages/Customers/List.scss +++ b/packages/webapp/src/style/pages/Customers/List.scss @@ -8,12 +8,19 @@ .avatar.td { .avatar { + --x-color-background: #adbcc9; + --x-color-text: #fff; + + .bp4-dark & { + --x-color-background: rgba(255, 255, 255, 0.2); + --x-color-text: #fff; + } display: inline-block; - background: #adbcc9; + background: var(--x-color-background); border-radius: 50%; text-align: center; font-weight: 400; - color: #fff; + color: var(--x-color-text); &[data-size='medium'] { height: 30px; diff --git a/packages/webapp/src/style/pages/Vendors/List.scss b/packages/webapp/src/style/pages/Vendors/List.scss index f71bc5eeb..311b5a1b9 100644 --- a/packages/webapp/src/style/pages/Vendors/List.scss +++ b/packages/webapp/src/style/pages/Vendors/List.scss @@ -9,12 +9,19 @@ .avatar.td { .avatar { + --x-color-background: #adbcc9; + --x-color-text: #fff; + + .bp4-dark & { + --x-color-background: rgba(255, 255, 255, 0.2); + --x-color-text: #fff; + } display: inline-block; - background: #adbcc9; + background: var(--x-color-background); + color: var(--x-color-text); border-radius: 50%; text-align: center; font-weight: 400; - color: #fff; &[data-size='medium'] { height: 30px;