rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update site colors and add order notification badge

Browse Source 
Updates primary color to navy, adjusts icon tile shadows, and adds a real-time notification badge for incoming orders to the home page.
This commit is contained in:
Riyadh
2026-05-05 07:51:36 +00:00
parent fdc9d804e9
commit c1d5ccd771
2 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/home.tsx
+21 -6
View File
@@ -8,6 +8,8 @@ import {
getGetHomeStatsQueryKey,
useListNotifications,
getListNotificationsQueryKey,
useListIncomingServiceOrders,
getListIncomingServiceOrdersQueryKey,
useLogout,
useUpdateLanguage,
useUpdateMyAppOrder,
@@ -391,6 +393,18 @@ export default function HomePage() {
const { data: stats } = useGetHomeStats({ query: { queryKey: getGetHomeStatsQueryKey() } });
const { data: notifications } = useListNotifications({ query: { queryKey: getListNotificationsQueryKey() } });
const isAdmin = user?.roles?.includes("admin") ?? false;
const canReceiveOrders =
isAdmin || (user?.roles?.includes("order_receiver") ?? false);
const { data: incomingOrders } = useListIncomingServiceOrders({
query: {
queryKey: getListIncomingServiceOrdersQueryKey(),
enabled: canReceiveOrders,
},
});
const pendingOrdersCount =
incomingOrders?.filter((o) => o.status === "pending" && !o.assignedTo).length ?? 0;
const logout = useLogout();
const updateLanguage = useUpdateLanguage();
@@ -409,10 +423,6 @@ export default function HomePage() {
? (user?.displayNameAr ?? user?.username ?? "")
: (user?.displayNameEn ?? user?.username ?? "");
const isAdmin = user?.roles?.includes("admin") ?? false;
const canReceiveOrders =
isAdmin || (user?.roles?.includes("order_receiver") ?? false);
const handleLogout = () => {
logout.mutate(undefined, {
onSuccess: () => {
@@ -496,9 +506,14 @@ export default function HomePage() {
<button
onClick={() => setLocation("/orders/incoming")}
aria-label={t("incomingOrders.linkLabel")}
className="p-1.5 md:p-2.5 rounded-lg md:rounded-xl hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
className="relative p-1.5 md:p-2.5 rounded-lg md:rounded-xl hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
>
<Inbox className="w-[18px] h-[18px] md:w-6 md:h-6" />
{pendingOrdersCount > 0 && (
<span aria-hidden="true" className="absolute -top-0.5 -right-0.5 bg-destructive text-destructive-foreground text-[10px] md:text-xs rounded-full min-w-[16px] md:min-w-[20px] h-4 md:h-5 px-1 flex items-center justify-center font-bold tabular-nums">
{pendingOrdersCount > 9 ? "9+" : pendingOrdersCount}
</span>
)}
</button>
)}
<button
@@ -507,7 +522,7 @@ export default function HomePage() {
>
<Bell className="w-[18px] h-[18px] md:w-6 md:h-6" />
{unreadCount > 0 && (
<span className="absolute -top-0.5 -right-0.5 bg-destructive text-destructive-foreground text-[10px] md:text-xs rounded-full min-w-[16px] md:min-w-[20px] h-4 md:h-5 px-1 flex items-center justify-center font-bold tabular-nums">
<span aria-hidden="true" className="absolute -top-0.5 -right-0.5 bg-destructive text-destructive-foreground text-[10px] md:text-xs rounded-full min-w-[16px] md:min-w-[20px] h-4 md:h-5 px-1 flex items-center justify-center font-bold tabular-nums">
{unreadCount > 9 ? "9+" : unreadCount}
</span>
)}