@pagamio/frontend-commons-lib 0.8.239 → 0.8.242

package/lib/permissions/hooks.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Check if the current user has a specific permission.
+ * @example usePermission("order", "refund") // → true/false
+ */
+export declare function usePermission(resource: string, action: string): boolean;
+/**
+ * Check if a feature flag is enabled.
+ * @example useFeature("inventory.transfers") // → true/false
+ */
+export declare function useFeature(flag: string): boolean;
+/**
+ * Check if the user has access to a specific scope.
+ * @example useScope("store:123") // → true/false
+ */
+export declare function useScope(scope: string): boolean;
+/**
+ * Batch permission check — returns an array of booleans in the same order.
+ * @example usePermissions([["order","refund"], ["order","create"]]) // → [true, false]
+ */
+export declare function usePermissions(checks: [resource: string, action: string][]): boolean[];

package/lib/permissions/hooks.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { usePermissionContext } from './PermissionProvider';
+/**
+ * Check if the current user has a specific permission.
+ * @example usePermission("order", "refund") // → true/false
+ */
+export function usePermission(resource, action) {
+    const { can } = usePermissionContext();
+    return can(resource, action);
+}
+/**
+ * Check if a feature flag is enabled.
+ * @example useFeature("inventory.transfers") // → true/false
+ */
+export function useFeature(flag) {
+    const { hasFeature } = usePermissionContext();
+    return hasFeature(flag);
+}
+/**
+ * Check if the user has access to a specific scope.
+ * @example useScope("store:123") // → true/false
+ */
+export function useScope(scope) {
+    const { hasScope } = usePermissionContext();
+    return hasScope(scope);
+}
+/**
+ * Batch permission check — returns an array of booleans in the same order.
+ * @example usePermissions([["order","refund"], ["order","create"]]) // → [true, false]
+ */
+export function usePermissions(checks) {
+    const { can } = usePermissionContext();
+    return useMemo(() => checks.map(([resource, action]) => can(resource, action)), [can, JSON.stringify(checks)]);
+}

package/lib/permissions/index.d.ts

@@ -0,0 +1,4 @@
+export { Can } from './Can';
+export { usePermission, useFeature, useScope, usePermissions } from './hooks';
+export { PermissionProvider, usePermissionContext } from './PermissionProvider';
+export type { Permission, PermissionPolicy } from './types';

package/lib/permissions/index.js

@@ -0,0 +1,3 @@
+export { Can } from './Can';
+export { usePermission, useFeature, useScope, usePermissions } from './hooks';
+export { PermissionProvider, usePermissionContext } from './PermissionProvider';

package/lib/permissions/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Frontend Permission Engine Types
+ *
+ * Routes check identity (isAuthenticated, roleGroup).
+ * Components check capabilities (usePermission).
+ */
+export interface Permission {
+    resource: string;
+    action: string;
+    scope?: string;
+}
+export interface PermissionPolicy {
+    /** Array of granted permissions */
+    permissions: Permission[];
+    /** Feature flags — "is inventory.transfers enabled?" */
+    features: Record<string, boolean>;
+    /** Scopes the user can access — "store:123", "org:456" */
+    scopes: string[];
+}

package/lib/permissions/types.js

@@ -0,0 +1,7 @@
+/**
+ * Frontend Permission Engine Types
+ *
+ * Routes check identity (isAuthenticated, roleGroup).
+ * Components check capabilities (usePermission).
+ */
+export {};

package/lib/shared/hooks/useContainerWidth.d.ts

@@ -1,2 +1,2 @@
 import { type RefObject } from 'react';
-export declare function useContainerWidth<T extends HTMLElement>(): [RefObject<T>, number];
+export declare function useContainerWidth<T extends HTMLElement>(): [RefObject<T | null>, number];

package/lib/shared/hooks/useImageUpload.d.ts

