feat: add date filter for character activity

assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity.tsx

@@ -1,4 +1,7 @@
 import { Dialog } from 'primereact/dialog';
+import { Menu } from 'primereact/menu';
+import { MenuItem } from 'primereact/menuitem';
+import { useState, useCallback, useRef, useMemo } from 'react';
 import { CharacterActivityContent } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivityContent.tsx';
 
 interface CharacterActivityProps {
@@ -6,17 +9,69 @@ interface CharacterActivityProps {
   onHide: () => void;
 }
 
+const periodOptions = [
+  { value: 30, label: '30 Days' },
+  { value: 365, label: '1 Year' },
+  { value: null, label: 'All Time' },
+];
+
 export const CharacterActivity = ({ visible, onHide }: CharacterActivityProps) => {
+  const [selectedPeriod, setSelectedPeriod] = useState<number | null>(30);
+  const menuRef = useRef<Menu>(null);
+
+  const handlePeriodChange = useCallback((days: number | null) => {
+    setSelectedPeriod(days);
+  }, []);
+
+  const menuItems: MenuItem[] = useMemo(
+    () => [
+      {
+        label: 'Period',
+        items: periodOptions.map(option => ({
+          label: option.label,
+          icon: selectedPeriod === option.value ? 'pi pi-check' : undefined,
+          command: () => handlePeriodChange(option.value),
+        })),
+      },
+    ],
+    [selectedPeriod, handlePeriodChange],
+  );
+
+  const selectedPeriodLabel = useMemo(
+    () => periodOptions.find(opt => opt.value === selectedPeriod)?.label || 'All Time',
+    [selectedPeriod],
+  );
+
+  const headerIcons = (
+    <>
+      <button
+        type="button"
+        className="p-dialog-header-icon p-link"
+        onClick={e => menuRef.current?.toggle(e)}
+        aria-label="Filter options"
+      >
+        <span className="pi pi-bars" />
+      </button>
+      <Menu model={menuItems} popup ref={menuRef} />
+    </>
+  );
+
   return (
     <Dialog
-      header="Character Activity"
+      header={
+        <div className="flex items-center gap-2">
+          <span>Character Activity</span>
+          <span className="text-xs text-stone-400">({selectedPeriodLabel})</span>
+        </div>
+      }
       visible={visible}
       className="w-[550px] max-h-[90vh]"
       onHide={onHide}
       dismissableMask
       contentClassName="p-0 h-full flex flex-col"
+      icons={headerIcons}
     >
-      <CharacterActivityContent />
+      <CharacterActivityContent selectedPeriod={selectedPeriod} />
     </Dialog>
   );
 };

assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivityContent.tsx

@@ -7,16 +7,28 @@ import {
 } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/helpers.tsx';
 import { Column } from 'primereact/column';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
+import { useCharacterActivityHandlers } from '@/hooks/Mapper/components/mapRootContent/hooks/useCharacterActivityHandlers';
 
-export const CharacterActivityContent = () => {
+interface CharacterActivityContentProps {
+  selectedPeriod: number | null;
+}
+
+export const CharacterActivityContent = ({ selectedPeriod }: CharacterActivityContentProps) => {
   const {
     data: { characterActivityData },
   } = useMapRootState();
 
+  const { handleShowActivity } = useCharacterActivityHandlers();
+
   const activity = useMemo(() => characterActivityData?.activity || [], [characterActivityData]);
   const loading = useMemo(() => characterActivityData?.loading !== false, [characterActivityData]);
 
+  // Reload activity data when period changes
+  useEffect(() => {
+    handleShowActivity(selectedPeriod);
+  }, [selectedPeriod, handleShowActivity]);
+
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center h-full w-full">

assets/js/hooks/Mapper/components/mapRootContent/hooks/useCharacterActivityHandlers.ts

@@ -23,17 +23,17 @@ export const useCharacterActivityHandlers = () => {
   /**
    * Handle showing the character activity dialog
    */
-  const handleShowActivity = useCallback(() => {
+  const handleShowActivity = useCallback((days?: number | null) => {
     // Update local state to show the dialog
     update(state => ({
       ...state,
       showCharacterActivity: true,
     }));
 
-    // Send the command to the server
+    // Send the command to the server with optional days parameter
     outCommand({
       type: OutCommand.showActivity,
-      data: {},
+      data: days !== undefined ? { days } : {},
     });
   }, [outCommand, update]);