fix: darkmode ui bugs

This commit is contained in:
Ahmed Bouhuolia
2026-01-03 18:24:33 +02:00
parent 5767f1f603
commit ee92c2815b
21 changed files with 246 additions and 206 deletions

View File

@@ -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));
}
}

View File

@@ -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));
}
}

View File

@@ -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 {}

View File

@@ -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);

View File

@@ -63,7 +63,6 @@ function ContactDuplicateForm({
name={'contact_type'}
label={<T id={'contact_type'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--select-list'}
>
<FSelect
name={'contact_type'}

View File

@@ -1,9 +1,17 @@
// @ts-nocheck
import React from 'react';
import { Field, ErrorMessage, FastField } from 'formik';
import { Field, ErrorMessage, FastField, useFormikContext } from 'formik';
import { FormGroup, InputGroup } from '@blueprintjs/core';
import { inputIntent, toSafeNumber } from '@/utils';
import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components';
import {
Row,
Col,
MoneyInputGroup,
FormattedMessage as T,
FMoneyInputGroup,
FFormGroup,
FInputGroup,
} from '@/components';
import { useAutofocus } from '@/hooks';
import { decrementQuantity } from './utils';
@@ -12,27 +20,19 @@ import { decrementQuantity } from './utils';
*/
function DecrementAdjustmentFields() {
const decrementFieldRef = useAutofocus();
const { values, setFieldValue } = useFormikContext();
return (
<Row className={'row--decrement-fields'}>
{/*------------ Quantity on hand -----------*/}
<Col className={'col--quantity-on-hand'}>
<FastField name={'quantity_on_hand'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'qty_on_hand'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="quantity_on_hand" />}
>
<InputGroup
disabled={true}
medium={'true'}
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup name={'quantity_on_hand'} label={<T id={'qty_on_hand'} />}>
<FInputGroup
name={'quantity_on_hand'}
disabled={true}
medium={'true'}
/>
</FFormGroup>
</Col>
<Col className={'col--sign'}>
@@ -41,40 +41,23 @@ function DecrementAdjustmentFields() {
{/*------------ Decrement -----------*/}
<Col className={'col--decrement'}>
<Field name={'quantity'}>
{({
form: { values, setFieldValue },
field,
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'decrement'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="quantity" />}
fill={true}
>
<MoneyInputGroup
value={field.value}
allowDecimals={false}
allowNegativeValue={true}
inputRef={(ref) => (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 })}
/>
</FormGroup>
)}
</Field>
<FFormGroup name={'quantity'} label={<T id={'decrement'} />} fill>
<FMoneyInputGroup
name={'quantity'}
allowDecimals={false}
allowNegativeValue={true}
inputRef={(ref) => (decrementFieldRef.current = ref)}
onBlurValue={(value) => {
setFieldValue(
'new_quantity',
decrementQuantity(
toSafeNumber(value),
toSafeNumber(values.quantity_on_hand),
),
);
}}
/>
</FFormGroup>
</Col>
<Col className={'col--sign'}>
@@ -82,38 +65,27 @@ function DecrementAdjustmentFields() {
</Col>
{/*------------ New quantity -----------*/}
<Col className={'col--quantity'}>
<Field name={'new_quantity'}>
{({
form: { values, setFieldValue },
field,
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'new_quantity'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="new_quantity" />}
>
<MoneyInputGroup
value={field.value}
allowDecimals={false}
allowNegativeValue={true}
onChange={(value) => {
setFieldValue('new_quantity', value);
}}
onBlurValue={(value) => {
setFieldValue(
'quantity',
decrementQuantity(
toSafeNumber(value),
toSafeNumber(values.quantity_on_hand),
),
);
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</Field>
<FFormGroup
name={'new_quantity'}
label={<T id={'new_quantity'} />}
fill
fastField
>
<FMoneyInputGroup
name={'new_quantity'}
allowDecimals={false}
allowNegativeValue={true}
onBlurValue={(value) => {
setFieldValue(
'quantity',
decrementQuantity(
toSafeNumber(value),
toSafeNumber(values.quantity_on_hand),
),
);
}}
/>
</FFormGroup>
</Col>
</Row>
);

View File

@@ -1,8 +1,8 @@
// @ts-nocheck
import React from 'react';
import '@/style/pages/Items/ItemAdjustmentDialog.scss';
import { InventoryAdjustmentFormProvider } from './InventoryAdjustmentFormProvider';
import InventoryAdjustmentForm from './InventoryAdjustmentForm';

View File

@@ -160,7 +160,7 @@ export default function InventoryAdjustmentFormDialogFields() {
name={'adjustment_account_id'}
label={<T id={'adjustment_account'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--adjustment-account'}
fill
>
<FAccountsSuggestField
name={'adjustment_account_id'}
@@ -168,6 +168,8 @@ export default function InventoryAdjustmentFormDialogFields() {
inputProps={{
placeholder: intl.get('select_adjustment_account'),
}}
fill
fastField
/>
</FFormGroup>
@@ -185,16 +187,21 @@ export default function InventoryAdjustmentFormDialogFields() {
name={'reason'}
label={<T id={'adjustment_reasons'} />}
labelInfo={<FieldRequiredHint />}
fill
fastField
>
<FTextArea name={'reason'} growVertically large fastField />
<FTextArea name={'reason'} growVertically large fastField fill />
</FFormGroup>
</div>
);
}
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;
`;

View File

@@ -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);

View File

@@ -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);
`;

View File

@@ -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);
`;

View File

@@ -45,7 +45,7 @@ import { isEmpty } from 'lodash';
* Bills actions bar.
*/
function BillActionsBar({
// #withBillActions
// #withBillsActions
setBillsTableState,
// #withBills

View File

@@ -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,

View File

@@ -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,
})),

View File

@@ -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;
}
`;

View File

@@ -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;
}
`;

View File

@@ -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)`

View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
{/* ----------- Save Intitate & transferred ----------- */}
<If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
<ButtonGroup>
<Group spacing={10}>
{/* ----------- Save Intitate & transferred ----------- */}
<If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitInitiateBtnClick}
style={{ minWidth: '85px' }}
text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={
<T id={'warehouse_transfer.save_mark_as_transferred'} />
}
onClick={handleSubmitTransferredBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
<If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitInitiateBtnClick}
style={{ minWidth: '85px' }}
text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
onClick={handleSubmitTransferredBtnClick}
style={{ minWidth: '100px' }}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={
<T id={'warehouse_transfer.save_mark_as_transferred'} />
}
onClick={handleSubmitTransferredBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
disabled={isSubmitting}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
<If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
onClick={handleSubmitTransferredBtnClick}
style={{ minWidth: '100px' }}
text={<T id={'save'} />}
onClick={handleClearBtnClick}
text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
/>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
</div>
);
}

View File

@@ -80,6 +80,7 @@ function WarehouseTransferFormHeaderFields({
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
fill
fastField
/>
</FFormGroup>

View File

@@ -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;

View File

@@ -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;