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";
import {
Bell,
Search,
// Search,
Check,
Trash2,
CheckCircle2,
@ -19,7 +19,7 @@ import {
GraduationCap,
GitGraph,
Building2,
ExternalLink,
// ExternalLink,
Clock,
} from "lucide-react";
import { formatDistanceToNow, isToday, isYesterday } from "date-fns";
@ -32,6 +32,7 @@ import type {
} from "@/types/notification";
import { Layout } from "@/components/layout/Layout";
import { Button } from "@/components/ui/button";
import { PrimaryButton } from "@/components/shared/PrimaryButton";
import { notificationService } from "@/services/notification-service";
import { showToast } from "@/utils/toast";
@ -175,9 +176,9 @@ export const Notifications = () => {
// }
if (notification.action_url) {
const targetUrl = notification.action_url.startsWith('/tenant')
? notification.action_url
: `/tenant${notification.action_url.startsWith('/') ? '' : '/'}${notification.action_url}`;
const targetUrl = notification.action_url.startsWith("/tenant")
? notification.action_url
: `/tenant${notification.action_url.startsWith("/") ? "" : "/"}${notification.action_url}`;
navigate(targetUrl);
}
};
@ -245,7 +246,7 @@ export const Notifications = () => {
</div>
<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" />
<input
type="text"
@ -254,7 +255,7 @@ export const Notifications = () => {
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</div> */}
{unread_count > 0 && (
<Button
variant="ghost"
@ -305,22 +306,21 @@ export const Notifications = () => {
<div
key={notification.id}
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
? "border-blue-100 shadow-[0_2px_8px_rgba(59,130,246,0.05)]"
: "border-gray-100 shadow-sm",
? "border-gray-300"
: "border-gray-200",
)}
>
{/* Unread indicator bar */}
{!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 */}
<div
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),
)}
>
@ -371,12 +371,11 @@ export const Notifications = () => {
{/* Actions */}
<div className="mt-4 pt-4 border-t border-gray-50 flex items-center justify-between">
<div className="flex items-center gap-3">
<Button
size="sm"
className="bg-[#112868] hover:bg-[#0a1b4d] text-white"
<PrimaryButton
size="small"
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"
? "View Assignment"
: notification.category === "capa"
@ -384,7 +383,7 @@ export const Notifications = () => {
: notification.category === "workflow"
? "View Task"
: "View Details"}
</Button>
</PrimaryButton>
{!notification.is_read && (
<button
onClick={() => handleMarkRead(notification.id)}