- {time.hours !== '--' && time.minute !== '--' ? `${time.hours}:${time.minute} ${time.meridiem}` :
Time picker}
+
+ {time.hours !== '--' && time.minute !== '--' ? `${time.hours}:${time.minute} ${time.meridiem}` : Time picker}
diff --git a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
index cf8c1b4b9..8f220c52b 100644
--- a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
+++ b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
@@ -3,25 +3,37 @@ import '../../../styles/style.css';
import { useOrganizationTeams, useTeamTasks } from '@app/hooks';
import { clsxm } from '@app/utils';
import { DatePicker } from '@components/ui/DatePicker';
-import { PencilSquareIcon } from '@heroicons/react/20/solid';
import { format } from 'date-fns';
import { useState, useEffect, FormEvent, useCallback } from 'react';
import { Button, SelectItems, Modal } from 'lib/components';
-import { FaRegCalendarAlt } from 'react-icons/fa';
-import { HiMiniClock } from 'react-icons/hi2';
import { manualTimeReasons } from '@app/constants';
import { useTranslations } from 'next-intl';
import { IOrganizationTeamList } from '@app/interfaces';
import { useManualTime } from '@app/hooks/features/useManualTime';
import { IAddManualTimeRequest } from '@app/interfaces/timer/ITimerLogs';
+import { cn } from 'lib/utils';
+import { CalendarDays } from 'lucide-react';
+import { IoTime } from 'react-icons/io5';
+/**
+ * Interface for the properties of the `AddManualTimeModal` component.
+ *
+ * This interface defines the properties expected by the `AddManualTimeModal` component.
+ *
+ * @interface IAddManualTimeModalProps
+ *
+ * @property {boolean} isOpen - Indicates whether the modal is open or closed.
+ * @property {"AddManuelTime" | "AddTime"} params - Determines the context in which the modal is used, either "AddManuelTime" for the Add Manuel Time view or "AddTime" for the Add time.
+ * @property {() => void} closeModal - Callback function to be called to close the modal.
+ */
interface IAddManualTimeModalProps {
isOpen: boolean;
+ params: "AddManuelTime" | "AddTime";
closeModal: () => void;
}
export function AddManualTimeModal(props: IAddManualTimeModalProps) {
- const { closeModal, isOpen } = props;
+ const { closeModal, isOpen, params } = props;
const t = useTranslations();
const [isBillable, setIsBillable] = useState
(false);
const [description, setDescription] = useState('');
@@ -93,15 +105,20 @@ export function AddManualTimeModal(props: IAddManualTimeModalProps) {
const endTotalMinutes = endHours * 60 + endMinutes;
const diffMinutes = endTotalMinutes - startTotalMinutes;
- if (diffMinutes < 0) {
- return;
- }
+ if (diffMinutes < 0) return;
const hours = Math.floor(diffMinutes / 60);
const minutes = diffMinutes % 60;
- setTimeDifference(`${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m`);
+
+ const timeString = [
+ hours > 0 ? `${String(hours).padStart(2, '0')}h` : '0h',
+ minutes > 0 ? `${String(minutes).padStart(2, '0')}m` : ''
+ ].filter(Boolean).join(' ');
+
+ setTimeDifference(timeString);
}, [endTime, startTime]);
+
useEffect(() => {
calculateTimeDifference();
}, [calculateTimeDifference, endTime, startTime]);
@@ -127,48 +144,38 @@ export function AddManualTimeModal(props: IAddManualTimeModalProps) {