add pagination, sort and search for deleted sale session

src/shared/api/saleSession.ts

@@ -562,7 +562,6 @@ export function useSearchSaleSession({
     endDate: endDate?.toString() || "",
   });
   const url = `${endpoints.salleSession.getSeleSessionPage}?${filterParams.toString()}`;
-  console.log(url);
   const { data, error, isValidating, mutate } = useSWR<ISaleSessionPage>(url, fetcher);
 
   return {
@@ -604,7 +603,88 @@ export function useSaleSessionCountsByType({
   const { data, error } = useSWR(url, async () => {
     try {
       const response = await axiosInstance.get(endpoints.salleSession.getTypeCount, {
-        params, // Pass params directly to Axios
+        params, 
+      });
+      return response.data;
+    } catch (err) {
+      console.error("Error fetching user counts by status:", err);
+      throw err;
+    }
+  });
+
+  return useMemo(
+    () => ({
+      saleSessionTypeCount: data || [],
+      saleSessionTypeCountError: error,
+    }),
+    [data, error]
+  );
+}
+
+
+export function useSearchDeletedSaleSession({
+  name = "",
+  type = "",
+  page = 0,
+  size = 10,
+  startDate = null,
+  endDate = null,
+  sortBy = "id",
+  sortDir = "ASC",
+}: SearchSaleSessionParams) {
+  const filterParams = new URLSearchParams({
+    name: name || "",
+    type: type || "",
+    page: page.toString(),
+    size: size.toString(),
+    sortBy: sortBy || "",
+    sortDir: sortDir || "",
+    startDate: startDate?.toString() || "",
+    endDate: endDate?.toString() || "",
+  });
+  const url = `${endpoints.salleSession.getDeletedSeleSessionPage}?${filterParams.toString()}`;
+  const { data, error, isValidating, mutate } = useSWR<ISaleSessionPage>(url, fetcher);
+
+  return {
+    saleSessions: data?.content || [],
+    totalSaleSessions: data?.totalElements || 0,
+    totalPages: data?.totalPages || 0,
+    pageNumber: data?.pageable.pageNumber || 0,
+    pageSize: data?.pageable.pageSize || 0,
+    loading: !data && !error,
+    isError: error,
+    isValidating,
+    revalidatePage: mutate,
+  };
+}
+
+
+export function useDeletedSaleSessionCountsByType({
+  name = "",
+  type = "",
+  startDate = null,
+  endDate = null,
+}: {
+  name?: string;
+  type?: string;
+  startDate?: Date|null;
+  endDate?: Date|null;
+}) {
+  const params = {
+    name,
+    type,
+    startDate: startDate ? startDate.toString() : "",
+    endDate: endDate ? endDate.toString() : "",
+  };
+
+  const url = `${endpoints.user.statusCount}?${new URLSearchParams(
+    params
+  ).toString()}`;
+
+  const { data, error } = useSWR(url, async () => {
+    try {
+      const response = await axiosInstance.get(endpoints.salleSession.getDeletedTypeCount, {
+        params, 
       });
       return response.data;
     } catch (err) {

src/shared/api/server.ts

@@ -435,7 +435,9 @@ export const endpoints = {
     deleteSaleSessionById: (id: number) => `/api/cart/deleteSession/${id}`,
     restoreSaleSession: (id: number) => `/api/cart/restock/${id}`,
     getSeleSessionPage: "/api/cart/page",
-    getTypeCount:"/api/cart/count-type"
+    getTypeCount:"/api/cart/count-type",
+    getDeletedSeleSessionPage: "/api/cart/deleted/page",
+    getDeletedTypeCount:"/api/cart/deleted/count-type"
   },
   supplier: {
     getAllSupplier: "/api/user/supplier",

src/shared/sections/lives/live-SaleSessionDeleted/SalesSession-table-filters-result.tsx

@@ -36,7 +36,12 @@ export default function SalesSessionTableFiltersResult({
   }, [onFilters]);
 
   const handleRemovetype = useCallback(() => {
-    onFilters("type", "all");
+    onFilters("type", "");
+  }, [onFilters]);
+
+  const handleRemovestartAndEndDate = useCallback(() => {
+    onFilters("startDate", "");
+    onFilters("endDate", "");
   }, [onFilters]);
 
   return (
@@ -55,7 +60,7 @@ export default function SalesSessionTableFiltersResult({
         flexWrap="wrap"
         alignItems="center"
       >
-        {filters.type !== "all" && (
+        {filters.type !== "" && (
           <Block label="type:">
             <Chip
               size="small"
@@ -75,6 +80,21 @@ export default function SalesSessionTableFiltersResult({
           </Block>
         )}
 
+
+{!!filters.startDate && !!filters.endDate && (
+          <Block label="Plage de dates :">
+            <Chip
+              label={`${new Date(
+                filters.startDate
+              ).toLocaleDateString()} - ${new Date(
+                filters.endDate
+              ).toLocaleDateString()}`}
+              size="small"
+              onDelete={handleRemovestartAndEndDate}
+            />
+          </Block>
+        )}   
+
         <Button
           color="error"
           onClick={onResetFilters}

src/shared/sections/lives/live-SaleSessionDeleted/SalesSession-table-toolbar.tsx

-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 import Stack from "@mui/material/Stack";
 import MenuItem from "@mui/material/MenuItem";
@@ -9,6 +9,9 @@ import InputAdornment from "@mui/material/InputAdornment";
 import Iconify from "../../../components/iconify";
 import CustomPopover, { usePopover } from "../../../components/custom-popover";
 import { SalesSessionTableFilters, SalesSessionTableFilterValue } from "@/shared/types/saleSession";
+import CustomDateRangePicker from "@/shared/components/custom-date-range-picker";
+import { fDate, formatDateToString } from "@/utils/format-time";
+import { FormControl, Card, ListItemText } from "@mui/material";
 
 
 // ----------------------------------------------------------------------
@@ -34,6 +37,34 @@ Props) {
     [onFilters]
   );
 
+ const [isDateRangeOpen, setIsDateRangeOpen] = useState(false);
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const openDateRange = useCallback(() => {
+    setIsDateRangeOpen(true);
+  }, []);
+
+  const closeDateRange = useCallback(() => {
+    setIsDateRangeOpen(false);
+  }, []);
+
+  const onChangeStartDate = (newStartDate: Date | null) => {
+    setStartDate(newStartDate);
+    if (newStartDate) {
+      const formattedDate = formatDateToString(newStartDate);
+      onFilters("startDate", formattedDate);
+    }
+  };
+
+  const onChangeEndDate = (newEndDate: Date | null) => {
+    setEndDate(newEndDate);
+    if (newEndDate) {
+      onFilters("endDate", formatDateToString(newEndDate));
+    }
+  };
+  
+
   return (
     <>
       <Stack
@@ -74,6 +105,57 @@ Props) {
 
           
         </Stack>
+        <FormControl
+          sx={{
+            flexShrink: 0,
+            width: { xs: 1, md: 350 },
+          }}
+        >
+          <Card
+            onClick={openDateRange}
+            variant="outlined"
+            sx={{
+              height: 55,
+              cursor: "pointer",
+              borderRadius: 1,
+              p: 3,
+              display: "flex",
+              boxShadow: "none",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Iconify sx={{ mr: 3 }} icon="solar:calendar-date-bold" />
+            <ListItemText
+              secondary={
+                filters.startDate && filters.endDate
+                  ? `${fDate(filters.startDate)} - ${fDate(filters.endDate)}`
+                  : filters.startDate
+                  ? `${fDate(filters.startDate)} - sélectionner la date de fin`
+                  : filters.endDate
+                  ? `sélectionner la date de début - ${fDate(filters.endDate)}`
+                  : "Sélectionner une plage de dates"
+              }
+              primaryTypographyProps={{
+                typography: "body2",
+                color: "text.primary",
+                mb: 0.5,
+              }}
+            />
+          </Card>
+
+          <CustomDateRangePicker
+            open={isDateRangeOpen}
+            onClose={closeDateRange}
+            startDate={startDate}
+            endDate={endDate}
+            onChangeStartDate={onChangeStartDate}
+            onChangeEndDate={onChangeEndDate}
+          />
+        </FormControl>
+
+
+
       </Stack>