mobigrid-module 1.0.6 → 1.0.8

package/components/CustomTable/CustomTable.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { format } from "date-fns";
+import Icon from "../Icon";
+
+interface TableProps {
+  data: any[];
+  columns: any[];
+  isLoading: boolean;
+}
+
+export function CustomTable({ data, columns, isLoading }: TableProps) {
+  const table = useReactTable({
+    data: isLoading ? [] : data,
+    columns: columns.map((col) => ({
+      accessorKey: col.key,
+      header: col.title,
+      cell: (info) => {
+        if (col.key === "ACTIONS_BUTTONS") {
+          return (
+            <div className="flex gap-2 justify-end">
+              {col.actions?.map((action: any, index: number) => (
+                <button
+                  key={index}
+                  className={`inline-flex items-center px-2 py-1 text-sm rounded-full transition-colors duration-200 ${
+                    index === 0
+                      ? "text-blue-700 bg-blue-50 border border-blue-200 hover:bg-blue-100"
+                      : index === 1
+                      ? "text-green-700 bg-green-50 border border-green-200 hover:bg-green-100"
+                      : index === 2
+                      ? "text-purple-700 bg-purple-50 border border-purple-200 hover:bg-purple-100"
+                      : index === 3
+                      ? "text-orange-700 bg-orange-50 border border-orange-200 hover:bg-orange-100"
+                      : "text-gray-700 bg-gray-50 border border-gray-200 hover:bg-gray-100"
+                  }`}
+                  onClick={() => {
+                    console.log(action.action, info.row.original);
+                  }}
+                >
+                  {action.icon && (
+                      <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"
+                        className="mr-2"
+                      >
+                        <Icon name={action.icon.replace(/^icon-/, '')} className="mr-2" />
+                      </svg>
+                    )}
+                  {action.label}
+                </button>
+              ))}
+            </div>
+          );
+        }
+        if (col.type === "status") {
+          const statusColors: { [key: string]: string } = {
+            PENDING: "bg-yellow-100 text-yellow-800",
+            PAID: "bg-green-100 text-green-800",
+            CANCELLED: "bg-red-100 text-red-800",
+            CANCEL_STARTED: "bg-orange-100 text-orange-800",
+            ECHEC: "bg-gray-100 text-gray-800",
+          };
+          const status = info.getValue() as string;
+          return (
+            <div className="flex items-center justify-center">
+              <span
+                className={`px-2 py-1 rounded-full text-xs font-medium text-center ${
+                  statusColors[status] || "bg-gray-100 text-gray-800"
+                }`}
+              >
+                {status || "-"}
+              </span>
+            </div>
+          );
+        }
+        if (col.type === "money") {
+          return `${info.getValue()} ${col.currency}`;
+        }
+        if (col.type === "date") {
+          return format(new Date(info.getValue() as string), "dd-MM-yyyy");
+        }
+        if (col.scroll) {
+          return (
+            <div className="max-h-24 overflow-y-auto">
+              {info.getValue()}
+            </div>
+          );
+        }
+        return info.getValue();
+      },
+    })),
+    getCoreRowModel: getCoreRowModel(),
+    enableMultiRowSelection: true,
+    enableRowSelection: true,
+    state: {
+      rowSelection: {},
+    },
+  });
+
+  return (
+    <Table className="border border-gray-200 rounded-md">
+      <TableHeader className="bg-gray-50">
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <TableHead key={header.id} className="font-medium text-gray-800 py-2">
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )}
+              </TableHead>
+            ))}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {isLoading ? (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="text-center py-4">
+              <svg
+                className="animate-spin h-5 w-5 mx-auto mb-2"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              Chargement des données...
+            </TableCell>
+          </TableRow>
+        ) : !data || data.length === 0 ? (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="text-center py-4">
+              Aucune donnée disponible
+            </TableCell>
+          </TableRow>
+        ) : (
+          table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id} className="bg-white hover:bg-gray-100">
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  );
+}

package/components/CustomTable/Pagination.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../ui/pagination";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationProps) {
+  const renderPaginationItems = () => {
+    const items = [];
+
+    // Previous button
+    items.push(
+      <PaginationItem key="prev">
+        <PaginationPrevious 
+          href="#" 
+          onClick={(e) => {
+            e.preventDefault();
+            if (currentPage > 1) onPageChange(currentPage - 1);
+          }}
+        />
+      </PaginationItem>
+    );
+
+    // First page
+    items.push(
+      <PaginationItem key={1}>
+        <PaginationLink 
+          href="#" 
+          isActive={currentPage === 1}
+          onClick={(e) => {
+            e.preventDefault();
+            onPageChange(1);
+          }}
+        >
+          1
+        </PaginationLink>
+      </PaginationItem>
+    );
+
+    // Calculate visible page range
+    let startPage = Math.max(2, currentPage - 1);
+    let endPage = Math.min(totalPages - 1, currentPage + 1);
+
+    // Add ellipsis after first page if needed
+    if (startPage > 2) {
+      items.push(
+        <PaginationItem key="ellipsis1">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+
+    // Add middle pages
+    for (let i = startPage; i <= endPage; i++) {
+      items.push(
+        <PaginationItem key={i}>
+          <PaginationLink 
+            href="#" 
+            isActive={currentPage === i}
+            onClick={(e) => {
+              e.preventDefault();
+              onPageChange(i);
+            }}
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    // Add ellipsis before last page if needed
+    if (endPage < totalPages - 1) {
+      items.push(
+        <PaginationItem key="ellipsis2">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+
+    // Last page (if not already included)
+    if (totalPages > 1) {
+      items.push(
+        <PaginationItem key={totalPages}>
+          <PaginationLink 
+            href="#" 
+            isActive={currentPage === totalPages}
+            onClick={(e) => {
+              e.preventDefault();
+              onPageChange(totalPages);
+            }}
+          >
+            {totalPages}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    // Next button
+    items.push(
+      <PaginationItem key="next">
+        <PaginationNext 
+          href="#" 
+          onClick={(e) => {
+            e.preventDefault();
+            if (currentPage < totalPages) onPageChange(currentPage + 1);
+          }}
+        />
+      </PaginationItem>
+    );
+
+    return items;
+  };
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        {renderPaginationItems()}
+      </PaginationContent>
+    </Pagination>
+  );
+}

package/components/Icon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import * as FeatherIcons from 'react-feather';
+import { IconProps as FeatherIconProps } from 'react-feather';
+
+interface IconProps extends Omit<FeatherIconProps, 'ref'> {
+  name: string;
+}
+
+const Icon = ({ name, ...props }: IconProps): JSX.Element | null => {
+  const formatIconName = (iconName: string): string => {
+    return iconName
+      .split(/[-_]/)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join('');
+  };
+
+  const IconComponent = FeatherIcons[formatIconName(name) as keyof typeof FeatherIcons];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found in react-feather library`);
+    return null;
+  }
+
+  return <IconComponent {...props} />;
+};
+
+export default Icon; 

package/components/Layout/PageHeader.tsx

@@ -0,0 +1,270 @@
+import * as React from "react";
+import { DatePickerWithRange } from "../ui/date-picker-with-range";
+import { Button } from "../ui/button";
+import { DateRange } from "react-day-picker";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectItem,
+  SelectContent,
+  SelectValue,
+  SelectTrigger,
+} from "../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/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 }