jgest-react-vite 1.1.2

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.tsx

@@ -0,0 +1,30 @@
+import { Suspense } from 'react';
+import { CircularProgress, CssBaseline } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import AppRouter from './Router';
+import { themeStore } from './store/ThemeStore/themeStore';
+import { themes } from './store/ThemeStore/Themes/themes';
+import { NotificationProvider } from './providers/NotificationProvider/NotificationProvider';
+
+function App() {
+  const { mode } = themeStore();
+
+  return (
+    <ThemeProvider theme={themes[mode]}>
+      <CssBaseline />
+      <NotificationProvider>
+        <Suspense
+          fallback={
+            <main className="h-screen w-screen flex justify-center items-center ">
+              <CircularProgress />
+            </main>
+          }
+        >
+          <AppRouter />
+        </Suspense>
+      </NotificationProvider>
+    </ThemeProvider>
+  )
+}
+
+export default App

package/template/src/Router.tsx

@@ -0,0 +1,17 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { lazy } from 'react';
+
+//Importamos las paginas de nuestra aplicación de forma lazy para mejorar el rendimiento
+const MainPage = lazy(() => import('./pages/MainPage/MainPage'));
+
+//Creamos el router de nuestra aplicación
+const AppRouter = () => {
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<MainPage />} />
+            </Routes>
+        </BrowserRouter>
+    );
+};
+export default AppRouter;

package/template/src/components/main/ThemeSwitch.tsx

@@ -0,0 +1,80 @@
+// Botón alternador (switch) para cambiar el tema (Claro/Oscuro)
+import { styled } from '@mui/material/styles';
+import { themeStore } from '../../store/ThemeStore/themeStore';
+import Switch from '@mui/material/Switch';
+import { useEffect } from 'react';
+
+// Personalización de estilos del componente Switch de Material UI
+const ThemeSwitch = styled(Switch)(({ theme }) => ({
+    width: 62,
+    height: 34,
+    padding: 7,
+    '& .MuiSwitch-switchBase': {
+        margin: 1,
+        padding: 0,
+        transform: 'translateX(6px)',
+        '&.Mui-checked': {
+            color: '#fff',
+            transform: 'translateX(22px)',
+            '& .MuiSwitch-thumb:before': {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+                    '#fff',
+                )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+            },
+            '& + .MuiSwitch-track': {
+                opacity: 1,
+                backgroundColor: '#aab4be',
+                ...theme.applyStyles('dark', {
+                    backgroundColor: '#8796A5',
+                }),
+            },
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        backgroundColor: '#001e3c',
+        width: 32,
+        height: 32,
+        '&::before': {
+            content: "''",
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            left: 0,
+            top: 0,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+                '#fff',
+            )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+        },
+        ...theme.applyStyles('dark', {
+            backgroundColor: '#003892',
+        }),
+    },
+    '& .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: '#aab4be',
+        borderRadius: 20 / 2,
+        ...theme.applyStyles('dark', {
+            backgroundColor: '#8796A5',
+        }),
+    },
+}));
+
+export default function ThemeToggle() {
+    // Obtiene el estado del tema y la función para alternarlo desde el store
+    const { mode, toggleTheme } = themeStore();
+    useEffect(() => {
+        if (mode === 'dark') {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, [mode]);
+
+    return (
+
+        <ThemeSwitch onClick={toggleTheme} />
+
+    );
+}

package/template/src/components/shared/MyModal.tsx

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import { Box, Paper } from '@mui/material';
+
+// Interfaz para las propiedades del layout modal
+interface ModalProps {
+    children: ReactNode;
+    minWidth?: string | number;
+    onClose?: () => void;
+}
+
+// Componente de layout para modales con fondo oscurecido y centrado
+const MyModal = ({ children, minWidth, onClose }: ModalProps) => {
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 1300,
+                backdropFilter: 'blur(3px)',
+            }}
+            onClick={onClose}
+        >
+            <Paper
+                elevation={24}
+                sx={{
+                    position: 'relative',
+                    maxWidth: '90vw',
+                    minWidth: minWidth || 800,
+                    maxHeight: '90vh',
+                    overflowY: 'auto',
+                    p: 4,
+                    borderRadius: 2,
+                    boxShadow: 24,
+                    m: 2,
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {children}
+            </Paper>
+        </Box>
+    );
+};
+
+export default MyModal;

package/template/src/components/shared/MyPopover.tsx

@@ -0,0 +1,44 @@
+import { Popover, Box } from "@mui/material";
+
+// Componente de layout para popovers con posicionamiento automático
+const MyPopover = ({ children, anchorEl, handleClosePopover }: { children: React.ReactNode; anchorEl: HTMLElement | null; handleClosePopover: () => void }) => {
+    return (
+        <Popover
+            open={Boolean(anchorEl)}
+            anchorEl={anchorEl}
+            onClose={handleClosePopover}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+            }}
+            disableScrollLock
+            slotProps={{
+                paper: {
+                    sx: {
+                        maxWidth: '80vw',
+                        maxHeight: '70vh',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        p: 2,
+                        margin: '8px'
+                    }
+                }
+            }}
+            sx={{
+                '& .MuiPopover-paper': {
+                    overflow: 'visible'
+                }
+            }}
+        >
+            <Box sx={{ overflowY: 'auto', flex: 1 }}>
+                {children}
+            </Box>
+        </Popover>
+    );
+};
+
+export default MyPopover;

