Failed to load resource: the server responded with a status of 500 (Internal Server Error)
AddNewAsset.jsx:67  Error response from server: Server error
handleSubmit @ AddNewAsset.jsx:67
AddNewAsset.jsx:89  Error saving asset: Error: Failed to save asset
    at handleSubmit (AddNewAsset.jsx:68:23)   getting this for import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const AddNewAsset = () => {
    const [assetData, setAssetData] = useState({
        vendor: '',
        applicationName: '',
        qty: '',
        used: '',
        remaining: '',
        startDate: '',
        endDate: '',
        renewalCost: '',
        contactPerson: '',
        emailId: '',
        contactNumber: ''
    });
    const { id } = useParams(); // Get asset ID from URL

    useEffect(() => {
        if (id) {
            // Fetch asset details if an ID is provided
            const fetchAssetDetails = async () => {
                try {
                    const response = await fetch(`/api/assets/${id}`);
                    const data = await response.json();
                    setAssetData(data);
                } catch (error) {
                    console.error('Error fetching asset details:', error);
                }
            };

            fetchAssetDetails();
        }
    }, [id]);

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setAssetData({
            ...assetData,
            [name]: value
        });
    };

    const handleSubmit = async (event) => {
        event.preventDefault();

        try {
            const response = id
                ? await fetch(`/api/assets/${id}`, { // Update existing asset
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(assetData)
                })
                : await fetch('/api/assets', { // Add new asset
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(assetData)
                });

            if (!response.ok) {
                const errorData = await response.json();
                console.error('Error response from server:', errorData);
                throw new Error('Failed to save asset');
            }

            // Clear form fields on successful submission (optional)
            setAssetData({
                vendor: '',
                applicationName: '',
                qty: '',
                used: '',
                remaining: '',
                startDate: '',
                endDate: '',
                renewalCost: '',
                contactPerson: '',
                emailId: '',
                contactNumber: ''
            });

            alert('Asset saved successfully');
            window.location.href = '/asset-inventory'; // Redirect to asset inventory page
        } catch (error) {
            console.error('Error saving asset:', error);
            alert('Failed to save asset. Please try again.'); // Handle error gracefully
        }
    };

    return (
        <div className="container mx-auto p-4 w-1/2 mt-10 p-6 bg-gray-100 rounded-lg">
            <div className="text-2xl text-center font-bold mb-4 text-black">{id ? 'Edit Asset' : 'Add New Asset'}</div>
            <form onSubmit={handleSubmit} className="max-w-md mx-auto" id="assetForm">
                <div className="mb-4">
                    <label htmlFor="vendor" className="block text-sm font-medium text-gray-700">Vendor:</label>
                    <input
                        type="text"
                        id="vendor"
                        name="vendor"
                        placeholder="Enter vendor name"
                        value={assetData.vendor}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="applicationName" className="block text-sm font-medium text-gray-700">Application Name:</label>
                    <input
                        type="text"
                        id="applicationName"
                        name="applicationName"
                        placeholder="Enter application name"
                        value={assetData.applicationName}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="qty" className="block text-sm font-medium text-gray-700">Quantity:</label>
                    <input
                        type="number"
                        id="qty"
                        name="qty"
                        placeholder="Enter quantity"
                        value={assetData.qty}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="used" className="block text-sm font-medium text-gray-700">Used:</label>
                    <input
                        type="number"
                        id="used"
                        name="used"
                        placeholder="Enter used amount"
                        value={assetData.used}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="remaining" className="block text-sm font-medium text-gray-700">Remaining:</label>
                    <input
                        type="number"
                        id="remaining"
                        name="remaining"
                        placeholder="Enter remaining amount"
                        value={assetData.remaining}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="startDate" className="block text-sm font-medium text-gray-700">Start Date:</label>
                    <input
                        type="date"
                        id="startDate"
                        name="startDate"
                        value={assetData.startDate}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="endDate" className="block text-sm font-medium text-gray-700">End Date:</label>
                    <input
                        type="date"
                        id="endDate"
                        name="endDate"
                        value={assetData.endDate}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="renewalCost" className="block text-sm font-medium text-gray-700">Renewal Cost:</label>
                    <input
                        type="number"
                        id="renewalCost"
                        name="renewalCost"
                        placeholder="Enter renewal cost"
                        value={assetData.renewalCost}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="contactPerson" className="block text-sm font-medium text-gray-700">Contact Person:</label>
                    <input
                        type="text"
                        id="contactPerson"
                        name="contactPerson"
                        placeholder="Enter contact person"
                        value={assetData.contactPerson}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="emailId" className="block text-sm font-medium text-gray-700">Email ID:</label>
                    <input
                        type="email"
                        id="emailId"
                        name="emailId"
                        placeholder="Enter email ID"
                        value={assetData.emailId}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>
                <div className="mb-4">
                    <label htmlFor="contactNumber" className="block text-sm font-medium text-gray-700">Contact Number:</label>
                    <input
                        type="text"
                        id="contactNumber"
                        name="contactNumber"
                        placeholder="Enter contact number"
                        value={assetData.contactNumber}
                        onChange={handleInputChange}
                        className="mt-1 block w-full border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
                        required
                    />
                </div>

                <div className="flex justify-center">
                    <button
                        type="submit"
                        className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600"
                    >
                        Save
                    </button>
                    <button
                        type="button"
                        className="bg-gray-400 text-gray-700 py-2 px-4 ml-2 rounded-md hover:bg-gray-300 focus:outline-none focus:bg-gray-300"
                        onClick={() => {
                            // Optionally handle cancel action
                            window.location.href = '/asset-inventory'; // Example redirect to asset inventory page
                        }}
                    >
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    );
};

export default AddNewAsset;