yashwin/Qassure-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign notifications list UI and replace search functionality with PrimaryButton integration

Browse Source
This commit is contained in:
Yashwin 2026-05-12 17:26:18 +05:30
parent 1054e69caa
commit c324e1d5cb
1 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/tenant/Notifications.tsx
View File

@ -7,7 +7,7 @@ import {
} from "@/store/notificationSlice"; } from "@/store/notificationSlice";
import { import {
Bell, Bell,
Search, // Search,
Check, Check,
Trash2, Trash2,
CheckCircle2, CheckCircle2,
@ -19,7 +19,7 @@ import {
GraduationCap, GraduationCap,
GitGraph, GitGraph,
Building2, Building2,
ExternalLink, // ExternalLink,
Clock, Clock,
} from "lucide-react"; } from "lucide-react";
import { formatDistanceToNow, isToday, isYesterday } from "date-fns"; import { formatDistanceToNow, isToday, isYesterday } from "date-fns";
@ -32,6 +32,7 @@ import type {
} from "@/types/notification"; } from "@/types/notification";
import { Layout } from "@/components/layout/Layout"; import { Layout } from "@/components/layout/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { PrimaryButton } from "@/components/shared/PrimaryButton";
import { notificationService } from "@/services/notification-service"; import { notificationService } from "@/services/notification-service";
import { showToast } from "@/utils/toast"; import { showToast } from "@/utils/toast";
@ -175,9 +176,9 @@ export const Notifications = () => {
// } // }
if (notification.action_url) { if (notification.action_url) {
const targetUrl = notification.action_url.startsWith('/tenant') const targetUrl = notification.action_url.startsWith("/tenant")
? notification.action_url ? notification.action_url
: `/tenant${notification.action_url.startsWith('/') ? '' : '/'}${notification.action_url}`; : `/tenant${notification.action_url.startsWith("/") ? "" : "/"}${notification.action_url}`;
navigate(targetUrl); navigate(targetUrl);
} }
}; };
@ -245,7 +246,7 @@ export const Notifications = () => {
</div> </div>
<div className="flex items-center gap-3 pb-2 md:pb-0"> <div className="flex items-center gap-3 pb-2 md:pb-0">
<div className="relative group"> {/* <div className="relative group">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
<input <input
type="text" type="text"
@ -254,7 +255,7 @@ export const Notifications = () => {
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
</div> </div> */}
{unread_count > 0 && ( {unread_count > 0 && (
<Button <Button
variant="ghost" variant="ghost"
@ -305,22 +306,21 @@ export const Notifications = () => {
<div <div
key={notification.id} key={notification.id}
className={cn( className={cn(
"group relative overflow-hidden bg-white border rounded-xl transition-all duration-200 hover:shadow-md", "group relative bg-white border rounded-lg p-3 flex transition-all duration-200 hover:shadow-sm",
!notification.is_read !notification.is_read
? "border-blue-100 shadow-[0_2px_8px_rgba(59,130,246,0.05)]" ? "border-gray-300"
: "border-gray-100 shadow-sm", : "border-gray-200",
)} )}
> >
{/* Unread indicator bar */}
{!notification.is_read && ( {!notification.is_read && (
<div className="absolute left-0 top-0 bottom-0 w-1 bg-blue-500" /> <div className="absolute left-[-4px] top-7 w-2 h-2 rounded-full bg-blue-500" />
)} )}
<div className="p-4 md:p-5 flex gap-4"> <div className="flex w-full gap-4">
{/* Icon */} {/* Icon */}
<div <div
className={cn( className={cn(
"flex-shrink-0 w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center border", "flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center border",
getTypeColors(notification.notification_type), getTypeColors(notification.notification_type),
)} )}
> >
@ -371,12 +371,11 @@ export const Notifications = () => {
{/* Actions */} {/* Actions */}
<div className="mt-4 pt-4 border-t border-gray-50 flex items-center justify-between"> <div className="mt-4 pt-4 border-t border-gray-50 flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button <PrimaryButton
size="sm" size="small"
className="bg-[#112868] hover:bg-[#0a1b4d] text-white"
onClick={() => handleAction(notification)} onClick={() => handleAction(notification)}
> >
<ExternalLink className="w-3.5 h-3.5 mr-2" /> {/* <ExternalLink className="w-3.5 h-3.5 mr-2" /> */}
{notification.category === "training" {notification.category === "training"
? "View Assignment" ? "View Assignment"
: notification.category === "capa" : notification.category === "capa"
@ -384,7 +383,7 @@ export const Notifications = () => {
: notification.category === "workflow" : notification.category === "workflow"
? "View Task" ? "View Task"
: "View Details"} : "View Details"}
</Button> </PrimaryButton>
{!notification.is_read && ( {!notification.is_read && (
<button <button
onClick={() => handleMarkRead(notification.id)} onClick={() => handleMarkRead(notification.id)}