diff --git a/frontend/src/components/ShippersList.jsx b/frontend/src/components/ShippersList.jsx
new file mode 100644
index 0000000..8afc567
--- /dev/null
+++ b/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
Loading shippers...
;
+ if (isError) return Error loading shippers
;
+
+ return (
+
+
Shippers
+
+
+
+
+
+
+ | Name |
+ Phone |
+ Email |
+ City |
+ State |
+ Actions |
+
+
+
+ {shippers.map((shipper) => (
+
+ | {shipper.name} |
+ {shipper.phone} |
+ {shipper.email} |
+ {shipper.city} |
+ {shipper.state} |
+
+
+ |
+
+ ))}
+
+
+
+ );
+}
+
+export default ShippersList;
\ No newline at end of file
diff --git a/frontend/src/router.jsx b/frontend/src/router.jsx
index 2e3fb8d..4b2280c 100644
--- a/frontend/src/router.jsx
+++ b/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 ;
-}
+}
\ No newline at end of file