feat(notifications): Implement functional header notification dropdown

This commit replaces the static notification dropdown in the header with a fully functional component that fetches live data from the API.

Key features include:
- Fetches and displays the latest notifications.
- Shows a badge with the count of unseen notifications.
- Opens a modal with notification details upon clicking an item.
- Marks notifications as seen when they are viewed.

Additionally, this commit includes several related improvements:
- refactor: Replaced the global loading component with a custom Tailwind CSS spinner for a consistent look and feel.
- feat: Enhanced the DatePicker component to optionally include a time picker.
- style: Improved the layout of the notification details page by moving the message to a dedicated section and capitalizing the 'priority' and 'type' fields for better readability.
This commit is contained in:
AmirReza Jamali
2025-09-29 15:28:16 +03:30
parent dde2fc5a05
commit 021ee7d11e
11 changed files with 245 additions and 121 deletions
@@ -51,6 +51,7 @@ const CreateNotificationForm = () => {
name="schedule_at"
label="schedule at"
range={false}
timePicker
placeholder="Select schedule date"
/>
</div>
@@ -100,7 +101,7 @@ const CreateNotificationForm = () => {
{...register("link", {
pattern: {
value: REGEX.URL,
message: FormErrorMessages.invalidPattern,
message: FormErrorMessages.invalidPattern,
},
})}
name="link"
@@ -152,7 +153,13 @@ const CreateNotificationForm = () => {
</div>
<div className="col-span-2 flex flex-col gap-2">
<TextAreaGroup
{...register("description")}
required
{...register("description", {
required: {
value: true,
message: FormErrorMessages.required,
},
})}
label="Description"
name="description"
placeholder="Enter description"