@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.
Files changed (4) hide show
  1. package/README.md +418 -15
  2. package/dist/index.es.js +7704 -5809
  3. package/dist/index.js +117 -97
  4. 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.15.0
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
- - [What's New in v1.15.0](#whats-new-in-v1150)
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.15.0
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
- - `<IdCardDesigner />`: Standalone visual designer.
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
- - `<IdCardDesignerModal />`: Open the designer inside your application's modal/dialog workflow.
336
-
337
- ### Props (IdCardManager)
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.