humam/garage-erp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add document sharing functionality across various modules

Browse Source 
- Introduced ShareDocumentButton component for sharing documents.
- Added ShareDocumentDialog for email and WhatsApp sharing options.
- Integrated document sharing in estimates, invoices, inspections, job cards, bills, and purchase orders.
- Implemented useDocumentShare hook for handling share logic.
- Created DocumentShareClient for API interactions related to document sharing.
- Updated layouts and actions to include sharing options for relevant entities.
This commit is contained in:
humam
2026-05-14 12:21:01 +04:00
parent 05b55b5721
commit fcbba6247d
22 changed files with 571 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/modules/bills/bill-actions.tsx
+10 -1
View File
@@ -11,9 +11,11 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2 } from "lucide-react"
import { Ellipsis, Pencil, Trash2, Share2 } from "lucide-react"
import { useState } from "react"
import { useFormDialog } from "@/shared/components/form-dialog"
import { BillForm } from "./bill-form"
import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
type BillActionsProps = {
billId: string
@@ -23,6 +25,7 @@ export function BillActions({ billId }: BillActionsProps) {
const api = useAuthApi()
const router = useRouter()
const editDialog = useFormDialog("bill-details-edit")
const [shareOpen, setShareOpen] = useState(false)
const handleDelete = async () => {
await api.bills.destroy(billId)
@@ -42,6 +45,10 @@ export function BillActions({ billId }: BillActionsProps) {
<Pencil className="size-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" />
Share
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
@@ -49,6 +56,8 @@ export function BillActions({ billId }: BillActionsProps) {
</DropdownMenuContent>
</DropdownMenu>
<ShareDocumentDialog type="bill" id={billId} open={shareOpen} onOpenChange={setShareOpen} />
<Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
<DialogContent className="min-w-xl lg:min-w-4xl">
<DialogHeader>
apps/dashboard/modules/estimates/create-job-card-from-estimate-button.tsx
+14 -11
View File
@@ -1,7 +1,7 @@
"use client"
import { useState } from "react"
import { ClipboardList } from "lucide-react"
import { ClipboardList, Loader2 } from "lucide-react"
import { useRouter } from "next/navigation"
import { ApiError } from "@garage/api"
import { Button } from "@/shared/components/ui/button"
@@ -30,34 +30,37 @@ export function CreateJobCardFromEstimateButton() {
if (!confirmed) return
setIsConverting(true)
const promise = api.estimates.convertToJobCard(estimateId, {})
toast.promise(promise, {
loading: "Generating job card...",
success: "Estimate converted to job card successfully",
error: (error: unknown) =>
error instanceof ApiError && error.status === 409
? "A job card already exists for this estimate."
: "Failed to convert estimate to job card",
})
try {
const response = await api.estimates.convertToJobCard(estimateId, {})
const response = await promise
const jobCardId = response?.data?.id
toast.success("Estimate converted to job card successfully")
if (jobCardId) {
router.push(`/sales/job-cards/${jobCardId}`)
return
}
} catch (error) {
if (error instanceof ApiError && error.status === 409) {
const jobCardId = (error.payload?.data as { job_card_id?: number } | undefined)?.job_card_id
toast.info("A job card already exists for this estimate.")
if (jobCardId) {
router.push(`/sales/job-cards/${jobCardId}`)
return
}
}
toast.error("Failed to convert estimate to job card")
} finally {
setIsConverting(false)
}
setIsConverting(false)
}
return (
<Button variant="outline" size="sm" onClick={handleConvert} disabled={isConverting}>
<ClipboardList className="me-2 size-4" />
{isConverting ? <Loader2 className="me-2 size-4 animate-spin" /> : <ClipboardList className="me-2 size-4" />}
{isConverting ? "Generating..." : "Generate Job Card"}
</Button>
)
apps/dashboard/modules/estimates/estimate-actions.tsx
+9 -1
View File
@@ -24,7 +24,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/shared/components/ui/select"
import { Ellipsis, Pencil, Trash2, ShieldCheck, Check, X, Printer } from "lucide-react"
import { Ellipsis, Pencil, Trash2, ShieldCheck, Check, X, Printer, Share2 } from "lucide-react"
import { useState } from "react"
import { useMutation, useQuery } from "@tanstack/react-query"
import { toast } from "sonner"
@@ -34,6 +34,7 @@ import { DatePickerField, TimePickerField } from "@/shared/components/form"
import { cn } from "@/shared/lib/utils"
import { EmployeeCombobox, type EmployeeOption } from "../employees/employee-combobox"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
type EstimateActionsProps = {
estimateId: string
@@ -135,6 +136,7 @@ export function EstimateActions({ estimateId }: EstimateActionsProps) {
const { print, isPrinting } = useDocumentPrint()
const [editOpen, setEditOpen] = useState(false)
const [authOpen, setAuthOpen] = useState(false)
const [shareOpen, setShareOpen] = useState(false)
const [itemStatuses, setItemStatuses] = useState<Record<string, string>>({})
const [authMethod, setAuthMethod] = useState("in_person")
const [employee, setEmployee] = useState<EmployeeOption | null>(null)
@@ -224,6 +226,10 @@ export function EstimateActions({ estimateId }: EstimateActionsProps) {
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" />
Share
</DropdownMenuItem>
<DropdownMenuItem onClick={openAuthDialog}>
<ShieldCheck className="size-4" />
Store Authorisation
@@ -235,6 +241,8 @@ export function EstimateActions({ estimateId }: EstimateActionsProps) {
</DropdownMenuContent>
</DropdownMenu>
<ShareDocumentDialog type="estimate" id={estimateId} open={shareOpen} onOpenChange={setShareOpen} />
{/* Edit Dialog */}
<Dialog open={editOpen} onOpenChange={setEditOpen}>
<DialogContent className="min-w-xl">
apps/dashboard/modules/inspections/inspection-actions.tsx
+10 -1
View File
@@ -12,11 +12,13 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2, Play, CheckCircle2, Printer } from "lucide-react"
import { Ellipsis, Pencil, Trash2, Play, CheckCircle2, Printer, Share2 } from "lucide-react"
import { useState } from "react"
import { toast } from "sonner"
import { useFormDialog } from "@/shared/components/form-dialog"
import { InspectionForm } from "./inspection-form"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
type InspectionActionsProps = {
inspectionId: string
@@ -34,6 +36,7 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
const router = useRouter()
const editDialog = useFormDialog("inspection-details-edit")
const { print, isPrinting } = useDocumentPrint()
const [shareOpen, setShareOpen] = useState(false)
const handleDelete = async () => {
const promise = api.inspections.destroy(inspectionId)
@@ -79,6 +82,10 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" />
Share
</DropdownMenuItem>
{transition && (
<DropdownMenuItem onClick={() => handleStatusChange(transition.next)}>
<transition.icon className="size-4" />
@@ -93,6 +100,8 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
</DropdownMenuContent>
</DropdownMenu>
<ShareDocumentDialog type="inspection" id={inspectionId} open={shareOpen} onOpenChange={setShareOpen} />
<Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
<DialogContent className="min-w-xl lg:min-w-4xl">
<DialogHeader>
apps/dashboard/modules/invoices/invoice-actions.tsx
+10 -1
View File
@@ -1,5 +1,6 @@
"use client"
import { useState } from "react"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
@@ -9,8 +10,9 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Printer, Trash2 } from "lucide-react"
import { Ellipsis, Printer, Share2, Trash2 } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
type InvoiceActionsProps = {
invoiceId: string
@@ -20,6 +22,7 @@ export function InvoiceActions({ invoiceId }: InvoiceActionsProps) {
const api = useAuthApi()
const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
const [shareOpen, setShareOpen] = useState(false)
const handleDelete = async () => {
await api.invoices.destroy(invoiceId)
@@ -39,12 +42,18 @@ export function InvoiceActions({ invoiceId }: InvoiceActionsProps) {
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" />
Share
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ShareDocumentDialog type="invoice" id={invoiceId} open={shareOpen} onOpenChange={setShareOpen} />
</>
)
}
apps/dashboard/modules/job-cards/job-card-dropdown.tsx
+28 -9
View File
@@ -5,11 +5,13 @@ import { confirm } from '@/shared/components/confirm-dialog';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/shared/components/ui/dropdown-menu'
import { Button } from '@/shared/components/ui/button'
import { toast } from 'sonner'
import { CalendarPlus, Ellipsis, FileText, Pencil, Printer, Trash2 } from 'lucide-react';
import { CalendarPlus, Ellipsis, FileText, Loader2, Pencil, Printer, Share2, Trash2 } from 'lucide-react';
import { useDocumentPrint } from '@/shared/hooks/use-document-print';
import { useJobCard } from './job-card-context';
import { useState } from 'react';
import { useAuthApi } from '@/shared/useApi';
import { ShareDocumentDialog } from '@/shared/components/share-document-dialog';
import { ShareDocumentButton } from '@/shared/components/share-document-button';
// TODO: setting a sales person not working
// TODO: unable to set a Primary technician for the job card. Need to investigate and fix it.
@@ -21,6 +23,7 @@ export default function JobCardDropdown({ id }: { id: string }) {
const { print, isPrinting } = useDocumentPrint()
const jobCard = useJobCard()
const [isConverting, setIsConverting] = useState(false)
const [shareOpen, setShareOpen] = useState(false)
const handleEdit = () => {
router.push(`/sales/job-cards/${id}/edit`)
@@ -43,24 +46,32 @@ export default function JobCardDropdown({ id }: { id: string }) {
if (!confirmed) return
setIsConverting(true)
const promise = api.jobCards.convertToInvoice(id, {}) as Promise<any>
toast.promise(promise, {
loading: "Converting job card to invoice...",
success: "Job card converted to invoice successfully",
error: (err: any) => {
const conflictId = err?.response?.data?.data?.invoice_id ?? err?.data?.data?.invoice_id
return conflictId
? "An invoice already exists for this job card."
: (err?.message || "Failed to convert job card to invoice")
},
})
try {
const res = await api.jobCards.convertToInvoice(id, {}) as any
const res = await promise
const invoiceId = res?.data?.id
toast.success("Job card converted to invoice successfully")
if (invoiceId) {
router.push(`/sales/invoice/${invoiceId}`)
return
}
} catch (err: any) {
const conflictId = err?.response?.data?.data?.invoice_id ?? err?.data?.data?.invoice_id
if (conflictId) {
toast.info("An invoice already exists for this job card.")
router.push(`/sales/invoice/${conflictId}`)
} else {
toast.error(err?.message || "Failed to convert job card to invoice")
return
}
} finally {
setIsConverting(false)
}
setIsConverting(false)
}
const handleDelete = async () => {
@@ -85,7 +96,7 @@ export default function JobCardDropdown({ id }: { id: string }) {
<div className="flex items-center gap-2">
{jobCard?.status !== "draft" && (
<Button variant="outline" onClick={handleConvertToInvoice} disabled={isConverting}>
<FileText className="size-4" />
{isConverting ? <Loader2 className="size-4 animate-spin" /> : <FileText className="size-4" />}
{isConverting ? "Converting..." : "Convert to Invoice"}
</Button>
)}
@@ -95,6 +106,8 @@ export default function JobCardDropdown({ id }: { id: string }) {
Create Appointment
</Button>
<ShareDocumentButton type="job_card" id={id} />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="self-stretch h-auto aspect-square">
@@ -110,6 +123,10 @@ export default function JobCardDropdown({ id }: { id: string }) {
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" />
Share
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleCreateAppointment}>
<CalendarPlus className="size-4" />
@@ -128,6 +145,8 @@ export default function JobCardDropdown({ id }: { id: string }) {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ShareDocumentDialog type="job_card" id={id} open={shareOpen} onOpenChange={setShareOpen} />
</div>
)
}
apps/dashboard/modules/purchase-orders/purchase-order-actions.tsx
+29 -18
View File
@@ -1,5 +1,6 @@
"use client"
import { useState } from "react"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
@@ -10,9 +11,10 @@ import {
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { confirm } from "@/shared/components/confirm-dialog"
import { Ellipsis, Printer, Trash2 } from "lucide-react"
import { Ellipsis, Printer, Share2, Trash2 } from "lucide-react"
import { toast } from "sonner"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
type PurchaseOrderActionsProps = {
purchaseOrderId: string
@@ -22,6 +24,7 @@ export function PurchaseOrderActions({ purchaseOrderId }: PurchaseOrderActionsPr
const api = useAuthApi()
const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
const [shareOpen, setShareOpen] = useState(false)
const handleDelete = async () => {
const confirmed = await confirm({
@@ -43,22 +46,30 @@ export function PurchaseOrderActions({ purchaseOrderId }: PurchaseOrderActionsPr
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => print("purchase_order", purchaseOrderId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => print("purchase_order", purchaseOrderId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" />
Share
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ShareDocumentDialog type="purchase_order" id={purchaseOrderId} open={shareOpen} onOpenChange={setShareOpen} />
</>
)
}