@@ -5,7 +5,7 @@ export interface UploadResponse {
 export interface UseImageUploadProps {
     project: 'vas' | 'stocklink' | 'events' | 'commerce';
     env: 'dev' | 'uat' | 'prod';
-    endpoint?: string;
+    endpoint: string;
 }
 export declare const useImageUpload: ({ project, env, endpoint }: UseImageUploadProps) => {
     getPresignedUrl: (fileName: string, contentType: string) => Promise<UploadResponse>;

package/lib/shared/hooks/useImageUpload.js

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react';
 import { generateSecureRandomString, uploadFileWithXHR } from '../utils/functionHelper';
 export const useImageUpload = ({ project, env, endpoint }) => {
-    const resolvedEndpoint = endpoint ?? process.env.NEXT_PUBLIC_UPLOAD_URL_ENDPOINT;
+    const resolvedEndpoint = endpoint;
     if (!resolvedEndpoint) {
-        throw new Error('NEXT_PUBLIC_UPLOAD_URL_ENDPOINT is not configured.');
+        throw new Error('"endpoint" is required. Pass the upload URL endpoint explicitly');
     }
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);

package/lib/styles.css

@@ -105,7 +105,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -1703,6 +1703,9 @@ input[type="range"]::-ms-fill-lower {
 .min-h-\[60px\] {
   min-height: 60px;
 }
+.min-h-\[calc\(100vh-5rem\)\] {
+  min-height: calc(100vh - 5rem);
+}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -2537,6 +2540,9 @@ input[type="range"]::-ms-fill-lower {
   --tw-border-opacity: 1;
   border-color: rgb(214 31 105 / var(--tw-border-opacity, 1));
 }
+.border-primary {
+  border-color: hsl(var(--primary));
+}
 .border-purple-500 {
   --tw-border-opacity: 1;
   border-color: rgb(144 97 249 / var(--tw-border-opacity, 1));
@@ -2646,10 +2652,6 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(235 245 255 / var(--tw-bg-opacity, 1));
 }
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 131 248 / var(--tw-bg-opacity, 1));
-}
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(28 100 242 / var(--tw-bg-opacity, 1));
@@ -3912,18 +3914,14 @@ input[type="range"]::-ms-fill-lower {
 }
 .backdrop-blur-md {
   --tw-backdrop-blur: blur(12px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -3932,6 +3930,11 @@ input[type="range"]::-ms-fill-lower {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[margin-left\] {
+  transition-property: margin-left;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4275,10 +4278,6 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(195 221 253 / var(--tw-bg-opacity, 1));
 }
-.hover\:bg-blue-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(28 100 242 / var(--tw-bg-opacity, 1));
-}
 .hover\:bg-blue-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 66 159 / var(--tw-bg-opacity, 1));
@@ -4417,6 +4416,9 @@ input[type="range"]::-ms-fill-lower {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:opacity-90:hover {
+  opacity: 0.9;
+}
 .hover\:shadow:hover {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -4430,10 +4432,6 @@ input[type="range"]::-ms-fill-lower {
 .focus\:z-10:focus {
   z-index: 10;
 }
-.focus\:border-blue-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(63 131 248 / var(--tw-border-opacity, 1));
-}
 .focus\:border-blue-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(28 100 242 / var(--tw-border-opacity, 1));
@@ -4450,6 +4448,9 @@ input[type="range"]::-ms-fill-lower {
   --tw-border-opacity: 1;
   border-color: rgb(5 122 85 / var(--tw-border-opacity, 1));
 }
+.focus\:border-primary:focus {
+  border-color: hsl(var(--primary));
+}
 .focus\:border-red-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(240 82 82 / var(--tw-border-opacity, 1));
@@ -4512,10 +4513,6 @@ input[type="range"]::-ms-fill-lower {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(118 169 250 / var(--tw-ring-opacity, 1));
 }
-.focus\:ring-blue-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity, 1));
-}
 .focus\:ring-blue-600:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity, 1));
@@ -4632,6 +4629,9 @@ input[type="range"]::-ms-fill-lower {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(214 31 105 / var(--tw-ring-opacity, 1));
 }
+.focus\:ring-primary:focus {
+  --tw-ring-color: hsl(var(--primary));
+}
 .focus\:ring-purple-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity, 1));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.239",
+  "version": "0.8.242",
   "publishConfig": {
     "access": "public",
     "provenance": false
@@ -19,6 +19,14 @@
       "types": "./lib/index.d.ts",
       "default": "./lib/index.js"
     },
