Mav-Mobile-UI/src/pages/Dashboard.tsx

import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard";
import { useNavigate } from "react-router";
import { useSwipeable } from "react-swipeable";
import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
import { SightingFeedProvider } from "../context/SightingFeedContext";

const Dashboard = () => {
  const navigate = useNavigate();

  const handlers = useSwipeable({
    onSwipedDown: () => navigate("/system-settings"),
    trackMouse: true,
  });

  return (
    <div
      className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full"
      {...handlers}
    >
      <SightingFeedProvider baseUrl={"http://100.82.205.44/SightingListFront"}>
        <FrontCameraOverviewCard className="order-1" />
        <SightingHistoryWidget className="order-3" />
      </SightingFeedProvider>

      <SightingFeedProvider baseUrl="http://100.82.205.44/SightingListRear">
        <RearCameraOverviewCard className="order-2" />
        <SightingHistoryWidget className="order-4" />
      </SightingFeedProvider>
    </div>
  );
};

export default Dashboard;