Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-26 18:42:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add file viewer functionality across various components

Browse Source 
- Implemented a shared file viewer modal using `useFileViewer` hook to allow inline viewing of documents (images, PDFs, videos, etc.) across the application.
- Updated `ContractClearanceReviewSection`, `ContractRequestDetailPage`, `ContractViewPage`, and booking-related components to utilize the new file viewer for document previews.
- Added "Approve all" button in `ContractClearanceReviewSection` to bulk approve documents.
- Enhanced document action buttons to include view and download options based on file type.
- Introduced `isViewable` utility to determine if a file can be previewed inline.
- Created `FileViewer` component to handle rendering of various file types and added appropriate fallback for unsupported formats.
This commit is contained in:
Marshal
2026-06-27 19:18:43 +00:00
parent e977893888
commit 0ab553bf48
19 changed files with 893 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/edr-freight-api/src/modules/contracts/contract-transition.service.ts
View File

@@ -231,10 +231,14 @@ export class ContractTransitionService {
await this.contractsRepository.completeApprovalStep(step.id, actorId, 'APPROVED');
// Record who acted on this step, but DO NOT advance the contract status here —
// approving one step (e.g. LINE_STAFF) must not finalize the chain while later
// steps (e.g. DIRECTOR) are still pending. Status only moves to APPROVED once
// every step in the chain is complete; until then the contract stays in
// PENDING_APPROVAL so the next required role can act.
const updates: Record<string, unknown> = {};
const now = new Date();
if (requiredRole === 'LINE_STAFF') {
updates.status = 'APPROVED_PENDING_SIGNATURE';
updates.approvedByStaffId = actorId;
updates.approvedByStaffAt = now;
} else if (requiredRole === 'DIRECTOR') {
@@ -246,9 +250,7 @@ export class ContractTransitionService {
}
const allDone = await this.contractsRepository.allApprovalStepsComplete(contractId);
if (allDone) {
updates.status = 'APPROVED';
}
updates.status = allDone ? 'APPROVED' : 'PENDING_APPROVAL';
if (Object.keys(updates).length > 0) {
await this.contractsRepository.update(contractId, updates as never);
@@ -368,9 +370,28 @@ export class ContractTransitionService {
options: { signerUserId?: string },
): Promise<void> {
const role = dto.role as ContractSignerRole;
const raw = dto.signatureImageBase64.includes(',')
? dto.signatureImageBase64.split(',')[1]!
: dto.signatureImageBase64;
// Resolve the signature image. The client may send a freshly-drawn image, or
// omit it to reuse the signer's saved profile signature. Fall back to the
// saved one whenever no image is supplied.
let imageBase64 = dto.signatureImageBase64;
let signerDisplayName = dto.signerDisplayName;
if (!imageBase64 && options.signerUserId) {
const saved = await this.signaturesService.getForUser(options.signerUserId);
if (saved?.signatureImageUrl) {
imageBase64 = saved.signatureImageUrl;
signerDisplayName = signerDisplayName || saved.signerDisplayName;
}
}
if (!imageBase64) {
throw new BadRequestException(
'No signature provided and no saved signature found on the profile.',
);
}
const raw = imageBase64.includes(',')
? imageBase64.split(',')[1]!
: imageBase64;
const buffer = Buffer.from(raw, 'base64');
const sigFile: Express.Multer.File = {
fieldname: `signature_${role.toLowerCase()}`,
@@ -395,17 +416,19 @@ export class ContractTransitionService {
await this.contractsRepository.saveSignature({
contractId: contract.id,
role,
signerDisplayName: dto.signerDisplayName,
signerDisplayName,
signedAt: new Date(),
signatureFileId: fileRecord.id,
consentText: dto.consentText ?? null,
});
if (options.signerUserId) {
// Only (re)save the reusable profile signature when the signer drew a NEW
// image. Reusing the saved signature must not rewrite it with itself.
if (options.signerUserId && dto.signatureImageBase64) {
try {
await this.signaturesService.upsertForUser({
userId: options.signerUserId,
signerDisplayName: dto.signerDisplayName,
signerDisplayName,
signatureImageBase64: dto.signatureImageBase64,
});
} catch (err) {

9
apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
View File

@@ -42,6 +42,7 @@ import { ContractTransitionService } from './contract-transition.service';
import { ContractClearanceService } from './contract-clearance.service';
import { ContractBookingService } from './contract-booking.service';
import { ClearanceMilestoneService } from './clearance-milestone.service';
import { SignaturesService } from '../signatures/signatures.service';
import { CreateContractDto } from './dto/create-contract.dto';
import { UpdateContractDto } from './dto/update-contract.dto';
import { FilterContractDto } from './dto/filter-contract.dto';
@@ -68,6 +69,7 @@ export class ContractsController {
private readonly clearanceService: ContractClearanceService,
private readonly contractBookingService: ContractBookingService,
private readonly milestoneService: ClearanceMilestoneService,
private readonly signaturesService: SignaturesService,
) {}
@Post()
@@ -313,6 +315,12 @@ export class ContractsController {
}
const { view, html, signatures } =
await this.transitionService.getContractDocumentView(id);
// The signer's reusable saved signature (if any) so the sign UI can offer
// "Approve & sign" with the stored image instead of forcing a fresh draw.
const signerId = resolveAuthUserId(user);
const savedSignature = signerId
? await this.signaturesService.getForUser(signerId)
: null;
return {
contractId: view.bookingId,
reference: view.reference,
@@ -325,6 +333,7 @@ export class ContractsController {
canSignStaff: view.canSignStaff,
hasContractDocument: view.hasContractDocument,
signatures,
savedSignature,
};
}

10
apps/edr-freight-api/src/modules/contracts/dto/sign-contract.dto.ts
View File

@@ -6,10 +6,16 @@ export class SignContractDto {
@IsIn(['CUSTOMER', 'STAFF', 'DIRECTOR', 'CEO'])
role!: 'CUSTOMER' | 'STAFF' | 'DIRECTOR' | 'CEO';
@ApiProperty({ description: 'PNG signature image as base64 (with or without data URL prefix)' })
@ApiPropertyOptional({
description:
'PNG signature image as base64 (with or without data URL prefix). ' +
'Optional: when omitted, the signer\'s reusable saved signature from their ' +
'profile is used instead.',
})
@IsOptional()
@IsString()
@MinLength(20)
signatureImageBase64!: string;
signatureImageBase64?: string;
@ApiProperty()
@IsString()

51
apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
View File

@@ -20,7 +20,7 @@ import {
AlertCircle,
CheckCircle2,
Download,
ExternalLink,
Eye,
FileCheck2,
FileText,
MessageSquareWarning,
@@ -28,9 +28,11 @@ import {
} from "lucide-react";
import toast from "react-hot-toast";
import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
import { SectionCard } from "./SectionCard";
import { bookingsService } from "@/services/bookings.service";
import { useFileViewer } from "@/hooks/useFileViewer";
export interface ClearanceReviewSectionProps {
bookingId: string;
@@ -66,6 +68,7 @@ export function ClearanceReviewSection({
const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
const [openQuery, setOpenQuery] = useState<Record<string, boolean>>({});
const [outputFiles, setOutputFiles] = useState<Record<string, File>>({});
const { view, viewer } = useFileViewer();
const { data: clearance, isLoading } = useQuery({
queryKey: ["clearance", bookingId],
@@ -207,6 +210,7 @@ export function ClearanceReviewSection({
note: queryNotes[doc.fileKey],
})
}
onView={view}
busy={reviewMutation.isPending}
/>
))
@@ -233,6 +237,33 @@ export function ClearanceReviewSection({
</Group>
<Group gap={8} wrap="nowrap">
{doc.file ? (
<>
{isViewable({
name: doc.file.name,
url: doc.file.url,
}) && (
<Tooltip label="View">
<Box
component="button"
type="button"
onClick={() =>
view({
name: doc.file!.name,
url: doc.file!.url,
})
}
c="edr-green"
style={{
display: "flex",
background: "transparent",
border: "none",
cursor: "pointer",
}}
>
<Eye size={15} />
</Box>
</Tooltip>
)}
<Tooltip label="Download">
<Box
component="a"
@@ -245,6 +276,7 @@ export function ClearanceReviewSection({
<Download size={15} />
</Box>
</Tooltip>
</>
) : (
<Text fz="12px" c="edr-muted">
Not uploaded
@@ -325,6 +357,7 @@ export function ClearanceReviewSection({
</Button>
</Group>
</Paper>
{viewer}
</Stack>
);
}
@@ -366,6 +399,7 @@ function DocReviewCard({
onNote,
onApprove,
onQuery,
onView,
busy,
}: {
doc: Freight.ClearanceDocument;
@@ -375,6 +409,7 @@ function DocReviewCard({
onNote: (v: string) => void;
onApprove: () => void;
onQuery: () => void;
onView: (file: { name: string; url: string }) => void;
busy: boolean;
}) {
const status = doc.reviewStatus ?? "PENDING";
@@ -420,17 +455,17 @@ function DocReviewCard({
<Badge variant="light" color={meta.color} radius="sm">
{meta.label}
</Badge>
{hasFile && (
<Tooltip label="Open document">
{hasFile &&
isViewable({ name: doc.file!.name, url: doc.file!.url }) && (
<Tooltip label="Preview document">
<Button
component="a"
href={doc.file!.url}
target="_blank"
rel="noreferrer"
size="compact-xs"
variant="default"
radius="md"
leftSection={<ExternalLink size={13} />}
leftSection={<Eye size={13} />}
onClick={() =>
onView({ name: doc.file!.name, url: doc.file!.url })
}
>
View
</Button>

47
apps/edr-freight-web/backoffice/src/components/contracts/ContractActionsToolbar.tsx
View File

@@ -13,6 +13,7 @@ import {
FileSignature,
MessageSquareWarning,
PackagePlus,
ShieldCheck,
Sparkles,
XCircle,
Zap,
@@ -29,12 +30,23 @@ type Mutations = ReturnType<typeof useContractMutations>;
interface ContractActionsToolbarProps {
contract: Freight.IContract;
mutations: Mutations;
/** Switch the detail page to its Clearance Review tab. */
onReviewClearance?: () => void;
}
// Contract is in the pre-booking clearance phase — staff can review the
// customer's uploaded documents.
const CLEARANCE_REVIEW_STATUSES = [
"AWAITING_CLEARANCE_DOCUMENTS",
"CLEARANCE_UNDER_REVIEW",
"CLEARANCE_READY_FOR_BOOKING",
];
/** Detail-page staff actions: accept / request changes / reject / generate / sign. */
export function ContractActionsToolbar({
contract,
mutations,
onReviewClearance,
}: ContractActionsToolbarProps) {
const navigate = useNavigate();
const { user } = useAuth();
@@ -62,12 +74,12 @@ export function ContractActionsToolbar({
}
const canAccept = status === "SUBMITTED";
// The contract is generated automatically when the final approval lands. We
// only surface a manual "Generate" fallback if that auto-generation failed —
// i.e. the contract is approved but no document was produced yet.
// Generation only becomes available once EVERY approval step is complete and
// the contract reaches APPROVED. While any step is still pending the contract
// stays in PENDING_APPROVAL, so this button does not appear after only the
// first (line-staff) approval — the director step must land first.
const needsManualGenerate =
["APPROVED", "APPROVED_PENDING_SIGNATURE"].includes(status) &&
!contract.contractGeneratedAt;
status === "APPROVED" && !contract.contractGeneratedAt;
// Signing now happens on the contract VIEW page (staff must open and read the
// generated contract before signing) — no sign button in this toolbar.
const canViewContract =
@@ -77,6 +89,14 @@ export function ContractActionsToolbar({
status === "CLEARANCE_READY_FOR_BOOKING" &&
contract.customsClearingEnabled &&
canCreateContractBooking(user);
// Show "Review clearance" while the contract is in the document-review phase.
// Reviewer = GL (Path B / customs) or Operations (Path A / no customs).
const canReviewClearance =
Boolean(onReviewClearance) &&
CLEARANCE_REVIEW_STATUSES.includes(status);
const clearanceReviewer = contract.customsClearingEnabled
? "Review clearance (GL)"
: "Review clearance (Ops)";
return (
<SectionCard icon={Zap} title="Staff actions">
@@ -125,7 +145,7 @@ export function ContractActionsToolbar({
loading={mutations.generateContract.isPending}
onClick={() => mutations.generateContract.mutate()}
>
Re-generate contract
Generate contract
</Button>
)}
@@ -142,6 +162,18 @@ export function ContractActionsToolbar({
</Button>
)}
{canReviewClearance && (
<Button
fullWidth
color="edr-green"
variant="light"
leftSection={<ShieldCheck size={16} />}
onClick={onReviewClearance}
>
{clearanceReviewer}
</Button>
)}
{canCreateBooking && (
<Button
fullWidth
@@ -158,7 +190,8 @@ export function ContractActionsToolbar({
{!canAccept &&
!needsManualGenerate &&
!canViewContract &&
!canCreateBooking && (
!canCreateBooking &&
!canReviewClearance && (
<Text size="sm" c="dimmed">
No staff actions available for this status. Monitor until the
workflow advances.

74
apps/edr-freight-web/backoffice/src/components/contracts/ContractClearanceReviewSection.tsx
View File

@@ -20,18 +20,20 @@ import {
AlertCircle,
CheckCircle2,
Download,
ExternalLink,
Eye,
FileCheck2,
FileText,
MessageSquareWarning,
Upload,
} from "lucide-react";
import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { contractsService } from "@/services/contracts.service";
import { useContractClearanceMutations } from "@/hooks/contracts/useContracts";
import { useFileViewer } from "@/hooks/useFileViewer";
export interface ContractClearanceReviewSectionProps {
contractId: string;
@@ -69,13 +71,14 @@ export function ContractClearanceReviewSection({
const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
const [openQuery, setOpenQuery] = useState<Record<string, boolean>>({});
const [outputFiles, setOutputFiles] = useState<Record<string, File>>({});
const { view, viewer } = useFileViewer();
const { data: clearance, isLoading } = useQuery({
queryKey: QUERY_KEYS.CONTRACTS.clearance(contractId),
queryFn: () => contractsService.getClearance(contractId),
});
const { reviewDocument, uploadOutputDocuments, finalizeClearance } =
const { reviewDocument, approveAll, uploadOutputDocuments, finalizeClearance } =
useContractClearanceMutations(contractId, selfClear);
const customerDocs = useMemo(
@@ -113,6 +116,12 @@ export function ContractClearanceReviewSection({
);
}
// Documents that have a file uploaded but are not yet approved — these are the
// ones "Approve all" will action in one click.
const approvableKeys = customerDocs
.filter((d) => d.file && d.reviewStatus !== "APPROVED")
.map((d) => d.fileKey);
const handleReview = (
fileKey: string,
status: "APPROVED" | "QUERIED",
@@ -136,9 +145,24 @@ export function ContractClearanceReviewSection({
title="Customer documents"
subtitle="Approve each document, or open a query to tell the customer what to fix."
extra={
<Group gap={10} wrap="nowrap" align="center">
<Text size="xs" c="dimmed" fw={600}>
{stats.approved}/{stats.total} approved
</Text>
{approvableKeys.length > 0 && (
<Button
size="compact-sm"
color="edr-green"
radius="md"
leftSection={<FileCheck2 size={14} />}
loading={approveAll.isPending}
disabled={reviewDocument.isPending}
onClick={() => approveAll.mutate(approvableKeys)}
>
Approve all ({approvableKeys.length})
</Button>
)}
</Group>
}
>
<Stack gap={12}>
@@ -179,6 +203,7 @@ export function ContractClearanceReviewSection({
onQuery={() =>
handleReview(doc.fileKey, "QUERIED", queryNotes[doc.fileKey])
}
onView={view}
busy={reviewDocument.isPending}
/>
))
@@ -205,6 +230,33 @@ export function ContractClearanceReviewSection({
</Group>
<Group gap={8} wrap="nowrap">
{doc.file ? (
<>
{isViewable({
name: doc.file.name,
url: doc.file.url,
}) && (
<Tooltip label="View">
<Box
component="button"
type="button"
onClick={() =>
view({
name: doc.file!.name,
url: doc.file!.url,
})
}
c="edr-green"
style={{
display: "flex",
background: "transparent",
border: "none",
cursor: "pointer",
}}
>
<Eye size={15} />
</Box>
</Tooltip>
)}
<Tooltip label="Download">
<Box
component="a"
@@ -217,6 +269,7 @@ export function ContractClearanceReviewSection({
<Download size={15} />
</Box>
</Tooltip>
</>
) : (
<Text fz="12px" c="edr-muted">
Not uploaded
@@ -308,6 +361,7 @@ export function ContractClearanceReviewSection({
</Button>
</Group>
</Paper>
{viewer}
</Stack>
);
}
@@ -349,6 +403,7 @@ function DocReviewCard({
onNote,
onApprove,
onQuery,
onView,
busy,
}: {
doc: Freight.ContractClearanceDocument;
@@ -358,6 +413,7 @@ function DocReviewCard({
onNote: (v: string) => void;
onApprove: () => void;
onQuery: () => void;
onView: (file: { name: string; url: string }) => void;
busy: boolean;
}) {
const status = doc.reviewStatus ?? "PENDING";
@@ -403,17 +459,17 @@ function DocReviewCard({
<Badge variant="light" color={meta.color} radius="sm">
{meta.label}
</Badge>
{hasFile && (
<Tooltip label="Open document">
{hasFile &&
isViewable({ name: doc.file!.name, url: doc.file!.url }) && (
<Tooltip label="Preview document">
<Button
component="a"
href={doc.file!.url}
target="_blank"
rel="noreferrer"
size="compact-xs"
variant="default"
radius="md"
leftSection={<ExternalLink size={13} />}
leftSection={<Eye size={13} />}
onClick={() =>
onView({ name: doc.file!.name, url: doc.file!.url })
}
>
View
</Button>

25
apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts
View File

@@ -227,6 +227,29 @@ export function useContractClearanceMutations(
onError: () => toast.error("Could not update document"),
});
// Approve every still-pending customer document in one click. There is no
// server-side bulk endpoint, so fan out the single-document review calls and
// refresh once after they all settle.
const approveAll = useMutation({
mutationFn: async (fileKeys: string[]) => {
const review = selfClear
? contractsService.opsReviewClearanceDocument
: contractsService.reviewClearanceDocument;
await Promise.all(
fileKeys.map((fileKey) =>
review(contractId, { fileKey, status: "APPROVED" }),
),
);
},
onSuccess: (_d, fileKeys) => {
toast.success(
`${fileKeys.length} document${fileKeys.length === 1 ? "" : "s"} approved`,
);
refresh();
},
onError: () => toast.error("Could not approve all documents"),
});
const uploadOutputDocuments = useMutation({
mutationFn: (files: Record<string, File | null>) =>
contractsService.uploadClearanceOutput(contractId, files),
@@ -256,7 +279,7 @@ export function useContractClearanceMutations(
),
});
return { reviewDocument, uploadOutputDocuments, finalizeClearance };
return { reviewDocument, approveAll, uploadOutputDocuments, finalizeClearance };
}
/** Complete a post-booking GL milestone. */

24
apps/edr-freight-web/backoffice/src/hooks/useFileViewer.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useCallback, useState } from "react";
import { FileViewerModal, type ViewableFile } from "@edr/ui-common";
/**
* Drives a single shared {@link FileViewerModal} for a page. Call `view(file)`
* from any file row to open the document inline (pdf / image / video / office /
* text); render `viewer` once near the page root.
*
* const { view, viewer } = useFileViewer();
* <Button onClick={() => view({ name, url, mimeType })}>View</Button>
* {viewer}
*/
export function useFileViewer() {
const [file, setFile] = useState<ViewableFile | null>(null);
const view = useCallback((f: ViewableFile) => setFile(f), []);
const close = useCallback(() => setFile(null), []);
const viewer = (
<FileViewerModal open={file !== null} file={file} onClose={close} />
);
return { view, close, viewer };
}

66
apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
View File

@@ -1,4 +1,4 @@
import { useNavigate, useParams } from "react-router-dom";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import {
ArrowLeft,
ArrowRight,
@@ -12,6 +12,7 @@ import {
Receipt,
RefreshCw,
Route as RouteIcon,
ShieldCheck,
Snowflake,
} from "lucide-react";
import {
@@ -25,10 +26,12 @@ import {
Loader,
Paper,
Stack,
Tabs,
Text,
Title,
} from "@mantine/core";
import "@/components/overview/overview.css";
import { PageContainer } from "@/components/page";
import Breadcrumbs from "@/components/ui/Breadcrumbs";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
@@ -37,12 +40,21 @@ import { ContractStatusBadge } from "@/components/contracts/ContractStatusBadge"
import { ContractWorkflowStepper } from "@/components/contracts/ContractWorkflowStepper";
import { ContractActionsToolbar } from "@/components/contracts/ContractActionsToolbar";
import { ContractApprovalStepsCard } from "@/components/contracts/ContractApprovalStepsCard";
import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
import { getContractStatusMeta } from "@/features/contracts/contract-status.config";
import {
useContractDetail,
useContractMutations,
} from "@/hooks/contracts/useContracts";
// Statuses in the pre-booking clearance phase — the Clearance Review tab shows.
const CLEARANCE_REVIEW_STATUSES = [
"AWAITING_CLEARANCE_DOCUMENTS",
"CLEARANCE_UNDER_REVIEW",
"CLEARANCE_READY_FOR_BOOKING",
"ACTIVE_SHIPMENT_IN_PROGRESS",
];
function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
@@ -66,6 +78,18 @@ export default function ContractRequestDetailPage() {
isFetching,
} = useContractDetail(id);
const mutations = useContractMutations(id ?? "");
const [searchParams, setSearchParams] = useSearchParams();
const activeTab = searchParams.get("tab") === "clearance" ? "clearance" : "details";
const setTab = (tab: string) =>
setSearchParams(
(prev) => {
const next = new URLSearchParams(prev);
if (tab === "details") next.delete("tab");
else next.set("tab", tab);
return next;
},
{ replace: true },
);
if (isLoading) {
return (
@@ -132,6 +156,13 @@ export default function ContractRequestDetailPage() {
contract.status === "APPROVED" ||
contract.status === "APPROVED_PENDING_SIGNATURE";
const showClearanceTab = CLEARANCE_REVIEW_STATUSES.includes(contract.status);
// Path A (no customs) → Operations reviews; Path B (customs) → GL reviews.
const selfClear = !contract.customsClearingEnabled;
// If the tab param points at clearance but the contract isn't in a clearance
// phase, fall back to details so we never show an empty tab.
const currentTab = activeTab === "clearance" && showClearanceTab ? "clearance" : "details";
const customerLabel = contract.isGovernment
? (contract.governmentInstitution ?? "Government")
: (contract.companyId ?? "—");
@@ -216,9 +247,38 @@ export default function ContractRequestDetailPage() {
description={statusMeta.description}
/>
{showClearanceTab && (
<Tabs
value={currentTab}
onChange={(v) => setTab(v ?? "details")}
variant="pills"
color="edr-green"
classNames={{ list: "ov-tablist", tab: "ov-tab" }}
>
<Tabs.List>
<Tabs.Tab value="details" leftSection={<FileText size={16} />}>
Details
</Tabs.Tab>
<Tabs.Tab
value="clearance"
leftSection={<ShieldCheck size={16} />}
>
Clearance Review
</Tabs.Tab>
</Tabs.List>
</Tabs>
)}
<Grid gap="lg">
{/* LEFT — primary content */}
<Grid.Col span={{ base: 12, lg: 8 }}>
{currentTab === "clearance" ? (
<ContractClearanceReviewSection
contractId={id!}
selfClear={selfClear}
onChanged={() => refetch()}
/>
) : (
<Stack gap="lg">
<SectionCard icon={RouteIcon} title="Routes">
{routes.length === 0 ? (
@@ -350,6 +410,7 @@ export default function ContractRequestDetailPage() {
</SectionCard>
) : null}
</Stack>
)}
</Grid.Col>
{/* RIGHT — sticky action rail */}
@@ -359,6 +420,9 @@ export default function ContractRequestDetailPage() {
<ContractActionsToolbar
contract={contract}
mutations={mutations}
onReviewClearance={
showClearanceTab ? () => setTab("clearance") : undefined
}
/>
{showApprovalCard && (
<ContractApprovalStepsCard

66
apps/edr-freight-web/backoffice/src/pages/contracts/ContractViewPage.tsx
View File

@@ -5,6 +5,7 @@ import {
Box,
Button,
Group,
Image,
Loader,
Modal,
Paper,
@@ -34,6 +35,8 @@ export default function ContractViewPage() {
const [signOpen, setSignOpen] = useState(false);
const [signerName, setSignerName] = useState("");
const [signatureData, setSignatureData] = useState<string | null>(null);
// Offer the staff member's saved signature first; they can draw a fresh one.
const [drawNew, setDrawNew] = useState(false);
const { data, isLoading, isError, refetch } = useQuery({
queryKey: [...QUERY_KEYS.CONTRACTS.byId(id ?? ""), "contract-view"],
@@ -41,11 +44,16 @@ export default function ContractViewPage() {
enabled: Boolean(id),
});
const savedSignatureImage = data?.savedSignature?.signatureImageUrl ?? null;
const usingSaved = Boolean(savedSignatureImage) && !drawNew;
const signMutation = useMutation({
mutationFn: () =>
contractsService.signContract(id!, {
role: "STAFF",
signatureImageBase64: signatureData ?? "",
signatureImageBase64: usingSaved
? (savedSignatureImage as string)
: (signatureData ?? ""),
signerDisplayName: signerName.trim(),
consentText: "I confirm this contract on behalf of EDR.",
}),
@@ -61,8 +69,17 @@ export default function ContractViewPage() {
const handlePrint = () => iframeRef.current?.contentWindow?.print();
const openSign = () => {
setSignerName(data?.savedSignature?.signerDisplayName ?? "");
setSignatureData(null);
setDrawNew(false);
setSignOpen(true);
};
const confirmSign = () => {
if (!signerName.trim() || !signatureData) return;
if (!signerName.trim()) return;
const image = usingSaved ? savedSignatureImage : signatureData;
if (!image) return;
signMutation.mutate();
};
@@ -111,13 +128,9 @@ export default function ContractViewPage() {
<Button
color="edr-green"
leftSection={<FileSignature size={16} />}
onClick={() => {
setSignerName("");
setSignatureData(null);
setSignOpen(true);
}}
onClick={openSign}
>
Sign as staff
{usingSaved ? "Approve & sign" : "Sign as staff"}
</Button>
)}
</Group>
@@ -155,7 +168,36 @@ export default function ContractViewPage() {
value={signerName}
onChange={(e) => setSignerName(e.currentTarget.value)}
/>
{usingSaved ? (
<Stack gap="xs">
<Paper
withBorder
radius="md"
p="xs"
style={{ borderStyle: "dashed" }}
>
<Image
src={savedSignatureImage ?? undefined}
alt="Saved signature"
fit="contain"
h={140}
/>
</Paper>
<Button
variant="subtle"
size="compact-xs"
color="edr-green"
onClick={() => {
setDrawNew(true);
setSignatureData(null);
}}
>
Draw a new signature instead
</Button>
</Stack>
) : (
<ContractSignaturePad onChange={setSignatureData} />
)}
<Group justify="flex-end" gap="sm">
<Button variant="default" onClick={() => setSignOpen(false)}>
Cancel
@@ -163,10 +205,14 @@ export default function ContractViewPage() {
<Button
color="edr-green"
loading={signMutation.isPending}
disabled={!signerName.trim() || !signatureData}
disabled={
signMutation.isPending ||
!signerName.trim() ||
(!usingSaved && !signatureData)
}
onClick={confirmSign}
>
Confirm signature
{usingSaved ? "Approve & sign" : "Confirm signature"}
</Button>
</Group>
</Stack>

24
apps/edr-freight-web/portal/src/hooks/useFileViewer.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useCallback, useState } from "react";
import { FileViewerModal, type ViewableFile } from "@edr/ui-common";
/**
* Drives a single shared {@link FileViewerModal} for a page. Call `view(file)`
* from any file row to open the document inline (pdf / image / video / office /
* text); render `viewer` once near the page root.
*
* const { view, viewer } = useFileViewer();
* <Button onClick={() => view({ name, url, mimeType })}>View</Button>
* {viewer}
*/
export function useFileViewer() {
const [file, setFile] = useState<ViewableFile | null>(null);
const view = useCallback((f: ViewableFile) => setFile(f), []);
const close = useCallback(() => setFile(null), []);
const viewer = (
<FileViewerModal open={file !== null} file={file} onClose={close} />
);
return { view, close, viewer };
}

24
apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
View File

@@ -1,10 +1,12 @@
import { Box, Group, Text } from "@mantine/core";
import { useMutation } from "@tanstack/react-query";
import { CreditCard, Download } from "lucide-react";
import { CreditCard, Download, Eye } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { isViewable } from "@edr/ui-common";
import { api } from "@/services/api";
import { useFileViewer } from "@/hooks/useFileViewer";
import { paymentsService, type PaymentMethod } from "@/services/payments.service";
import type { Freight } from "@edr/types";
@@ -34,6 +36,7 @@ export function ReadonlyBookingView({ booking }: { booking: Freight.IBooking })
const navigate = useNavigate();
const status = booking.status as string;
const [payModalOpen, setPayModalOpen] = useState(false);
const { view, viewer } = useFileViewer();
// POST /payments/initiate creates the intent and returns the provider's
// redirect URL (clientAction.url). Send the browser straight there; fall back
@@ -159,10 +162,28 @@ export function ReadonlyBookingView({ booking }: { booking: Freight.IBooking })
meta={file.code.replace(/_/g, " ")}
status="verified"
action={
<Group gap={6} wrap="nowrap">
{isViewable({
name: file.name,
url: file.signedUrl ?? file.url,
mimeType: file.mimeType,
}) && (
<IconSquare
icon={<Eye size={16} />}
onClick={() =>
view({
name: file.name,
url: file.signedUrl ?? file.url,
mimeType: file.mimeType,
})
}
/>
)}
<IconSquare
href={file.signedUrl ?? file.url}
icon={<Download size={16} />}
/>
</Group>
}
/>
))}
@@ -213,6 +234,7 @@ export function ReadonlyBookingView({ booking }: { booking: Freight.IBooking })
}
onConfirm={(method) => payMutation.mutate(method)}
/>
{viewer}
</PageShell>
);
}

16
apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/Documents.tsx
View File

@@ -108,9 +108,12 @@ export function DocRow({
export function IconSquare({
icon,
href,
onClick,
}: {
icon: ReactNode;
href?: string | null;
/** When provided (and no href), renders a clickable button square. */
onClick?: () => void;
}) {
const style: React.CSSProperties = {
flexShrink: 0,
@@ -122,6 +125,7 @@ export function IconSquare({
borderRadius: 8,
border: "1px solid #E6ECF2",
color: "#6B7C8E",
cursor: href || onClick ? "pointer" : "default",
};
if (href) {
return (
@@ -136,6 +140,18 @@ export function IconSquare({
</Box>
);
}
if (onClick) {
return (
<Box
component="button"
type="button"
onClick={onClick}
style={{ ...style, background: "transparent" }}
>
{icon}
</Box>
);
}
return (
<Box component="span" style={style}>
{icon}

14
apps/edr-freight-web/portal/src/pages/bookings/clearance/ClearanceFlow.tsx
View File

@@ -13,14 +13,17 @@ import {
CheckCircle2,
Clock,
Download,
Eye,
FileText,
Plus,
Upload,
} from "lucide-react";
import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
import { IconSquare } from "../BookingDetailPage/components/Documents";
import { useFileViewer } from "@/hooks/useFileViewer";
import { OperationDatePicker } from "./OperationDatePicker";
import type { ClearanceFlowController } from "./useClearanceFlow";
@@ -104,6 +107,7 @@ export function ClearanceFlow({ booking, flow, footer }: ClearanceFlowProps) {
uploadMutation,
proceedMutation,
} = flow;
const { view, viewer } = useFileViewer();
if (!clearance) return null;
@@ -164,6 +168,15 @@ export function ClearanceFlow({ booking, flow, footer }: ClearanceFlowProps) {
</Group>
<Group gap={10} wrap="nowrap">
<StatusPill doc={doc} />
{doc.file &&
isViewable({ name: doc.file.name, url: doc.file.url }) && (
<IconSquare
icon={<Eye size={15} />}
onClick={() =>
view({ name: doc.file!.name, url: doc.file!.url })
}
/>
)}
{doc.file && (
<IconSquare href={doc.file.url} icon={<Download size={15} />} />
)}
@@ -310,6 +323,7 @@ export function ClearanceFlow({ booking, flow, footer }: ClearanceFlowProps) {
)}
{footer}
{viewer}
</Stack>
);
}

30
apps/edr-freight-web/portal/src/pages/contracts/ContractClearanceFlow.tsx
View File

@@ -22,13 +22,16 @@ import {
CheckCircle2,
Clock,
Download,
Eye,
FileText,
Plus,
Upload,
} from "lucide-react";
import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
import { api } from "@/services/api";
import { useFileViewer } from "@/hooks/useFileViewer";
import { IconSquare } from "@/pages/bookings/BookingDetailPage/components/Documents";
import { BORDER, ContractStatusBadge, INK } from "./contract-ui";
@@ -88,6 +91,7 @@ export default function ContractClearanceFlow() {
const [pending, setPending] = useState<Record<string, File>>({});
const [adHoc, setAdHoc] = useState<AdHocDoc[]>([]);
const { view, viewer } = useFileViewer();
const { data: contract } = useQuery(
api.contracts.get.queryOptions({ input: { id: id! }, enabled: !!id }),
@@ -280,6 +284,15 @@ export default function ContractClearanceFlow() {
</Group>
<Group gap={10} wrap="nowrap">
<StatusPill doc={doc} />
{doc.file &&
isViewable({ name: doc.file.name, url: doc.file.url }) && (
<IconSquare
icon={<Eye size={15} />}
onClick={() =>
view({ name: doc.file!.name, url: doc.file!.url })
}
/>
)}
{doc.file && (
<IconSquare
href={doc.file.url}
@@ -344,10 +357,26 @@ export default function ContractClearanceFlow() {
{doc.label}
</Text>
{doc.file ? (
<Group gap={8} wrap="nowrap">
{isViewable({
name: doc.file.name,
url: doc.file.url,
}) && (
<IconSquare
icon={<Eye size={15} />}
onClick={() =>
view({
name: doc.file!.name,
url: doc.file!.url,
})
}
/>
)}
<IconSquare
href={doc.file.url}
icon={<Download size={15} />}
/>
</Group>
) : (
<Text fz="12px" c="#9AA8B5">
Pending
@@ -446,6 +475,7 @@ export default function ContractClearanceFlow() {
</Stack>
</Paper>
</Stack>
{viewer}
</Box>
);
}

32
apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
View File

@@ -21,6 +21,7 @@ import {
CalendarClock,
CheckCircle2,
Download,
Eye,
FileSignature,
FileText,
Flame,
@@ -35,7 +36,9 @@ import {
Upload,
Weight,
} from "lucide-react";
import { isViewable } from "@edr/ui-common";
import { api } from "@/services/api";
import { useFileViewer } from "@/hooks/useFileViewer";
import { formatRateUnit } from "./new-contract-form/unit-rates";
import {
BORDER,
@@ -63,6 +66,7 @@ export default function ContractDetailPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [tab, setTab] = useState<string>("details");
const { view, viewer } = useFileViewer();
const {
data: contract,
@@ -638,13 +642,35 @@ export default function ContractDetailPage() {
</Text>
</Box>
</Group>
<Group gap={8} wrap="nowrap">
{isViewable({
name: file.name,
url: file.signedUrl ?? file.url,
mimeType: file.mimeType,
}) && (
<Button
variant="light"
color="edr-green"
size="xs"
radius="md"
leftSection={<Eye size={14} />}
onClick={() =>
view({
name: file.name,
url: file.signedUrl ?? file.url,
mimeType: file.mimeType,
})
}
>
View
</Button>
)}
<Button
component="a"
href={file.signedUrl ?? file.url}
target="_blank"
rel="noopener noreferrer"
variant="light"
color="edr-green"
variant="default"
size="xs"
radius="md"
leftSection={<Download size={14} />}
@@ -652,6 +678,7 @@ export default function ContractDetailPage() {
Open
</Button>
</Group>
</Group>
))}
</Stack>
)}
@@ -744,6 +771,7 @@ export default function ContractDetailPage() {
</Tabs.Panel>
</Tabs>
</Stack>
{viewer}
</Box>
);
}

307
packages/ui-common/src/components/FileViewer/FileViewer.tsx Normal file
View File

@@ -0,0 +1,307 @@
import { useMemo } from "react";
import {
Box,
Button,
Center,
Group,
Modal,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import {
Download,
ExternalLink,
FileArchive,
FileQuestion,
} from "lucide-react";
/** The minimal file shape the viewer needs. */
export interface ViewableFile {
/** Display name (used for the title + extension fallback). */
name: string;
/** Direct URL to the file content. A signed URL is preferred when present. */
url: string;
/** MIME type when known (e.g. "application/pdf", "image/png"). */
mimeType?: string | null;
}
export interface FileViewerModalProps {
/** Whether the modal is open. */
open: boolean;
/** The file to display, or null when nothing is selected. */
file: ViewableFile | null;
/** Close handler. */
onClose: () => void;
}
type ViewerKind =
| "image"
| "video"
| "audio"
| "pdf"
| "office"
| "text"
| "unsupported";
const EXT_KIND: Record<string, ViewerKind> = {
// images
png: "image",
jpg: "image",
jpeg: "image",
gif: "image",
webp: "image",
bmp: "image",
svg: "image",
// video
mp4: "video",
webm: "video",
ogv: "video",
mov: "video",
m4v: "video",
// audio
mp3: "audio",
wav: "audio",
ogg: "audio",
m4a: "audio",
// documents
pdf: "pdf",
// office — rendered via the Microsoft Office online viewer
doc: "office",
docx: "office",
xls: "office",
xlsx: "office",
ppt: "office",
pptx: "office",
// text
txt: "text",
csv: "text",
json: "text",
log: "text",
md: "text",
};
/** Archives / binaries we deliberately do NOT try to render inline. */
const UNVIEWABLE_EXT = new Set([
"zip",
"rar",
"7z",
"tar",
"gz",
"bz2",
"exe",
"dmg",
"iso",
"bin",
]);
function extOf(name: string): string {
const dot = name.lastIndexOf(".");
return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
}
/** Decide how to render a file from its MIME type, falling back to extension. */
export function resolveViewerKind(file: ViewableFile): ViewerKind {
const mime = (file.mimeType ?? "").toLowerCase();
const ext = extOf(file.name);
if (UNVIEWABLE_EXT.has(ext)) return "unsupported";
if (mime.startsWith("image/")) return "image";
if (mime.startsWith("video/")) return "video";
if (mime.startsWith("audio/")) return "audio";
if (mime === "application/pdf") return "pdf";
if (
mime.includes("word") ||
mime.includes("excel") ||
mime.includes("spreadsheet") ||
mime.includes("powerpoint") ||
mime.includes("presentation") ||
mime.includes("officedocument")
) {
return "office";
}
if (mime.startsWith("text/") || mime === "application/json") return "text";
// Fall back to the file extension when the MIME type is missing/generic.
return EXT_KIND[ext] ?? "unsupported";
}
/** True when a file can be previewed inline (not an archive/binary). */
export function isViewable(file: ViewableFile): boolean {
return resolveViewerKind(file) !== "unsupported";
}
/**
* A wide modal that renders the content of common document types inline —
* images, video, audio, PDFs, Office documents (via the Microsoft online
* viewer) and plain text. Archives and other binaries fall back to a download
* prompt. Use the {@link isViewable} / {@link resolveViewerKind} helpers to gate
* a "view" affordance in the caller.
*/
export function FileViewerModal({ open, file, onClose }: FileViewerModalProps) {
const kind = useMemo(
() => (file ? resolveViewerKind(file) : "unsupported"),
[file],
);
return (
<Modal
opened={open}
onClose={onClose}
title={
<Text fw={700} fz={15} truncate>
{file?.name ?? "Document"}
</Text>
}
size="90%"
radius="md"
centered
overlayProps={{ blur: 2, backgroundOpacity: 0.55 }}
styles={{
content: {
height: "90vh",
display: "flex",
flexDirection: "column",
},
body: { flex: 1, minHeight: 0, display: "flex", padding: 0 },
header: { paddingInline: 16 },
}}
>
{file && (
<Stack gap={0} style={{ flex: 1, minHeight: 0 }}>
<Group
justify="flex-end"
gap="xs"
px="md"
py={8}
style={{ borderBottom: "1px solid var(--mantine-color-gray-2)" }}
>
<Button
component="a"
href={file.url}
target="_blank"
rel="noopener noreferrer"
size="compact-sm"
variant="default"
leftSection={<ExternalLink size={14} />}
>
Open in new tab
</Button>
<Button
component="a"
href={file.url}
download={file.name}
size="compact-sm"
variant="light"
color="edr-green"
leftSection={<Download size={14} />}
>
Download
</Button>
</Group>
<Box style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
<FileContent file={file} kind={kind} />
</Box>
</Stack>
)}
</Modal>
);
}
function FileContent({
file,
kind,
}: {
file: ViewableFile;
kind: ViewerKind;
}) {
switch (kind) {
case "image":
return (
<Center p="md" style={{ minHeight: "100%" }}>
<img
src={file.url}
alt={file.name}
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
/>
</Center>
);
case "video":
return (
<Center p="md" style={{ minHeight: "100%", background: "#000" }}>
<video
src={file.url}
controls
style={{ maxWidth: "100%", maxHeight: "100%" }}
/>
</Center>
);
case "audio":
return (
<Center p="xl" style={{ minHeight: "100%" }}>
<audio src={file.url} controls style={{ width: "100%", maxWidth: 480 }} />
</Center>
);
case "pdf":
return (
<iframe
src={file.url}
title={file.name}
style={{ width: "100%", height: "100%", border: "none" }}
/>
);
case "office":
return (
<iframe
// The Microsoft Office online viewer requires a publicly reachable URL.
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
file.url,
)}`}
title={file.name}
style={{ width: "100%", height: "100%", border: "none" }}
/>
);
case "text":
return (
<iframe
src={file.url}
title={file.name}
style={{ width: "100%", height: "100%", border: "none" }}
/>
);
default:
return <UnsupportedNotice file={file} />;
}
}
function UnsupportedNotice({ file }: { file: ViewableFile }) {
const isArchive = UNVIEWABLE_EXT.has(extOf(file.name));
return (
<Center p="xl" style={{ minHeight: "100%" }}>
<Stack align="center" gap="sm" maw={360} ta="center">
<ThemeIcon variant="light" color="gray" radius="xl" size={56}>
{isArchive ? <FileArchive size={26} /> : <FileQuestion size={26} />}
</ThemeIcon>
<Text fw={600}>This file type can’t be previewed</Text>
<Text fz="sm" c="dimmed">
{isArchive
? "Archives need to be downloaded and extracted on your computer."
: "Download the file to open it in a compatible application."}
</Text>
<Button
component="a"
href={file.url}
download={file.name}
mt="xs"
color="edr-green"
leftSection={<Download size={16} />}
>
Download file
</Button>
</Stack>
</Center>
);
}
export default FileViewerModal;

7
packages/ui-common/src/components/FileViewer/index.ts Normal file
View File

@@ -0,0 +1,7 @@
export {
FileViewerModal,
isViewable,
resolveViewerKind,
} from "./FileViewer";
export type { FileViewerModalProps, ViewableFile } from "./FileViewer";
export { default } from "./FileViewer";

10
packages/ui-common/src/index.ts
View File

@@ -10,6 +10,16 @@ export type { SmartFileInputProps } from "./components/SmartFileInput";
export { default as Modal } from "./components/Modal";
export type { ModalProps } from "./components/Modal";
export {
FileViewerModal,
isViewable,
resolveViewerKind,
} from "./components/FileViewer";
export type {
FileViewerModalProps,
ViewableFile,
} from "./components/FileViewer";
export { Badge } from "./components/badge";
// export type { BadgeProps } from "./components/badge";