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

+ +
+
+ setSearchTerm(e.target.value)} + /> +
+
+ setFilterName(e.target.value)} + /> +
+
+ + + + + + + + + + + + + + {shippers.map((shipper) => ( + + + + + + + + + ))} + +
NamePhoneEmailCityStateActions
{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