feat: add resizable side panel for agency details (#81) by AliiiBenn · Pull Request #90 · wareflowx/wems-v2

AliiiBenn · 2026-03-04T13:07:11Z

Summary

Add resizable 50/50 side panel view for agencies page
Display agency details in side panel when clicking on an agency
Show employees table within the agency detail panel with contract type and status
Auto-close sidebar when an agency is selected
Improve panel styling with borders and custom resize handle

Changes

Added ResizablePanelGroup, ResizablePanel, and ResizableHandle components
Created AgencyDetailPanel component with agency info and employees table
Added useEmployees and useContracts hooks to the agencies page
Filter employees by agency through contracts
Updated styling with cards, borders, and proper spacing

Test plan

Click on an agency to open the side panel
Verify panel shows agency details and employees
Test resizable handle between panels
Verify close button works

🤖 Generated with Claude Code

- Implement 50/50 split view using resizable panels - Auto-close sidebar when viewing agency details - Add click handler on table rows to open detail panel - Display agency details in side panel (name, code, status, dates) Co-Authored-By: martty-code <nesalia.inc@gmail.com> Co-Authored-By: Claude Sonnet <noreply@anthropic.com>

Add gaps, borders, rounded corners and custom resize handle styling Co-Authored-By: martty-code <nesalia.inc@gmail.com> Co-Authored-By: Claude Sonnet <noreply@anthropic.com>

Add resizable side panel for agencies showing agency info and employees - Display agency details (code, status, dates) in cards - Show employees table with contract type and status - Add close button in bottom left of panel - Adjust metrics section gap Co-Authored-By: martty-code <nesalia.inc@gmail.com> Co-Authored-By: Claude Sonnet <noreply@anthropic.com>

marty-action · 2026-03-04T13:09:23Z

src/renderer/src/pages/agencies-page.tsx

  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [editingAgency, setEditingAgency] = useState<any>(null);


Type Safety Issue: Using any type for state variables reduces type safety. Consider defining proper TypeScript interfaces for agency data.

Suggested change

const [editingAgency, setEditingAgency] = useState<any>(null);

interface Agency {

id: string;

name: string;

code?: string;

isActive: boolean;

createdAt?: string;

updatedAt?: string;

}

const [selectedAgency, setSelectedAgency] = useState<Agency | null>(null);

marty-action · 2026-03-04T13:10:11Z

src/renderer/src/pages/agencies-page.tsx

  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [editingAgency, setEditingAgency] = useState<any>(null);
  const [deletingAgency, setDeletingAgency] = useState<any>(null);
+  const [selectedAgency, setSelectedAgency] = useState<any>(null);


Type Safety: Using any type reduces type safety. Consider defining a proper TypeScript interface for the agency state.

Suggested change

const [selectedAgency, setSelectedAgency] = useState<any>(null);

const [selectedAgency, setSelectedAgency] = useState<Agency | null>(null);

If you have an Agency interface defined elsewhere in the codebase, please import and use it.

marty-action · 2026-03-04T13:10:18Z

src/renderer/src/pages/agencies-page.tsx

+  agency,
+  onClose,
+}: {
+  agency: any;


Performance Concern: The AgencyDetailPanel component is always mounted and fetching data via useEmployees() and useContracts() hooks, even when the panel isn't visible. This means all employees and contracts are fetched on page load.

Consider:

Using enabled: !!agency in the query if supported

Fetching filtered data at the API level

Using React.memo to prevent unnecessary re-renders

Suggested change

agency: any;

const { data: employees = [] } = useEmployees({

enabled: !!agency

});

marty-action · 2026-03-04T13:10:19Z

src/renderer/src/pages/agencies-page.tsx

+    "Intérim": "bg-teal-500/15 border border-teal-500/25 text-teal-600",
+    Alternance: "bg-purple-500/15 border border-purple-500/25 text-purple-600",
+  };
+


UX Suggestion: The close button is positioned at the bottom-left which may be hard to discover. Consider:

Using a more conventional position (top-right)

Using an X icon instead of text

Adding a tooltip

Suggested change

<Button