package/template/src/hooks/shared/useNotification.ts

@@ -0,0 +1,25 @@
+
+import { useContext } from 'react';
+import { NotificationContext } from '../../providers/NotificationProvider/context/NotificationContext';
+
+// Hook personalizado para acceder fácilmente al contexto de notificaciones
+export const useNotification = () => {
+  const ctx = useContext(NotificationContext);
+  if (!ctx) {
+    throw new Error('useNotification debe ser usado dentro de un NotificationProvider');
+  }
+  return ctx;
+};
+/*
+Ejemplo de uso en un componente:
+  
+  const { showNotification } = useNotification();
+  try {
+      await api.delete(`/v1/admin/api-error-logs/${id}`);
+      showNotification('Log deleted successfully', 'success');
+      refetch();
+    } catch (error: any) {
+      showNotification(error);
+    }
+
+*/

package/template/src/hooks/shared/useSetTimezone.ts

@@ -0,0 +1,20 @@
+// Hook para formatear fechas a la zona horaria local (Europe/Madrid)
+const useSetTimezone = () => {
+    const setTimezone = (date: string) => {
+        try {
+            const toDate = new Date(date);
+
+            // Validaciones para fechas inválidas o vacías
+            if (Number.isNaN(toDate.getTime())) return "-";
+            if (toDate.getTime() === 0) return "-";
+
+            // Ajuste de la zona horaria
+            toDate.setTime(toDate.getTime() + toDate.getTimezoneOffset() * -60000);
+            return toDate.toLocaleString("es-ES", { timeZone: "Europe/Madrid" } as Intl.DateTimeFormatOptions);
+        } catch (error) {
+            console.error('Error al establecer la zona horaria:', error);
+        }
+    }
+    return { setTimezone };
+}
+export default useSetTimezone;

package/template/src/index.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+html,
+body,
+#root {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}

package/template/src/layouts/MainLayout.tsx

@@ -0,0 +1,23 @@
+import ThemeToggle from '../components/main/ThemeSwitch';
+const MainLayout = ({ Nav, children, Footer }: { Nav?: React.ReactNode ; children: React.ReactNode; Footer?: React.ReactNode }) => {
+
+  return (
+    <main className="h-screen w-full flex flex-col overflow-hidden">
+
+        <nav>
+            {Nav}
+            <ThemeToggle />
+        </nav>
+
+       <section className="w-full flex-1 min-h-0 flex flex-col">
+            {children}
+       </section>
+
+        <footer>
+            {Footer}
+        </footer>
+    </main>
+  );
+};
+
+export default MainLayout;

package/template/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/template/src/modules/MainPage/MainPageContent.tsx

