Total Days
-
{duration}
+
{totalLeaveDays}
Working Days
@@ -276,7 +278,7 @@ export default function LeaveCreatePage() {
Non-Working Days
- {dayjs(endDate).diff(dayjs(startDate), 'days') + 1 - duration}
+ {totalLeaveDays - duration}
diff --git a/src/modules/notification/Routes.tsx b/src/modules/notification/Routes.tsx
new file mode 100644
index 0000000..c495244
--- /dev/null
+++ b/src/modules/notification/Routes.tsx
@@ -0,0 +1,17 @@
+import { Route } from "react-router-dom";
+import { NotificationTriggersPage } from "./pages/NotificationTriggersPage.tsx";
+import AuthenticatedRoute from "../auth/components/AuthenticatedRoute";
+import NotificationsPage from "./pages/NotificationsPage";
+import NotificationTriggerCreatePage from "./pages/NotificationTriggerCreatePage.tsx";
+import DashboardLayout from "@/components/layout/DashboardLayout.tsx";
+import NotificationTriggerUpdatePage from "@/modules/notification/pages/NotificationTriggerUpdatePage.tsx";
+export default function NotificationRoutes() {
+ return (
+
}>
+ }>
+ }>
+ }>
+ }>
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/notification/components/NotificationBell.tsx b/src/modules/notification/components/NotificationBell.tsx
new file mode 100644
index 0000000..446721d
--- /dev/null
+++ b/src/modules/notification/components/NotificationBell.tsx
@@ -0,0 +1,63 @@
+import React, {useEffect, useState} from "react";
+import {Button} from "@/components/ui/button.tsx";
+import {Bell} from "lucide-react";
+import {NotificationPopover} from "@/modules/notification/components/NotificationPopover.tsx";
+import {getNotificationsCount} from "@/core/services/notificationService.ts";
+import {getErrorMessage} from "@/core/utils/errorHandler.ts";
+import {toast} from "@/components/ui/use-toast.ts";
+
+export const NotificationBell: React.FC = () => {
+ const [isOpen, setIsOpen] = useState
(false);
+ const [errorMessage, setErrorMessage] = useState(null);
+ const [unreadCount, setUnreadCount] = useState(0);
+
+ useEffect(() => {
+ const intervalId = setInterval(async () => {
+ await fetchNotificationsCount();
+ }, 30_000);
+ fetchNotificationsCount();
+ return () => clearInterval(intervalId);
+ }, []);
+
+ const fetchNotificationsCount = async () => {
+ try {
+ const response = await getNotificationsCount();
+ setUnreadCount(response.unreadCount);
+ } catch (error) {
+ const errorMessage = getErrorMessage(error as Error);
+ setErrorMessage(errorMessage);
+ toast({title: "Error", description: errorMessage, variant: "destructive",});
+ }
+ };
+
+ const toggleNotificationPanel = () => {
+ setIsOpen(!isOpen);
+ };
+
+ return (
+
+
+
+ {isOpen && (
+
+ )}
+
+ );
+};
\ No newline at end of file
diff --git a/src/modules/notification/components/NotificationChannelBadge.tsx b/src/modules/notification/components/NotificationChannelBadge.tsx
new file mode 100644
index 0000000..e0e79d9
--- /dev/null
+++ b/src/modules/notification/components/NotificationChannelBadge.tsx
@@ -0,0 +1,35 @@
+import { NotificationChannel } from "@/core/types/notifications";
+import { Badge } from "@/components/ui/badge";
+import { Mail, Slack } from "lucide-react";
+import React from "react";
+
+interface NotificationChannelBadgeProps {
+ channels: NotificationChannel[];
+}
+
+export default function NotificationChannelBadge({ channels }: NotificationChannelBadgeProps) {
+ const getChannelBadge = (channel: NotificationChannel) => {
+ switch (channel) {
+ case NotificationChannel.EMAIL:
+ return (
+
+ Email
+
+ );
+ case NotificationChannel.SLACK:
+ return (
+
+ Slack
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+ {channels.map((ch) => getChannelBadge(ch))}
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/notification/components/NotificationPopover.tsx b/src/modules/notification/components/NotificationPopover.tsx
new file mode 100644
index 0000000..c637fe2
--- /dev/null
+++ b/src/modules/notification/components/NotificationPopover.tsx
@@ -0,0 +1,174 @@
+import React, {useEffect, useState} from "react";
+import {Card, CardContent, CardHeader} from "@/components/ui/card.tsx";
+import {Bell, Check, X} from "lucide-react";
+import {Notification, NotificationStatus} from '@/core/types/notifications.ts';
+import {formatTimeAgo} from "@/core/utils/timeAgo.ts";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
+import {Dialog, DialogContent, DialogHeader, DialogTitle} from "@/components/ui/dialog.tsx";
+import {createNotificationRead, getNotifications} from "@/core/services/notificationService.ts";
+import {getErrorMessage} from "@/core/utils/errorHandler.ts";
+import {toast} from "@/components/ui/use-toast.ts";
+
+interface NotificationPanelProps {
+ onClose: () => void;
+ setUnreadCount: React.Dispatch>;
+}
+
+export const NotificationPopover = ({onClose, setUnreadCount}: NotificationPanelProps) => {
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [selectedNotification, setSelectedNotification] = useState();
+ const [notifications, setNotifications] = useState([]);
+ const [errorMessage, setErrorMessage] = useState(null);
+
+ useEffect(() => {
+ fetchNotifications();
+ }, []);
+
+ const fetchNotifications = async () => {
+ try {
+ const response = await getNotifications({}, 1, 10);
+ setNotifications(response.contents);
+ } catch (error) {
+ const errorMessage = getErrorMessage(error as Error);
+ setErrorMessage(errorMessage);
+ toast({title: "Error", description: errorMessage, variant: "destructive",}); }
+ };
+
+ const markAsRead = async (id: number) => {
+ try {
+ await createNotificationRead([id]);
+
+ setNotifications((prevNotifications) =>
+ prevNotifications.map((n) => n.id === id ? {...n, status: NotificationStatus.READ} : n)
+ );
+ setUnreadCount((prev) => prev - 1);
+ } catch (error) {
+ const errorMessage = getErrorMessage(error as Error);
+ setErrorMessage(errorMessage);
+ toast({title: "Error", description: errorMessage, variant: "destructive",});
+ }
+ };
+
+ const markAllAsRead = async () => {
+ try {
+ const unreadIds = notifications
+ .filter((n) => n.status === NotificationStatus.SENT)
+ .map((n) => n.id);
+
+ if (unreadIds.length === 0) return;
+
+ await createNotificationRead(unreadIds);
+ setNotifications((prevNotifications) =>
+ prevNotifications.map((n) => ({...n, status: NotificationStatus.READ}))
+ );
+ setUnreadCount(0);
+ } catch (error) {
+ const errorMessage = getErrorMessage(error as Error);
+ setErrorMessage(errorMessage);
+ toast({title: "Error", description: errorMessage, variant: "destructive",});
+ }
+ };
+
+ const handleNotificationClick = (notification: Notification) => {
+ markAsRead(notification.id);
+ setSelectedNotification(notification);
+ setDialogOpen(true);
+ };
+
+ const hasUnreadNotifications = notifications.some(n => n.status === NotificationStatus.SENT);
+
+ return (
+ <>
+
+
+
+
Notifications
+
+
+ {hasUnreadNotifications && (
+
+
+
+
+
+
+ Mark all as read
+
+
+
+ )}
+
+
+
+
No notifications
+
We'll notify you when something important happens
+
+ {notifications.map((notification) => {
+ const isUnread = notification.status === NotificationStatus.SENT;
+ return (
+
handleNotificationClick(notification)}
+ >
+
+
+
{notification.title}
+
+ {formatTimeAgo(notification.sentAt)}
+
+
+ {isUnread && (
)}
+
+
+ );
+ })}
+
+
Basic Information
+
+
(
+
+
+
+ Name
+
+
+
+
+
+
+
+
+ )}/>
+
+
Event Details
+
+
+ (
+
+
+ Title
+
+
+
+
+
+
+
+ )}/>
+
+ (
+
+
+ Event Type
+
+
+
+
+
+ )}
+ />
+
+
+
Template Content
+
+
+
+
+
setActiveTab(value as 'text' | 'html')}>
+
+ Text Template
+ HTML Template
+
+
+
+
+ {activeTab === 'text' && (
+ (
+
+
+
+
+
+
+ )}
+ />
+ )}
+ {activeTab === 'html' && (
+ (
+
+
+
+
+
+
+ )}
+ />
+ )}
+
+
+
+
+
+
+
+
Available Variables
+
+
+
+
+
+ {!selectedSchema ? (
+
+
Select an event type to see available variables
+
+ ) : (
+
+
+ {Object.entries(availableVariables).map(([category, variables]) => (
+
+
+
+ {category}
+ {variables.length}
+
+
+ {variables.map((variable) => (
+
+
+ {variable.name}
+ {variable.type}
+ {variable.required && (required)}
+
+
+ ))}
+
+
+ ))}
+
+ )}
+
+
+
+
Delivery Settings
+
+
+
(
+
+
+ Receptors
+
+
+
+
+
+ )}
+ />
+
+ (
+
+ Notification Channels
+
+
+
+ {Object.values(NotificationChannel).map((channel) => {
+ const isSelected = field.value.includes(channel);
+ return (
+
+ );
+ })}
+
+
+
+ )}
+ />
+
+
Loading ...
);
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/notification/pages/NotificationTriggerUpdatePage.tsx b/src/modules/notification/pages/NotificationTriggerUpdatePage.tsx
new file mode 100644
index 0000000..2b25352
--- /dev/null
+++ b/src/modules/notification/pages/NotificationTriggerUpdatePage.tsx
@@ -0,0 +1,107 @@
+import React, {useState, useEffect} from 'react';
+import {useNavigate, useParams} from 'react-router-dom';
+import {Card, CardContent} from '@/components/ui/card';
+import {toast} from '@/components/ui/use-toast';
+import PageHeader from '@/components/layout/PageHeader';
+import PageContent from '@/components/layout/PageContent';
+import {EventSchema, NotificationTrigger} from '@/core/types/notifications.ts';
+import {getNotificationEventSchemas, getNotificationTrigger, updateNotificationTrigger} from '@/core/services/notificationService';
+import {getErrorMessage} from '@/core/utils/errorHandler';
+import {PageSection} from '@/components/layout/PageSection.tsx';
+import NotificationTriggerForm, {TriggerInputs} from "@/modules/notification/components/NotificationTriggerForm.tsx";
+
+export default function NotificationTriggerUpdatePage() {
+ const {id} = useParams();
+ const navigate = useNavigate();
+ const [trigger, setTrigger] = useState(null);
+ const [isProcessing, setIsProcessing] = useState(false);
+ const [eventSchemas, setEventSchemas] = useState(null);
+
+ useEffect(() => {
+ const fetchTrigger = async () => {
+ try {
+ const trigger = await getNotificationTrigger(Number(id));
+ setTrigger(trigger);
+ } catch (error) {
+ toast({
+ title: "Error",
+ description: getErrorMessage(error as Error | string),
+ variant: "destructive",
+ });
+ }
+ };
+
+ fetchTrigger();
+ }, [id]);
+
+ useEffect(() => {
+ const fetchEventSchemas = async () => {
+ try {
+ const schemas = await getNotificationEventSchemas();
+ setEventSchemas(schemas);
+ } catch (error) {
+ toast({
+ title: "Error",
+ description: "Failed to fetch event schemas",
+ variant: "destructive",
+ });
+ }
+ };
+ fetchEventSchemas();
+ }, []);
+
+ const onSubmit = async (data: TriggerInputs) => {
+ try {
+ setIsProcessing(true);
+ await updateNotificationTrigger({
+ title: data.title,
+ name: data.name,
+ textTemplate: data.textTemplate,
+ htmlTemplate: data.htmlTemplate,
+ eventType: data.eventType,
+ channels: data.channels,
+ receptors: data.receptors,
+ }, trigger.id);
+
+ toast({
+ title: 'Success',
+ description: 'Notification trigger created successfully!',
+ });
+ navigate('/notifications/triggers');
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: getErrorMessage(error as Error),
+ variant: 'destructive',
+ });
+ } finally {
+ setIsProcessing(false);
+ }
+ };
+
+ if(!eventSchemas || !trigger) {
+ return (Loading ...
);
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/notification/pages/NotificationTriggersPage.tsx b/src/modules/notification/pages/NotificationTriggersPage.tsx
new file mode 100644
index 0000000..afc0fa6
--- /dev/null
+++ b/src/modules/notification/pages/NotificationTriggersPage.tsx
@@ -0,0 +1,187 @@
+import React, {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {Card} from '@/components/ui/card';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Plus, Pencil, Trash} from 'lucide-react';
+import {NotificationTrigger} from '@/core/types/notifications.ts';
+import {deleteNotificationTrigger, getNotificationTriggers} from '@/core/services/notificationService';
+import PageHeader from '@/components/layout/PageHeader';
+import PageContent from '@/components/layout/PageContent';
+import {getErrorMessage} from "@/core/utils/errorHandler.ts";
+import {toast} from "@/components/ui/use-toast.ts";
+import {Alert, AlertDescription} from "@/components/ui/alert.tsx";
+import NotificationChannelBadge from "@/modules/notification/components/NotificationChannelBadge.tsx";
+import {NotificationTriggerDeleteDialog} from "@/modules/notification/components/NotificationTriggerDeleteDialog.tsx";
+
+export function NotificationTriggersPage() {
+ const navigate = useNavigate();
+ const [triggers, setTriggers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [errorMessage, setErrorMessage] = useState(null);
+ const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+ const [selectedTrigger, setSelectedTrigger] = useState();
+
+ useEffect(() => {
+ const fetchTriggers = async () => {
+ try {
+ setLoading(true);
+ const response = await getNotificationTriggers();
+ setTriggers(response);
+ } catch (error) {
+ const errorMessage = getErrorMessage(error as Error);
+ setErrorMessage(errorMessage);
+ toast({
+ title: "Error",
+ description: errorMessage,
+ variant: "destructive",
+ });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchTriggers();
+ }, []);
+
+ const handleRemoveTrigger = async () => {
+ if (!selectedTrigger) return;
+
+ try {
+ await deleteNotificationTrigger(selectedTrigger.id);
+
+ setTriggers((prev) => prev.filter((t) => t.id !== selectedTrigger.id));
+ toast({title: "Success", description: "Leave type removed successfully!", variant: "default"});
+ } catch (error) {
+ toast({title: "Error", description: getErrorMessage(error as Error), variant: "destructive"});
+ } finally {
+ setSelectedTrigger(null);
+ setIsDeleteDialogOpen(false);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+ {errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+ {loading ? (
+ Loading...
+ ) : (
+
+
+
+
+ Event Type
+ Title
+ Name
+ Receptors
+ Channels
+ Status
+ Actions
+
+
+
+ {triggers.length ? (
+ triggers.map((trigger) => (
+ {
+ setSelectedTrigger(trigger);
+ setIsDeleteDialogOpen(true);
+ }}
+ />))
+ ) : (
+
+ No notification trigger found.
+
+ )}
+
+
+
+ {isDeleteDialogOpen && selectedTrigger && (
+ setIsDeleteDialogOpen(false)}
+ handleAccept={handleRemoveTrigger}
+ />
+ )}
+
+ )}
+
+
+ );
+}
+
+interface TriggerRowProps {
+ trigger: NotificationTrigger;
+ openDeleteDialog: () => void;
+}
+
+function TriggerRow({trigger, openDeleteDialog}: TriggerRowProps) {
+ const navigate = useNavigate();
+ const isArchived = trigger.status === "ARCHIVED";
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'ENABLED':
+ return 'bg-green-50 text-green-700 border-green-200';
+ case 'DISABLED':
+ return 'bg-yellow-50 text-yellow-700 border-yellow-200';
+ }
+ };
+
+ return (
+
+
+ {trigger.eventType}
+
+ {trigger.title}
+ {trigger.name}
+
+ {trigger.receptors}
+
+
+
+
+
+ {trigger.status}
+
+
+
+
+
+
Loading...
+ ) : notifications.length > 0 ? (
+ notifications.map((notification) => (
+ toggleExpand(notification.id)}
+ className="mb-3 border rounded-lg bg-white"
+ >
+
+
+ {notification.title}
+
+
+
+
+
+ {notification.trigger.name}
+
+
+ {formatTimeAgo(notification.sentAt)}
+
+ {notification.textContent}
+
+
+
+
+
+
+
+
+ {JSON.stringify(notification.params, null, 2)}
+
+
+
+
+ )}
+
+
+ ))
+ ) : (
+
+
+
+
+
No notifications yet
+
+ When notifications are sent from your triggers, they will appear here for you to review.
+
+
+