diff --git a/src/components/dls/Calendar/Calendar.module.scss b/src/components/dls/Calendar/Calendar.module.scss
new file mode 100644
index 0000000000..c086b7c784
--- /dev/null
+++ b/src/components/dls/Calendar/Calendar.module.scss
@@ -0,0 +1,42 @@
+.outerContainer {
+ min-height: calc(var(--spacing-mega) * 9.3);
+}
+
+.calendarContainer {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ max-width: calc(var(--spacing-mega) * 12);
+ margin-inline: auto;
+
+ & > div {
+ padding-block: var(--spacing-small);
+
+ &.bordered {
+ border-block-start: 1px solid var(--color-background-alternative-medium);
+ }
+
+ & > button {
+ background: none;
+ border: none;
+ color: var(--color-text-default);
+ font-weight: var(--font-weight-bold);
+ margin-inline: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: var(--border-radius-pill);
+
+ &.disabled {
+ opacity: var(--opacity-50);
+ font-weight: var(--font-weight-normal);
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ background: var(--color-background-alternative-medium);
+ }
+ }
+ }
+}
diff --git a/src/components/dls/Calendar/Calendar.stories.tsx b/src/components/dls/Calendar/Calendar.stories.tsx
new file mode 100644
index 0000000000..d3193b3e62
--- /dev/null
+++ b/src/components/dls/Calendar/Calendar.stories.tsx
@@ -0,0 +1,37 @@
+import Calendar from './index';
+
+export default {
+ title: 'dls/Calendar',
+ component: Calendar,
+ args: {
+ month: new Date().getMonth(),
+ year: new Date().getFullYear(),
+ isLoading: false,
+ },
+ argTypes: {
+ month: {
+ description: 'The month of the calendar',
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ options: new Array(12).fill(0).map((_, i) => i + 1),
+ control: 'select',
+ },
+ year: {
+ description: 'The year of the calendar',
+ control: 'number',
+ },
+ isLoading: {
+ description: '[OPTIONAL] indicate whether the calendar is in loading state or not',
+ control: 'boolean',
+ },
+ },
+};
+
+const Template = (args) =>
;
+
+export const DefaultCalendar = Template.bind({});
+DefaultCalendar.args = {};
+
+export const LoadingCalendar = Template.bind({});
+LoadingCalendar.args = {
+ isLoading: true,
+};
diff --git a/src/components/dls/Calendar/index.tsx b/src/components/dls/Calendar/index.tsx
new file mode 100644
index 0000000000..74d6fbad12
--- /dev/null
+++ b/src/components/dls/Calendar/index.tsx
@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+
+import classNames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+
+import Spinner from '../Spinner/Spinner';
+
+import styles from './Calendar.module.scss';
+
+import { getMonthDateObject, numberToPaddedString } from '@/utils/datetime';
+import { toLocalizedNumber } from '@/utils/locale';
+
+interface CalendarProps {
+ month: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+ year: number;
+ getIsDayDisabled?: (day: number, dateString: string) => boolean;
+ onDayClick?: (day: number, dateString: string) => void;
+ isLoading?: boolean;
+}
+
+const Calendar = ({ month, year, getIsDayDisabled, onDayClick, isLoading }: CalendarProps) => {
+ const { lang } = useTranslation();
+
+ // YYYY-MM
+ const monthDateString = `${year}-${numberToPaddedString(month)}`;
+
+ const monthDateObj = getMonthDateObject(year, month);
+ const daysInMonth = monthDateObj.getDate();
+
+ const getIsDisabled = useCallback(
+ (day: number, dateString: string) => {
+ // if the calendar is loading, disable all days
+ if (isLoading) return true;
+
+ if (getIsDayDisabled) return getIsDayDisabled(day, dateString);
+
+ // if there is no custom logic to disable days, don't disable any day
+ return false;
+ },
+ [getIsDayDisabled, isLoading],
+ );
+
+ return (
+
+ {isLoading &&
}
+
+ {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
+ {Array.from({ length: daysInMonth }).map((_, index) => {
+ const day = index + 1;
+ const dateString = `${monthDateString}-${numberToPaddedString(day)}`;
+
+ const isDisabled = getIsDisabled(day, dateString);
+
+ const handleDayClick = () => onDayClick?.(day, dateString);
+
+ return (
+
6 && styles.bordered)}>
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default Calendar;
diff --git a/src/components/dls/DurationInput/DurationInput.module.scss b/src/components/dls/DurationInput/DurationInput.module.scss
new file mode 100644
index 0000000000..abdeeb4299
--- /dev/null
+++ b/src/components/dls/DurationInput/DurationInput.module.scss
@@ -0,0 +1,114 @@
+.label {
+ font-size: var(--font-size-normal);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-default);
+}
+
+.durationInputContainer {
+ display: flex;
+ align-items: center;
+ margin-block-start: var(--spacing-medium);
+ width: 100%;
+
+ & > div {
+ width: 33.3%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--spacing-xsmall);
+
+ label {
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-default);
+ }
+ }
+
+ input {
+ // hide arrows on number input (@see: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box)
+ -moz-appearance: textfield; /* Firefox */
+ &::-webkit-outer-spin-button,
+ &::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ display: block;
+ width: 100%;
+ max-width: auto;
+ box-sizing: border-box;
+ padding-inline: var(--spacing-small);
+ padding-block: var(--spacing-small);
+ text-align: center;
+ background: transparent;
+ border: none;
+ border-block: 1px solid var(--color-borders-hairline);
+ font-size: var(--font-size-normal);
+ color: var(--color-text-default);
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ // first input, border radius on left only
+ & > div:first-child > input {
+ [dir="ltr"] & {
+ border-start-start-radius: var(--border-radius-rounded);
+ border-end-start-radius: var(--border-radius-rounded);
+ }
+
+ [dir="rtl"] & {
+ border-start-end-radius: var(--border-radius-rounded);
+ border-end-end-radius: var(--border-radius-rounded);
+ }
+
+ border: 1px solid var(--color-borders-hairline);
+ }
+
+ // last input, border radius on right only
+ & > div:last-child > input {
+ [dir="ltr"] & {
+ border-start-end-radius: var(--border-radius-rounded);
+ border-end-end-radius: var(--border-radius-rounded);
+ }
+
+ [dir="rtl"] & {
+ border-start-start-radius: var(--border-radius-rounded);
+ border-end-start-radius: var(--border-radius-rounded);
+ }
+
+ border: 1px solid var(--color-borders-hairline);
+ }
+}
+
+.disabled {
+ opacity: var(--opacity-50);
+}
+
+.disabledInput {
+ background-color: var(--color-background-alternative-faded) !important;
+}
+
+.loadingSpinner {
+ margin: auto;
+ position: fixed;
+ inset-inline-start: 50%;
+}
+
+.error {
+ input {
+ border-color: var(--color-text-error) !important;
+ color: var(--color-text-error);
+ }
+
+ label {
+ color: var(--color-text-error) !important;
+ }
+}
+
+.errorMessage {
+ color: var(--color-text-error);
+ border-color: var(--color-text-error);
+ margin-block-start: var(--spacing-xsmall);
+}
diff --git a/src/components/dls/DurationInput/DurationInput.stories.tsx b/src/components/dls/DurationInput/DurationInput.stories.tsx
new file mode 100644
index 0000000000..de01db4ae0
--- /dev/null
+++ b/src/components/dls/DurationInput/DurationInput.stories.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+import DurationInput from '.';
+
+export default {
+ title: 'dls/DurationInput',
+ component: DurationInput,
+ argTypes: {},
+};
+
+export const Default = (args) => {
+ const [totalSeconds, setTotalSeconds] = useState(0);
+
+ return (
+
setTotalSeconds(s)}
+ />
+ );
+};
+
+export const WithDisabled = Default.bind({});
+WithDisabled.args = {
+ disabled: true,
+};
+
+export const WithLoading = Default.bind({});
+WithLoading.args = {
+ isLoading: true,
+};
diff --git a/src/components/dls/DurationInput/index.tsx b/src/components/dls/DurationInput/index.tsx
new file mode 100644
index 0000000000..fd2327d841
--- /dev/null
+++ b/src/components/dls/DurationInput/index.tsx
@@ -0,0 +1,123 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import classNames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './DurationInput.module.scss';
+
+import Spinner from '@/dls/Spinner/Spinner';
+import { convertNumberToDecimal } from '@/utils/number';
+
+interface DurationInputProps {
+ totalSeconds: number;
+ onTotalSecondsChange: (totalSeconds: number) => void;
+ disabled?: boolean;
+ isLoading?: boolean;
+ label?: string;
+ error?: string;
+}
+
+const commonInputProps: React.InputHTMLAttributes = {
+ type: 'number',
+ min: 0,
+};
+
+const DurationInput = ({
+ totalSeconds,
+ onTotalSecondsChange,
+ disabled = false,
+ isLoading = false,
+ label,
+ error,
+}: DurationInputProps) => {
+ const [hours, setHours] = useState(0);
+ const [minutes, setMinutes] = useState(0);
+ const [seconds, setSeconds] = useState(0);
+ const { t } = useTranslation('common');
+
+ const isDisabled = disabled || isLoading;
+
+ const handleChange = (setter: (value: number) => void) => (e: ChangeEvent) => {
+ const value = Number(e.target.value);
+ if (value < 0) return;
+
+ setter(value);
+ };
+
+ useEffect(() => {
+ onTotalSecondsChange(hours * 3600 + minutes * 60 + seconds);
+ }, [onTotalSecondsChange, hours, minutes, seconds]);
+
+ useEffect(() => {
+ const newHours = Math.floor(totalSeconds / 3600);
+ const newMinutes = Math.floor((totalSeconds % 3600) / 60);
+ const newSeconds = totalSeconds % 60;
+
+ setHours(convertNumberToDecimal(newHours, 1));
+ setMinutes(convertNumberToDecimal(newMinutes, 1));
+ setSeconds(convertNumberToDecimal(newSeconds, 1));
+ }, [totalSeconds]);
+
+ const commonInputClassName = classNames({
+ [styles.disabledInput]: isDisabled,
+ });
+
+ return (
+
+ {isLoading &&
}
+ {label && (
+
+ )}
+
+
+
+ {error &&
{error}
}
+