supervisor-ui/components/groups/GroupView.tsx

'use client';

import { ProcessInfo } from '@/lib/supervisor/types';
import { GroupCard } from './GroupCard';

interface GroupViewProps {
  processes: ProcessInfo[];
}

export function GroupView({ processes }: GroupViewProps) {
  // Group processes by their group name
  const groupedProcesses = processes.reduce((acc, process) => {
    const groupName = process.group;
    if (!acc[groupName]) {
      acc[groupName] = [];
    }
    acc[groupName].push(process);
    return acc;
  }, {} as Record<string, ProcessInfo[]>);

  // Sort groups alphabetically
  const sortedGroups = Object.keys(groupedProcesses).sort();

  return (
    <div className="space-y-6">
      {sortedGroups.map((groupName) => (
        <GroupCard
          key={groupName}
          groupName={groupName}
          processes={groupedProcesses[groupName]}
        />
      ))}
    </div>
  );
}