i have react front end and laravel backend insurance claim system, 
most is done need help in frontend client (user= drive) make it use backend api 
here is model
class GarageReview extends Model
{
	protected $table = 'garage_reviews';
	public $incrementing = false;
    protected $keyType = 'string';
    protected $primaryKey = 'id';

	protected $casts = [
		// 'id' => 'uuid',
		// 'garage_id' => 'uuid',
		// 'user_id' => 'uuid',
		'rating' => 'int'
	];

	protected $fillable = [
		'id',
		'garage_id',
		'user_id',
		'rating',
		'comment'
	];

	public function garage()
	{
		return $this->belongsTo(Garage::class);
	}

	public function user()
	{
		return $this->belongsTo(User::class);
	}
}
here is is the snippet in notifications page,

     
      {selectedNotification && (
        <VehiclePickupDialog
          open={isPickupDialogOpen}
          onOpenChange={setIsPickupDialogOpen}
          onConfirm={handlePickupConfirm}
          vehicle={selectedNotification.vehicle}
          apiRequest={apiRequest}
          tenant_id={user.tenant_id}
        />
      )}

      {selectedNotification && (
        <GarageRatingDialog
          open={isRatingDialogOpen}
          onOpenChange={setIsRatingDialogOpen}
          garage={selectedNotification.garage}
          onSubmit={handleRateGarage}
          apiRequest={apiRequest}
          tenant_id={user.tenant_id}
        />
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Car, CheckCircle2 } from "lucide-react"

const API_URL = process.env.NEXT_PUBLIC_APP_API_URL;
interface VehiclePickupDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirm: () => void
  vehicle: {
    make: string
    model: string
    plateNumber: string
    garage: string
  },
  apiRequest: (url: string, method: string, body?: any) => Promise<any>;
  tenant_id: string;
}

export function VehiclePickupDialog({ open, onOpenChange, onConfirm, vehicle,apiRequest,tenant_id }: VehiclePickupDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleConfirm = async () => {
    setIsSubmitting(true)
    // Simulate API call
    
    await apiRequest(`${API_URL}urlroute/`, "POST", {}) // api request calls backend
    setTimeout(() => {
      setIsSubmitting(false)
      onConfirm()
    }, 1000)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Car className="h-5 w-5 text-blue-500" />
            Confirm Vehicle Pickup
          </DialogTitle>
          <DialogDescription>
            Please confirm that you have received your vehicle and that the repairs are satisfactory.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="rounded-lg border p-4 bg-muted/50">
            <h4 className="font-medium mb-2">Vehicle Details</h4>
            <div className="grid grid-cols-2 gap-2 text-sm">
              <div className="text-muted-foreground">Make:</div>
              <div>{vehicle.make}</div>
              <div className="text-muted-foreground">Model:</div>
              <div>{vehicle.model}</div>
              <div className="text-muted-foreground">Plate Number:</div>
              <div>{vehicle.plateNumber}</div>
              <div className="text-muted-foreground">Garage:</div>
              <div>{vehicle.garage}</div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleConfirm} disabled={isSubmitting}>
            {isSubmitting ? (
              "Processing..."
            ) : (
              <>
                <CheckCircle2 className="mr-2 h-4 w-4" />
                Confirm Pickup
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { StarRating } from "@/components/star-rating"
import { Building2, ThumbsUp } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

const API_URL = process.env.NEXT_PUBLIC_APP_API_URL;
interface GarageRatingDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  garage: {
    name: string
    address: string
  },
  apiRequest: (url: string, method: string, body?: any) => Promise<any>;
  tenant_id: string;
}

export function GarageRatingDialog({ open, onOpenChange, garage, apiRequest,tenant_id }: GarageRatingDialogProps) {
  const [rating, setRating] = useState(0)
  const [feedback, setFeedback] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const handleSubmit = async () => {
    if (rating === 0) {
      toast({
        title: "Rating required",
        description: "Please provide a star rating before submitting.",
        variant: "destructive",
      })
      return
    }

    setIsSubmitting(true)
    // Simulate API call
    await apiRequest(`${API_URL}urlroute/`, "POST", {}) // api request calls backend
    setTimeout(() => {
      setIsSubmitting(false)
      toast({
        title: "Thank you for your feedback!",
        description: "Your rating has been submitted successfully.",
      })
      onOpenChange(false)
      // Reset form
      setRating(0)
      setFeedback("")
    }, 1000)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Building2 className="h-5 w-5 text-blue-500" />
            Rate Your Garage Experience
          </DialogTitle>
          <DialogDescription>
            Please rate your experience with {garage.name} and provide any feedback.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <h4 className="text-sm font-medium">Garage Rating</h4>
            <div className="flex justify-center py-2">
              <StarRating rating={rating} setRating={setRating} size="lg" />
            </div>
          </div>
          <div className="space-y-2">
            <h4 className="text-sm font-medium">Additional Feedback (Optional)</h4>
            <Textarea
              placeholder="Share your experience with the garage..."
              value={feedback}
              onChange={(e) => setFeedback(e.target.value)}
              rows={4}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Skip
          </Button>
          <Button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? (
              "Submitting..."
            ) : (
              <>
                <ThumbsUp className="mr-2 h-4 w-4" />
                Submit Rating
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}