@exxatdesignux/ui 0.2.8 → 0.2.10

package/template/components/ask-leo-composer.tsx

@@ -6,6 +6,7 @@
  */
 
 import * as React from "react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -29,20 +30,80 @@ export interface AskLeoComposerProps {
   /** Called with trimmed message after send (composer clears afterward). */
   onSubmit?: (message: string) => void
   placeholder?: string
-  className?: string
+  /**
+   * When non-empty and the field is empty (single-line / collapsed), cycles these as an overlaid hint
+   * with a soft crossfade. Native `placeholder` is suppressed while the overlay shows.
+   */
+  animatedPlaceholders?: string[]
+  /** Milliseconds between animated placeholder phrases. Default 4200. */
+  animatedPlaceholderIntervalMs?: number
+  /**
+   * When `2`, animated hints can wrap to two lines instead of a single truncated line (e.g. example hub queries).
+   * Default `1` matches the original pill composer behavior.
+   */
+  animatedPlaceholderMaxLines?: 1 | 2
+  /**
+   * `attachments` — plus menu + file picker (default). `ai-mark` — Leo-style icon only (e.g. question bank hub).
+   */
+  leadingSlot?: "attachments" | "ai-mark"
+  /** Accessible name for the textarea (paired with `htmlFor`). */
+  inputLabel?: string
+  /** `aria-label` on the submit control when the field has text. */
+  submitButtonAriaLabel?: string
+  /**
+   * `send` — paper plane (chat / Ask Leo). `search` — magnifying glass (question bank hub + dedicated search).
+   */
+  submitAppearance?: "send" | "search"
   /** Lets the parent swap pill vs card chrome when the field grows (multiline / long text). */
   onExpandedChange?: (expanded: boolean) => void
