pagamio-frontend-commons-lib/lib/dashboard-visuals/visuals/SelectedEventTile.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useApi } from '../../api';
import Card from '../components/CardWrapper';
import ChartWrapper from '../components/ChartWrapper';
const SelectedEventTile = ({ query, title, format, url, details, valueKey, previousValueKey, changeKey, ...props }) => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState();
    const [eventDetails, setEventDetails] = useState(null);
    const apiClient = useApi();
    const getEventDetails = async () => {
        setLoading(true);
        try {
            const response = await apiClient.get(url);
            setEventDetails(response.event);
        }
        catch (error) {
            console.error('Error fetching event details:', error);
            // Convert Error to ApiErrorResponse format
            setError(error instanceof Error
                ? { message: error.message, status: 500 }
                : { message: 'Failed to fetch event details', status: 500 });
        }
        finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        getEventDetails();
    }, [url]);
    // Safe default values with optional chaining
    const { name = 'Event information unavailable', venueName = 'Venue unavailable', cityName = 'City unavailable', countryName = 'Country unavailable', } = eventDetails ?? {};
    return (_jsx(Card, { title: title, className: "bg-core-add/5", children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: !eventDetails, onRetry: getEventDetails, children: _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "pb-3", children: [_jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-1", children: name }), _jsxs("div", { className: "flex items-center text-gray-600 text-sm", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })] }), _jsxs("span", { children: [venueName, ", ", cityName, ", ", countryName] })] })] }) }) }) }));
};
export default SelectedEventTile;