@@ -0,0 +1,100 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Box } from '@mui/material';
+
+// Generamos las posiciones de los sparkles una sola vez (fuera del render)
+const SPARKLES = Array.from({ length: 20 }, (_, i) => ({
+    id: i,
+    top: `${Math.random() * 80 + 10}%`,
+    left: `${Math.random() * 80 + 10}%`,
+    delay: `${Math.random() * 2}s`,
+}));
+
+const MainPageContent = () => {
+    const [animationPhase, setAnimationPhase] = useState<'growing' | 'spinning'>('growing');
+
+    useEffect(() => {
+        const timer = setTimeout(() => setAnimationPhase('spinning'), 1000);
+        return () => clearTimeout(timer);
+    }, []);
+
+    const sparkles = useMemo(() => SPARKLES, []);
+
+    return (
+        <Box
+            sx={{
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                flex: 1,
+                minHeight: 0,
+                overflow: 'hidden',
+            }}
+        >
+            {/* Sparkles */}
+            {animationPhase === 'spinning' && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        inset: 0,
+                        pointerEvents: 'none',
+                        '& .sparkle': {
+                            position: 'absolute',
+                            width: '10px',
+                            height: '10px',
+                            borderRadius: '50%',
+                            background: 'radial-gradient(circle, #fff, #ffcc00, transparent)',
+                            animation: 'sparkleAnim 1.5s infinite ease-in-out',
+                        },
+                        '@keyframes sparkleAnim': {
+                            '0%, 100%': { transform: 'scale(0) rotate(0deg)', opacity: 0 },
+                            '50%': { transform: 'scale(1.5) rotate(45deg)', opacity: 1 },
+                        },
+                    }}
+                >
+                    {sparkles.map(({ id, top, left, delay }) => (
+                        <Box
+                            key={id}
+                            className="sparkle"
+                            sx={{
+                                top,
+                                left,
+                                animationDelay: delay,
+                                boxShadow: '0 0 10px 2px rgba(255, 204, 0, 0.5)',
+                            }}
+                        />
+                    ))}
+                </Box>
+            )}
+
+            {/* Logo animado */}
+            <Box
+                component="img"
+                src="https://stickerapp.es/cdn-assets/images/stickers/663t.png"
+                alt="Logo"
+                sx={{
+                    width: { xs: '55vmin', sm: '40vmin', md: '30vmin' },
+                    height: 'auto',
+                    objectFit: 'contain',
+                    transformOrigin: 'center center',
+                    zIndex: 1,
+                    animation:
+                        animationPhase === 'growing'
+                            ? 'growScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards'
+                            : 'spin3D 3s linear infinite',
+                    '@keyframes growScale': {
+                        from: { transform: 'scale(0)', opacity: 0 },
+                        to: { transform: 'scale(1)', opacity: 1 },
+                    },
+                    '@keyframes spin3D': {
+                        from: { transform: 'rotateY(0deg)' },
+                        to: { transform: 'rotateY(360deg)' },
+                    },
+                }}
+            />
+        </Box>
+    );
+};
+
+export default MainPageContent;

package/template/src/pages/MainPage/MainPage.tsx

@@ -0,0 +1,12 @@
+import MainLayout from "../../layouts/MainLayout";
+import MainPageContent from "../../modules/MainPage/MainPageContent.tsx";
+
+const MainPage = () => {
+    return (
+        <MainLayout>
+            <MainPageContent/>
+        </MainLayout>
+    );
+
+}
+export default MainPage;

package/template/src/providers/NotificationProvider/NotificationProvider.tsx

