mobigrid-module 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobigrid-module",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "index.tsx",
   "type": "module",
@@ -63,5 +63,10 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"
-  }
+  },
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "dist/types"
+  ]
 }

package/rollup.config.js

@@ -1,35 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import typescript from "@rollup/plugin-typescript";
-import { terser } from "rollup-plugin-terser";
-import json from '@rollup/plugin-json';
-
-export default {
-  input: "src/index.tsx",
-  output: [
-    {
-      file: "dist/index.tsx",
-      format: "cjs",
-      sourcemap: true,
-    },
-    {
-      file: "dist/index.esm.js",
-      format: "esm",
-      sourcemap: true,
-    },
-  ],
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    typescript({ 
-      tsconfig: "./tsconfig.json",
-      outDir: "./dist",
-      declarationDir: "./dist"
-    }),
-    terser(),
-    json(),
-  ],
-  external: ["react", "react-dom"],
-};

package/src/components/CustomTable/CustomTable.tsx

@@ -1,182 +0,0 @@
-import React from "react";
-import {
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/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/src/components/CustomTable/Pagination.tsx

@@ -1,136 +0,0 @@
-import React from "react";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "../../components/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/src/components/Icon.tsx

@@ -1,27 +0,0 @@
-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/src/components/Layout/PageHeader.tsx

@@ -1,270 +0,0 @@
-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>
-  );
-}