no existe el "../utils/calculateCost\, solo es mencionada en C:\Users\israe\Documents\GitHub\webapp\apps\web\src\app\(authenticated)\map\page.tsx en la linea 62 
por eso tengo el error en 
C:\Users\israe\Documents\GitHub\webapp\apps\web\src\app\(authenticated)\booking-confirmation\page.tsx
[{
	"resource": "/c:/Users/israe/Documents/GitHub/webapp/apps/web/src/app/(authenticated)/booking-confirmation/page.tsx",
	"owner": "typescript",
	"code": "2307",
	"severity": 8,
	"message": "No se encuentra el módulo \"../utils/calculateCost\" ni sus declaraciones de tipos correspondientes.",
	"source": "ts",
	"startLineNumber": 28,
	"startColumn": 31,
	"endLineNumber": 28,
	"endColumn": 55
}]
'use client'

import {
  CreditCardOutlined,
  EditOutlined,
  MailOutlined,
} from '@ant-design/icons'
import { Api, Model } from '@web/domain'
import { PageLayout } from '@web/layouts/Page.layout'
import { useAuthentication } from '@web/modules/authentication'
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  Row,
  Select,
  Space,
  Typography,
} from 'antd'
import dayjs from 'dayjs'
import { useParams } from 'next/navigation'
import { useRouter } from 'next/router'
import { useSnackbar } from 'notistack'
import { useCallback, useEffect, useState } from 'react'
import { calculateCost } from '../utils/calculateCost'
import { fetchData } from '../utils/fetchData'

const { Title, Text } = Typography

const BookingForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    serviceType: 'standard',
    distance: 0,
    cost: 0,
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')
  const router = useRouter()
  const params = useParams<any>()
  const authentication = useAuthentication()
  const userId = authentication.user?.id
  const { enqueueSnackbar } = useSnackbar()
  const [booking, setBooking] = useState<Model.Booking | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [form] = Form.useForm()

  const handleInputChange = useCallback((e) => {
    const { name, value } = e.target
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }))
  }, [])

  const handleDistanceChange = useCallback((e) => {
    const distance = parseFloat(e.target.value)
    setFormData((prevData) => ({
      ...prevData,
      distance,
      cost: calculateCost(distance),
    }))
  }, [])

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)
    setErrorMessage('')

    try {
      await fetchData('/api/bookings', 'POST', formData)
      router.push('/thank-you')
    } catch (error) {
      setErrorMessage('There was an issue with your booking. Please try again.')
    } finally {
      setIsSubmitting(false)
    }
  }

  useEffect(() => {
    const fetchBooking = async () => {
      try {
        const bookingData = await Api.Booking.findOne(params.bookingId, {
          includes: ['user'],
        })
        setBooking(bookingData)
        form.setFieldsValue({
          serviceType: bookingData.serviceType,
          name: bookingData.name,
          phone: bookingData.phone,
          vehicleBrand: bookingData.vehicleBrand,
          vehicleModel: bookingData.vehicleModel,
          dateTime: dayjs(bookingData.dateTime),
          distance: bookingData.distance,
        })
      } catch (error) {
        enqueueSnackbar('Failed to fetch booking details', { variant: 'error' })
      }
    }

    if (params.bookingId) {
      fetchBooking()
    }
  }, [params.bookingId, form])

  const handleEdit = async (values: any) => {
    try {
      const updatedBooking = await Api.Booking.updateOne(params.bookingId, {
        ...values,
        dateTime: values.dateTime.toISOString(),
      })
      setBooking(updatedBooking)
      setIsEditing(false)
      enqueueSnackbar('Booking details updated successfully', {
        variant: 'success',
      })
    } catch (error) {
      enqueueSnackbar('Failed to update booking details', { variant: 'error' })
    }
  }

  const handleEmailSend = async () => {
    try {
      await Api.Notification.createOneByUserId(userId, {
        title: 'Booking Confirmation',
        message: `Your booking details: ${JSON.stringify(booking, null, 2)}`,
        userId: userId,
      })
      enqueueSnackbar('Booking details sent via email', { variant: 'success' })
    } catch (error) {
      enqueueSnackbar('Failed to send booking details via email', {
        variant: 'error'
      })
    }
  }

  const handleProceedToPayment = () => {
    router.push('/payment')
  }

  return (
    <PageLayout layout="narrow">
      <Title level={2}>Booking Confirmation</Title>
      <Text>Review and confirm your booking details below:</Text>
      <Card style={{ marginTop: 20 }}>
        {isEditing ? (
          <Form form={form} onFinish={handleEdit} layout="vertical">
            <Form.Item
              name="serviceType"
              label="Service Type"
              rules={[
                { required: true, message: 'Please select the service type!' },
              ]}
            >
              <Select>
                <Select.Option value="standard">Standard</Select.Option>
                <Select.Option value="premium">Premium</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              name="name"
              label="Name"
              rules={[{ required: true, message: 'Please input your name!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="email"
              label="Email"
              rules={[
                { required: true, message: 'Please input your email!' },
                { type: 'email', message: 'Please enter a valid email!' },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="phone"
              label="Phone"
              rules={[
                { required: true, message: 'Please input your phone number!' },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="vehicleBrand"
              label="Vehicle Brand"
              rules={[
                { required: true, message: 'Please input your vehicle brand!' },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="vehicleModel"
              label="Vehicle Model"
              rules={[
                { required: true, message: 'Please input your vehicle model!' },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="dateTime"
              label="Date and Time"
              rules={[
                { required: true, message: 'Please select date and time!' },
              ]}
            >
              <DatePicker showTime />
            </Form.Item>
            <Form.Item
              name="distance"
              label="Distance (in km)"
              rules={[
                { required: true, message: 'Please input the distance!' },
              ]}
            >
              <Input type="number" onChange={handleDistanceChange} />
            </Form.Item>
            <Form.Item
              name="cost"
              label="Estimated Cost"
            >
              <Input readOnly />
            </Form.Item>
            <div id="map" style={{ height: '400px', width: '100%' }}></div>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                Save
              </Button>
              <Button
                type="default"
                onClick={() => setIsEditing(false)}
                style={{ marginLeft: 10 }}
              >
                Cancel
              </Button>
            </Form.Item>
          </Form>
        ) : (
          <div>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text strong>Service Type:</Text> {booking?.serviceType}
              </Col>
              <Col span={12}>
                <Text strong>Name:</Text> {booking?.name}
              </Col>
              <Col span={12}>
                <Text strong>Email:</Text> {booking?.email}
              </Col>
              <Col span={12}>
                <Text strong>Phone:</Text> {booking?.phone}
              </Col>
              <Col span={12}>
                <Text strong>Vehicle Brand:</Text> {booking?.vehicleBrand}
              </Col>
              <Col span={12}>
                <Text strong>Vehicle Model:</Text> {booking?.vehicleModel}
              </Col>
              <Col span={12}>
                <Text strong>Date and Time:</Text>{' '}
                {dayjs(booking?.dateTime).format('YYYY-MM-DD HH:mm')}
              </Col>
              <Col span={12}>
                <Text strong>Distance:</Text> {booking?.distance} km
              </Col>
              <Col span={12}>
                <Text strong>Estimated Cost:</Text> ${booking?.cost?.toFixed(2)}
              </Col>
            </Row>
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => setIsEditing(true)}
              style={{ marginTop: 20 }}
            >
              Edit
            </Button>
          </div>
        )}
      </Card>
      <Space style={{ marginTop: 20 }}>
        <Button
          type="primary"
          icon={<MailOutlined />}
          onClick={handleEmailSend}
        >
          Send Email
        </Button>
        <Button
          type="primary"
          icon={<CreditCardOutlined />}
          onClick={handleProceedToPayment}
        >
          Proceed to Payment
        </Button>
      </Space>
    </PageLayout>
  )
}

export default BookingForm

useEffect(() => {
  const initMap = () => {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    })
  }

  if (typeof google !== 'undefined') {
    initMap()
  } else {
    window.initMap = initMap
  }
}, [])


C:\Users\israe\Documents\GitHub\webapp\apps\web\src\app\(authenticated)\map\page.tsx
'use client'

import {
  CarOutlined,
  DollarOutlined,
  EnvironmentOutlined
} from '@ant-design/icons'
import { Api } from '@web/domain'
import { PageLayout } from '@web/layouts/Page.layout'
import { useAuthentication } from '@web/modules/authentication'
import {
  Button,
  Card,
  Checkbox,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  Row,
  Select,
  Space,
  Typography,
} from 'antd'
import dayjs from 'dayjs'
import { useParams, useRouter } from 'next/navigation'
import { useSnackbar } from 'notistack'
import { useState } from 'react'
const { Title, Text, Paragraph } = Typography
const { Option } = Select

type ReservationType = {
  createOne: (data: any) => Promise<any>
}

type VehicleType = {
  createOne: (data: any) => Promise<any>
}

type LocationType = {
  createOne: (data: any) => Promise<any>
}

type ApiType = {
  Reservation: ReservationType
  Vehicle: VehicleType
  Location: LocationType
}

export default function MapPage() {
  const router = useRouter()
  const params = useParams<any>()
  const authentication = useAuthentication()
  const userId = authentication.user?.id
  const { enqueueSnackbar } = useSnackbar()

    const [form] = Form.useForm()
    const [totalCost, setTotalCost] = useState<number>(0)
    const [distance, setDistance] = useState<number>(0)

    const calculateCost = (
      start: { lng: number; lat: number },
      userLocation: { lng: number; lat: number },
      destination: { lng: number; lat: number },
    ) => {
      const pricePerKm = 19
      const baseCost = 558
      const tollCost = 0 // Assuming no toll cost for simplicity
      const calculatedDistance = Math.sqrt(
        Math.pow(destination.lng - userLocation.lng, 2) +
          Math.pow(destination.lat - userLocation.lat, 2),
      )
      const cost = baseCost + calculatedDistance * pricePerKm + tollCost
      setDistance(calculatedDistance)
      setTotalCost(cost)
    }

  const onFinish = async (values: any) => {
    try {
      const api = Api as unknown as ApiType
      const reservation = await api.Reservation.createOne({
        userId,
        serviceType: values.serviceType,
        pickupTime: dayjs(values.pickupTime).toISOString(),
        totalCost,
      })

      await api.Vehicle.createOne({
        userId,
        name: values.vehicleName,
        model: values.vehicleModel,
        year: values.vehicleYear,
        licensePlate: values.licensePlate,
      })

      await api.Location.createOne({
        reservationId: reservation.id,
        latitude: values.currentLocation.lat,
        longitude: values.currentLocation.lng,
        type: 'pickup',
      })

      await api.Location.createOne({
        reservationId: reservation.id,
        latitude: values.destinationLocation.lat,
        longitude: values.destinationLocation.lng,
        type: 'destination',
      })

      enqueueSnackbar('Reservation successful!', { variant: 'success' })
    } catch (error) {
      enqueueSnackbar('Error creating reservation', { variant: 'error' })
    }
  }

  return (
    <PageLayout layout="full-width">
      <Title level={2}>Towing Service Reservation</Title>
      <Paragraph>
        Please fill out the form below to request a towing service.
      </Paragraph>
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="serviceType"
              label="Service Type"
              rules={[
                { required: true, message: 'Please select a service type' },
              ]}
            >
              <Select placeholder="Select a service type">
                <Option value="towing">Towing</Option>
                <Option value="roadsideAssistance">Roadside Assistance</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="pickupTime"
              label="Pickup Time"
              rules={[
                { required: true, message: 'Please select a pickup time' },
              ]}
            >
              <DatePicker showTime />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="vehicleName"
              label="Vehicle Name"
              rules={[
                { required: true, message: 'Please enter the vehicle name' },
              ]}
            >
              <Input prefix={<CarOutlined />} placeholder="Vehicle Name" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="vehicleModel"
              label="Vehicle Model"
              rules={[
                { required: true, message: 'Please enter the vehicle model' },
              ]}
            >
              <Input prefix={<CarOutlined />} placeholder="Vehicle Model" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="vehicleYear"
              label="Vehicle Year"
              rules={[
                { required: true, message: 'Please enter the vehicle year' },
              ]}
            >
              <Input prefix={<CarOutlined />} placeholder="Vehicle Year" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="licensePlate"
              label="License Plate"
              rules={[
                { required: true, message: 'Please enter the license plate' },
              ]}
            >
              <Input prefix={<CarOutlined />} placeholder="License Plate" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="currentLocation"
              label="Current Location"
              rules={[
                {
                  required: true,
                  message: 'Please select your current location',
                },
              ]}
            >
              <Input
                prefix={<EnvironmentOutlined />}
                placeholder="Current Location"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="destinationLocation"
              label="Destination Location"
              rules={[
                {
                  required: true,
                  message: 'Please select your destination location',
                },
              ]}
            >
              <Input
                prefix={<EnvironmentOutlined />}
                placeholder="Destination Location"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="numberOfPassengers"
              label="Number of Passengers"
              rules={[
                {
                  required: true,
                  message: 'Please select the number of passengers',
                },
              ]}
            >
              <Select placeholder="Select number of passengers">
                <Option value="1">1</Option>
                <Option value="2">2</Option>
                <Option value="3">3</Option>
                <Option value="4">4</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="additionalTransport"
              label="Additional Transport"
              valuePropName="checked"
            >
              <Checkbox>
                If more than 2 passengers, request additional transport
              </Checkbox>
            </Form.Item>
          </Col>
        </Row>
        <Divider />
        <Row gutter={16}>
          <Col span={12}>
            <Card>
              <Space direction="vertical">
                <Text>Distance: {distance.toFixed(2)} km</Text>
                <Text>Total Cost: ${totalCost.toFixed(2)}</Text>
              </Space>
            </Card>
          </Col>
        </Row>
        <Divider />
        <Form.Item
          name="acceptTerms"
          valuePropName="checked"
          rules={[
            {
              validator: (_, value) =>
                value
                  ? Promise.resolve()
                  : Promise.reject('You must accept the terms and conditions'),
            },
          ]}
        >
          <Checkbox>I accept the Privacy Policy, Terms and Conditions</Checkbox>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<DollarOutlined />}>
            Submit Reservation
          </Button>
        </Form.Item>
      </Form>
    </PageLayout>
  )
}
Parece que el problema se origina porque el archivo calculateCost no existe en la ubicación ../utils/calculateCost, y por lo tanto, el import en page.tsx falla. Dado que el método calculateCost ya está implementado en el archivo map/page.tsx, te sugiero mover esa función a un archivo utilitario compartido dentro de la carpeta utils, y luego importarlo en ambos archivos (map/page.tsx y booking-confirmation/page.tsx).

Voy a crear el archivo calculateCost.ts en la carpeta utils, y luego actualizaré ambos archivos page.tsx para que importen esta función.

utils/calculateCost.ts
typescript
Copiar código
export const calculateCost = (
  start: { lng: number; lat: number },
  userLocation: { lng: number; lat: number },
  destination: { lng: number; lat: number },
) => {
  const pricePerKm = 19
  const baseCost = 558
  const tollCost = 0 // Assuming no toll cost for simplicity
  const calculatedDistance = Math.sqrt(
    Math.pow(destination.lng - userLocation.lng, 2) +
    Math.pow(destination.lat - userLocation.lat, 2),
  )
  const cost = baseCost + calculatedDistance * pricePerKm + tollCost
  return { distance: calculatedDistance, cost }
}
map/page.tsx
typescript
Copiar código
import { calculateCost } from '../../utils/calculateCost'

// Resto del código permanece igual
booking-confirmation/page.tsx
typescript
Copiar código
import { calculateCost } from '../../utils/calculateCost'

// Resto del código permanece igual
De esta forma, ambos archivos page.tsx utilizarán la función calculateCost desde la misma ubicación compartida. Esto debería solucionar el error de módulo no encontrado y permitir que la función calculateCost sea utilizada correctamente en ambos contextos.

asi que solo dame el codigo entero d e calculate cost