This is a submission for the KendoReact Free Components Challenge.
What I Built
PrivacyDesk is a React + TypeScript app (using only KendoReact Free components) that streamlines Data Subject Requests (DSRs)—access, delete, export, correct—from intake to closure.
Requests hub: compact Grid with paging/sorting and filters (Type, Status, Owner, Date range) + “Open” action.
New Request: guided flow with validation; computes due date from SLA settings.
Case workspace: header with Status/Owner/SLA widget; tabs for Overview / Notes / Evidence / History; confirm dialogs log decisions to History.
Export: print-friendly runbook and deterministic JSON download.
Settings: edit SLA days per request type.
Built entirely with KendoReact Free components for a fast, accessible, and consistent DSR workflow.
The Problem It Solves
Teams (especially SMBs) often handle Data Subject Requests (DSRs) with emails and spreadsheets. That leads to missed SLAs, inconsistent replies, and poor audit trails—all risky for GDPR/CCPA compliance.
How PrivacyDesk Helps
- One place for all DSRs: intake → triage → resolution.
- Never miss deadlines: automatic SLA due date tracking with clear status.
- Consistent processing: guided New Request flow and Case tabs (Overview/Notes/Evidence/History).
- Audit-ready: decisions and actions are logged; Export provides a print-friendly runbook and deterministic JSON for records.
Demo
KendoReact Components Used
Free KendoReact Components used
- Grid: Data table for the Requests hub with paging and sorting; shows request metadata and actions.
- GridColumn: Column definitions inside the Grid (id, type, requester.email, submittedAt, dueAt, status, owner, actions).
- DropDownList: Single-select pickers for request Type, Status, Owner (also used on Case/Settings forms).
- MultiSelect: Multi-owner filter with chips in the Requests filters bar.
- DatePicker: From/To date range filters on the Requests page (and date fields where needed).
- Input: Text inputs across the app (login, requester name/email, case fields, settings).
- TextArea: Multi-line notes/rationale fields (New Request details, Case notes, Settings description).
- Switch: Boolean toggle in New Request (e.g., “ID proof received?”).
- NumericTextBox: Number inputs in Settings for SLA days per request type.
- Button: Primary/secondary actions everywhere (Open case, Save, Confirm, Cancel).
- Toolbar: Horizontal actions container for the Requests filter controls.
- ToolbarItem: Individual items (filters/buttons) placed inside the Toolbar.
- ToolbarSeparator: Visual separators between groups of filter controls.
- Dialog: Modal confirmations (finalize case, delete note) and small interaction flows.
- DialogActionsBar: Standard OK/Cancel action area within Dialogs.
- Window: Export/Preview window with Print and Download JSON actions.
- Notification: Toast messages for success/error feedback (e.g., saved settings, created request).
- NotificationGroup: Positioned container that hosts one or more Notification toasts.
- Badge: Status pill for requests/cases (new, in_progress, waiting, done, rejected) and due-state indicators.
- ProgressBar: SLA time-remaining visualization in the Case header/widget.
- Label: Accessible labels for filter inputs and form fields.
- TabStrip: Case workspace tabs (Overview, Notes, Evidence, History).
- TabStripTab: Individual tab panes/content within the TabStrip.
Code Smarter, Not Harder prize category
AI Coding Assistant Usage
I used the assistant at each major UI milestone to create skeleton components, fix TypeScript edge cases, and apply Kendo patterns faster. Here are some of the exact prompts, what I accepted/edited, and the commits/screenshots I captured are in the (Bonus) Kendo UI AI Coding Assistant Section.
Nuclia Integration
The Case page contains a “Policy Helper” placeholder. Nuclia RAG is not
integrated with it. If enabled in the future, it will surface
policy Q&A with citations via a public Knowledge Box.
Top comments (1)
Nuclia Integration: I have issues signing up to Nuclia in order to integrate the Rag. So I added a placeholder (Policy Helper) in the application which can be enhanced for Q&A through public knowledge box in the future.