+    "./dashboard-visuals": {
+      "types": "./lib/dashboard-visuals/index.d.ts",
+      "default": "./lib/dashboard-visuals/index.js"
+    },
+    "./dashboard-visuals/v2": {
+      "types": "./lib/dashboard-visuals/v2/index.d.ts",
+      "default": "./lib/dashboard-visuals/v2/index.js"
+    },
     "./components/layout": {
       "types": "./lib/components/layout/index.d.ts",
       "default": "./lib/components/layout/index.js"
@@ -85,106 +93,164 @@
     "extract-translations": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.5",
-    "@heroicons/react": "^2.1.5",
-    "@hookform/resolvers": "^3.9.0",
-    "@mantine/core": "6.0.21",
-    "@mantine/dates": "6.0.21",
-    "@mantine/hooks": "6.0.21",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tabler/icons-react": "^3.23.0",
-    "@tanstack/react-query": "^5.90.16",
-    "@tanstack/react-query-devtools": "^5.91.2",
-    "@tanstack/react-table": "^8.20.5",
-    "@testing-library/react": "^16.0.1",
-    "@types/file-saver": "^2.0.7",
-    "@types/papaparse": "^5.3.15",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
-    "apexcharts": "^4.4.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
-    "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
-    "echarts": "^5.5.1",
-    "echarts-for-react": "^3.0.2",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-unicorn": "^57.0.0",
     "file-saver": "^2.0.5",
-    "flowbite": "^2.5.2",
-    "flowbite-react": "^0.10.2",
     "js-cookie": "^3.0.5",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.441.0",
-    "mantine-react-table": "^1.3.4",
-    "next": "^16.0.10",
     "papaparse": "^5.4.1",
-    "react": "^19.2.3",
-    "react-apexcharts": "^1.7.0",
-    "react-date-range": "^2.0.1",
-    "react-datepicker": "^7.6.0",
-    "react-day-picker": "^9.4.4",
-    "react-dom": "^19.2.3",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.53.1",
-    "react-icons": "^5.3.0",
-    "react-phone-number-input": "^3.4.12",
-    "react-table": "^7.8.0",
-    "swr": "^2.3.3",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.1.0",
     "xlsx": "^0.18.5",
     "zod": "^3.23.8"
   },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@heroicons/react": "^2.0.0",
+    "@hookform/resolvers": "^3.0.0",
+    "@mantine/core": ">=6.0.0",
+    "@mantine/dates": ">=6.0.0",
+    "@mantine/hooks": ">=6.0.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@tabler/icons-react": "^3.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "apexcharts": "^4.0.0",
+    "cmdk": "^1.0.0",
+    "echarts": "^5.0.0",
+    "echarts-for-react": "^3.0.0",
+    "flowbite-react": "^0.10.0",
+    "lucide-react": ">=0.400.0",
+    "mantine-react-table": "^1.3.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-apexcharts": "^1.5.0",
+    "react-date-range": "^2.0.0",
+    "react-datepicker": "^7.0.0",
+    "react-day-picker": "^9.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-dropzone": "^14.0.0",
+    "react-hook-form": "^7.0.0",
+    "react-icons": "^5.0.0",
+    "react-phone-number-input": "^3.0.0",
+    "react-table": "^7.0.0",
+    "swr": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query-devtools": {
+      "optional": true
+    },
+    "apexcharts": {
+      "optional": true
+    },
+    "echarts": {
+      "optional": true
+    },
+    "echarts-for-react": {
+      "optional": true
+    },
+    "react-apexcharts": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.2.2",
+    "@emotion/react": "^11.0.0",
+    "@heroicons/react": "^2.0.0",
+    "@hookform/resolvers": "^3.0.0",
+    "@mantine/core": ">=6.0.0",
+    "@mantine/dates": ">=6.0.0",
+    "@mantine/hooks": ">=6.0.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@tabler/icons-react": "^3.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
     "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/papaparse": "^5.3.15",
+    "@types/react": "^19",
     "@types/react-date-range": "^1.4.10",
-    "@types/react-dom": "^18",
+    "@types/react-dom": "^19",
     "@types/react-dropzone": "^5.1.0",
     "@types/react-table": "^7.7.20",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "apexcharts": "^4.0.0",
     "autoprefixer": "^10.4.20",
+    "cmdk": "^1.0.0",
     "concurrently": "^9.0.1",
     "copyfiles": "^2.4.1",
+    "echarts": "^5.0.0",
+    "echarts-for-react": "^3.0.0",
     "eslint": "^9.22.0",
     "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-plugin-unicorn": "^57.0.0",
+    "flowbite-react": "^0.10.0",
     "husky": "^9.1.7",
     "i18next-scanner": "^4.4.0",
     "lint-staged": "^15.5.0",
+    "lucide-react": ">=0.400.0",
+    "mantine-react-table": "^1.3.0",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-apexcharts": "^1.5.0",
+    "react-date-range": "^2.0.0",
+    "react-datepicker": "^7.0.0",
+    "react-day-picker": "^9.0.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.0.0",
+    "react-hook-form": "^7.0.0",
+    "react-icons": "^5.0.0",
+    "react-phone-number-input": "^3.0.0",
+    "react-table": "^7.0.0",
+    "swr": "^2.0.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5",
-    "vite": "^4.0.0"
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.9.3"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint . --fix"