@@ -0,0 +1,61 @@
+import { useState, useCallback, useMemo, type ReactNode } from 'react';
+import {Snackbar, Alert, AlertTitle, type AlertColor } from '@mui/material';
+import { NotificationContext, type ErrorResponse } from './context/NotificationContext';
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  // Estados para controlar la visibilidad y contenido del Snackbar
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const [title, setTitle] = useState<string | null>(null);
+  const [severity, setSeverity] = useState<AlertColor>('success');
+
+  // Función para mostrar notificaciones generales
+  const showNotification = useCallback(
+    (msg: string | ErrorResponse, sev: AlertColor = 'success') => {
+      if (typeof msg === 'string') {
+        // Manejo de mensajes simples de texto
+        setMessage(msg);
+        setTitle(null);
+        setSeverity(sev);
+      } else {
+        // Manejo de objetos de error (ErrorResponse)
+        setTitle(`Error ${msg.status}: ${msg.error}`);
+        setMessage(`${msg.message}${msg.path ?? ''}`);
+        setSeverity('error');
+      }
+      setOpen(true);
+    },
+    []
+  );
+
+  // Función específica para mostrar notificaciones de error
+  const showErrorNotification = useCallback((error: ErrorResponse) => {
+    setTitle(`Error ${error.status}: ${error.error}`);
+    setMessage(`${error.message}${error.path ?? ''}`);
+    setSeverity('error');
+    setOpen(true);
+  }, []);
+
+  // Memorización del valor del contexto para evitar renderizados innecesarios
+  const value = useMemo(
+    () => ({ showNotification, showErrorNotification }),
+    [showNotification, showErrorNotification]
+  );
+
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+      <Snackbar
+        open={open}
+        autoHideDuration={5000} // Se cierra automáticamente a los 5 segundos
+        onClose={() => setOpen(false)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      >
+        <Alert onClose={() => setOpen(false)} severity={severity} sx={{ width: '100%', minWidth: 300 }}>
+          {title && <AlertTitle>{title}</AlertTitle>}
+          {message}
+        </Alert>
+      </Snackbar>
+    </NotificationContext.Provider>
+  );
+};

package/template/src/providers/NotificationProvider/context/NotificationContext.tsx

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+import type { AlertColor } from '@mui/material';
+
+// Interfaz para la estructura de respuesta de error
+export interface ErrorResponse {
+    status: number;
+    error: string;
+    message: string;
+    path: string;
+}
+
+// Interfaz que define el tipo de datos y funciones expuestas por el contexto de notificaciones
+export interface NotificationContextType {
+    showNotification: (msg: string | ErrorResponse, sev?: AlertColor) => void;
+    showErrorNotification: (error: ErrorResponse) => void;
+}
+
+// Creación del contexto con valor inicial indefinido
+export const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+

package/template/src/services/ApiService.ts

