Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.quebec/private_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { formatDistanceToNow } from 'date-fns';
import { ActivityItem } from '@/hooks/useProfileActivity';

interface ActivityFeedProps {
  activities: ActivityItem[];
  isLoading: boolean;
  error: string | null;
}

const getActivityIcon = (type: string): string => {
  switch (type) {
    case 'achievement':
      return '🏆';
    case 'case':
      return '⚖️';
    case 'review':
      return '⭐';
    case 'endorsement':
      return '👍';
    case 'milestone':
      return '🎯';
    case 'badge':
      return '🏅';
    case 'activity':
      return '📝';
    default:
      return '📋';
  }
};

const getActivityColor = (type: string): string => {
  switch (type) {
    case 'achievement':
      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
    case 'case':
      return 'bg-blue-100 text-blue-800 border-blue-200';
    case 'review':
      return 'bg-green-100 text-green-800 border-green-200';
    case 'endorsement':
      return 'bg-purple-100 text-purple-800 border-purple-200';
    case 'milestone':
      return 'bg-orange-100 text-orange-800 border-orange-200';
    case 'badge':
      return 'bg-indigo-100 text-indigo-800 border-indigo-200';
    case 'activity':
      return 'bg-gray-100 text-gray-800 border-gray-200';
    default:
      return 'bg-gray-100 text-gray-800 border-gray-200';
  }
};

export default function ActivityFeed({ activities, isLoading, error }: ActivityFeedProps) {
  if (isLoading) {
    return (
      <div className="space-y-4">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="animate-pulse">
            <div className="flex items-start space-x-3">
              <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
              <div className="flex-1 space-y-2">
                <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                <div className="h-3 bg-gray-200 rounded w-1/2"></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center py-8">
        <div className="text-red-500 text-2xl mb-2">⚠️</div>
        <p className="text-red-600 font-medium">Error loading activity</p>
        <p className="text-red-500 text-sm mt-1">{error}</p>
      </div>
    );
  }

  if (activities.length === 0) {
    return (
      <div className="text-center py-8">
        <div className="text-gray-400 text-4xl mb-3">📭</div>
        <p className="text-gray-500 font-medium">No recent activity</p>
        <p className="text-gray-400 text-sm mt-1">Activity will appear here as it happens</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {activities.map((activity) => (
        <div
          key={activity.id}
          className="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
        >
          <div className="flex-shrink-0">
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm">
              {getActivityIcon(activity.type)}
            </div>
          </div>
          
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between">
              <h4 className="text-sm font-medium text-gray-900 truncate">
                {activity.title}
              </h4>
              <div className="flex items-center space-x-2">
                {activity.badge && (
                  <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${getActivityColor(activity.type)}`}>
                    {activity.badge}
                  </span>
                )}
                <span className="text-xs text-gray-400">
                  {formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
                </span>
              </div>
            </div>
            <p className="text-sm text-gray-600 mt-1 line-clamp-2">
              {activity.description}
            </p>
            
            {activity.metadata && (
              <div className="mt-2 flex flex-wrap gap-1">
                {activity.metadata.caseTitle && (
                  <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                    ⚖️ {activity.metadata.caseTitle}
                  </span>
                )}
                {activity.metadata.senderName && (
                  <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                    👤 {activity.metadata.senderName}
                  </span>
                )}
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}