update this : // src/App.js
import React, { Suspense, lazy, useEffect, useState } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useLocation,
} from 'react-router-dom';
import axios from 'axios';
import { Admin, Create, Datagrid, DeleteButton, EditButton, List, Resource, Show, ShowButton, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

// Axios Configuration
axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;

// Lazy load the pages
const Home = lazy(() => import('./pages/home'));
const Apropos = lazy(() => import('./pages/apropos'));
const Contact = lazy(() => import('./pages/contact'));
const Galerie = lazy(() => import('./pages/galerie'));
const HomePhone = lazy(() => import('./pages/homePhone'));
const ContactPhone = lazy(() => import('./pages/contactPhone'));
const AproposPhone = lazy(() => import('./pages/aproposPhone'));
const GaleriePhone = lazy(() => import('./pages/galeriePhone'));
const Login = lazy(() => import('./pages/login'));

// ScrollToTop Component
const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

// React-Admin Data Provider
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 1280);
    };

    // Initial check
    handleResize();

    // Event listener
    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Router>
      {/* Admin Routes */}
      <Suspense fallback={<div>Loading...</div>}>
        <ScrollToTop />
        <Routes>
          {/* Public Routes */}
          <Route path="/" element={isMobile ? <HomePhone /> : <Home />} />
          <Route
            path="/apropos"
            element={isMobile ? <AproposPhone /> : <Apropos />}
          />
          <Route
            path="/galerie"
            element={isMobile ? <GaleriePhone /> : <Galerie />}
          />
          <Route
            path="/contact"
            element={isMobile ? <ContactPhone /> : <Contact />}
          />
          <Route path="/login" element={<Login />} />
          {/* Catch-All Route (Optional) */}
          <Route
            path="*"
            element={<div>404 Not Found. Please check the URL.</div>}
          />
        </Routes>
      </Suspense>
      <AdminRoutes />
    </Router>
  );
}

// AdminRoutes Component to encapsulate react-admin
const AdminRoutes = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} show={PostShow} />
    {/* Add more resources as needed */}
  </Admin>
);

const PostCreate = (props) => (
  <Create {...props} title="Create a Post">
    <SimpleForm>
      <TextInput source="title" validate={required()} />
      <TextInput source="body" multiline validate={required()} />
      {/* Add more inputs as necessary */}
    </SimpleForm>
  </Create>
);

const PostEdit = (props) => (
  <Edit {...props} title="Edit Post">
    <SimpleForm>
      <TextInput disabled source="id" />
      <TextInput source="title" validate={required()} />
      <TextInput source="body" multiline validate={required()} />
      {/* Add more inputs as necessary */}
    </SimpleForm>
  </Edit>
);

const PostList = (props) => (
  <List {...props} title="Posts">
    <Datagrid rowClick="show">
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="body" />
      {/* Add more fields as necessary */}
      <EditButton />
      <ShowButton />
      <DeleteButton />
    </Datagrid>
  </List>
);

const PostShow = (props) => (
  <Show {...props} title="Post Details">
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="body" />
      {/* Add more fields as necessary */}
      {/* Example of a date field if available */}
      {/* <DateField source="created_at" /> */}
    </SimpleShowLayout>
  </Show>
);

export default App; to use this instead : <?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\ImageItem;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\Log;

class ImageItemController extends Controller
{
    // List all images
    public function index()
    {
        $images = ImageItem::all();
        return response()->json($images, 200);
    }

    // Store a new image
    public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'title' => 'nullable|string|max:255',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg,webp|max:2048', // Adjust as needed
        ]);

        if ($validator->fails()) {
            return response()->json($validator->errors(), 422);
        }

        // Handle file upload
        if ($request->hasFile('image')) {
            $path = $request->file('image')->store('images', 'public');
        }

        $image = ImageItem::create([
            'title' => $request->title,
            'image_path' => $path,
        ]);

        return response()->json($image, 201);
    }

    // Show a single image
    public function show($id)
    {
        $image = ImageItem::find($id);

        if (!$image) {
            return response()->json(['message' => 'Image not found'], 404);
        }

        return response()->json($image, 200);
    }

    // Update an image
    public function update(Request $request, $id)
    {
        $image = ImageItem::find($id);

        if (!$image) {
            return response()->json(['message' => 'Image not found'], 404);
        }

        $validator = Validator::make($request->all(), [
            'title' => 'sometimes|required|string|max:255',
            'image' => 'sometimes|required|image|mimes:jpeg,png,jpg,gif,svg,webp|max:2048', // Adjust as needed
        ]);

        if ($validator->fails()) {
            return response()->json($validator->errors(), 422);
        }

        // Update title if provided
        if ($request->has('title')) {
            $image->title = $request->title;
        }

        // Handle new image upload
        if ($request->hasFile('image')) {
            // Delete old image
            if (Storage::disk('public')->exists($image->image_path)) {
                Storage::disk('public')->delete($image->image_path);
            }

            // Store new image
            $path = $request->file('image')->store('images', 'public');
            $image->image_path = $path;
        }

        $image->save();

        return response()->json($image, 200);
    }

    // Delete an image
    public function destroy($id)
    {
        $image = ImageItem::find($id);

        if (!$image) {
            return response()->json(['message' => 'Image not found'], 404);
        }

        // Delete image file
        if (Storage::disk('public')->exists($image->image_path)) {
            Storage::disk('public')->delete($image->image_path);
        }

        $image->delete();

        return response()->json(['message' => 'Image deleted successfully'], 200);
    }
}