'use client'; import { useEffect, useId, useMemo, useRef, useState } from 'react'; import { useRouter } from 'next/navigation'; import { useAuth } from '@/components/auth-context'; import { hasAnyDjangoPermission } from '@/lib/permissions'; import SimpleSelect from '@/components/SimpleSelect'; /** * Action Points card — the compact "what needs my attention" panel that sits in * the top-right corner of the Recruiter, Project Manager and Hiring Manager * dashboards. * * RBAC * ---- * The backend already drops every point whose target module the caller has no * View permission for (apps/dashboard/action_points.py), and sends the * permission codes that unlocked each surviving one. This component re-applies * the SAME check with the user's own permission list before wiring up the * click, so a card can never navigate to a module the role cannot open — it * renders disabled instead. Nothing here hardcodes a role. * * Layout * ------ * `headingOutside` lifts the title/subtitle above the panel so it lines up with * the sibling section heading (e.g. "Quick Overview"), leaving both panels' * top edges flush. The panel itself is a fixed-height, three-part box: a header * that never scrolls, a scrolling list, and a pagination footer. Collapsing * hides the list and footer only — the header stays, and the scroll position * and page are restored on expand without refetching anything. */ export interface ActionPoint { key: string; label: string; count: number; /** Exact record ids behind `count` — used to drill down to just those. */ ids: number[]; route: string; icon: string; tone: string; urgent?: boolean; description?: string; /** View permission codes that unlock `route`; holding ANY one is enough. */ permissions?: string[]; } /** * Tone -> colour classes. Each action point type carries its own tone so the * card colour identifies it at a glance, using the existing dashboard palette * (flat corners, tinted icon chip, coloured left accent) in light and dark. */ const TONES: Record = { amber: { chip: 'bg-amber-500/10 text-amber-600 dark:text-amber-400', accent: 'bg-amber-500', count: 'text-amber-600 dark:text-amber-400' }, orange: { chip: 'bg-orange-500/10 text-orange-600 dark:text-orange-400', accent: 'bg-orange-500', count: 'text-orange-600 dark:text-orange-400' }, rose: { chip: 'bg-rose-500/10 text-rose-600 dark:text-rose-400', accent: 'bg-rose-500', count: 'text-rose-600 dark:text-rose-400' }, indigo: { chip: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400', accent: 'bg-indigo-500', count: 'text-indigo-600 dark:text-indigo-400' }, sky: { chip: 'bg-sky-500/10 text-sky-600 dark:text-sky-400', accent: 'bg-sky-500', count: 'text-sky-600 dark:text-sky-400' }, emerald: { chip: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400', accent: 'bg-emerald-500', count: 'text-emerald-600 dark:text-emerald-400' }, teal: { chip: 'bg-teal-500/10 text-teal-600 dark:text-teal-400', accent: 'bg-teal-500', count: 'text-teal-600 dark:text-teal-400' }, violet: { chip: 'bg-violet-500/10 text-violet-600 dark:text-violet-400', accent: 'bg-violet-500', count: 'text-violet-600 dark:text-violet-400' }, fuchsia: { chip: 'bg-fuchsia-500/10 text-fuchsia-600 dark:text-fuchsia-400', accent: 'bg-fuchsia-500', count: 'text-fuchsia-600 dark:text-fuchsia-400' }, slate: { chip: 'bg-slate-500/10 text-slate-600 dark:text-slate-400', accent: 'bg-slate-400', count: 'text-slate-600 dark:text-slate-300' }, }; const FALLBACK_TONE = TONES.slate; const PAGE_SIZE_OPTIONS = [5, 10, 20]; const DEFAULT_PAGE_SIZE = 5; /** Fixed body height — the card keeps the same footprint whatever the page * size or number of points, and the list scrolls inside it. */ const LIST_HEIGHT = 'h-[290px]'; /** Nav button styling, matching DataTablePagination's, sized for this column. */ const NAV_BTN = 'w-6 h-6 flex items-center justify-center rounded-none border border-slate-200 dark:border-slate-800 ' + 'bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-40 ' + 'disabled:hover:bg-white dark:disabled:hover:bg-slate-900 disabled:cursor-not-allowed transition ' + 'cursor-pointer text-slate-600 dark:text-slate-300'; interface ActionPointsCardProps { points: ActionPoint[] | null | undefined; /** True while the first fetch is in flight (renders skeleton rows). */ loading?: boolean; title?: string; subtitle?: string; emptyTitle?: string; emptyDescription?: string; className?: string; /** * Render the title/subtitle ABOVE the panel instead of inside its header, so * it aligns with the section heading of the column beside it. */ headingOutside?: boolean; /** Spacing under the external heading — match the sibling column's. */ headingClassName?: string; /** * Stretch the panel to the full height of its grid cell (xl and up), so it * ends level with the taller column beside it, and let the list absorb the * leftover space instead of using the fixed body height. The list keeps a * `min-height: 0` so it never grows the row — the neighbouring column alone * decides the height, and anything that doesn't fit scrolls. * * Below xl the grid is single-column, where there is no neighbour to match: * the fixed body height applies as usual. Off by default, so dashboards that * size the card naturally are unaffected. */ fillHeight?: boolean; pageSizeOptions?: number[]; defaultPageSize?: number; } /** Drill-down URL pinned to the exact ids behind a point's count. */ function drillTo(base: string, ids: number[], label: string) { const query = ids.length > 0 ? `?ids=${ids.join(',')}&label=${encodeURIComponent(label)}` : ''; return `${base}${query}`; } export default function ActionPointsCard({ points, loading = false, title = 'Action Points', subtitle = 'Pending items that need your attention.', emptyTitle = "You're all caught up", emptyDescription = 'No pending actions right now.', className = '', headingOutside = false, headingClassName = 'mb-3', fillHeight = false, pageSizeOptions = PAGE_SIZE_OPTIONS, defaultPageSize = DEFAULT_PAGE_SIZE, }: ActionPointsCardProps) { const router = useRouter(); const { user } = useAuth(); const bodyId = useId(); const [pageIndex, setPageIndex] = useState(0); const [pageSize, setPageSize] = useState(defaultPageSize); const listRef = useRef(null); const scrollTopRef = useRef(0); // Only surface points that actually need attention (count > 0), and re-check // the View permission of each one against this user's own permission list. const openPoints = useMemo( () => (points ?? []) .filter((p) => p.count > 0) .map((p) => ({ ...p, canView: hasAnyDjangoPermission(user, p.permissions) })), [points, user], ); const totalPending = openPoints.reduce((n, p) => n + p.count, 0); // Page is derived and clamped on every render, so a background refresh that // shortens the list can never leave the view on a page that no longer exists. const pageCount = Math.max(1, Math.ceil(openPoints.length / pageSize)); const page = Math.min(pageIndex, pageCount - 1); const firstRow = page * pageSize; const pageItems = openPoints.slice(firstRow, firstRow + pageSize); /** Move to a page and start it from the top (scroll offset is per-page). */ const goToPage = (next: number) => { setPageIndex(Math.max(0, Math.min(next, pageCount - 1))); scrollTopRef.current = 0; if (listRef.current) listRef.current.scrollTop = 0; }; const summary = totalPending > 0 ? `${totalPending} item${totalPending === 1 ? '' : 's'} pending` : 'No pending items'; return (
{/* With `fillHeight`, the contents are taken out of flow at xl and pinned to the grid cell. That is what makes the height match: an in-flow column contributes its max-content height to the grid row, so a long list would drag the row taller than the column beside it. Out of flow it contributes nothing, the row is sized by that neighbour alone, and `inset-0` fills whatever height results. Below xl the grid is one column with no neighbour to match, so everything stays in normal flow. */}
{/* External heading — same markup as the sibling section heading, so both columns' panels start at exactly the same vertical offset. */} {headingOutside && (

{title}

{subtitle}

)}
{/* Header — always visible, no collapse functionality */}
{headingOutside ? (

{summary}

) : ( <>

{title}

{subtitle}

)}
{totalPending > 0 && ( {totalPending} )}
{/* Body — always visible */}
{/* The only scrolling region — the header above and the pagination footer below stay put. With `fillHeight` it takes whatever height the card has left over (min-h-0 keeps it from growing the row); otherwise it uses the fixed body height. */}
{ scrollTopRef.current = (e.target as HTMLDivElement).scrollTop; }} className={`${LIST_HEIGHT} ${ fillHeight ? 'xl:h-auto xl:flex-1 xl:min-h-0' : '' } overflow-y-auto custom-scrollbar`} > {loading && points == null ? ( // Skeleton only on the very first load (nothing fetched yet), so // a background refresh never blanks an already-painted list.
{[0, 1, 2, 3].map((i) => (
))}
) : openPoints.length === 0 ? (

{emptyTitle}

{emptyDescription}

) : (
    {pageItems.map((p) => { const tone = TONES[p.tone] ?? FALLBACK_TONE; const rowTitle = p.canView ? `Show these ${p.count} record(s)` : 'You do not have permission to view this module'; return (
    • ); })}
)}
{/* Pagination — same controls and wording as DataTablePagination, condensed for this column's width. */} {openPoints.length > 0 && (
{firstRow + 1}– {Math.min(firstRow + pageSize, openPoints.length)} {' '} of {openPoints.length}
{ setPageSize(Number(val)); goToPage(0); }} className="w-[58px] font-extrabold" isClearable={false} options={pageSizeOptions.map((size) => ({ value: size, label: String(size) }))} />
{page + 1} {' / '} {pageCount}
)}
); }