@@ -0,0 +1,54 @@
+import type { ErrorResponse } from '../providers/NotificationProvider/context/NotificationContext';
+import axios, { type AxiosError } from 'axios';
+
+const API_BASE_URL = import.meta.env.VITE_APP_API_URL;
+
+const instance = axios.create({
+    baseURL: API_BASE_URL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+instance.interceptors.response.use(
+    (response) => response.data, // Retornar directamente la data de la respuesta
+    (error: AxiosError) => {
+        const errorData = error.response?.data as any || {};
+
+        // Creamos el ErrorResponse
+        const errorResponse: ErrorResponse = {
+            status: errorData.status || error.response?.status || 500,
+            error: errorData.error || error.code || 'Error',
+            message: errorData.message || error.message || 'An unexpected error occurred',
+            path: errorData.path || error.config?.url || ''
+        }
+        return Promise.reject(errorResponse);
+    }
+);
+
+// Clase de servicio para realizar peticiones HTTP a la API de Ibio
+class ApiService {
+    // Método privado para realizar peticiones HTTP genéricas
+
+    get<T>(endpoint: string, headers?: any): Promise<T> {
+        return instance.get<any, T>(endpoint, { headers });
+    }
+
+    post<T>(endpoint: string, body: any, headers?: any): Promise<T> {
+        return instance.post<any, T>(endpoint, body, { headers });
+    }
+
+    put<T>(endpoint: string, body: any, headers?: any): Promise<T> {
+        return instance.put<any, T>(endpoint, body, { headers });
+    }
+
+    patch<T>(endpoint: string, body: any, headers?: any): Promise<T> {
+        return instance.patch<any, T>(endpoint, body, { headers });
+    }
+
+    delete<T>(endpoint: string, headers?: any): Promise<T> {
+        return instance.delete<any, T>(endpoint, { headers });
+    }
+}
+
+export const api = new ApiService();

package/template/src/services/ToBeTested/ApiService-New.ts

@@ -0,0 +1,94 @@
+import type { ErrorResponse } from '../../providers/NotificationProvider/context/NotificationContext';
+import axios, { type AxiosError, type AxiosInstance } from 'axios';
+
+// Clase de servicio para realizar peticiones HTTP a la API de Ibio
+export class ApiService<ItemType, ResponseType = ItemType> {
+    protected api: AxiosInstance;
+    protected endpoint: string;
+    protected baseURL: string;
+    protected headers: any;
+    protected credentials: boolean;
+
+    constructor(endpoint?: string, baseURL: string = import.meta.env.VITE_APP_API_URL, credentials?: boolean, headers?: any) {
+        this.endpoint = endpoint ?? '';
+        this.baseURL = baseURL;
+        this.headers = headers ?? { 'Content-Type': 'application/json', 'X-API-Key': import.meta.env.VITE_APP_API_KEY as string, };
+        this.credentials = credentials ?? false;
+
+        this.api = axios.create({
+            baseURL: this.baseURL,
+            withCredentials: this.credentials,
+            headers: this.headers,
+        });
+
+        this.api.interceptors.response.use(
+            (response) => response.data, // Retornar directamente la data de la respuesta
+            (error: AxiosError) => {
+                const errorData = error.response?.data as any || {};
+
+                // Creamos el ErrorResponse estructurado siguiendo tu patrón actual
+                const errorResponse: ErrorResponse = {
+                    status: errorData.status || error.response?.status || 500,
+                    error: errorData.error || error.code || 'Error',
+                    message: errorData.message || error.message || 'An unexpected error occurred',
+                    path: errorData.path || error.config?.url || ''
+                }
+                return Promise.reject(errorResponse);
+            }
+        );
+    }
+
+    protected parseResponse(data: any): ItemType {
+        return this.parseItemResponse(data);
+    }
+    protected parseItemResponse(data: any): ItemType {
+        return data as unknown as ItemType; // Implementación por defecto, puede ser sobrescrita
+    }
+
+    protected async handleRequest<R>(
+        request: Promise<any>,
+        isArray: boolean = false,
+    ): Promise<R> {
+        try {
+            const response = await request;
+            
+            // Handle array extraction if needed
+            if (isArray && response && typeof response === 'object' && !Array.isArray(response)) {
+                if ('data' in response) {
+                    return response.data as R;
+                }
+            }
+            
+            return response as R;
+        } catch (error) {
+            console.error('Error in API request:', error);
+            throw error;
+        }
+    }
+
+    get(endpoint: string = this.endpoint, headers: any = this.headers): Promise<ItemType[]> {
+        return this.handleRequest<ResponseType[]>(this.api.get(endpoint, { headers }), true)
+            .then((data) => (data || []).map((item) => this.parseResponse(item)));
+    }
+
+    post(endpoint: string, body: any, headers?: any): Promise<ItemType> {
+        return this.handleRequest<ResponseType>(this.api.post(endpoint, body, { headers }))
+            .then((data) => this.parseResponse(data));
+    }
+
+    put(endpoint: string, body: any, headers?: any): Promise<ItemType> {
+        return this.handleRequest<ResponseType>(this.api.put(endpoint, body, { headers }))
+            .then((data) => this.parseResponse(data));
+    }
+
+    patch(endpoint: string, body: any, headers?: any): Promise<ItemType> {
+        return this.handleRequest<ResponseType>(this.api.patch(endpoint, body, { headers }))
+            .then((data) => this.parseResponse(data));
+    }
+
+    delete(endpoint: string, headers?: any): Promise<ItemType> {
+        return this.handleRequest<ResponseType>(this.api.delete(endpoint, { headers }))
+            .then((data) => this.parseResponse(data));
+    }
+}
+