Skip to content

SANC-60-vehicle-logs-create-api-endpoints-and-connect-to-frontend #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wesleylui wants to merge 2 commits into
base: main
Choose a base branch
from
Open

SANC-60-vehicle-logs-create-api-endpoints-and-connect-to-frontend #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5f44e5
SANC60: add log.id to form initial values
wesleylui Feb 26, 2026
51e0e99
SANC60: create api endpoints and connect to vehicle logs frontend
wesleylui Mar 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/_components/vehiclelogcomponents/vehicle-log-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type { UseFormReturnType } from "@mantine/form";
import classes from "./vehicle-log-form.module.scss";

interface VehicleLogFormData {
id: number | null;
date: string | null;
destination: string;
departureTime: string | null;
Expand Down
15 changes: 15 additions & 0 deletions src/app/_components/vehiclelogcomponents/vehicle-log-table-view.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,18 @@
font-size: 14px;
font-weight: $font-weight-semibold;
}

.loadingContainer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.errorContainer {
display: flex;
align-items: flex-start;
width: 100%;
padding: 16px;
}
33 changes: 23 additions & 10 deletions src/app/_components/vehiclelogcomponents/vehicle-log-table-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
"use client";
import { Alert, Box, Loader } from "@mantine/core";
import type { ColDef, IHeaderParams } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry, themeQuartz } from "ag-grid-community";
import { AgGridReact } from "ag-grid-react";
Expand Down Expand Up @@ -81,8 +82,8 @@ export default function VehicleLogTableView({ onRowClick }: VehicleLogTableViewP
// Custom theme for the table
const theme = themeQuartz.withParams(TABLE_THEME_PARAMS);

// Fetch vehicle logs from database (bookings + post-trip surveys joined)
const { data: vehicleLogs = [] } = api.vehicleLogs.getAll.useQuery();
// Fetch vehicle logs from database
const { data: vehicleLogs = [], isLoading, isError } = api.vehicleLogs.getAll.useQuery();

const columnDefs: ColDef[] = useMemo(
() => [
Expand Down Expand Up @@ -162,14 +163,26 @@ export default function VehicleLogTableView({ onRowClick }: VehicleLogTableViewP

return (
<div className={styles.tableContainer}>
<AgGridReact
theme={theme}
rowData={vehicleLogs}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
pagination={false}
onRowClicked={(event) => event.data && onRowClick?.(event.data)}
/>
{isLoading ? (
<Box className={styles.loadingContainer}>
<Loader color="#A03145" type="dots" />
</Box>
) : isError ? (
<Box className={styles.errorContainer}>
<Alert variant="light" color="red">
Failed to load vehicle logs. Please try again later.
</Alert>
</Box>
) : (
<AgGridReact
theme={theme}
rowData={vehicleLogs}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
pagination={false}
onRowClicked={(event) => event.data && onRowClick?.(event.data)}
/>
)}
</div>
);
}
83 changes: 68 additions & 15 deletions src/app/admin/vehicle-logs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,44 @@ import VehicleLogTableView, {
} from "@/app/_components/vehiclelogcomponents/vehicle-log-table-view";
import Grid from "@/assets/icons/grid";
import Plus from "@/assets/icons/plus";
import { useSession } from "@/lib/auth-client";
import { notify } from "@/lib/notifications";
import { api } from "@/trpc/react";

export default function VehicleLogsPage() {
Copy link

@coderabbitai coderabbitai bot Mar 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify canonical admin route usage for driver/vehicle logs
fd -t f 'navbar.tsx|page.tsx' src/app | head -20
rg -n '/admin/(driver-logs|vehicle-logs)' src/app src/lib --type tsx --type ts

Repository: Code-the-Change-YYC/salvationarmy

Length of output: 696

🏁 Script executed:

#!/bin/bash
# Search for route patterns without file type flags
rg -n '/admin/(driver-logs|vehicle-logs)' src/app src/lib
# Also check navbar for navigation links
rg -n 'driver-logs|vehicle-logs' src/app/_components/common/navbar.tsx -A 2 -B 2

Repository: Code-the-Change-YYC/salvationarmy

Length of output: 379

🏁 Script executed:

#!/bin/bash
# Check the content of both page files to understand their purpose
echo "=== /admin/driver-logs/page.tsx ==="
cat src/app/admin/driver-logs/page.tsx

echo -e "\n=== /admin/vehicle-logs/page.tsx ==="
cat src/app/admin/vehicle-logs/page.tsx

Repository: Code-the-Change-YYC/salvationarmy

Length of output: 6723

Move this page to /admin/driver-logs to match the canonical route for this project.

The fully functional vehicle logs page is currently at /admin/vehicle-logs, but the canonical route for this feature is /admin/driver-logs. The navbar should link to /admin/driver-logs, and the placeholder at that location should be replaced with the actual implementation.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/admin/vehicle-logs/page.tsx` at line 18, The VehicleLogsPage
component should be moved from the current route to the canonical route: create
a new page at /admin/driver-logs with the same implementation (or move the file
and adjust path), rename the component/export to DriverLogsPage (or keep default
export but update references) and update any imports/usages and the navbar link
to point to /admin/driver-logs; ensure there are no remaining placeholders at
/admin/driver-logs and remove or redirect the old /admin/vehicle-logs route so
the feature lives only under the canonical path (update route references in
route tables, navigation components, and tests accordingly).

const [showModal, setShowModal] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
const [loading, setLoading] = useState(false);

const { data: session } = useSession();
const utils = api.useUtils();

const createLog = api.vehicleLogs.create.useMutation({
onSuccess: () => {
void utils.vehicleLogs.getAll.invalidate();
setShowModal(false);
notify.success("Vehicle log added successfully");
form.reset();
},
onError: (error) => {
notify.error(error.message ?? "Failed to add vehicle log");
},
});

const updateLog = api.vehicleLogs.update.useMutation({
onSuccess: () => {
void utils.vehicleLogs.getAll.invalidate();
setShowModal(false);
notify.success("Vehicle log updated successfully");
form.reset();
},
onError: (error) => {
notify.error(error.message ?? "Failed to update vehicle log");
},
});

const form = useForm({
initialValues: {
id: null as number | null,
date: null as string | null,
destination: "",
departureTime: null as string | null,
Expand Down Expand Up @@ -67,6 +96,7 @@ export default function VehicleLogsPage() {
const handleRowClick = (log: VehicleLogData) => {
setIsEditMode(true);
form.setValues({
id: log.ID,
date: log.DATE || null,
destination: log.DESTINATION,
departureTime: log.DEPARTURE_TIME || null,
Expand All @@ -79,28 +109,51 @@ export default function VehicleLogsPage() {
setShowModal(true);
};

const handleConfirm = async () => {
setLoading(true);

const handleConfirm = () => {
const validation = form.validate();
const hasErrors = Object.keys(validation.errors).length > 0;

if (hasErrors) {
notify.error("Please fix the errors in the form before submitting");
setLoading(false);
return;
}

// TODO: Call tRPC mutation to save vehicle log
const values = form.values;
const odometerStart = Math.round(Number.parseFloat(values.odometerStart));
const odometerEnd = Math.round(Number.parseFloat(values.odometerEnd));

setTimeout(() => {
setLoading(false);
setShowModal(false);
notify.success(
isEditMode ? "Vehicle log updated successfully" : "Vehicle log added successfully",
);
form.reset();
}, 2000);
if (isEditMode && values.id !== null) {
updateLog.mutate({
id: values.id,
date: values.date ?? undefined,
travelLocation: values.destination || undefined,
departureTime: values.departureTime ?? undefined,
arrivalTime: values.arrivalTime ?? undefined,
odometerStart,
odometerEnd,
driverName: values.driver || undefined,
vehicle: values.vehicle || undefined,
});
} else {
// validation already guarantees these fields are non-null;
// capture as local consts so TypeScript can narrow the types
if (!values.date || !values.departureTime || !values.arrivalTime) return;
const date = values.date;
const departureTime = values.departureTime;
const arrivalTime = values.arrivalTime;

createLog.mutate({
date,
travelLocation: values.destination,
departureTime,
arrivalTime,
odometerStart,
odometerEnd,
driverId: session?.user.id,
driverName: values.driver,
vehicle: values.vehicle,
});
}
};

return (
Expand Down Expand Up @@ -133,7 +186,7 @@ export default function VehicleLogsPage() {
size="xl"
showDefaultFooter
confirmText={isEditMode ? "Save Changes" : "Add to Log"}
loading={loading}
loading={createLog.isPending || updateLog.isPending}
>
<VehicleLogForm form={form} />
</Modal>
Expand Down
Loading