feat[agent]: add ShippersList component and update router

frontend/src/components/ShippersList.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { supabase } from '../supabaseClient';
+
+function ShippersList() {
+  const [filterName, setFilterName] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const { data: shippers = [], isLoading, isError } = useQuery({
+    queryKey: ['shippers', filterName, searchTerm],
+    queryFn: async () => {
+      let query = supabase
+        .from('shippers')
+        .select('id, name, phone, email, city, state')
+        .order('name');
+
+      if (filterName) {
+        query = query.eq('name', filterName);
+      }
+      if (searchTerm) {
+        query = query.or(`name.ilike.%${searchTerm}%,email.ilike.%${searchTerm}%`);
+      }
+
+      const { data, error } = await query;
+      if (error) throw error;
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  if (isLoading) return <div className="text-center py-5">Loading shippers...</div>;
+  if (isError) return <div className="text-center py-5 text-danger">Error loading shippers</div>;
+
+  return (
+    <div className="container mt-4">
+      <h2>Shippers</h2>
+
+      <div className="row mb-3 g-2">
+        <div className="col-md-6">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Search shippers..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+        <div className="col-md-4">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Filter by name"
+            value={filterName}
+            onChange={(e) => setFilterName(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <table className="table table-hover">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Phone</th>
+            <th>Email</th>
+            <th>City</th>
+            <th>State</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {shippers.map((shipper) => (
+            <tr key={shipper.id}>
+              <td>{shipper.name}</td>
+              <td>{shipper.phone}</td>
+              <td>{shipper.email}</td>
+              <td>{shipper.city}</td>
+              <td>{shipper.state}</td>
+              <td>
+                <button className="btn btn-sm btn-outline-primary">View</button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default ShippersList;

frontend/src/router.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRootRoute, RouterProvider, createBrowserRouter } from '@tanstack/react-router';
 import LoadsList from './components/LoadsList';
+import ShippersList from './components/ShippersList';
 
 // Root layout – can later include a navbar or sidebar
 function RootLayout({ children }) {
@@ -26,6 +27,12 @@ const loadsRoute = rootRoute.createRoute({
   component: LoadsList,
 });
 
+// Shippers page route
+const shippersRoute = rootRoute.createRoute({
+  path: '/shippers',
+  component: ShippersList,
+});
+
 // Default route – redirect to /loads
 const indexRoute = rootRoute.createRoute({
   path: '/',
@@ -39,10 +46,10 @@ const indexRoute = rootRoute.createRoute({
 });
 
 // Build the router
-const routeTree = rootRoute.addChildren([loadsRoute, indexRoute]);
+const routeTree = rootRoute.addChildren([loadsRoute, shippersRoute, indexRoute]);
 
 export const router = createBrowserRouter({ routeTree });
 
 export function AppRouter() {
   return <RouterProvider router={router} />;
-}
+}