I'll create a shadcn toggle group component with the filtering functionality you described, matching the colors from the screenshot.

This implementation creates a toggle group that matches the design from your screenshot with the following features:

1. The toggle group has four options: "Scheduled", "Completed - Short", "Completed - Standard", and "All session"
2. "Scheduled" is selected by default
3. When "All session" is clicked, it clears all other selections and shows all sessions
4. Users can select multiple filter options (except when "All session" is active)
5. The table below displays mock session data that is filtered based on the selected toggles
6. The styling matches the screenshot with the navy blue active state and light gray inactive state on a beige background

The toggle group uses the shadcn/ui ToggleGroup component 1 with custom styling to match the colors in your screenshot. The filtering logic is implemented using React state and useEffect to update the displayed sessions whenever the selected filters change.

I'll update the component to combine the completed filters and fix the alignment and selection state issues.

I've made the following improvements:

1. Combined Filters: I've replaced the separate "Completed - Short" and "Completed - Standard" toggles with a single "Completed" toggle that shows all completed sessions regardless of duration.

2. Fixed Alignment and Animation:

   • Added sticky top-0 pt-4 to keep the toggle group fixed at the top of the container
   • Added proper spacing with gap-2 to ensure consistent spacing between toggles
   • Added transition-colors for smoother state changes
   • Enhanced the visual distinction for the selected state with shadow-sm
   • Added hover states with hover:bg-[#D8DFE9] to improve user feedback
3. Simplified Filtering Logic: Updated the filtering logic to work with the combined "completed" filter instead of the separate duration-specific filters.

The toggle group now has a clearer selected state and stays properly aligned at the top of the container without jumping around. The filtering functionality still works as expected, but now with the simplified "Completed" option that shows all completed sessions.