Empty text",
- }}
- />
- {!vidLeft && }
-
+ {vidLeft &&
}
+
Empty text",
+ }}
+ />
+ {!vidLeft && }
+
);
}
\ No newline at end of file
diff --git a/src/components/generic/Breadcrumb/AppBreadcrumb.jsx b/src/components/generic/Breadcrumb/AppBreadcrumb.jsx
index 5103bdc..30c3b2b 100644
--- a/src/components/generic/Breadcrumb/AppBreadcrumb.jsx
+++ b/src/components/generic/Breadcrumb/AppBreadcrumb.jsx
@@ -49,7 +49,7 @@ import { cn } from "@/lib/utils";
* // With custom click handler
*
, onClick: (e, navigate) => navigate(-1) },
+ * { label: "Home", icon:
, onClick: (e, navigate) => navigate("/admin") },
* { label: "Settings", to: `/admin/${adminId}/settings` },
* { label: "Profile" },
* ]}
diff --git a/src/components/generic/DatePickerButton.jsx b/src/components/generic/DatePickerButton.jsx
new file mode 100644
index 0000000..39f1e1a
--- /dev/null
+++ b/src/components/generic/DatePickerButton.jsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+// Single-date picker button used by "From"/"To" range filters (Activity Feed,
+// User Activity tab). Extracted so both pages share one implementation.
+export function DatePickerButton({ value, onChange, placeholder, disabled }) {
+ const [open, setOpen] = useState(false);
+ const { fmtDate } = useDateFormat();
+
+ const label = value ? fmtDate(value) : placeholder;
+
+ return (
+
+
+
+
+
+ { onChange(d ?? null); setOpen(false); }}
+ disabled={disabled}
+ initialFocus
+ />
+
+
+ {value && (
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/generic/NotificationDetailDialog.jsx b/src/components/generic/NotificationDetailDialog.jsx
index 808bf11..e21d73f 100644
--- a/src/components/generic/NotificationDetailDialog.jsx
+++ b/src/components/generic/NotificationDetailDialog.jsx
@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
import { Separator } from "@/components/ui/separator";
import { Spinner } from "@/components/ui/spinner";
import { useDateFormat } from "@/hooks/useDateFormat";
-import { NotificationIcon, getTypeAccent, resolveNotificationLink } from "@/components/generic/notificationDisplay";
+import { NotificationIcon, getTypeAccent, getTypeButtonClasses, resolveNotificationLink } from "@/components/generic/notificationDisplay";
export default function NotificationDetailDialog({ notification, onOpenChange }) {
const { fmtDateTime } = useDateFormat();
@@ -81,7 +81,12 @@ export default function NotificationDetailDialog({ notification, onOpenChange })
)}
{link && (
-
diff --git a/src/modules/admin/config/advertisements/archive/columns.config.jsx b/src/modules/admin/config/advertisements/archive/columns.config.jsx
index ad04146..dd5be08 100644
--- a/src/modules/admin/config/advertisements/archive/columns.config.jsx
+++ b/src/modules/admin/config/advertisements/archive/columns.config.jsx
@@ -9,18 +9,28 @@ export const columnPinning = {
left: [],
};
-const cellOverrides = {};
+const DATE_TIME_FIELDS = ["start_date", "end_date", "createdAt", "updatedAt", "deletedAt"];
/**
* Builds the full column array for the Archived Advertisements table.
*
* @param {Array} attributes Field definitions from the server (drives data columns)
* @param {Array} rowActions Row-level kebab action definitions
+ * @param {Function} [fmtDateTime] - date+time formatter (from useDateFormat), falls back to a plain locale string
* @returns {Array} TanStack column definitions
*/
-export function buildDataColumns(attributes, rowActions) {
+export function buildDataColumns(attributes, rowActions, fmtDateTime = (v) => v ? new Date(v).toLocaleString() : "—") {
const visibleAttributes = attributes.filter((a) => !a.hidden);
+ // Ad scheduling is time-sensitive — the default date-only cell renderer
+ // drops the time-of-day, so these fields get an explicit date+time cell.
+ const cellOverrides = Object.fromEntries(
+ DATE_TIME_FIELDS.map((field) => [
+ field,
+ (info) =>
{fmtDateTime(info.getValue())},
+ ])
+ );
+
return [
buildSelectionColumn(),
...buildColumns(visibleAttributes, { cellOverrides }),
diff --git a/src/modules/admin/config/advertisements/archive/toolbar.config.jsx b/src/modules/admin/config/advertisements/archive/toolbar.config.jsx
index 3a90e27..87f1554 100644
--- a/src/modules/admin/config/advertisements/archive/toolbar.config.jsx
+++ b/src/modules/admin/config/advertisements/archive/toolbar.config.jsx
@@ -1,5 +1,5 @@
// config/advertisements/archive/toolbar.config.jsx
-import { RefreshCw, Download } from "lucide-react";
+import { RefreshCw, Download, Ban } from "lucide-react";
import { exportTableToExcel } from "@/utils/excel.util";
/**
@@ -11,8 +11,9 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Function} deps.getFilters
* @param {Function} deps.getSort
* @param {Function} deps.getTableInstance
+ * @param {Function} [deps.onRemoveExpired] - triggers the "Remove Expired" bulk-purge flow
*/
-export function buildToolbarActions({ fetchAdvertisements, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+export function buildToolbarActions({ fetchAdvertisements, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance, onRemoveExpired }) {
return [
{
key: "refresh",
@@ -38,5 +39,13 @@ export function buildToolbarActions({ fetchAdvertisements, pagination, exportCon
tableInstance: table ?? getTableInstance(),
}),
},
+ ...(onRemoveExpired ? [{
+ key: "remove-expired",
+ type: "button",
+ icon:
,
+ label: "Remove Expired",
+ className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+ onClick: onRemoveExpired,
+ }] : []),
];
}
diff --git a/src/modules/admin/pages/activity/ActivityFeed.jsx b/src/modules/admin/pages/activity/ActivityFeed.jsx
index 46e3b43..8e5b951 100644
--- a/src/modules/admin/pages/activity/ActivityFeed.jsx
+++ b/src/modules/admin/pages/activity/ActivityFeed.jsx
@@ -1,7 +1,7 @@
import { useEffect, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { useUsers } from "@/contexts/AdminUserContext";
-import { House, RefreshCw, ChevronLeft, ChevronRight, ExternalLink, CalendarIcon } from "lucide-react";
+import { House, RefreshCw, ChevronLeft, ChevronRight, ExternalLink } from "lucide-react";
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import { Button } from "@/components/ui/button";
@@ -9,9 +9,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { DatePickerButton } from "@/components/generic/DatePickerButton";
import { ACTION_CONFIG, getActionBadge } from "@/data/activity.data";
import { timeAgo } from "@/utils/timestamp.util";
@@ -195,57 +194,6 @@ export default function ActivityFeed() {
);
}
-// ─── DatePickerButton ─────────────────────────────────────────────────────────
-function DatePickerButton({ value, onChange, placeholder, disabled }) {
- const [open, setOpen] = useState(false);
- const { fmtDate } = useDateFormat();
-
- const label = value ? fmtDate(value) : placeholder;
-
- return (
-
-
-
-
-
- { onChange(d ?? null); setOpen(false); }}
- disabled={disabled}
- initialFocus
- />
-
-
- {value && (
-
- )}
-
-
-
- );
-}
-
// ─── Row ──────────────────────────────────────────────────────────────────────
function initials(name, email) {
if (name) return name.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase();
@@ -293,10 +241,10 @@ function ActivityRow({ row, onViewUser }) {
{ts ? (
- {timeAgo(ts)}
+ {fmtDateTime(ts)}
- {fmtDateTime(ts)}
+ {timeAgo(ts)}
) : (
diff --git a/src/modules/admin/pages/activity/UserActivityPage.jsx b/src/modules/admin/pages/activity/UserActivityPage.jsx
index 9994626..660a91e 100644
--- a/src/modules/admin/pages/activity/UserActivityPage.jsx
+++ b/src/modules/admin/pages/activity/UserActivityPage.jsx
@@ -8,13 +8,20 @@ import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { DatePickerButton } from "@/components/generic/DatePickerButton";
import { ACTION_CONFIG, getActionBadge } from "@/data/activity.data";
import { timeAgo } from "@/utils/timestamp.util";
+import { fmtISO } from "@/utils/datetime.util";
import { useDateFormat } from "@/hooks/useDateFormat";
const LIMIT = 20;
+function toDateStr(d) {
+ if (!d) return undefined;
+ return fmtISO(d);
+}
+
export default function UserActivityPage() {
const { userId } = useParams();
const navigate = useNavigate();
@@ -22,6 +29,8 @@ export default function UserActivityPage() {
const [page, setPage] = useState(1);
const [action, setAction] = useState("all");
+ const [from, setFrom] = useState(null);
+ const [to, setTo] = useState(null);
const load = useCallback(
(p = 1) => {
@@ -29,14 +38,16 @@ export default function UserActivityPage() {
page: p,
limit: LIMIT,
action: action === "all" ? undefined : action,
+ from: toDateStr(from),
+ to: toDateStr(to),
});
setPage(p);
},
- [fetchUserActivity, userId, action]
+ [fetchUserActivity, userId, action, from, to]
);
useEffect(() => { fetchUser(userId); }, [userId]);
- useEffect(() => { load(1); }, [action, userId]);
+ useEffect(() => { load(1); }, [action, from, to, userId]);
const displayName = user?.personal_info?.name?.full_name ?? user?.email ?? `User #${userId}`;
@@ -76,7 +87,7 @@ export default function UserActivityPage() {
{/* ─── Filter ──────────────────────────────────────────────── */}
-