mobigrid-module 1.0.0

package/src/components/Layout/PageHeader.tsx

@@ -0,0 +1,270 @@
+import * as React from "react";
+import { DatePickerWithRange } from "../../components/ui/date-picker-with-range";
+import { Button } from "../../components/ui/button";
+import { DateRange } from "react-day-picker";
+import { Input } from "../../components/ui/input";
+import {
+  Select,
+  SelectItem,
+  SelectContent,
+  SelectValue,
+  SelectTrigger,
+} from "../../components/ui/select";
+import { useState, useMemo } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  filters: any;
+  configFilters: any;
+  setFilters: (filters: any) => void;
+  onSearch: () => void;
+  count: number;
+  isLoading: boolean;
+  setCurrentPage: (page: number) => void;
+}
+
+export function PageHeader({
+  title,
+  filters,
+  setFilters,
+  configFilters,
+  onSearch,
+  count,
+  isLoading,
+  setCurrentPage,
+}: PageHeaderProps) {
+  const [initialFilters, setInitialFilters] = React.useState(filters);
+
+  const [exportDisabled, setExportDisabled] = useState(false);
+  const filtersChanged = React.useMemo(() => {
+    return JSON.stringify(initialFilters) !== JSON.stringify(filters);
+  }, [initialFilters, filters]);
+
+  const handleSearch = async () => {
+    setInitialFilters(filters);
+    if (filtersChanged) await setCurrentPage(1);
+    onSearch();
+  };
+
+  const handleDateChange = (date: DateRange | undefined) => {
+    setFilters({ ...filters, fromDate: date?.from, toDate: date?.to });
+  };
+
+  const handleExport = async (ctx: string) => {
+    try {
+      const response = await fetch(
+        (() => {
+          let url = `/cashplus/newfront/templates/extract-action.cfm?ctx=${ctx}`;
+          for (const [key, value] of Object.entries(filters)) {
+            if (value && typeof value !== "object") {
+              if (key === "fromDate" || key === "toDate") {
+                const date = new Date(value as string);
+                url =
+                  url +
+                  `&${key}=${date.getFullYear()}-${String(
+                    date.getMonth() + 1
+                  ).padStart(2, "0")}-${String(date.getDate()).padStart(
+                    2,
+                    "0"
+                  )}`;
+                continue;
+              }
+
+              url = url + `&${key}=${value}`;
+            }
+          }
+          return url;
+        })()
+      );
+
+      if (!response.ok) {
+        throw new Error("Export failed");
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const fileName = `${title.replace(/\s+/g, "_")}_${filters.fromDate}_${
+        filters.toDate
+      }_.csv`;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error("Export error:", error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h1 className="text-2xl font-bold text-[rgb(0,137,149)]">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="rgb(0, 137, 149)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="inline-block mr-2"
+        >
+          <line x1="8" y1="6" x2="21" y2="6" />
+          <line x1="8" y1="12" x2="21" y2="12" />
+          <line x1="8" y1="18" x2="21" y2="18" />
+          <line x1="3" y1="6" x2="3.01" y2="6" />
+          <line x1="3" y1="12" x2="3.01" y2="12" />
+          <line x1="3" y1="18" x2="3.01" y2="18" />
+        </svg>
+        
+        {title}
+        <span className="ml-2 px-2 py-1 text-sm bg-gray-100 text-[rgb(0,137,149)] rounded-full">
+          {count}
+        </span>
+      </h1>
+      <div className="border-b border-gray-100 mb-4"></div>
+      <div className="flex gap-4 flex-wrap justify-between">
+        <DatePickerWithRange
+          dateFrom={filters.fromDate}
+          dateTo={filters.toDate}
+          handleDateChange={handleDateChange}
+        />
+        {configFilters &&
+          configFilters.map((filter: any, index: number) => (
+            <div key={`${filter.name}-${index}`}>
+              {filter.type === "Text" && (
+                <Input
+                  type="text"
+                  placeholder={filter.placeholder}
+                  value={filters[filter.name]}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setFilters({ ...filters, [filter.name]: e.target.value })
+                  }
+                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                    if (e.key === "Enter") {
+                      handleSearch();
+                    }
+                  }}
+                />
+              )}
+              {filter.type === "Select" && (
+                <Select
+                  disabled={filter.disabled || filter.options.length === 0}
+                  value={filters[filter.name]}
+                  onValueChange={(value: string) => {
+                    setFilters({
+                      ...filters,
+                      [filter.name]: value === "_empty" ? undefined : value,
+                    });
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={filter.placeholder} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {useMemo(
+                      () =>
+                        filter.options.map(
+                          (
+                            option: { VALUE: string; NAME: string },
+                            optionIndex: number
+                          ) => (
+                            <SelectItem
+                              key={`${option.VALUE}-${optionIndex}`}
+                              value={option.VALUE || "_empty"}
+                            >
+                              {option.NAME}
+                            </SelectItem>
+                          )
+                        ),
+                      [filter.options]
+                    )}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          ))}
+        <div className="flex gap-2 ml-auto">
+          {configFilters.some((filter: any) => filter.type === "Export") && (
+            <Button
+              disabled={exportDisabled}
+              onClick={async () => {
+                setExportDisabled(true);
+                const exportFilter = configFilters.find(
+                  (filter: any) => filter.type === "Export"
+                );
+                await handleExport(exportFilter?.ctx);
+                const timer = setInterval(() => {
+                  setExportDisabled(false);
+                  clearInterval(timer);
+                }, 30000);
+              }}
+              size="sm"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+              CSV
+            </Button>
+          )}
+          <Button size="sm" onClick={handleSearch} disabled={isLoading}>
+            {filtersChanged ? (
+              <>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.3-4.3" />
+                </svg>
+                Recherche
+              </>
+            ) : (
+              <>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke={"currentColor"}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="reload-icon"
+                  aria-hidden="true"
+                >
+                  <path d="M21 12a9 9 0 11-3-6.74" />
+                  <path d="M21 3v6h-6" />
+                </svg>
+                Actualiser
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/components/ui/calendar.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "./button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

package/src/components/ui/date-picker-with-range.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import {
+  addDays,
+  startOfWeek,
+  endOfWeek,
+  startOfMonth,
+  endOfMonth,
+  subMonths,
+  format,
+  subYears,
+  startOfYear,
+  endOfYear,
+} from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+import { Calendar } from "../../components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/ui/select";
+
+export function DatePickerWithRange({
+  className,
+  dateFrom,
+  dateTo,
+  handleDateChange,
+}: React.HTMLAttributes<HTMLDivElement> & {
+  dateFrom?: Date;
+  dateTo?: Date;
+  handleDateChange?: (range: DateRange | undefined) => void;
+}) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: dateFrom || new Date(2022, 0, 20),
+    to: dateTo || addDays(new Date(2022, 0, 20), 20),
+  });
+
+  const presets = [
+    {
+      label: "Hier",
+      getValue: () => {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        return { from: yesterday, to: yesterday };
+      },
+    },
+    {
+      label: "Cette semaine",
+      getValue: () => {
+        const today = new Date();
+        return { from: startOfWeek(today), to: endOfWeek(today) };
+      },
+    },
+    {
+      label: "Ce mois-ci",
+      getValue: () => {
+        const today = new Date();
+        return { from: startOfMonth(today), to: endOfMonth(today) };
+      },
+    },
+    {
+      label: "Le mois dernier",
+      getValue: () => {
+        const today = new Date();
+        const lastMonth = subMonths(today, 1);
+        return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
+      },
+    },
+    {
+      label: "Cette année",
+      getValue: () => {
+        const today = new Date();
+        return { from: startOfYear(today), to: endOfYear(today) };
+      },
+    },
+    {
+      label: "L'année dernière",
+      getValue: () => {
+        const today = new Date();
+        const lastYear = subYears(today, 1);
+        return { from: startOfYear(lastYear), to: endOfYear(lastYear) };
+      },
+    },
+  ];
+
+  const handleSelect = (newDate: DateRange | undefined) => {
+    setDate(newDate);
+    handleDateChange?.(newDate);
+  };
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Choisissez une date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="flex w-auto flex-col space-y-4 p-4"
+          align="start"
+        >
+          <Select
+            onValueChange={(value) => {
+              const preset = presets.find((preset) => preset.label === value);
+              if (preset) {
+                const newDate = preset.getValue();
+                setDate(newDate);
+                handleDateChange?.(newDate);
+              }
+            }}
+          >
+            <SelectTrigger className="w-[300px]">
+              <SelectValue placeholder="Sélectionnez un préréglage" />
+            </SelectTrigger>
+            <SelectContent position="popper">
+              {presets.map((preset) => (
+                <SelectItem key={preset.label} value={preset.label}>
+                  {preset.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <div className="rounded-md border">
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={date?.from}
+              selected={date}
+              onSelect={handleSelect}
+              numberOfMonths={2}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}