feat: add ActivityCard component

Create ActivityCard.tsx to render an activity summary card with status-driven styles and badges. Uses ActivityWithRelations and ActivityStatus types, react-icons (FaTasks, FaClock) and react-router Link to /activities/:id. Displays project, description, due date and a status-specific visual treatment for in_progress, done, expired and pending states.

Author: DavidEricson00

frontend/src/components/Cards/ActivityCard.tsx

@@ -0,0 +1,86 @@
+import { Link } from 'react-router-dom';
+import { FaTasks, FaClock } from 'react-icons/fa';
+import type { ActivityWithRelations } from '../../types/Activity/Activity';
+import type { ActivityStatus } from '../../constants/ActivityStatus';
+
+type ActivityCardProps = {
+  activity: ActivityWithRelations;
+}
+
+export function ActivityCard({ 
+  activity,
+}: ActivityCardProps) {
+
+  const getStatusStyles = (status: ActivityStatus) => {
+    switch (status) {
+      case 'in_progress':
+        return {
+          card: 'bg-white border-slate-200 border-l-4 border-l-blue-500',
+          badge: 'bg-blue-100 text-blue-700',
+          label: 'Em Progresso',
+          icon: 'text-blue-500',
+          time: 'text-slate-500',
+          divider: 'border-slate-100'
+        };
+      case 'done':
+        return {
+          card: 'bg-white border-slate-200',
+          badge: 'bg-gray-100 text-gray-700',
+          label: 'Finalizado',
+          icon: 'text-gray-400',
+          time: 'text-slate-500',
+          divider: 'border-slate-100'
+        };
+      case 'expired':
+        return {
+          card: 'bg-red-50/30 border-red-200',
+          badge: 'bg-red-100 text-red-700',
+          label: 'Expirado',
+          icon: 'text-red-400',
+          time: 'text-red-500',
+          divider: 'border-red-100'
+        };
+      default:
+        return {
+          card: 'bg-white border-slate-200',
+          badge: 'bg-yellow-100 text-yellow-700',
+          label: 'Pendente',
+          icon: 'text-slate-400',
+          time: 'text-slate-500',
+          divider: 'border-slate-100'
+        };
+    }
+  };
+
+  const styles = getStatusStyles(activity.status);
+
+  return (
+    <div className={`w-75 h-55 flex flex-col justify-between p-5 rounded-xl border shadow-sm shrink-0 hover:shadow-md transition-shadow ${styles.card}`}>
+      <div>
+        <div className="flex justify-between items-center mb-3">
+          <span className={`px-2.5 py-1 text-xs font-semibold rounded-md ${styles.badge}`}>
+            {styles.label}
+          </span>
+          <FaTasks className={styles.icon} />
+        </div>
+        <h3 className="text-base font-bold text-slate-900 mb-1 truncate" title={activity.name}>
+          {activity.name}
+        </h3>
+        <p className="text-xs text-slate-500 truncate mb-2" title={`Projeto: ${activity.project.name}`}>
+          Projeto: {activity.project.name}
+        </p>
+        <p className="text-sm text-slate-600 line-clamp-2" title={activity.description ? activity.description : "Sem descrição"}>
+          {activity.description ? activity.description : "Sem descrição"}
+        </p>
+      </div>
+      <div className={`flex items-center justify-between pt-3 border-t mt-4 ${styles.divider}`}>
+        <span className={`text-xs font-medium flex items-center gap-1 truncate max-w-35 ${styles.time}`} title={activity.due_date}>
+          <FaClock className="shrink-0" /> {activity.due_date}
+        </span>
+        <Link to={`/activities/${activity.id}`} className="text-xs font-semibold text-blue-600 hover:text-blue-800 shrink-0">
+          Ver detalhes
+        </Link>
+      </div>
+    </div>
+  );
+}