Garrett/tms 60 shipper management page skeleton

app/Http/Controllers/CarrierController.php

@@ -7,6 +7,8 @@
 use App\Http\Requests\UpdateCarrierRequest;
 use App\Http\Resources\CarrierResource;
 use App\Models\Carrier;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class CarrierController extends ResourceSearchController
 {
@@ -15,9 +17,20 @@ class CarrierController extends ResourceSearchController
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        //
+        $request->validate([
+            'carrier_id' => 'nullable|exists:carriers,id',
+        ]);
+
+        if ($request->input('carrier_id')) {
+            $carrier = Carrier::find($request->input('carrier_id'));
+            return Inertia::render('Carriers/Index', [
+                'carrier' => CarrierResource::make($carrier),
+            ]);
+        }
+
+        return Inertia::render('Carriers/Index');
     }
 
     /**

app/Http/Controllers/FacilityController.php

@@ -9,8 +9,26 @@
 use App\Models\Facility;
 use App\Models\Location;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
+
 class FacilityController extends ResourceSearchController
 {
     protected $model = Facility::class;
     protected $modelResource = FacilityResource::class;
+
+    public function index(Request $request)
+    {
+        $request->validate([
+            'facility_id' => 'nullable|exists:facilities,id',
+        ]);
+
+        if ($request->input('facility_id')) {
+            $facility = Facility::find($request->input('facility_id'));
+            return Inertia::render('Facilities/Index', [
+                'facility' => FacilityResource::make($facility),
+            ]);
+        }
+
+        return Inertia::render('Facilities/Index');
+    }
 }

app/Http/Controllers/ShipperController.php

@@ -7,6 +7,8 @@
 use App\Http\Requests\UpdateShipperRequest;
 use App\Http\Resources\ShipperResource;
 use App\Models\Shipper;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class ShipperController extends ResourceSearchController
 {
@@ -15,9 +17,20 @@ class ShipperController extends ResourceSearchController
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        //
+        $request->validate([
+            'shipper_id' => 'nullable|exists:shippers,id',
+        ]);
+
+        if ($request->input('shipper_id')) {
+            $shipper = Shipper::find($request->input('shipper_id'));
+            return Inertia::render('Shippers/Index', [
+                'shipper' => ShipperResource::make($shipper),
+            ]);
+        }
+
+        return Inertia::render('Shippers/Index');
     }
 
     /**

resources/js/Components/AppSidebar.tsx

@@ -1,4 +1,12 @@
-import { Building, GalleryVerticalEnd, Home, Truck } from 'lucide-react';
+import {
+    Building,
+    GalleryVerticalEnd,
+    Home,
+    Package,
+    Truck,
+    Users,
+    Warehouse,
+} from 'lucide-react';
 import * as React from 'react';
 
 import { NavUser } from '@/Components/NavUser';
@@ -58,10 +66,38 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                         isActive={route().current('shipments.index')}
                     >
                         <a href={route('shipments.index')}>
-                            <Truck />
+                            <Package />
                             <span>Shipments</span>
                         </a>
                     </SidebarMenuButton>
+                    <SidebarMenuButton
+                        asChild
+                        isActive={route().current('carriers.index')}
+                    >
+                        <a href={route('carriers.index')}>
+                            <Truck />
+                            <span>Carriers</span>
+                        </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuButton
+                        asChild
+                        isActive={route().current('shippers.index')}
+                    >
+                        <a href={route('shippers.index')}>
+                            <Users />
+                            <span>Shippers</span>
+                        </a>
+                    </SidebarMenuButton>
+                    <SidebarMenuButton
+                        asChild
+                        isActive={route().current('facilities.index')}
+                    >
+                        <a href={route('facilities.index')}>
+                            <Warehouse />
+                            <span>Facilities</span>
+                        </a>
+                    </SidebarMenuButton>
+
                     {(permissions.ORGANIZATION_MANAGER ||
                         permissions.ORGANIZATION_MANAGE_USERS) && (
                         <SidebarMenuButton

resources/js/Components/Carriers/CarrierList/CarrierList.tsx

@@ -0,0 +1,90 @@
+import { Button } from '@/Components/ui/button';
+import { Input } from '@/Components/ui/input';
+import { Skeleton } from '@/Components/ui/skeleton';
+import { Carrier } from '@/types';
+import axios from 'axios';
+import { Search } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { columns } from './Columns';
+import { DataTable } from './DataTable';
+
+export default function CarrierList({
+    onSelect,
+}: {
+    onSelect: (carrier: Carrier) => void;
+}) {
+    const [data, setData] = useState<Carrier[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const getCarriers = useCallback((searchTerm?: string) => {
+        const getData = (): Promise<Carrier[]> => {
+            return axios
+                .get(route('carriers.search'), {
+                    params: {
+                        query: searchTerm,
+                        with: [],
+                    },
+                })
+                .then((response) => response.data);
+        };
+
+        setIsLoading(true);
+
+        getData()
+            .then((carriers) => {
+                setData(carriers);
+                setIsLoading(false);
+            })
+            .catch((error) => {
+                console.error('Error fetching carriers:', error);
+                setIsLoading(false);
+            });
+    }, []);
+
+    useEffect(() => {
+        if (!isLoading) {
+            inputRef.current?.focus();
+        }
+    }, [isLoading]);
+
+    useEffect(() => {
+        getCarriers();
+    }, [getCarriers]);
+
+    return (
+        <div className="mx-auto flex w-full max-w-screen-2xl flex-col gap-2">
+            <div className="flex gap-1">
+                <Input
+                    ref={inputRef}
+                    className="max-w-md"
+                    placeholder="Search carriers"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            getCarriers(searchTerm);
+                        }
+                    }}
+                />
+                <Button onClick={() => getCarriers(searchTerm)}>
+                    <Search className="h-4 w-4" />
+                </Button>
+            </div>
+            {isLoading ? (
+                <>
+                    <Skeleton className="mx-auto h-[200px] w-1/2 rounded-md" />
+                </>
+            ) : (
+                <>
+                    <DataTable
+                        columns={columns}
+                        data={data}
+                        onSelect={onSelect}
+                    />
+                </>
+            )}
+        </div>
+    );
+}

resources/js/Components/Carriers/CarrierList/Columns.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Carrier } from '@/types';
+import { ColumnDef } from '@tanstack/react-table';
+
+export const columns: ColumnDef<Carrier>[] = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: ({ row }) => {
+            return (
+                <div className="flex flex-col space-y-2">
+                    {row.original.name}
+                </div>
+            );
+        },
+    },
+];

resources/js/Components/Carriers/CarrierList/DataTable.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from '@tanstack/react-table';
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/Components/ui/table';
+
+interface DataTableProps<TData extends { id: number | string }, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    onSelect: (carrier: TData) => void;
+}
+
+export function DataTable<TData extends { id: number | string }, TValue>({
+    columns,
+    data,
+    onSelect,
+}: DataTableProps<TData, TValue>) {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+        <div className="w-full rounded-md border">
+            <Table className="w-full">
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id} className="p-4">
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                  header.column.columnDef
+                                                      .header,
+                                                  header.getContext(),
+                                              )}
+                                    </TableHead>
+                                );
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && 'selected'}
+                                onClick={() => {
+                                    onSelect(row.original);
+                                }}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id} className="p-4">
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext(),
+                                        )}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell
+                                colSpan={columns.length}
+                                className="h-24 text-center"
+                            >
+                                No results.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}

resources/js/Components/Facilities/FacilityList/Columns.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Facility } from '@/types';
+import { ColumnDef } from '@tanstack/react-table';
+
+export const columns: ColumnDef<Facility>[] = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: ({ row }) => {
+            return (
+                <div className="flex flex-col space-y-2">
+                    {row.original.name}
+                </div>
+            );
+        },
+    },
+];