+  className?: string
 }
 
 export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoComposerProps>(
   function AskLeoComposer(
-    { value, onChange, onSubmit, placeholder = "Ask Leo anything…", className, onExpandedChange },
+    {
+      value,
+      onChange,
+      onSubmit,
+      placeholder = "Ask Leo anything…",
+      className,
+      onExpandedChange,
+      animatedPlaceholders,
+      animatedPlaceholderIntervalMs = 4200,
+      animatedPlaceholderMaxLines = 1,
+      leadingSlot = "attachments",
+      inputLabel = "Message to Leo",
+      submitButtonAriaLabel = "Send message",
+      submitAppearance = "send",
+    },
     forwardedRef,
   ) {
     const [isExpanded, setIsExpanded] = React.useState(false)
+    const reduceMotion = useReducedMotion()
     const fieldId = React.useId()
+    const phrases = React.useMemo(
+      () => (animatedPlaceholders ?? []).map(s => s.trim()).filter(Boolean),
+      [animatedPlaceholders],
+    )
+    const [phraseIndex, setPhraseIndex] = React.useState(0)
+    const showAnimatedPlaceholder = phrases.length > 0 && !value.trim() && !isExpanded
+
+    React.useEffect(() => {
+      if (!showAnimatedPlaceholder) return
+      const id = window.setInterval(() => {
+        setPhraseIndex(i => (i + 1) % phrases.length)
+      }, animatedPlaceholderIntervalMs)
+      return () => window.clearInterval(id)
+    }, [showAnimatedPlaceholder, phrases.length, animatedPlaceholderIntervalMs])
+
+    React.useEffect(() => {
+      if (!showAnimatedPlaceholder) setPhraseIndex(0)
+    }, [showAnimatedPlaceholder])
 
+    const reportedExpandedRef = React.useRef<boolean | undefined>(undefined)
     React.useEffect(() => {
+      if (reportedExpandedRef.current === isExpanded) return
+      reportedExpandedRef.current = isExpanded
       onExpandedChange?.(isExpanded)
     }, [isExpanded, onExpandedChange])
     const innerRef = React.useRef<HTMLTextAreaElement>(null)
@@ -92,13 +153,15 @@ export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoCompos
       <div className={cn("min-w-0 w-full", className)}>
         <form onSubmit={handleSubmit} className="group/composer min-w-0 w-full" noValidate>
           <label htmlFor={fieldId} className="sr-only">
-            Message to Leo
+            {inputLabel}
           </label>
-          <input ref={fileInputRef} type="file" multiple className="sr-only" onChange={() => {}} />
+          {leadingSlot === "attachments" ? (
+            <input ref={fileInputRef} type="file" multiple className="sr-only" onChange={() => {}} />
+          ) : null}
 
           <div
             className={cn(
-              "min-w-0 w-full cursor-text overflow-hidden border border-border/80 bg-card transition-[border-radius,padding] duration-200 ease-out",
+              "min-w-0 w-full cursor-text overflow-hidden border border-[color:var(--control-border)] bg-card transition-[border-radius,padding] duration-200 ease-out",
               isExpanded
                 ? "rounded-2xl px-2 py-2 shadow-none grid [grid-template-columns:minmax(0,1fr)] [grid-template-rows:auto_1fr_auto] [grid-template-areas:'header'_'primary'_'footer']"
                 : "rounded-full px-1 py-0.5 shadow-none grid [grid-template-columns:auto_minmax(0,1fr)_auto] [grid-template-rows:minmax(0,auto)] [grid-template-areas:'header_header_header'_'leading_primary_trailing'_'._footer_.']",
@@ -111,65 +174,119 @@ export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoCompos
               })}
               style={{ gridArea: "primary" }}
             >
-              <div className="max-h-52 min-h-0 min-w-0 flex-1 overflow-y-auto">
+              <div className="relative max-h-52 min-h-0 min-w-0 flex-1 overflow-y-auto">
                 <Textarea
                   id={fieldId}
                   ref={setTextareaRef}
                   value={value}
                   onChange={handleTextareaChange}
                   onKeyDown={handleKeyDown}
-                  placeholder={placeholder}
+                  placeholder={showAnimatedPlaceholder ? " " : placeholder}
                   autoComplete="off"
                   className={cn(
-                    "min-h-0 min-w-0 w-full max-w-full resize-none rounded-none border-0 bg-transparent p-0 text-sm leading-5 text-foreground shadow-none placeholder:text-foreground/55 focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 md:text-sm dark:placeholder:text-foreground/50",
+                    "min-h-0 min-w-0 w-full max-w-full resize-none rounded-none border-0 bg-transparent p-0 text-sm leading-5 text-foreground shadow-none placeholder:text-muted-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 md:text-sm dark:bg-transparent",
                     !isExpanded && "min-h-[1.25rem] py-0",
+                    showAnimatedPlaceholder && "placeholder:text-transparent",
                   )}
                   rows={1}
                 />
+                {showAnimatedPlaceholder ? (
+                  <div
+                    className={cn(
+                      "pointer-events-none absolute inset-x-0 top-0 flex overflow-hidden",
+                      animatedPlaceholderMaxLines === 2
+                        ? "min-h-[2.5rem] items-start"
+                        : "min-h-[1.25rem] items-center",
+                    )}
+                    aria-hidden="true"
+                  >
+                    <AnimatePresence mode="wait" initial={false}>
+                      <motion.span
+                        key={phraseIndex}
+                        initial={{ opacity: 0, y: reduceMotion ? 0 : 3 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: reduceMotion ? 0 : -3 }}
+                        transition={{ duration: reduceMotion ? 0 : 0.32, ease: [0.22, 1, 0.36, 1] }}
+                        className={cn(
+                          "block w-full text-start text-sm leading-5 text-muted-foreground",
+                          animatedPlaceholderMaxLines === 2
+                            ? "line-clamp-2 whitespace-normal break-words"
+                            : "truncate",
+                        )}
+                      >
+                        {phrases[phraseIndex]}
+                      </motion.span>
+                    </AnimatePresence>
+                  </div>
+                ) : null}
               </div>
             </div>
 
             <div className={cn("flex shrink-0 items-center", { hidden: isExpanded })} style={{ gridArea: "leading" }}>
-              <DropdownMenu>
+              {leadingSlot === "ai-mark" ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full hover:bg-accent"
-                        aria-label="Add attachments"
-                      >
-                        <i className="fa-light fa-plus text-base text-muted-foreground" aria-hidden="true" />
-                      </Button>
-                    </DropdownMenuTrigger>
+                    <span
+                      tabIndex={0}
+                      role="img"
+                      aria-label="AI search"
+                      className="flex size-8 shrink-0 items-center justify-center rounded-full text-brand outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+                    >
+                      <i
+                        className="fa-light fa-star-christmas text-base text-[color:var(--brand-color-dark)] dark:text-[color:var(--brand-color-light)]"
+                        aria-hidden="true"
+                      />
+                    </span>
                   </TooltipTrigger>
-                  <TooltipContent side="top" sideOffset={6} className="max-w-xs text-xs">
-                    Add photos, files, and more
+                  <TooltipContent side="top" sideOffset={6} className="text-xs">
+                    AI search
                   </TooltipContent>
                 </Tooltip>
+              ) : (
+                <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="size-8 shrink-0 rounded-full hover:bg-accent"
+                          aria-label="Add attachments"
+                        >
+                          <i className="fa-light fa-plus text-base text-muted-foreground" aria-hidden="true" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" sideOffset={6} className="max-w-xs text-xs">
+                      Add photos, files, and more
+                    </TooltipContent>
+                  </Tooltip>
 
-                <DropdownMenuContent align="start" className="max-w-xs rounded-2xl p-1.5">
-                  <DropdownMenuGroup className="space-y-1">
-                    <DropdownMenuItem
-                      className="flex items-center gap-2 rounded-md"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <i className="fa-light fa-paperclip w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
-                      Add photos &amp; files
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
-                      <i className="fa-light fa-robot w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
-                      Agent mode
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
-                      <i className="fa-light fa-magnifying-glass w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
-                      Deep Research
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
+                  <DropdownMenuContent align="start" className="max-w-xs rounded-2xl p-1.5">
+                    <DropdownMenuGroup className="space-y-1">
+                      <DropdownMenuItem
+                        className="flex items-center gap-2 rounded-md"
+                        onClick={() => fileInputRef.current?.click()}
+                      >
+                        <i className="fa-light fa-paperclip w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
+                        Add photos &amp; files
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
+                        <i className="fa-light fa-robot w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
+                        Agent mode
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
+                        <i
+                          className="fa-light fa-magnifying-glass w-4 shrink-0 text-center opacity-60"
+                          aria-hidden="true"
+                        />
+                        Deep Research
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
             </div>
 
             <div
@@ -197,12 +314,23 @@ export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoCompos
                 {value.trim() ? (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Button type="submit" size="icon" className="size-8 shrink-0 rounded-full" aria-label="Send message">
-                        <i className="fa-light fa-paper-plane-top text-base" aria-hidden="true" />
+                      <Button
+                        type="submit"
+                        size="icon"
+                        className="size-8 shrink-0 rounded-full"
+                        aria-label={submitButtonAriaLabel}
+                      >
+                        <i
+                          className={cn(
+                            "text-base",
+                            submitAppearance === "search" ? "fa-light fa-magnifying-glass" : "fa-light fa-paper-plane-top",
+                          )}
+                          aria-hidden="true"
+                        />
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent side="top" sideOffset={6} className="text-xs">
-                      Send message
+                      {submitButtonAriaLabel}
                     </TooltipContent>
                   </Tooltip>
                 ) : null}

package/template/components/ask-leo-sidebar.tsx

@@ -7,6 +7,7 @@
  */
 
 import * as React from "react"
+import dynamic from "next/dynamic"
 import { usePathname } from "next/navigation"
 import { AnimatePresence, motion } from "motion/react"
 import { cn } from "@/lib/utils"
@@ -24,7 +25,14 @@ import { useSidebar } from "@/components/ui/sidebar"
 import { StatusBadge } from "@/components/ui/status-badge"
 import { AiThinkingOverlay } from "@/components/ui/ai-thinking-surface"
 import { LeoTypingDots } from "@/components/leo-typing-dots"
-import { LeoIcon } from "@/components/ui/leo-icon"
+
+const LeoIcon = dynamic(
+  () => import("@/components/ui/leo-icon").then(m => m.LeoIcon),
+  {
+    ssr: false,
+    loading: () => <div className="size-20" aria-hidden="true" />,
+  },
+)
 import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { ASK_LEO_GENERIC_SUGGESTIONS, getAskLeoRouteContext } from "@/lib/ask-leo-route-context"
 import { isEditableTarget } from "@/lib/editable-target"

package/template/components/chart-area-interactive.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import { useIsMobile } from "@/hooks/use-mobile"
+import { formatDateUS } from "@/lib/date-filter"
 import {
   Card,
   CardAction,
@@ -247,24 +248,13 @@ export function ChartAreaInteractive() {
               axisLine={false}
               tickMargin={8}
               minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
+              tickFormatter={(value) => formatDateUS(String(value))}
             />
             <ChartTooltip
               cursor={false}
               content={
                 <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
+                  labelFormatter={(value) => formatDateUS(String(value))}
                   indicator="dot"
                 />
               }

package/template/components/charts-overview.tsx

@@ -108,10 +108,19 @@ import {
 import { isEditableTarget } from "@/lib/editable-target"
 import { chartLineStrokeDash } from "@/lib/chart-line-dash"
 import { cn } from "@/lib/utils"
+import { metricTrendTone, type MetricTrendPolarity } from "@/components/key-metrics"
 
 /** Recharts passes `index` into Line `dot` renderers; published `DotProps` omits it. */
 type LineDotRenderProps = DotProps & { index?: number }
 
+type MiniMetric = {
+  label: string
+  value: string
+  trend?: "up" | "down" | "neutral"
+  /** Same semantics as `MetricItem.trendPolarity` on `KeyMetrics`. */
+  trendPolarity?: MetricTrendPolarity
+}
+
 /* ── Colour tokens ────────────────────────────────────────────────────────── */
 const BRAND       = "var(--brand-color)"
 const CHART_1     = "var(--color-chart-1)"
@@ -712,8 +721,6 @@ function ChartCardHeader({
   )
 }
 
-type MiniMetric = { label: string; value: string; trend?: "up" | "down" | "neutral" }
-
 export function ChartCard({
   title,
   description,
@@ -856,6 +863,19 @@ export function ChartCard({
                 {metrics.map((m) => {
                   const isUp   = m.trend === "up"
                   const isDown = m.trend === "down"
+                  const tone = metricTrendTone(m.trend ?? "neutral", m.trendPolarity)
+                  const upClass =
+                    tone === "positive"
+                      ? "text-emerald-600"
+                      : tone === "negative"
+                        ? "text-destructive"
+                        : "text-muted-foreground"
+                  const downClass =
+                    tone === "positive"
+                      ? "text-emerald-600"
+                      : tone === "negative"
+                        ? "text-destructive"
+                        : "text-muted-foreground"
                   return (
                     <TabsTrigger
                       key={m.label}
@@ -865,8 +885,8 @@ export function ChartCard({
                       <span className="text-sm font-normal text-muted-foreground leading-none">{m.label}</span>
                       <div className="flex items-baseline gap-1.5">
                         <span className="text-xl font-bold tabular-nums leading-none text-foreground">{m.value}</span>
-                        {isUp   && <i className="fa-light fa-arrow-trend-up text-xs text-emerald-600"   aria-hidden="true" />}
-                        {isDown && <i className="fa-light fa-arrow-trend-down text-xs text-destructive" aria-hidden="true" />}
+                        {isUp   && <i className={cn("fa-light fa-arrow-trend-up text-xs", upClass)}   aria-hidden="true" />}
+                        {isDown && <i className={cn("fa-light fa-arrow-trend-down text-xs", downClass)} aria-hidden="true" />}
                       </div>
                     </TabsTrigger>
                   )
@@ -896,6 +916,13 @@ export function ChartCard({
     const kpi    = miniMetrics?.[0]
     const isUp   = kpi?.trend === "up"
     const isDown = kpi?.trend === "down"
+    const tone = metricTrendTone(kpi?.trend ?? "neutral", kpi?.trendPolarity)
+    const trendClass =
+      tone === "positive"
+        ? "text-emerald-600"
+        : tone === "negative"
+          ? "text-destructive"
+          : "text-muted-foreground"
 
     return (
       <Card className={`flex flex-col h-full ${className}`} role="figure" aria-label={title}>
@@ -908,13 +935,13 @@ export function ChartCard({
                 {kpi.value}
               </span>
               {isUp && (
-                <span className="flex items-center gap-1 text-sm font-medium text-emerald-600">
+                <span className={cn("flex items-center gap-1 text-sm font-medium", trendClass)}>
                   <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
                   <span className="sr-only">trending up</span>
                 </span>
               )}
               {isDown && (
-                <span className="flex items-center gap-1 text-sm font-medium text-destructive">
+                <span className={cn("flex items-center gap-1 text-sm font-medium", trendClass)}>
                   <i className="fa-light fa-arrow-trend-down" aria-hidden="true" />
                   <span className="sr-only">trending down</span>
                 </span>

package/template/components/collaboration-access-flow.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+
+import type { InviteCollaboratorFormValues } from "@/components/invite-collaborators-drawer"
+import { InviteCollaboratorsDrawer } from "@/components/invite-collaborators-drawer"
+import type { PageHeaderCollaborator } from "@/components/page-header"
+import {
+  canRemoveCollaboratorFromRoster,
+  canSetCollaboratorAccessRole,
+  displayNameFromInviteEmail,
+  type CollaboratorAccessRole,
+} from "@/lib/collaborator-access"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+
+export interface CollaborationAccessFlowRenderProps {
+  collaborators: PageHeaderCollaborator[]
+  openInvite: () => void
+}
+
+export interface CollaborationAccessFlowProps {
+  initialCollaborators: PageHeaderCollaborator[]
+  resourceLabel: string
+  onInvite?: (
+    values: InviteCollaboratorFormValues,
+    collaborators: PageHeaderCollaborator[],
+  ) => PageHeaderCollaborator[] | void
+  onCollaboratorAccessChange?: (
+    id: string,
+    access: CollaboratorAccessRole,
+    collaborators: PageHeaderCollaborator[],
+  ) => PageHeaderCollaborator[] | void
+  onCollaboratorRemove?: (
+    id: string,
+    collaborators: PageHeaderCollaborator[],
+  ) => PageHeaderCollaborator[] | void
+  children: (props: CollaborationAccessFlowRenderProps) => React.ReactNode
+}
+
+function appendInvitedCollaborator(
+  collaborators: PageHeaderCollaborator[],
+  values: InviteCollaboratorFormValues,
+): PageHeaderCollaborator[] {
+  const name = displayNameFromInviteEmail(values.email)
+  return [
+    ...collaborators,
+    {
+      id: `invite-${values.email}`,
+      name,
+      email: values.email,
+      access: values.access,
+      initials: initialsFromDisplayName(name),
+    },
+  ]
+}
+
+function updateCollaboratorAccess(
+  collaborators: PageHeaderCollaborator[],
+  id: string,
+  access: CollaboratorAccessRole,
+): PageHeaderCollaborator[] {
+  const person = collaborators.find(entry => entry.id === id)
+  if (!person || !canSetCollaboratorAccessRole(person, collaborators, access)) {
+    return collaborators
+  }
+  return collaborators.map(entry => (entry.id === id ? { ...entry, access } : entry))
+}
+
+function removeCollaboratorFromRoster(
+  collaborators: PageHeaderCollaborator[],
+  id: string,
+): PageHeaderCollaborator[] {
+  const person = collaborators.find(entry => entry.id === id)
+  if (!person || !canRemoveCollaboratorFromRoster(person, collaborators)) {
+    return collaborators
+  }
+  return collaborators.filter(entry => entry.id !== id)
+}
+
+export function CollaborationAccessFlow({
+  initialCollaborators,
+  resourceLabel,
+  onInvite,
+  onCollaboratorAccessChange,
+  onCollaboratorRemove,
+  children,
+}: CollaborationAccessFlowProps) {
+  const [collaborators, setCollaborators] = React.useState<PageHeaderCollaborator[]>(
+    () => initialCollaborators.map(person => ({ ...person })),
+  )
+  const [inviteOpen, setInviteOpen] = React.useState(false)
+
+  const openInvite = React.useCallback(() => {
+    setInviteOpen(true)
+  }, [])
+
+  const handleInvite = React.useCallback(
+    (values: InviteCollaboratorFormValues) => {
+      setCollaborators(current => {
+        const next = onInvite?.(values, current) ?? appendInvitedCollaborator(current, values)
+        return next
+      })
+    },
+    [onInvite],
+  )
+
+  const handleAccessChange = React.useCallback(
+    (id: string, access: CollaboratorAccessRole) => {
+      setCollaborators(current => {
+        const next =
+          onCollaboratorAccessChange?.(id, access, current)
+          ?? updateCollaboratorAccess(current, id, access)
+        return next
+      })
+    },
+    [onCollaboratorAccessChange],
+  )
+
+  const handleRemove = React.useCallback(
+    (id: string) => {
+      setCollaborators(current => {
+        const next =
+          onCollaboratorRemove?.(id, current) ?? removeCollaboratorFromRoster(current, id)
+        return next
+      })
+    },
+    [onCollaboratorRemove],
+  )
+
+  return (
+    <>
+      {children({ collaborators, openInvite })}
+      <InviteCollaboratorsDrawer
+        open={inviteOpen}
+        onOpenChange={setInviteOpen}
+        collaborators={collaborators}
+        resourceLabel={resourceLabel}
+        onInvite={handleInvite}
+        onCollaboratorAccessChange={handleAccessChange}
+        onCollaboratorRemove={handleRemove}
+      />
+    </>
+  )
+}

package/template/components/compliance-page-header.tsx

@@ -59,7 +59,7 @@ export function CompliancePageHeader({
                 </Button>
               </DropdownMenuTrigger>
             </Tip>
-            <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem
                 onSelect={() => {
                   window.setTimeout(() => onExport(), 0)

package/template/components/compliance-table.tsx

@@ -22,7 +22,7 @@ import {
   saveComplianceDashboardLayout,
 } from "@/components/data-view-dashboard-charts-compliance"
 import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
-import type { ChartType, DashboardLayout } from "@/components/data-view-dashboard-charts"
+import type { ChartType, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
 import { ComplianceListView } from "@/components/compliance-list-view"
 import { ComplianceBoardView, COMPLIANCE_BOARD_GROUP_OPTIONS } from "@/components/compliance-board-view"
 import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
@@ -204,7 +204,7 @@ function buildComplianceColumns(items: ComplianceItem[]): ColumnDef<ComplianceIt
                 <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem disabled>
                 <i className="fa-light fa-eye" aria-hidden="true" />
                 View details

package/template/components/dashboard-tabs.tsx

@@ -29,6 +29,7 @@ import {
 import { DashboardPromoBanner } from "@/components/dashboard-promo-banner"
 import { CoachMark } from "@/components/ui/coach-mark"
 import { useCoachMark } from "@/hooks/use-coach-mark"
+import { formatDateFromDate } from "@/lib/date-filter"
 
 /* ── Types passed from the page ─────────────────────────────────────────── */
 interface DashboardTabsProps {
@@ -59,7 +60,7 @@ function GreetingWidget({ compact = false }: { compact?: boolean }) {
         <div>
           {!compact ? (
             <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider" suppressHydrationWarning>
-              {now?.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }) ?? ""}
+              {now ? formatDateFromDate(now) : ""}
             </p>
           ) : null}
           {compact ? (
@@ -95,8 +96,8 @@ const TASK_ITEMS: TaskListItem[] = [
   { id: 1, label: "Review pending evaluations",   due: "Today",     priority: "high",   done: false },
   { id: 2, label: "Approve site contract — City Med", due: "Today",  priority: "high",   done: false },
   { id: 3, label: "Send onboarding docs to PT cohort", due: "Tomorrow", priority: "medium", done: false },
-  { id: 4, label: "Update compliance checklist",  due: "Mar 25",    priority: "medium", done: false },
-  { id: 5, label: "Schedule supervisor training", due: "Mar 28",    priority: "low",    done: true  },
+  { id: 4, label: "Update compliance checklist",  due: "03/25/2026", priority: "medium", done: false },
+  { id: 5, label: "Schedule supervisor training", due: "03/28/2026", priority: "low",    done: true  },
 ]
 
 /* ── Insights ─────────────────────────────────────────────────────────────── */

package/template/components/data-list-table-cells.tsx

@@ -154,7 +154,7 @@ export function RowActions({ row, actions }: { row: Placement; actions: RowActio
           </Button>
         </DropdownMenuTrigger>
       </Tip>
-      <DropdownMenuContent align="end" className="w-40">
+      <DropdownMenuContent align="end">
         {actions.map((a, i) => (
           <React.Fragment key={a.label}>
             {a.variant === "destructive" && i > 0 && <DropdownMenuSeparator />}