className="absolute top-2 right-2 z-10"

size="icon"

variant="ghost"

onClick={onClose}

>

<X className="h-4 w-4" />

<span className="sr-only">Close panel</span>

</Button>

marty-action · 2026-03-04T13:10:47Z

Summary

This PR implements a resizable side panel for displaying agency details, improving the UX of the agencies page by allowing users to view detailed information without navigating away from the list.

Critical Issues

1. Event Propagation Bug (Line 280)

When clicking the Edit or Delete buttons in the agencies table, the detail panel also opens because the onClick event bubbles up to the TableRow. This creates an unexpected and confusing user experience.

Fix needed: Add e.stopPropagation() to the edit and delete button click handlers.

Recommendations

Performance

Unconditional Data Fetching (Line 400): The AgencyDetailPanel fetches all employees and contracts data even when not visible.
Large Data Processing: The agencyEmployees computation processes all contracts/employees even for agencies with few employees.

Code Quality

Type Safety (Line 61): Using any type for state variables.
Code Duplication (Line 430): Contract color mapping is duplicated from other components.

User Experience

Close Button Placement (Line 440): Positioned at bottom-left (unconventional, hard to discover).
Missing Keyboard Support: Clickable table rows lack keyboard navigation.
No Loading/Error States: Detail panel lacks loading and error handling.

Accessibility

Missing ARIA Labels: ResizablePanelGroup needs aria-label for screen readers.
Focus Management: Focus should move to panel content when opening.

Positive Notes

Clean implementation using shadcn/ui components
Proper state management with TanStack Query
Consistent styling matching design system
Auto-close sidebar is a nice UX touch
Good empty state handling

🤖 Generated with Claude Code

- Fix ResizablePanelGroup to wrap entire content (not nested) - Add useSidebar hook to auto-close sidebar when employee selected - Fix EmployeeDetailPanel layout with proper close button - Match exact structure from PR #90 for consistency Co-Authored-By: martty-code <nesalia.inc@gmail.com> Co-Authored-By: Claude Sonnet <noreply@anthropic.com>

AliiiBenn and others added 3 commits March 4, 2026 11:40

style: improve agencies side panel design

b5537e2

Add gaps, borders, rounded corners and custom resize handle styling Co-Authored-By: martty-code <nesalia.inc@gmail.com> Co-Authored-By: Claude Sonnet <noreply@anthropic.com>

marty-action bot reviewed Mar 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add resizable side panel for agency details (#81)#90

feat: add resizable side panel for agency details (#81)#90
AliiiBenn wants to merge 3 commits intomainfrom
feature/agencies-side-panel

AliiiBenn commented Mar 4, 2026

Uh oh!

marty-action bot Mar 4, 2026

Uh oh!

marty-action bot Mar 4, 2026

Uh oh!

marty-action bot Mar 4, 2026

Uh oh!

marty-action bot Mar 4, 2026

Uh oh!

marty-action bot commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-  const [editingAgency, setEditingAgency] = useState<any>(null);
+interface Agency {
+  id: string;
+  name: string;
+  code?: string;
+  isActive: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+}
+const [selectedAgency, setSelectedAgency] = useState<Agency | null>(null);

	const [selectedAgency, setSelectedAgency] = useState<any>(null);
	const [selectedAgency, setSelectedAgency] = useState<Agency \| null>(null);

-  agency: any;
+const { data: employees = [] } = useEmployees({
+  enabled: !!agency
+});

+<Button
+  className="absolute top-2 right-2 z-10"
+  size="icon"
+  variant="ghost"
+  onClick={onClose}
+>
+  <X className="h-4 w-4" />
+  <span className="sr-only">Close panel</span>
+</Button>

Conversation

AliiiBenn commented Mar 4, 2026

Summary

Changes

Test plan

Uh oh!

marty-action bot Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

marty-action bot Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

marty-action bot Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

marty-action bot Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

marty-action bot commented Mar 4, 2026

Summary

Critical Issues

1. Event Propagation Bug (Line 280)

Recommendations

Performance

Code Quality

User Experience

Accessibility

Positive Notes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant