fix: add staleTime to job card expense, parts, and services queries; update job card general info and payments received components

apps/dashboard/modules/job-cards/job-card-general-info.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import {
     ClipboardList,
     Calendar,
@@ -30,8 +32,9 @@ import PaymentReceivedPage from "@/app/(authenticated)/sales/payment-received/pa
 import JobCardPaymentsReceived from "./job-card-payments-received"
 import { formatDate } from "@/shared/utils/formatters"
 import type { JobCardShowData } from "@garage/api"
+import { useJobCard } from "./job-card-context"
 
-type JobCard = JobCardShowData 
+type JobCard = JobCardShowData
 
 
 function InfoItem({
@@ -67,7 +70,14 @@ const statusColorMap: Record<string, string> = {
     cancelled: "destructive",
 }
 
-export function JobCardGeneralInfo({ jobCard }: { jobCard: JobCard }) {
+export function JobCardGeneralInfo({ jobCard: jobCardProp }: { jobCard?: JobCard } = {}) {
+    const jobCardFromContext = useJobCard()
+    const jobCard = (jobCardProp ?? jobCardFromContext) as JobCard
+
+    if (!jobCard) {
+        return <div className="text-muted-foreground">Job card not found.</div>
+    }
+
     const formatStatus = (status?: string) => {
         if (!status) return null
         return status

apps/dashboard/modules/job-cards/job-card-payments-received.tsx

@@ -17,12 +17,20 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/shared/co
 import { Button } from "@/shared/components/ui/button"
 import { useJobCard } from "./job-card-context"
 import { formatDate, formatCurrency } from "@/shared/utils/formatters"
+import { useState } from "react"
 
 export default function JobCardPaymentsReceived() {
     const jobCard = useJobCard()
+    const [hasOpened, setHasOpened] = useState(false)
 
     return (
-        <Collapsible defaultOpen={false}  className="group/collapsible">
+        <Collapsible
+            defaultOpen={false}
+            className="group/collapsible"
+            onOpenChange={(open) => {
+                if (open) setHasOpened(true)
+            }}
+        >
             <Card>
                 <CardHeader>
                     <div className="flex items-center justify-between">
@@ -36,6 +44,7 @@ export default function JobCardPaymentsReceived() {
                 </CardHeader>
                 <CollapsibleContent>
                     <CardContent className="pt-0">
+                        {hasOpened && (
                         <CrudResource<PaymentReceivedClient>
                             extraParams={{ job_card_id: jobCard?.id }}
                             routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
@@ -48,6 +57,8 @@ export default function JobCardPaymentsReceived() {
                                                 resourceId={resourceId}
                                                 defaultJobCard={{ id: jobCard?.id, title: jobCard?.title }}
                                                 invoiceCustomer={jobCard?.customer as any}
+                                                lockJobCard
+                                                lockCustomer
                                                 onSuccess={invalidateQuery}
                                             />
                                         )}
@@ -127,6 +138,7 @@ export default function JobCardPaymentsReceived() {
                                 actionsColumn(),
                             ]}
                         />
+                        )}
                     </CardContent>
                 </CollapsibleContent>
             </Card>