Smartdevs17 · 1sraeliteX · Jun 26, 2026 · Jun 26, 2026
diff --git a/backend/frontend/app/dashboard/page.tsx b/backend/frontend/app/dashboard/page.tsx
@@ -1,20 +1,69 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { useDashboardData } from '@/lib/hooks/useDashboardData';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { DollarSign, Clock, Folder, CheckCircle2, TrendingUp } from 'lucide-react';
 import { FadeIn } from '@/components/ui/fade-in';
 import { DashboardStatsSkeleton } from '@/components/ui/loading-skeletons';
 
 export default function DashboardPage() {
-  const { stats, recentActivity, loading } = useDashboardData();
+  const { stats, recentActivity, loading, refetch } = useDashboardData();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetch?.();
+      setLastUpdated(new Date());
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRefresh();
+    const interval = setInterval(handleRefresh, 60000);
+    return () => clearInterval(interval);
+  }, []);
 
   if (loading) {
     return (
       <div className="space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-          <p className="text-gray-600 mt-1">Welcome back! Here's your overview.</p>
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+            <p className="text-gray-600 mt-1">Welcome back! Here's your overview.</p>
+          </div>
+          <div className="flex flex-col items-end">
+            <button
+              onClick={handleRefresh}
+              disabled={isRefreshing}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-gray-300 hover:bg-gray-100 disabled:opacity-50 transition"
+            >
+              <svg
+                className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              {isRefreshing ? 'Refreshing...' : 'Refresh'}
+            </button>
+            {lastUpdated && (
+              <p className="text-xs text-gray-500 mt-1">
+                Last updated: {lastUpdated.toLocaleTimeString()}
+              </p>
+            )}
+          </div>
         </div>
         <DashboardStatsSkeleton />
         {/* Simplified Loading for Recent Activity */}
@@ -36,9 +85,39 @@ export default function DashboardPage() {
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
-        <p className="text-gray-600 mt-1">Welcome back! Here's your overview.</p>
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+          <p className="text-gray-600 mt-1">Welcome back! Here's your overview.</p>
+        </div>
+        <div className="flex flex-col items-end">
+          <button
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-gray-300 hover:bg-gray-100 disabled:opacity-50 transition"
+          >
+            <svg
+              className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+            {isRefreshing ? 'Refreshing...' : 'Refresh'}
+          </button>
+          {lastUpdated && (
+            <p className="text-xs text-gray-500 mt-1">
+              Last updated: {lastUpdated.toLocaleTimeString()}
+            </p>
+          )}
+        </div>
       </div>
 
       {/* Stats Grid */}

diff --git a/frontend/app/dashboard/projects/page.tsx b/frontend/app/dashboard/projects/page.tsx
@@ -19,6 +19,8 @@ const FILTER_PRESETS_KEY = 'agenticpay-project-filter-presets';
 const STATUS_OPTIONS = ['active', 'completed', 'cancelled'] as const;
 
 type StatusOption = (typeof STATUS_OPTIONS)[number];
+type SortField = 'date' | 'amount' | 'status';
+type SortDirection = 'asc' | 'desc';
 
 type FilterPreset = {
   name: string;
@@ -44,6 +46,19 @@ function getStatusColor(status: string): string {
   }
 }
 
+const SortIcon = ({
+  field,
+  sortField,
+  sortDirection,
+}: {
+  field: SortField;
+  sortField: SortField;
+  sortDirection: SortDirection;
+}) => {
+  if (field !== sortField) return <span className="ml-1 text-gray-300">↕</span>;
+  return <span className="ml-1 text-gray-700">{sortDirection === 'asc' ? '↑' : '↓'}</span>;
+};
+
 export default function ProjectsPage() {
   const router = useRouter();
   const { isConnected } = useAccount();
@@ -58,6 +73,8 @@ export default function ProjectsPage() {
   const [maxAmount, setMaxAmount] = useState('');
   const [presetName, setPresetName] = useState('');
   const [presets, setPresets] = useState<Record<string, FilterPreset>>({});
+  const [sortField, setSortField] = useState<SortField>('date');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
 
   useEffect(() => {
     const stored = window.localStorage.getItem(FILTER_PRESETS_KEY);
@@ -93,6 +110,20 @@ export default function ProjectsPage() {
     });
   }, [projects, statusFilter, startDate, endDate, minAmount, maxAmount]);
 
+  const sortedProjects = useMemo(() => {
+    return [...filteredProjects].sort((a, b) => {
+      let comparison = 0;
+      if (sortField === 'date') {
+        comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      } else if (sortField === 'amount') {
+        comparison = Number(a.totalAmount) - Number(b.totalAmount);
+      } else if (sortField === 'status') {
+        comparison = a.status.localeCompare(b.status);
+      }
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [filteredProjects, sortField, sortDirection]);
+
   const savePreset = () => {
     if (!presetName.trim()) return;
     setPresets((current) => ({
@@ -133,6 +164,15 @@ export default function ProjectsPage() {
     });
   };
 
+  const handleSort = (field: SortField) => {
+    if (field === sortField) {
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  };
+
   if (loading) {
     return (
       <div className="space-y-6">
@@ -308,6 +348,28 @@ export default function ProjectsPage() {
 
         {/* Project cards */}
         <div className="space-y-4">
+          {/* Sort controls */}
+          <div className="flex gap-2 flex-wrap">
+            <button
+              onClick={() => handleSort('date')}
+              className="px-3 py-2 text-sm font-medium rounded-md border border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center gap-2 cursor-pointer select-none"
+            >
+              Date <SortIcon field="date" sortField={sortField} sortDirection={sortDirection} />
+            </button>
+            <button
+              onClick={() => handleSort('amount')}
+              className="px-3 py-2 text-sm font-medium rounded-md border border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center gap-2 cursor-pointer select-none"
+            >
+              Amount <SortIcon field="amount" sortField={sortField} sortDirection={sortDirection} />
+            </button>
+            <button
+              onClick={() => handleSort('status')}
+              className="px-3 py-2 text-sm font-medium rounded-md border border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center gap-2 cursor-pointer select-none"
+            >
+              Status <SortIcon field="status" sortField={sortField} sortDirection={sortDirection} />
+            </button>
+          </div>
+
           {filteredProjects.length === 0 && (
             <Card>
               <CardContent className="pt-6">
@@ -329,7 +391,7 @@ export default function ProjectsPage() {
             </Card>
           )}
 
-          {filteredProjects.map((project, index) => {
+          {sortedProjects.map((project, index) => {
             const completedMilestones = project.milestones.filter(
               (m) => m.status === 'completed',
             ).length;