e.stopPropagation()}>
+
e.stopPropagation()}>
- {visibleMembers.map((member, index) => renderAvatar(member, index))}
+ {visibleMembers.map((member, index) => renderAvatar(member, index, allowClickThrough))}
);
diff --git a/worklenz-frontend/src/components/conditional-alert.tsx b/worklenz-frontend/src/components/conditional-alert.tsx
new file mode 100644
index 00000000..acddfe38
--- /dev/null
+++ b/worklenz-frontend/src/components/conditional-alert.tsx
@@ -0,0 +1,61 @@
+import { Alert } from 'antd';
+import { useState, useEffect } from 'react';
+
+interface ConditionalAlertProps {
+ message?: string;
+ type?: 'success' | 'info' | 'warning' | 'error';
+ showInitially?: boolean;
+ onClose?: () => void;
+ condition?: boolean;
+ className?: string;
+}
+
+const ConditionalAlert = ({
+ message = '',
+ type = 'info',
+ showInitially = false,
+ onClose,
+ condition,
+ className = ''
+}: ConditionalAlertProps) => {
+ const [visible, setVisible] = useState(showInitially);
+
+ useEffect(() => {
+ if (condition !== undefined) {
+ setVisible(condition);
+ }
+ }, [condition]);
+
+ const handleClose = () => {
+ setVisible(false);
+ onClose?.();
+ };
+
+ const alertStyles = {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ zIndex: 1000,
+ margin: 0,
+ borderRadius: 0,
+ } as const;
+
+ if (!visible || !message) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export default ConditionalAlert;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/license-alert.tsx b/worklenz-frontend/src/components/license-alert.tsx
new file mode 100644
index 00000000..7a807049
--- /dev/null
+++ b/worklenz-frontend/src/components/license-alert.tsx
@@ -0,0 +1,184 @@
+import { Alert, Button, Space } from 'antd';
+import { useState, useEffect } from 'react';
+import { CrownOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { ILocalSession } from '@/types/auth/local-session.types';
+import { LICENSE_ALERT_KEY } from '@/shared/constants';
+import { format, isSameDay, differenceInDays, addDays, isAfter } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+
+interface LicenseAlertProps {
+ currentSession: ILocalSession;
+ onVisibilityChange?: (visible: boolean) => void;
+}
+
+interface AlertConfig {
+ type: 'success' | 'info' | 'warning' | 'error';
+ message: React.ReactNode;
+ description: string;
+ icon: React.ReactNode;
+ licenseType: 'trial' | 'expired' | 'expiring';
+ daysRemaining: number;
+}
+
+const LicenseAlert = ({ currentSession, onVisibilityChange }: LicenseAlertProps) => {
+ const navigate = useNavigate();
+ const [visible, setVisible] = useState(false);
+ const [alertConfig, setAlertConfig] = useState
(null);
+
+ const handleClose = () => {
+ setVisible(false);
+ setLastAlertDate(new Date());
+ };
+
+ const getLastAlertDate = () => {
+ const lastAlertDate = localStorage.getItem(LICENSE_ALERT_KEY);
+ return lastAlertDate ? new Date(lastAlertDate) : null;
+ };
+
+ const setLastAlertDate = (date: Date) => {
+ localStorage.setItem(LICENSE_ALERT_KEY, format(date, 'yyyy-MM-dd'));
+ };
+
+ const handleUpgrade = () => {
+ navigate('/worklenz/admin-center/billing');
+ };
+
+ const handleExtend = () => {
+ navigate('/worklenz/admin-center/billing');
+ };
+
+ const getVisibleAndConfig = (): { visible: boolean; config: AlertConfig | null } => {
+ const lastAlertDate = getLastAlertDate();
+
+ // Check if alert was already shown today
+ if (lastAlertDate && isSameDay(lastAlertDate, new Date())) {
+ return { visible: false, config: null };
+ }
+
+ if (!currentSession.valid_till_date) {
+ return { visible: false, config: null };
+ }
+
+ let validTillDate = new Date(currentSession.valid_till_date);
+ const today = new Date();
+
+ // If validTillDate is after today, add 1 day (matching Angular logic)
+ if (isAfter(validTillDate, today)) {
+ validTillDate = addDays(validTillDate, 1);
+ }
+
+ // Calculate the difference in days between the two dates
+ const daysDifference = differenceInDays(validTillDate, today);
+
+ // Don't show if no valid_till_date or difference is >= 7 days
+ if (daysDifference >= 7) {
+ return { visible: false, config: null };
+ }
+
+ const absDaysDifference = Math.abs(daysDifference);
+ const dayText = `${absDaysDifference} day${absDaysDifference === 1 ? '' : 's'}`;
+
+ let string1 = '';
+ let string2 = dayText;
+ let licenseType: 'trial' | 'expired' | 'expiring' = 'expiring';
+ let alertType: 'success' | 'info' | 'warning' | 'error' = 'warning';
+
+ if (currentSession.subscription_status === 'trialing') {
+ licenseType = 'trial';
+ if (daysDifference < 0) {
+ string1 = 'Your Worklenz trial expired';
+ string2 = string2 + ' ago';
+ alertType = 'error';
+ licenseType = 'expired';
+ } else if (daysDifference !== 0 && daysDifference < 7) {
+ string1 = 'Your Worklenz trial expires in';
+ } else if (daysDifference === 0 && daysDifference < 7) {
+ string1 = 'Your Worklenz trial expires';
+ string2 = 'today';
+ }
+ } else if (currentSession.subscription_status === 'active') {
+ if (daysDifference < 0) {
+ string1 = 'Your Worklenz subscription expired';
+ string2 = string2 + ' ago';
+ alertType = 'error';
+ licenseType = 'expired';
+ } else if (daysDifference !== 0 && daysDifference < 7) {
+ string1 = 'Your Worklenz subscription expires in';
+ } else if (daysDifference === 0 && daysDifference < 7) {
+ string1 = 'Your Worklenz subscription expires';
+ string2 = 'today';
+ }
+ } else {
+ return { visible: false, config: null };
+ }
+
+ const config: AlertConfig = {
+ type: alertType,
+ message: (
+ <>
+ Action required! {string1} {string2}
+
+ ),
+ description: '',
+ icon: licenseType === 'expired' || licenseType === 'trial' ? : ,
+ licenseType,
+ daysRemaining: absDaysDifference
+ };
+
+ return { visible: true, config };
+ };
+
+ useEffect(() => {
+ const { visible: shouldShow, config } = getVisibleAndConfig();
+ setVisible(shouldShow);
+ setAlertConfig(config);
+
+ // Notify parent about visibility change
+ if (onVisibilityChange) {
+ onVisibilityChange(shouldShow);
+ }
+ }, [currentSession, onVisibilityChange]);
+
+ const alertStyles = {
+ margin: 0,
+ borderRadius: 0,
+ } as const;
+
+ const actionButtons = alertConfig && (
+
+ {/* Show button only if user is owner or admin */}
+ {(currentSession.owner || currentSession.is_admin) && (
+
+ )}
+
+ );
+
+ if (!visible || !alertConfig) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export default LicenseAlert;
\ No newline at end of file
diff --git a/worklenz-frontend/src/features/finance/finance-drawer/finance-drawer.tsx b/worklenz-frontend/src/features/finance/finance-drawer/finance-drawer.tsx
index 851f6d76..395cc99c 100644
--- a/worklenz-frontend/src/features/finance/finance-drawer/finance-drawer.tsx
+++ b/worklenz-frontend/src/features/finance/finance-drawer/finance-drawer.tsx
@@ -1,17 +1,40 @@
import React, { useEffect, useState } from 'react';
-import { Drawer, Typography } from 'antd';
+import { Drawer, Typography, Spin } from 'antd';
import { useTranslation } from 'react-i18next';
import { useAppSelector } from '../../../hooks/useAppSelector';
import { useAppDispatch } from '../../../hooks/useAppDispatch';
import { themeWiseColor } from '../../../utils/themeWiseColor';
-import { toggleFinanceDrawer } from '../finance-slice';
+import { closeFinanceDrawer } from '../finance-slice';
+import { projectFinanceApiService } from '../../../api/project-finance-ratecard/project-finance.api.service';
+import { ITaskBreakdownResponse } from '../../../types/project/project-finance.types';
-const FinanceDrawer = ({ task }: { task: any }) => {
- const [selectedTask, setSelectedTask] = useState(task);
+const FinanceDrawer = () => {
+ const [taskBreakdown, setTaskBreakdown] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ // Get task and drawer state from Redux store
+ const selectedTask = useAppSelector((state) => state.financeReducer.selectedTask);
+ const isDrawerOpen = useAppSelector((state) => state.financeReducer.isFinanceDrawerOpen);
useEffect(() => {
- setSelectedTask(task);
- }, [task]);
+ if (selectedTask?.id && isDrawerOpen) {
+ fetchTaskBreakdown(selectedTask.id);
+ } else {
+ setTaskBreakdown(null);
+ }
+ }, [selectedTask, isDrawerOpen]);
+
+ const fetchTaskBreakdown = async (taskId: string) => {
+ try {
+ setLoading(true);
+ const response = await projectFinanceApiService.getTaskBreakdown(taskId);
+ setTaskBreakdown(response.body);
+ } catch (error) {
+ console.error('Error fetching task breakdown:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
// localization
const { t } = useTranslation('project-view-finance');
@@ -19,9 +42,6 @@ const FinanceDrawer = ({ task }: { task: any }) => {
// get theme data from theme reducer
const themeMode = useAppSelector((state) => state.themeReducer.mode);
- const isDrawerOpen = useAppSelector(
- (state) => state.financeReducer.isFinanceDrawerOpen
- );
const dispatch = useAppDispatch();
const currency = useAppSelector(
(state) => state.financeReducer.currency
@@ -29,41 +49,15 @@ const FinanceDrawer = ({ task }: { task: any }) => {
// function handle drawer close
const handleClose = () => {
- setSelectedTask(null);
- dispatch(toggleFinanceDrawer());
+ setTaskBreakdown(null);
+ dispatch(closeFinanceDrawer());
};
- // group members by job roles and calculate labor hours and costs
- const groupedMembers =
- selectedTask?.members?.reduce((acc: any, member: any) => {
- const memberHours = selectedTask.hours / selectedTask.members.length;
- const memberCost = memberHours * member.hourlyRate;
-
- if (!acc[member.jobRole]) {
- acc[member.jobRole] = {
- jobRole: member.jobRole,
- laborHours: 0,
- cost: 0,
- members: [],
- };
- }
-
- acc[member.jobRole].laborHours += memberHours;
- acc[member.jobRole].cost += memberCost;
- acc[member.jobRole].members.push({
- name: member.name,
- laborHours: memberHours,
- cost: memberCost,
- });
-
- return acc;
- }, {}) || {};
-
return (
- {selectedTask?.task || t('noTaskSelected')}
+ {taskBreakdown?.task?.name || selectedTask?.name || t('noTaskSelected')}
}
open={isDrawerOpen}
@@ -72,98 +66,77 @@ const FinanceDrawer = ({ task }: { task: any }) => {
width={480}
>
-
-
-
-
+
+
+ ) : (
+
+
+
- |
- {t('labourHoursColumn')}
- |
-
- {t('costColumn')} ({currency})
- |
-
-
-
-
-
-
- {Object.values(groupedMembers).map((group: any) => (
-
- {/* Group Header */}
-
+ |
- | {group.jobRole} |
-
- {group.laborHours}
- |
-
- {group.cost}
- |
-
- {/* Member Rows */}
- {group.members.map((member: any, index: number) => (
+ {t('labourHoursColumn')}
+
+
+ {t('costColumn')} ({currency})
+ |
+
+
+
+
+ {taskBreakdown?.grouped_members?.map((group: any) => (
+
+ {/* Group Header */}
+ | {group.jobRole} |
- {member.name}
+ {group.estimated_hours?.toFixed(2) || '0.00'}
|
{
padding: 8,
}}
>
- {member.laborHours}
- |
-
- {member.cost}
+ {group.estimated_cost?.toFixed(2) || '0.00'}
|
- ))}
-
- ))}
-
-
+ {/* Member Rows */}
+ {group.members?.map((member: any, index: number) => (
+ |
+ |
+ {member.name}
+ |
+
+ {member.estimated_hours?.toFixed(2) || '0.00'}
+ |
+
+ {member.estimated_cost?.toFixed(2) || '0.00'}
+ |
+
+ ))}
+
+ ))}
+
+
+ )}
{table.group_name}