@pagamio/frontend-commons-lib 0.8.251 → 0.8.253

package/lib/api/ReactQuery.d.ts

@@ -71,6 +71,10 @@ export interface ApiQueryConfig<ResponseData> extends Omit<RequestConfig, 'metho
      * Callback when query errors
      */
     onError?: (error: ApiErrorResponse) => void;
+    /**
+     * Auto-refetch interval in milliseconds (e.g. 30_000 for 30 seconds)
+     */
+    refetchInterval?: number | false;
 }
 /**
  * Hook for GET requests using React Query
@@ -86,7 +90,7 @@ export interface ApiQueryConfig<ResponseData> extends Omit<RequestConfig, 'metho
  * });
  * ```
  */
-export declare function useApiQuery<ResponseData>({ queryKey, endpoint, enabled, staleTime, gcTime, select, onSuccess, onError, ...requestConfig }: ApiQueryConfig<ResponseData> & {
+export declare function useApiQuery<ResponseData>({ queryKey, endpoint, enabled, staleTime, gcTime, select, onSuccess, onError, refetchInterval, ...requestConfig }: ApiQueryConfig<ResponseData> & {
     endpoint: string;
 }): UseQueryResult<ResponseData, ApiErrorResponse>;
 /**

package/lib/api/ReactQuery.js

@@ -62,7 +62,7 @@ export function QueryClientProvider({ children, queryClient, showDevTools }) {
  * });
  * ```
  */
-export function useApiQuery({ queryKey, endpoint, enabled = true, staleTime, gcTime, select, onSuccess, onError, ...requestConfig }) {
+export function useApiQuery({ queryKey, endpoint, enabled = true, staleTime, gcTime, select, onSuccess, onError, refetchInterval, ...requestConfig }) {
     const api = useApi();
     return useQuery({
         queryKey,
@@ -73,6 +73,7 @@ export function useApiQuery({ queryKey, endpoint, enabled = true, staleTime, gcT
         staleTime,
         gcTime,
         select,
+        ...(refetchInterval !== undefined && { refetchInterval }),
     });
 }
 /**

package/lib/auth/utils/TokenManager.js

@@ -9,14 +9,14 @@ const TOKEN_CONFIG = {
         defaultExpiry: 1 / 24,
         path: '/',
         secure: true,
-        sameSite: 'strict',
+        sameSite: 'lax',
     },
     REFRESH_TOKEN: {
         name: 'refreshToken',
         defaultExpiry: 7,
         path: '/',
         secure: true,
-        sameSite: 'strict',
+        sameSite: 'lax',
     },
 };
 export class TokenManager {
@@ -26,7 +26,7 @@ export class TokenManager {
     constructor(config) {
         this.cookieOptions = {
             secure: true,
-            sameSite: 'strict',
+            sameSite: 'lax',
             path: '/',
             ...config.cookieOptions,
         };

package/lib/components/ui/EmptyState.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface EmptyStateProps {
     title: string;
+    description?: string;
+    icon?: React.ReactNode;
 }
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/lib/components/ui/EmptyState.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MdOutlineFolder } from 'react-icons/md';
-const EmptyState = ({ title }) => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-input bg-muted p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: _jsx(MdOutlineFolder, { className: "h-full w-full text-muted-foreground" }) }), _jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: title }), _jsx("p", { className: "text-muted-foreground", children: "We couldn't find any data at this moment. Please try again later or adjust your filters." })] }));
+const EmptyState = ({ title, description, icon }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-input bg-muted p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: icon ?? _jsx(MdOutlineFolder, { className: "h-full w-full text-muted-foreground" }) }), _jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: title }), _jsx("p", { className: "text-muted-foreground", children: description ?? "We couldn't find any data at this moment. Please try again later or adjust your filters." })] }));
 };
 export default EmptyState;

package/lib/components/ui/TimerBadge.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview TimerBadge - Elapsed time display with urgency-based color coding
+ *
+ * Self-updating badge that shows elapsed time from a given start time.
+ * Color transitions green → amber → red based on configurable thresholds.
+ * Designed for operational contexts where time-pressure matters (KDS, order boards).
+ *
+ * @example
+ * ```tsx
+ * <TimerBadge startTime={order.createdAt} warningMinutes={15} dangerMinutes={30} />
+ * ```
+ */
+import * as React from 'react';
+export interface TimerBadgeProps {
+    /** ISO date string or Date object marking when the timer started */
+    startTime: string | Date;
+    /** Minutes elapsed before turning amber (default: 15) */
+    warningMinutes?: number;
+    /** Minutes elapsed before turning red (default: 30) */
+    dangerMinutes?: number;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    className?: string;
+}
+declare const TimerBadge: React.FC<TimerBadgeProps>;
+export default TimerBadge;

package/lib/components/ui/TimerBadge.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview TimerBadge - Elapsed time display with urgency-based color coding
+ *
+ * Self-updating badge that shows elapsed time from a given start time.
+ * Color transitions green → amber → red based on configurable thresholds.
+ * Designed for operational contexts where time-pressure matters (KDS, order boards).
+ *
+ * @example
+ * ```tsx
+ * <TimerBadge startTime={order.createdAt} warningMinutes={15} dangerMinutes={30} />
+ * ```
+ */
+import * as React from 'react';
+import { cn } from '../../helpers/utils';
+// =============================================================================
+// HELPERS
+// =============================================================================
+function getElapsedSeconds(startTime) {
+    const start = typeof startTime === 'string' ? new Date(startTime) : startTime;
+    return Math.floor((Date.now() - start.getTime()) / 1000);
+}
+function formatElapsed(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`;
+}
+// =============================================================================
+// COMPONENT
+// =============================================================================
+const TimerBadge = ({ startTime, warningMinutes = 15, dangerMinutes = 30, size = 'sm', className, }) => {
+    const [elapsed, setElapsed] = React.useState(() => getElapsedSeconds(startTime));
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setElapsed(getElapsedSeconds(startTime));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [startTime]);
+    const minutes = elapsed / 60;
+    const urgency = minutes >= dangerMinutes ? 'danger' : minutes >= warningMinutes ? 'warning' : 'safe';
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full font-mono font-medium tabular-nums', size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm', urgency === 'safe' && 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', urgency === 'warning' && 'bg-amber-500/15 text-amber-600 dark:text-amber-400', urgency === 'danger' && 'bg-red-500/15 text-red-600 dark:text-red-400', className), children: [_jsxs("svg", { className: cn('h-3 w-3 flex-shrink-0', size === 'md' && 'h-3.5 w-3.5'), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] }), formatElapsed(elapsed)] }));
+};
+export default TimerBadge;

package/lib/components/ui/index.d.ts

@@ -55,3 +55,5 @@ export type { ImageUploaderProps } from './ImageUploader';
 export { default as NotificationModal } from './NotificationModal';
 export type { NotificationModalProps } from './NotificationModal';
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './Tooltip';
+export { default as TimerBadge } from './TimerBadge';
+export type { TimerBadgeProps } from './TimerBadge';

package/lib/components/ui/index.js

@@ -56,3 +56,5 @@ export { default as ImageUploader } from './ImageUploader';
 export { default as NotificationModal } from './NotificationModal';
 // Tooltip - v2 shadcn-style tooltip with Radix
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './Tooltip';
+// TimerBadge - elapsed time with urgency coloring (green → amber → red)
+export { default as TimerBadge } from './TimerBadge';

package/lib/styles.css

@@ -2184,6 +2184,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
+.bg-amber-500\/15 {
+  background-color: rgb(245 158 11 / 0.15);
+}
 .bg-amber-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
@@ -2248,6 +2251,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
 }
+.bg-emerald-500\/15 {
+  background-color: rgb(16 185 129 / 0.15);
+}
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -2435,6 +2441,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(240 82 82 / var(--tw-bg-opacity, 1));
 }
+.bg-red-500\/15 {
+  background-color: rgb(240 82 82 / 0.15);
+}
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(224 36 36 / var(--tw-bg-opacity, 1));
@@ -2919,6 +2928,10 @@ video {
 .italic {
   font-style: italic;
 }
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -2955,6 +2968,10 @@ video {
 .text-accent-foreground {
   color: hsl(var(--accent-foreground));
 }
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
 .text-amber-700 {
   --tw-text-opacity: 1;
   color: rgb(180 83 9 / var(--tw-text-opacity, 1));
@@ -5174,6 +5191,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(22 78 99 / var(--tw-text-opacity, 1));
 }
+.dark\:text-emerald-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
+}
 .dark\:text-foreground:is(.dark *) {
   color: hsl(var(--foreground));
 }

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.251",
+  "version": "0.8.253",
   "publishConfig": {
     "access": "public",
     "provenance": false