@pagamio/frontend-commons-lib 0.8.281 → 0.8.283
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/auth/components/LoginPage.js +3 -3
- package/lib/components/layout/PageHeader.js +1 -1
- package/lib/dashboard-visuals/v2/components/DashboardWrapperV2.js +2 -2
- package/lib/pagamio-table/data-table/Defaults.js +0 -1
- package/lib/pagamio-table/data-table/index.js +1 -1
- package/package.json +1 -1
|
@@ -254,7 +254,7 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
|
|
|
254
254
|
}
|
|
255
255
|
};
|
|
256
256
|
const showPhoneTab = phoneOtpConfig ?? phonePinConfig;
|
|
257
|
-
const passwordTabLabel =
|
|
257
|
+
const passwordTabLabel = phoneOtpConfig?.passwordTabLabel ?? phonePinConfig?.passwordTabLabel ?? 'Email & Password';
|
|
258
258
|
const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ?? (phonePinConfig ? 'Phone + PIN' : 'Phone + OTP');
|
|
259
259
|
return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [showPhoneTab && (_jsxs("div", { className: "mb-6 flex rounded-lg border border-border overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => setActiveTab('password'), className: `flex-1 py-2 text-sm font-medium transition-colors ${activeTab === 'password' ? 'bg-primary text-primary-foreground' : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), _jsx("button", { type: "button", onClick: () => {
|
|
260
260
|
setActiveTab('phone');
|
|
@@ -266,14 +266,14 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
|
|
|
266
266
|
...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
|
|
267
267
|
password: '',
|
|
268
268
|
rememberMe: false,
|
|
269
|
-
} }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] })), activeTab === 'phone' && showPhoneTab && (_jsxs("div", { className: "space-y-4", children: [phoneError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: phoneError }), phoneStep === 'enterPhone' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: phoneNumberField, onSubmit: handlePhoneFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isSendingOtp ? 'Sending code...' : 'Send code', onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { phoneNumber: '' } }), hasCreateAccount && (_jsx("div", { className: "text-center mt-2", children: _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel }) }))] })), phoneStep === 'enterOtp' && phoneOtpConfig && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter the 6-digit code sent to ", _jsx("span", { className: "font-medium text-foreground", children: phoneNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "Verification Code" }), _jsx(OtpInput, { length: 6, value: phoneOtpValue, onChange: (v) => {
|
|
269
|
+
} }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] })), activeTab === 'phone' && showPhoneTab && (_jsxs("div", { className: "space-y-4", children: [phoneError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: phoneError }), phoneStep === 'enterPhone' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: phoneNumberField, onSubmit: handlePhoneFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: phonePinConfig ? 'Continue' : isSendingOtp ? 'Sending code...' : 'Send code', onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { phoneNumber: '' } }), hasCreateAccount && (_jsx("div", { className: "text-center mt-2", children: _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel }) }))] })), phoneStep === 'enterOtp' && phoneOtpConfig && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter the 6-digit code sent to ", _jsx("span", { className: "font-medium text-foreground", children: phoneNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "Verification Code" }), _jsx(OtpInput, { length: 6, value: phoneOtpValue, onChange: (v) => {
|
|
270
270
|
setPhoneOtpValue(v);
|
|
271
271
|
setPhoneError(null);
|
|
272
272
|
}, disabled: isVerifyingOtp })] }), _jsx(Button, { type: "button", onClick: handleVerifyPhoneOtp, disabled: phoneOtpValue.length !== 6 || isVerifyingOtp, className: "w-full", size: "lg", children: isVerifyingOtp ? 'Verifying...' : 'Verify & Sign In' }), _jsx("div", { className: "text-center text-sm text-muted-foreground", children: canResendPhone ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleResendPhoneOtp, disabled: isResendingOtp, className: "text-sm font-medium text-primary hover:text-primary/90", children: isResendingOtp ? 'Sending...' : 'Resend code' })) : (_jsxs("span", { children: ["Resend code in ", _jsxs("span", { className: "font-medium text-foreground", children: [phoneCountdown, "s"] })] })) }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => {
|
|
273
273
|
setPhoneStep('enterPhone');
|
|
274
274
|
setPhoneOtpValue('');
|
|
275
275
|
setPhoneError(null);
|
|
276
|
-
}, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] })), phoneStep === 'enterPin' && phonePinConfig && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter your 4-digit PIN for",
|
|
276
|
+
}, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] })), phoneStep === 'enterPin' && phonePinConfig && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter your 4-digit PIN for ", _jsx("span", { className: "font-medium text-foreground", children: phoneNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "PIN" }), _jsx(OtpInput, { length: 4, value: phonePinValue, onChange: (v) => {
|
|
277
277
|
setPhonePinValue(v);
|
|
278
278
|
setPhoneError(null);
|
|
279
279
|
}, disabled: isLoggingInWithPin })] }), _jsx(Button, { type: "button", onClick: handleLoginWithPin, disabled: phonePinValue.length !== 4 || isLoggingInWithPin, className: "w-full", size: "lg", children: isLoggingInWithPin ? 'Signing in...' : 'Sign In' }), phonePinConfig.onForgotPin && (_jsx("div", { className: "text-center", children: _jsx(Button, { type: "button", variant: "link", onClick: phonePinConfig.onForgotPin, className: "text-sm text-primary hover:underline", children: "Forgot PIN?" }) })), _jsx(Button, { type: "button", variant: "ghost", onClick: () => {
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useTranslation } from '../../translations';
|
|
3
3
|
const AppPageHeader = ({ title, description }) => {
|
|
4
4
|
const { t } = useTranslation();
|
|
5
|
-
return (_jsxs("div", { className: "mb-
|
|
5
|
+
return (_jsxs("div", { className: "mb-2", children: [_jsx("h1", { className: "text-2xl font-bold", children: t(title) }), description && _jsx("p", { className: "text-1xl text-muted-foreground", children: t(description) })] }));
|
|
6
6
|
};
|
|
7
7
|
export default AppPageHeader;
|
|
@@ -50,7 +50,7 @@ import { DashboardStatCardRow } from './DashboardStatCardRow';
|
|
|
50
50
|
const DashboardHeader = ({ title, subtitle, showDateFilter = false, dateFilterOptions = DEFAULT_DATE_FILTER_OPTIONS, dateFilter, onDateFilterChange, useDateRangePicker = false, dateRange, onDateRangeChange, filters, filterValues, onFilterChange, showRefresh = true, onRefresh, loading = false, actions, className, }) => {
|
|
51
51
|
// Convert DateRangeValue to DateRange for the picker
|
|
52
52
|
const pickerValue = dateRange ? { from: dateRange.from, to: dateRange.to } : undefined;
|
|
53
|
-
return (_jsxs("div", { className: cn('
|
|
53
|
+
return (_jsxs("div", { className: cn('flex flex-wrap items-center justify-between gap-4', className), children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: title }), subtitle && _jsx("p", { className: "text-muted-foreground", children: subtitle })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [filters?.map((filter) => (_jsxs(Select, { value: filterValues?.[filter.id] || 'all', onValueChange: (value) => onFilterChange?.(filter.id, value === 'all' ? '' : value), children: [_jsx(SelectTrigger, { className: "w-[180px] bg-card border-border", children: _jsx(SelectValue, { placeholder: filter.placeholder ?? `All ${filter.label}` }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: filter.placeholder ?? `All ${filter.label}` }), filter.options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, filter.id))), useDateRangePicker && (_jsx(DateRangePickerWithPresets, { value: pickerValue, selectedPreset: dateFilter, onChange: (range, preset) => {
|
|
54
54
|
onDateRangeChange?.(range, preset);
|
|
55
55
|
if (preset) {
|
|
56
56
|
onDateFilterChange(preset);
|
|
@@ -104,7 +104,7 @@ const DashboardWrapperV2 = ({ header, sections, userName = 'User', businessUnitI
|
|
|
104
104
|
if (!businessUnitId && emptyState) {
|
|
105
105
|
return (_jsx(DashboardEmptyState, { icon: emptyState.icon, title: emptyState.title, description: emptyState.description, action: emptyState.action }));
|
|
106
106
|
}
|
|
107
|
-
return (_jsxs("div", { className: cn('
|
|
107
|
+
return (_jsxs("div", { className: cn('transition-[margin-left] duration-200 ease-in-out', className), children: [header && (_jsx(DashboardHeader, { title: resolveTitle(), subtitle: header.subtitle, showDateFilter: header.showDateFilter, dateFilterOptions: header.dateFilterOptions || DEFAULT_DATE_FILTER_OPTIONS, dateFilter: dateFilter, onDateFilterChange: handleDateFilterChange, useDateRangePicker: header.useDateRangePicker, dateRange: dateRange, onDateRangeChange: onDateRangeChange, filters: header.filters, filterValues: filterValues, onFilterChange: onFilterChange, showRefresh: header.showRefresh, onRefresh: onRefresh, loading: loading, actions: header.actions, className: header.className })), _jsx("div", { className: contentClassName, children: sections.map((section) => (_jsx(SectionRenderer, { section: section, loading: loading }, section.type === 'stat-cards'
|
|
108
108
|
? section.config.id
|
|
109
109
|
: section.type === 'charts'
|
|
110
110
|
? section.config.id
|
|
@@ -179,6 +179,6 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
|
|
|
179
179
|
});
|
|
180
180
|
// ── Toolbar rendering ──────────────────────────────────────────────
|
|
181
181
|
const showCustomToolbar = toolbarMode === 'custom' && (!!toolbar || !!search || !!filtering);
|
|
182
|
-
return (_jsxs("div", {
|
|
182
|
+
return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { className: "border border-border rounded-md overflow-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
|
|
183
183
|
};
|
|
184
184
|
export default PagamioTable;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.283",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|