@stratametriq/id-card-designer 1.16.0 → 1.17.1
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/README.md +418 -15
- package/dist/index.es.js +7704 -5809
- package/dist/index.js +117 -97
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A universal, dynamic, and highly customizable **ID Card Designer & Batch Print Dashboard** for React, Vue, Angular, and Vanilla JS.
|
|
4
4
|
|
|
5
|
-
> **Current release:** 1.
|
|
5
|
+
> **Current release:** 1.17.1
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -10,8 +10,14 @@ A universal, dynamic, and highly customizable **ID Card Designer & Batch Print D
|
|
|
10
10
|
|
|
11
11
|
- [Overview](#overview)
|
|
12
12
|
- [Live Demo](#live-demo)
|
|
13
|
-
- [
|
|
13
|
+
- [Pricing / License](#pricing--licensing-important)
|
|
14
|
+
- [What's New in v1.17.1](#whats-new-in-v1171)
|
|
15
|
+
- [What's New in v1.17.0](#whats-new-in-v1170)
|
|
16
|
+
- [What's New in v1.16.0](#whats-new-in-v160)
|
|
17
|
+
- [What's New in v1.15.0](#whats-new-in-v150)
|
|
14
18
|
- [Features](#features)
|
|
19
|
+
- [Enterprise Roles & Permissions (RBAC)](#enterprise-roles--permissions-rbac)
|
|
20
|
+
- [Enterprise Audit Logs & Access Trail](#enterprise-audit-logs--access-trail)
|
|
15
21
|
- [ID Card Verification & Card Lifecycle](#id-card-verification--card-lifecycle)
|
|
16
22
|
- [How It Works](#how-it-works)
|
|
17
23
|
- [Import Data](#import-data)
|
|
@@ -22,7 +28,6 @@ A universal, dynamic, and highly customizable **ID Card Designer & Batch Print D
|
|
|
22
28
|
- [Privacy](#privacy)
|
|
23
29
|
- [Developer Docs](#developer-docs)
|
|
24
30
|
- [NPM](#npm)
|
|
25
|
-
- [Pricing / License](#pricing--license)
|
|
26
31
|
- [FAQ](#faq)
|
|
27
32
|
|
|
28
33
|
---
|
|
@@ -39,7 +44,7 @@ It is designed for applications such as:
|
|
|
39
44
|
- Membership systems
|
|
40
45
|
- Internal identity-card workflows
|
|
41
46
|
|
|
42
|
-
The package combines **visual card design** with **structured data, batch generation, card lifecycle management, and live digital verification** so developers do not need to build an ID-card production workflow from scratch.
|
|
47
|
+
The package combines **visual card design** with **structured data, batch generation, card lifecycle management, enterprise role-based access control, and live digital verification** so developers do not need to build an ID-card production workflow from scratch.
|
|
43
48
|
|
|
44
49
|
---
|
|
45
50
|
|
|
@@ -72,7 +77,46 @@ Free for personal projects, students, open-source initiatives, and non-profit or
|
|
|
72
77
|
|
|
73
78
|
---
|
|
74
79
|
|
|
75
|
-
## What's New in v1.
|
|
80
|
+
## What's New in v1.17.1
|
|
81
|
+
- **👥 Team User Provisioning Cockpit & Granular Permission Editor:**
|
|
82
|
+
- Expanded `<RoleSwitcherModal />` with a full-featured operator management dashboard supporting **+ Add User**, **Edit User**, and **Delete User**.
|
|
83
|
+
- **15-Permission Granular Matrix:** Super Admins can customize exact privileges (Templates, Rosters, Issuance/Security, Compliance Audit) for any operator with live checkbox toggles and real-time counter badges (`X of 15 Perms`).
|
|
84
|
+
- **Protected Primary Super Admin:** Safety guardrails preventing accidental deletion or demotion of the root system administrator.
|
|
85
|
+
- **🌐 Open-Source Neutral Identity Architecture:**
|
|
86
|
+
- Removed hardcoded personal names from the public library core in favor of neutral `System Administrator` (`admin@organization.com`, `isPrimaryAdmin: true`).
|
|
87
|
+
- Seamlessly accepts the host application's authenticated session user via `<IdCardManager currentUser={session.user} />` so that whoever signs in first becomes the active Super Admin.
|
|
88
|
+
- **⚡ Production SaaS Real Database Synchronization:**
|
|
89
|
+
- Added turnkey database synchronization props: `users`, `onAddUser`, `onUpdateUser`, and `onDeleteUser` enabling direct connection to PostgreSQL, Supabase, MySQL, MongoDB, Firebase, Laravel, and REST/GraphQL backends.
|
|
90
|
+
- **Dual-Mode Persistence:** Automatically switches to browser IndexedDB (`localforage`) when database callback props are omitted, guaranteeing offline resilience and zero-config prototyping.
|
|
91
|
+
- **🏷️ Master Header Operator Identity Pill:**
|
|
92
|
+
- Top-right profile pill and studio canvas persona pill dynamically reflect the authenticated operator's avatar, full name, and role badge, with instant 1-click access to the User & Role Management Cockpit.
|
|
93
|
+
- **📦 Public Utility Exports:**
|
|
94
|
+
- Exported `getUserPermissions` and `STORAGE_KEY_USERS` (`ricd_users_v1`) from `@stratametriq/id-card-designer`.
|
|
95
|
+
|
|
96
|
+
## What's New in v1.17.0
|
|
97
|
+
- **👥 Enterprise Role-Based Access Control (RBAC):** Complete, modular RBAC architecture designed for institutional ERPs, healthcare portals, universities, and enterprise identity deployments.
|
|
98
|
+
- **15 Granular Permissions:** Structured across Card Templates (`templates:read`, `templates:write`, `templates:history`), Cardholder Rosters (`records:read`, `records:create`, `records:edit`, `records:delete`, `records:import`, `records:export`), Production & Issuance (`issuance:export`), Physical Security (`security:verify`, `security:revoke`), Organization & Branch Management (`org:manage`), and Compliance Audit Trails (`audit:view`, `audit:clear`).
|
|
99
|
+
- **6 Pre-Configured Personas:** Complete with avatars, departments, colors, and badge tokens:
|
|
100
|
+
- 🛡️ **Super Admin** (`System Administrator` / Host App Session User): Full unrestricted authority across all features, settings, and purge actions.
|
|
101
|
+
- 🎨 **Template Designer** (`Maya Lin`): Visual canvas drafting, element styling, watermark management, and revision history. Rosters and batch printing are locked.
|
|
102
|
+
- 📋 **Data Registrar** (`Rahul Mehta`): Cardholder profiles, CSV/Excel/ZIP data imports, and webcam photo capture. Template layouts and record deletions are locked.
|
|
103
|
+
- 🖨️ **Issuance Officer** (`Carlos Mendez`): High-resolution 300 DPI batch PDF rendering and ZIP package downloads. Template layouts and record deletions are locked.
|
|
104
|
+
- 🔍 **Security Verifier** (`Officer David Briggs`): Physical gate checkpoint scanning, barcode validation, and credential lifecycle status management (`active`, `suspended`, `revoked`, `lost`).
|
|
105
|
+
- 📊 **Compliance Auditor** (`Evelyn Vance`): Read-only inspection of templates and rosters, paired with full access to inspect diffs and export audit trails. Log purging is permanently disabled.
|
|
106
|
+
- **100% Backward Compatibility:** If no user or role prop is provided, `<IdCardManager />` automatically defaults to full unrestricted mode (`super_admin`), ensuring zero breaking changes for existing library consumers.
|
|
107
|
+
- **Per-User Custom Overrides:** Supports `user.customPermissions` arrays to augment base role privileges without altering global role matrices.
|
|
108
|
+
- **🛡️ Declarative Action Gating (`<PermissionGate />`):** Seamless conditional rendering, hiding, or disabled state rendering with custom security explanation tooltips (`disabledTooltip`).
|
|
109
|
+
- **🎛️ Interactive Persona Simulator (`<RoleSwitcherModal />`):** Built-in modal featuring an interactive Permission Matrix Inspector organized across Templates, Rosters, Issuance/Security, and Audit Logs for 1-click persona switching in demo and QA environments.
|
|
110
|
+
- **🔒 Read-Only Template Inspector Mode (`<IdCardDesignerModal />`):** When users possess `templates:read` but lack `templates:write`, the designer launches in read-only mode with visual warnings, locking canvas edits and template saves.
|
|
111
|
+
- **🚨 Non-Repudiation Security Audit Trails:** Every authorization denial automatically logs an `ACCESS_DENIED` event under `AUDIT_CATEGORIES.SECURITY` with actor identity and required permissions.
|
|
112
|
+
|
|
113
|
+
## What's New in v1.16.0
|
|
114
|
+
- **📜 Enterprise Audit Logs & Access Trail System (`<AuditLogModal />`):**
|
|
115
|
+
- Enterprise audit trail cockpit equipped with KPI metrics counters (Total Events, Issuance / Prints, Record Modifications, Security Flags).
|
|
116
|
+
- Multi-dimensional filtering across full-text search, action categories (`issuance`, `record`, `template`, `security`, `organization`), severity levels (`info`, `warning`, `critical`), and departments.
|
|
117
|
+
- Interactive timeline cards featuring expandable visual **Before vs. After Field Diffs** with syntax-highlighted values and a collapsible Raw JSON inspector for technical compliance auditors.
|
|
118
|
+
- One-click **Export CSV** generating an official audit certificate spreadsheet formatted with UTF-8 BOM encoding for Microsoft Excel.
|
|
119
|
+
- Offline-first IndexedDB persistence paired with an `onAuditLog` callback prop for real-time synchronization with enterprise SIEM and database backends (Node.js, Laravel, Supabase, Postgres).
|
|
76
120
|
- **⚡ Massive Bundle Size Reduction (75%+ Smaller):** Implemented aggressive code-splitting and dynamic `import()` across all heavy modules (`jspdf`, `exceljs`, `jszip`, `html2canvas`, `@imgly/background-removal`, `canvas-confetti`). The core bundle footprint shrank from ~3.35MB to ~785KB, drastically speeding up initial page load and rendering in host apps.
|
|
77
121
|
- **🔒 Zero-Vulnerability Security Architecture:** Fully eliminated the deprecated `xlsx` library, resolving all high/critical prototype pollution and ReDoS CVEs. Standardized on secure, lightweight `exceljs` and `papaparse`.
|
|
78
122
|
- **📑 Clean Template Generation & Smart Import Mapping:** Fixed duplicate and repetitive column headers in generated Excel/CSV templates. Intelligent synonym normalization prevents redundant columns (e.g., `Class`, `classSec`, `Phone`, `Phone_no`) and automatically binds incoming data seamlessly.
|
|
@@ -111,12 +155,301 @@ Free for personal projects, students, open-source initiatives, and non-profit or
|
|
|
111
155
|
- **🧠 Conditional Rendering:** Text elements can use JavaScript expressions for conditional output (e.g., `{{ department === 'HR' ? 'Red' : 'Blue' }}`).
|
|
112
156
|
- **🛡️ Digital ID Card Verification:** Built-in `<IdCardVerificationModal />` with real-time status banners, anti-tampering photo match, HTML5 camera scanner, and public verification URLs.
|
|
113
157
|
- **🔄 Full Card Lifecycle Management:** Complete state machine tracking (`Active`, `Issued`, `Draft`, `Suspended`, `Revoked`, `Lost`), interactive table status pills, batch status transitions, and automatic issuance logging on print.
|
|
158
|
+
- **👥 Enterprise Role-Based Access Control (RBAC):** Built-in 15 granular permissions across templates, rosters, batch printing, security, organization, and compliance. Pre-configured with 6 operator roles (`Super Admin`, `Template Designer`, `Data Registrar`, `Issuance Officer`, `Security Verifier`, `Compliance Auditor`), declarative `<PermissionGate />`, and interactive `<RoleSwitcherModal />`.
|
|
159
|
+
- **📜 Enterprise Audit Trail & SIEM Integration:** Built-in `<AuditLogModal />` featuring real-time event recording, before-and-after field diffs, Excel UTF-8 BOM CSV export, non-repudiation actor tracking, and an `onAuditLog` callback for external SIEM / database synchronization.
|
|
114
160
|
- **🛡️ Brand & Security Watermark Suite:** Add customizable text watermarks (`STRATAMETRIQ`, `CONFIDENTIAL`, `SAMPLE`), uploaded brand seal logos, and repeating security tile patterns with live opacity, rotation, and layer controls.
|
|
115
161
|
- **🔲 Smart Alignment Guides:** Snap elements to the center of the card or align them with other elements using visual color-coded guides (Purple for center, Red for edges).
|
|
116
162
|
- **⌨️ Keyboard Shortcuts:** Navigate the editor faster using Undo/Redo (`Ctrl+Z`, `Ctrl+Y`), Duplicate (`Ctrl+C`, `Ctrl+V`), Delete, and Arrow Key nudging.
|
|
117
163
|
|
|
118
164
|
---
|
|
119
165
|
|
|
166
|
+
## Enterprise Roles & Permissions (RBAC)
|
|
167
|
+
|
|
168
|
+
Modern universities, hospitals, corporate security departments, and government facilities enforce **Segregation of Duties (SoD)**:
|
|
169
|
+
- **Card Designers** should only style badge layouts and watermarks, not access confidential student/patient rosters.
|
|
170
|
+
- **Data Registrars** should enter student or employee profiles, but cannot alter card dimensions or delete historical records.
|
|
171
|
+
- **Print Officers** should execute high-resolution batch PDF printing, but cannot change data or templates.
|
|
172
|
+
- **Security Officers** at turnstiles require verification scanner tools, but should not be allowed to purge audit histories.
|
|
173
|
+
- **Compliance Auditors** require read-only access with before/after diff inspection, but zero modification authority.
|
|
174
|
+
|
|
175
|
+
`@stratametriq/id-card-designer` provides an **enterprise-grade RBAC engine** out of the box with zero additional configuration required.
|
|
176
|
+
|
|
177
|
+
### 1. Granular Permission Matrix (15 Permissions)
|
|
178
|
+
|
|
179
|
+
| Category | Permission Key | Description |
|
|
180
|
+
| :--- | :--- | :--- |
|
|
181
|
+
| **Templates** | `templates:read` | View and inspect card design templates |
|
|
182
|
+
| | `templates:write` | Create, modify, and save card designs and element styles |
|
|
183
|
+
| | `templates:history` | Restore or delete previous template version snapshots |
|
|
184
|
+
| **Rosters** | `records:read` | View the cardholder directory and record details |
|
|
185
|
+
| | `records:create` | Add new cardholder records manually or via webcam |
|
|
186
|
+
| | `records:edit` | Update existing cardholder profile data or photos |
|
|
187
|
+
| | `records:delete` | Delete individual cardholder records or perform bulk deletion |
|
|
188
|
+
| | `records:import` | Upload bulk spreadsheets (`.xlsx`, `.csv`) and photo ZIP archives |
|
|
189
|
+
| | `records:export` | Export directory rosters to formatted Excel or CSV files |
|
|
190
|
+
| **Issuance** | `issuance:export` | Generate 300 DPI batch print PDFs and high-res ZIP archives |
|
|
191
|
+
| **Security** | `security:verify` | Access gate verification scanner and optical barcode validation |
|
|
192
|
+
| | `security:revoke` | Alter credential lifecycle status (`Active`, `Suspended`, `Revoked`, `Lost`) |
|
|
193
|
+
| **Organization** | `org:manage` | Manage institutional assets, brand logos, signatories, and branches |
|
|
194
|
+
| **Audit Trails** | `audit:view` | Inspect compliance event history, diff timelines, and export audit CSV |
|
|
195
|
+
| | `audit:clear` | Purge audit history logs (restricted to Super Administrators) |
|
|
196
|
+
|
|
197
|
+
### 2. Standard Pre-Configured Personas
|
|
198
|
+
|
|
199
|
+
| Persona Role | Key Operator Persona | Badge | Authorized Capabilities |
|
|
200
|
+
| :--- | :--- | :--- | :--- |
|
|
201
|
+
| `super_admin` | Dr. Arthur Pendelton | 🛡️ `Super Admin` | Unrestricted authority across all features, settings, and purge actions. |
|
|
202
|
+
| `template_designer` | Maya Lin | 🎨 `Designer` | Template drafting, element styling, watermarks, version history. Rosters locked. |
|
|
203
|
+
| `data_registrar` | Rahul Mehta | 📋 `Registrar` | Cardholder data entry, CSV/Excel/ZIP bulk imports, webcam capture. Templates locked. |
|
|
204
|
+
| `issuance_officer` | Carlos Mendez | 🖨️ `Production` | Batch 300 DPI PDF rendering, single card print, ZIP archive generation. |
|
|
205
|
+
| `security_verifier` | Officer David Briggs | 🔍 `Verifier` | Gate checkpoint scanning, barcode lookups, credential status changes (`revoked`, `lost`). |
|
|
206
|
+
| `compliance_auditor` | Evelyn Vance | 📊 `Auditor` | Read-only inspection of templates, rosters, and audit diff timelines. Purging locked. |
|
|
207
|
+
|
|
208
|
+
### 3. Usage with `<IdCardManager />`
|
|
209
|
+
|
|
210
|
+
```jsx
|
|
211
|
+
import React, { useState } from 'react';
|
|
212
|
+
import { IdCardManager, ROLES, DEFAULT_DEMO_USERS } from '@stratametriq/id-card-designer';
|
|
213
|
+
import '@stratametriq/id-card-designer/dist/index.css';
|
|
214
|
+
|
|
215
|
+
export default function EnterpriseCardPortal() {
|
|
216
|
+
// Pass active authenticated operator from your backend or state manager
|
|
217
|
+
const [operator, setOperator] = useState({
|
|
218
|
+
id: 'usr-corp-991',
|
|
219
|
+
name: 'Carlos Mendez',
|
|
220
|
+
email: 'carlos.mendez@enterprise.com',
|
|
221
|
+
role: ROLES.ISSUANCE_OFFICER,
|
|
222
|
+
title: 'Print Bureau Officer',
|
|
223
|
+
avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100'
|
|
224
|
+
});
|
|
225
|
+
|
|
226
|
+
return (
|
|
227
|
+
<IdCardManager
|
|
228
|
+
currentUser={operator}
|
|
229
|
+
onRoleChange={(newOperator) => {
|
|
230
|
+
console.log('Operator switched:', newOperator);
|
|
231
|
+
setOperator(newOperator);
|
|
232
|
+
}}
|
|
233
|
+
onPermissionDenied={(actionName, requiredPermission) => {
|
|
234
|
+
console.warn(`Denied: ${actionName} requires ${requiredPermission}`);
|
|
235
|
+
}}
|
|
236
|
+
showRoleSwitcher={true} // Shows Persona Switcher pill in header (ideal for QA & staging)
|
|
237
|
+
/>
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
> [!NOTE]
|
|
243
|
+
> **100% Backward Compatible:** If `currentUser` is omitted, `<IdCardManager />` automatically runs in unrestricted Super Admin mode. Existing implementations will experience zero disruptions.
|
|
244
|
+
|
|
245
|
+
### 4. Declarative Component Gating with `<PermissionGate />`
|
|
246
|
+
|
|
247
|
+
Protect your own custom application buttons, sections, or actions using `<PermissionGate />`:
|
|
248
|
+
|
|
249
|
+
```jsx
|
|
250
|
+
import { PermissionGate, PERMISSIONS } from '@stratametriq/id-card-designer';
|
|
251
|
+
|
|
252
|
+
function AdminToolbar({ activeUser, onBatchPrint, onClearData }) {
|
|
253
|
+
return (
|
|
254
|
+
<div className="toolbar">
|
|
255
|
+
{/* Conditionally rendered only if user can generate print batches */}
|
|
256
|
+
<PermissionGate user={activeUser} permission={PERMISSIONS.ISSUANCE_EXPORT}>
|
|
257
|
+
<button onClick={onBatchPrint}>
|
|
258
|
+
🖨️ Batch Export A4 PDF
|
|
259
|
+
</button>
|
|
260
|
+
</PermissionGate>
|
|
261
|
+
|
|
262
|
+
{/* Rendered as disabled with security tooltip explaining why it is locked */}
|
|
263
|
+
<PermissionGate
|
|
264
|
+
user={activeUser}
|
|
265
|
+
permission={PERMISSIONS.RECORDS_DELETE}
|
|
266
|
+
showDisabled={true}
|
|
267
|
+
disabledTooltip="Restricted: Only Administrators can purge roster records."
|
|
268
|
+
>
|
|
269
|
+
<button onClick={onClearData} className="btn-danger">
|
|
270
|
+
🗑️ Delete All Records
|
|
271
|
+
</button>
|
|
272
|
+
</PermissionGate>
|
|
273
|
+
</div>
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
### 5. Programmatic Permission Helpers
|
|
279
|
+
|
|
280
|
+
Check permissions directly within your event handlers or routing logic:
|
|
281
|
+
|
|
282
|
+
```javascript
|
|
283
|
+
import { hasPermission, canAny, canAll, PERMISSIONS } from '@stratametriq/id-card-designer';
|
|
284
|
+
|
|
285
|
+
// Single permission check
|
|
286
|
+
if (hasPermission(currentUser, PERMISSIONS.TEMPLATES_WRITE)) {
|
|
287
|
+
console.log('User can edit design layouts');
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
// Any matching permission (OR logic)
|
|
291
|
+
if (canAny(currentUser, [PERMISSIONS.RECORDS_CREATE, PERMISSIONS.RECORDS_IMPORT])) {
|
|
292
|
+
console.log('User can add cardholders');
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
// All matching permissions (AND logic)
|
|
296
|
+
if (canAll(currentUser, [PERMISSIONS.TEMPLATES_WRITE, PERMISSIONS.ORG_MANAGE])) {
|
|
297
|
+
console.log('User has full branding and template authority');
|
|
298
|
+
}
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
### 6. Interactive Persona Simulator (`<RoleSwitcherModal />`)
|
|
302
|
+
|
|
303
|
+
Test permissions in development and staging environments using the built-in modal:
|
|
304
|
+
|
|
305
|
+
```jsx
|
|
306
|
+
import React, { useState } from 'react';
|
|
307
|
+
import { RoleSwitcherModal, DEFAULT_DEMO_USERS } from '@stratametriq/id-card-designer';
|
|
308
|
+
|
|
309
|
+
function DevSandbox() {
|
|
310
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
311
|
+
const [activeUser, setActiveUser] = useState(DEFAULT_DEMO_USERS[0]);
|
|
312
|
+
|
|
313
|
+
return (
|
|
314
|
+
<>
|
|
315
|
+
<button onClick={() => setIsOpen(true)}>
|
|
316
|
+
🎭 Switch Operator Role ({activeUser.role})
|
|
317
|
+
</button>
|
|
318
|
+
|
|
319
|
+
<RoleSwitcherModal
|
|
320
|
+
isOpen={isOpen}
|
|
321
|
+
onClose={() => setIsOpen(false)}
|
|
322
|
+
currentUser={activeUser}
|
|
323
|
+
onSelectUser={(newUser) => setActiveUser(newUser)}
|
|
324
|
+
theme="dark"
|
|
325
|
+
/>
|
|
326
|
+
</>
|
|
327
|
+
);
|
|
328
|
+
}
|
|
329
|
+
### 7. Real SaaS Production Database vs Offline Test Data
|
|
330
|
+
|
|
331
|
+
`@stratametriq/id-card-designer` is designed with a **Dual-Architecture Model** so it works immediately out-of-the-box for prototyping, but easily connects to real cloud databases in live SaaS production:
|
|
332
|
+
|
|
333
|
+
#### Mode A: Standalone / Offline Mode (Test Data)
|
|
334
|
+
* **How it works:** When you don't provide backend callback props, the package uses browser `IndexedDB` (`localforage`).
|
|
335
|
+
* **Use case:** Local testing, offline desktop applications, or quick client-side demos without needing a backend server.
|
|
336
|
+
* **Behavior:** Any user created or permission modified is saved inside the local browser.
|
|
337
|
+
|
|
338
|
+
#### Mode B: Live SaaS Production Mode (Real Cloud Database)
|
|
339
|
+
* **How it works:** In multi-user SaaS deployments, connect `<IdCardManager />` directly to your real API endpoints (PostgreSQL, Supabase, MySQL, MongoDB, Firebase, Laravel, Node.js):
|
|
340
|
+
|
|
341
|
+
```jsx
|
|
342
|
+
import React, { useState, useEffect } from 'react';
|
|
343
|
+
import { IdCardManager } from '@stratametriq/id-card-designer';
|
|
344
|
+
|
|
345
|
+
export default function SaaSIdentityApp({ activeAuthUser }) {
|
|
346
|
+
const [realUsers, setRealUsers] = useState([]);
|
|
347
|
+
|
|
348
|
+
// 1. Fetch real team users from your backend API
|
|
349
|
+
useEffect(() => {
|
|
350
|
+
fetch('/api/v1/organization/users')
|
|
351
|
+
.then(res => res.json())
|
|
352
|
+
.then(data => setRealUsers(data));
|
|
353
|
+
}, []);
|
|
354
|
+
|
|
355
|
+
return (
|
|
356
|
+
<IdCardManager
|
|
357
|
+
// Pass the real authenticated session user (Super Admin or Operator)
|
|
358
|
+
currentUser={activeAuthUser}
|
|
359
|
+
|
|
360
|
+
// Pass live database users array
|
|
361
|
+
users={realUsers}
|
|
362
|
+
|
|
363
|
+
// Real Database Sync: Create user in your backend DB
|
|
364
|
+
onAddUser={async (newUser) => {
|
|
365
|
+
const response = await fetch('/api/v1/organization/users', {
|
|
366
|
+
method: 'POST',
|
|
367
|
+
headers: { 'Content-Type': 'application/json' },
|
|
368
|
+
body: JSON.stringify(newUser)
|
|
369
|
+
});
|
|
370
|
+
const savedUser = await response.json();
|
|
371
|
+
setRealUsers(prev => [...prev, savedUser]);
|
|
372
|
+
}}
|
|
373
|
+
|
|
374
|
+
// Real Database Sync: Update role / permissions in your backend DB
|
|
375
|
+
onUpdateUser={async (updatedUser) => {
|
|
376
|
+
await fetch(`/api/v1/organization/users/${updatedUser.id}`, {
|
|
377
|
+
method: 'PUT',
|
|
378
|
+
headers: { 'Content-Type': 'application/json' },
|
|
379
|
+
body: JSON.stringify(updatedUser)
|
|
380
|
+
});
|
|
381
|
+
setRealUsers(prev => prev.map(u => u.id === updatedUser.id ? updatedUser : u));
|
|
382
|
+
}}
|
|
383
|
+
|
|
384
|
+
// Real Database Sync: Delete user from your backend DB
|
|
385
|
+
onDeleteUser={async (userId) => {
|
|
386
|
+
await fetch(`/api/v1/organization/users/${userId}`, { method: 'DELETE' });
|
|
387
|
+
setRealUsers(prev => prev.filter(u => u.id !== userId));
|
|
388
|
+
}}
|
|
389
|
+
/>
|
|
390
|
+
);
|
|
391
|
+
}
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
---
|
|
395
|
+
|
|
396
|
+
## Enterprise Audit Logs & Access Trail
|
|
397
|
+
|
|
398
|
+
Every action taken inside the ID card studio is recorded into an **immutable, traceable audit log** with full non-repudiation:
|
|
399
|
+
- **Batch Issuance Runs**: Tracks number of cards printed, orientation, sheet configuration, and time.
|
|
400
|
+
- **Record Modifications**: Captures granular **Before-vs-After Diffs** highlighting exact changed field values.
|
|
401
|
+
- **Template Layouts**: Logs template saves and version restoration timestamps.
|
|
402
|
+
- **Physical Security & Gate Checks**: Records badge verification events, QR scans, and credential revocations.
|
|
403
|
+
- **Security Denials**: Automatically audits unauthorized access attempts (`ACCESS_DENIED`) with actor credentials.
|
|
404
|
+
|
|
405
|
+
### Synchronizing Audit Events to Backend / SIEM
|
|
406
|
+
|
|
407
|
+
Use the `onAuditLog` prop to pipe live audit telemetry into your database (PostgreSQL, Supabase, MySQL) or SIEM log aggregator (Datadog, Splunk):
|
|
408
|
+
|
|
409
|
+
```jsx
|
|
410
|
+
<IdCardManager
|
|
411
|
+
onAuditLog={(auditEntry) => {
|
|
412
|
+
// Send to your backend API
|
|
413
|
+
fetch('/api/v1/compliance/audit-logs', {
|
|
414
|
+
method: 'POST',
|
|
415
|
+
headers: { 'Content-Type': 'application/json' },
|
|
416
|
+
body: JSON.stringify(auditEntry)
|
|
417
|
+
});
|
|
418
|
+
}}
|
|
419
|
+
/>
|
|
420
|
+
```
|
|
421
|
+
|
|
422
|
+
```json
|
|
423
|
+
{
|
|
424
|
+
"id": "aud-1726485921-9921",
|
|
425
|
+
"timestamp": "2026-09-16T11:25:21.000Z",
|
|
426
|
+
"action": "RECORD_UPDATED",
|
|
427
|
+
"category": "record",
|
|
428
|
+
"severity": "info",
|
|
429
|
+
"actor": {
|
|
430
|
+
"id": "usr-reg-03",
|
|
431
|
+
"name": "Rahul Mehta",
|
|
432
|
+
"role": "data_registrar",
|
|
433
|
+
"title": "Admissions Officer",
|
|
434
|
+
"email": "r.mehta@admissions.edu"
|
|
435
|
+
},
|
|
436
|
+
"details": {
|
|
437
|
+
"summary": "Updated cardholder profile for Rahul Sharma",
|
|
438
|
+
"recordId": "ADM-2026-104",
|
|
439
|
+
"diff": [
|
|
440
|
+
{
|
|
441
|
+
"field": "classSec",
|
|
442
|
+
"label": "Class & Section",
|
|
443
|
+
"before": "Class IX [B]",
|
|
444
|
+
"after": "Class X [A]"
|
|
445
|
+
}
|
|
446
|
+
]
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
---
|
|
452
|
+
|
|
120
453
|
## ID Card Verification & Card Lifecycle
|
|
121
454
|
|
|
122
455
|
### 1. Card Lifecycle State Machine
|
|
@@ -329,21 +662,91 @@ Your application remains responsible for compliance with applicable privacy and
|
|
|
329
662
|
## Developer Docs
|
|
330
663
|
|
|
331
664
|
### Components
|
|
332
|
-
- `<IdCardManager />`: Complete dashboard experience. Use this when you want the complete import → design → preview → batch-export workflow.
|
|
333
|
-
- `<
|
|
665
|
+
- `<IdCardManager />`: Complete dashboard experience. Use this when you want the complete import → design → preview → batch-export workflow with RBAC safeguards and audit trails.
|
|
666
|
+
- `<IdCardDesignerModal />`: Open the drag-and-drop designer modal (supports `readOnly` inspector mode for non-designer roles).
|
|
334
667
|
- `<IdCardPreview />`: Embed a live ID-card preview inside another application screen.
|
|
335
|
-
- `<
|
|
336
|
-
|
|
337
|
-
|
|
668
|
+
- `<IdCardCanvas />`: Core vector canvas supporting element selection, drag, resize, and zoom.
|
|
669
|
+
- `<ElementPropertyEditor />`: Property inspector for text styling, barcode configurations, colors, and watermarks.
|
|
670
|
+
- `<PresetsSidebar />`: Template preset browser and gallery.
|
|
671
|
+
- `<WatermarkLayer />`: Security and brand watermark overlay engine.
|
|
672
|
+
- `<IdCardVerificationModal />`: Turnkey credential verification screen with HTML5 camera QR scanner and anti-tampering photo match.
|
|
673
|
+
- `<AuditLogModal />`: Full enterprise compliance cockpit with KPI counters, event filters, diff timelines, and Excel CSV export.
|
|
674
|
+
- `<PermissionGate />`: Declarative permission barrier component (`showDisabled`, `disabledTooltip`, fallback).
|
|
675
|
+
- `<RoleSwitcherModal />`: Interactive persona simulator and permission matrix inspector for testing.
|
|
676
|
+
|
|
677
|
+
### Props (`<IdCardManager />`)
|
|
338
678
|
| Prop | Type | Default | Description |
|
|
339
679
|
|---|---|---|---|
|
|
340
|
-
| `sampleRecords` | `object` | Default data | Records used to populate the dashboard |
|
|
341
|
-
| `categories` | `object` | Default config | Custom ID-card categories |
|
|
342
|
-
| `onBatchExportComplete` | `function` | `undefined` | Callback after batch PDF generation |
|
|
680
|
+
| `sampleRecords` | `object` | Default data | Records used to populate the dashboard (`{ student: [], employee: [], ... }`) |
|
|
681
|
+
| `categories` | `object` | Default config | Custom ID-card categories and field definitions |
|
|
682
|
+
| `onBatchExportComplete` | `function` | `undefined` | Callback `(category, records) => void` after batch PDF generation |
|
|
343
683
|
| `organization` | `object` | `DEFAULT_ORGANIZATION` | Institution profile (Name, Code, Logo, Signatory, Signature, Verification Base URL) |
|
|
344
|
-
| `onSaveOrganization` | `function` | `undefined` | Callback when organization profile or brand assets are updated |
|
|
684
|
+
| `onSaveOrganization` | `function` | `undefined` | Callback `(orgData) => void` when organization profile or brand assets are updated |
|
|
345
685
|
| `workspaces` | `array` | `DEFAULT_WORKSPACES` | List of branch workspaces/campuses (`[{ id, name, code, location }]`) |
|
|
346
|
-
| `onSwitchWorkspace` | `function` | `undefined` | Callback when active branch workspace changes |
|
|
686
|
+
| `onSwitchWorkspace` | `function` | `undefined` | Callback `(workspace) => void` when active branch workspace changes |
|
|
687
|
+
| `currentUser` | `object` | `null` | Active operator persona (`{ id, name, role, title, email, avatar, customPermissions }`). Defaults to full unrestricted access (`super_admin`) |
|
|
688
|
+
| `onRoleChange` | `function` | `undefined` | Callback `(newUser) => void` triggered when operator persona changes |
|
|
689
|
+
| `onPermissionDenied` | `function` | `undefined` | Callback `(actionName, permission) => void` triggered when an unauthorized action is attempted |
|
|
690
|
+
| `showRoleSwitcher` | `boolean` | `true` | Toggle display of the header operator persona switcher pill / modal |
|
|
691
|
+
| `initialAuditLogs` | `array` | `null` | Array of historical audit entries to populate `<AuditLogModal />` |
|
|
692
|
+
| `onAuditLog` | `function` | `undefined` | Callback `(auditEntry) => void` fired whenever an auditable action occurs (ideal for SIEM / database sync) |
|
|
693
|
+
| `users` | `array` | `null` | Real team users array from your backend database (`[{ id, name, email, role, ... }]`). When omitted, uses local IndexedDB |
|
|
694
|
+
| `onAddUser` | `function` | `undefined` | Callback `async (newUser) => void` to persist a new operator in your backend database API |
|
|
695
|
+
| `onUpdateUser` | `function` | `undefined` | Callback `async (updatedUser) => void` to persist modified operator permissions in your backend database API |
|
|
696
|
+
| `onDeleteUser` | `function` | `undefined` | Callback `async (userId) => void` to delete an operator from your backend database API |
|
|
697
|
+
|
|
698
|
+
### Public Package Exports
|
|
699
|
+
|
|
700
|
+
```javascript
|
|
701
|
+
// Components
|
|
702
|
+
import {
|
|
703
|
+
IdCardManager,
|
|
704
|
+
IdCardDesignerModal,
|
|
705
|
+
IdCardPreview,
|
|
706
|
+
IdCardCanvas,
|
|
707
|
+
ElementPropertyEditor,
|
|
708
|
+
PresetsSidebar,
|
|
709
|
+
WatermarkLayer,
|
|
710
|
+
IdCardVerificationModal,
|
|
711
|
+
AuditLogModal,
|
|
712
|
+
PermissionGate,
|
|
713
|
+
RoleSwitcherModal
|
|
714
|
+
} from '@stratametriq/id-card-designer';
|
|
715
|
+
|
|
716
|
+
// PDF & Print Utilities
|
|
717
|
+
import { generateIdCardsPdf } from '@stratametriq/id-card-designer';
|
|
718
|
+
|
|
719
|
+
// Enterprise RBAC Helpers & Constants
|
|
720
|
+
import {
|
|
721
|
+
hasPermission,
|
|
722
|
+
canAny,
|
|
723
|
+
canAll,
|
|
724
|
+
getRoleDefinition,
|
|
725
|
+
PERMISSIONS,
|
|
726
|
+
ROLES,
|
|
727
|
+
ROLE_DEFINITIONS,
|
|
728
|
+
DEFAULT_DEMO_USERS
|
|
729
|
+
} from '@stratametriq/id-card-designer';
|
|
730
|
+
|
|
731
|
+
// Enterprise Audit Logging Utilities & Constants
|
|
732
|
+
import {
|
|
733
|
+
createAuditEntry,
|
|
734
|
+
calculateRecordDiff,
|
|
735
|
+
exportAuditLogsToCsv,
|
|
736
|
+
SEED_AUDIT_LOGS,
|
|
737
|
+
AUDIT_CATEGORIES,
|
|
738
|
+
AUDIT_SEVERITIES
|
|
739
|
+
} from '@stratametriq/id-card-designer';
|
|
740
|
+
|
|
741
|
+
// Starter Presets & Utilities
|
|
742
|
+
import {
|
|
743
|
+
VERTICAL_PRESETS,
|
|
744
|
+
HORIZONTAL_PRESETS,
|
|
745
|
+
ALL_PRESETS,
|
|
746
|
+
getDefaultPreset,
|
|
747
|
+
getPresetsByOrientation
|
|
748
|
+
} from '@stratametriq/id-card-designer';
|
|
749
|
+
```
|
|
347
750
|
|
|
348
751
|
### Templates
|
|
349
752
|
Designs are represented as JSON-compatible template structures.
|