fix: the request approaval pricing ui

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx

@@ -299,12 +299,7 @@ function DraftBookingView({
     [booking.files],
   );
 
-  const pricingQuery = useQuery(
-    api.bookings.generatePrice.queryOptions({
-      input: { id: booking.id },
-      enabled: !!booking.id,
-    }),
-  );
+  const pricing = booking.pricingBreakdown;
 
   const uploadMutation = useMutation({
     mutationFn: (files: Record<string, File | File[] | null>) =>
@@ -499,7 +494,7 @@ function DraftBookingView({
 
         <Card
           className={cn(
-            pricingQuery.isSuccess ? "border-primary/20 bg-primary/5" : "",
+            pricing ? "border-primary/20 bg-primary/5" : "",
           )}
         >
           <CardHeader>
@@ -512,28 +507,7 @@ function DraftBookingView({
             </CardDescription>
           </CardHeader>
           <CardContent>
-            {pricingQuery.isLoading ? (
-              <div className="flex flex-col items-center gap-3 py-6 text-center">
-                <LoaderCircle className="size-6 animate-spin text-primary" />
-                <p className="text-xs text-muted-foreground">
-                  Calculating price…
-                </p>
-              </div>
-            ) : pricingQuery.isError ? (
-              <div className="flex flex-col items-center gap-3 py-6 text-center">
-                <p className="text-xs text-muted-foreground">
-                  Could not calculate price.
-                </p>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => pricingQuery.refetch()}
-                >
-                  Retry
-                </Button>
-              </div>
-            ) : pricingQuery.data ? (
+            {pricing ? (
               <div className="flex flex-col gap-4">
                 <div className="overflow-hidden rounded-lg border">
                   <table className="w-full text-left text-xs">
@@ -546,7 +520,7 @@ function DraftBookingView({
                       </tr>
                     </thead>
                     <tbody className="divide-y">
-                      {pricingQuery.data.lineItems.map((item, i) => (
+                      {pricing.lineItems.map((item, i) => (
                         <tr key={i}>
                           <td className="px-4 py-2 text-foreground">
                             {item.description}
@@ -561,29 +535,19 @@ function DraftBookingView({
                           Total Estimated Cost
                         </td>
                         <td className="px-4 py-2 text-right text-foreground">
-                          {pricingQuery.data.totalAmount.toLocaleString()}{" "}
-                          {pricingQuery.data.currency}
+                          {pricing.totalAmount.toLocaleString()}{" "}
+                          {pricing.currency}
                         </td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
-
-                {pricingQuery.data.warnings.length > 0 && (
-                  <div className="flex flex-col gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
-                    {pricingQuery.data.warnings.map((w, i) => (
-                      <p
-                        key={i}
-                        className="flex items-start gap-2 text-xs text-amber-800"
-                      >
-                        <AlertTriangle className="mt-0.5 size-3 shrink-0" />
-                        {w}
-                      </p>
-                    ))}
-                  </div>
-                )}
               </div>
-            ) : null}
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                Pricing will be calculated after submission.
+              </p>
+            )}
           </CardContent>
         </Card>