Data Subject Rights Portal

Overview

The Data Subject Rights Portal provides a complete solution for handling data subject access requests (DSARs) and other rights requests in compliance with the Nigeria Data Protection Act 2023 (NDPA). It includes a request submission form, admin dashboard for managing requests, and a tracking system for data subjects.

v3 Quick Start

v3 introduces zero-config presets, compound components for custom layouts, and a StorageAdapter pattern so you can plug in any persistence backend without touching component internals.

// Drop in a fully-working DSR portal with NDPA defaults
import { NDPRSubjectRights } from '@tantainnovative/ndpr-toolkit/presets';

<NDPRSubjectRights />

import { DSR } from '@tantainnovative/ndpr-toolkit/dsr';

<DSR.Provider requestTypes={types}>
  <DSR.Form />
  <DSR.Dashboard />
</DSR.Provider>

import { useDSR } from '@tantainnovative/ndpr-toolkit/hooks';
import { apiAdapter } from '@tantainnovative/ndpr-toolkit/adapters';

// The adapter prop accepts any StorageAdapter for custom persistence
// (server-side DB, REST API, localStorage, etc.)
const dsr = useDSR({ requestTypes: types, adapter: apiAdapter('/api/dsr') });

Installation

Install the NDPR Toolkit package which includes the Data Subject Rights components:

pnpm add @tantainnovative/ndpr-toolkit

Components

The Data Subject Rights system includes several components that work together:

import { DSRRequestForm, DSRType } from '@tantainnovative/ndpr-toolkit';

<DSRRequestForm
  onSubmit={handleSubmitRequest}
  requestTypes={[
    { id: 'access', label: 'Access my data' },
    { id: 'rectification', label: 'Correct my data' },
    { id: 'erasure', label: 'Delete my data' },
    { id: 'restriction', label: 'Restrict processing of my data' },
    { id: 'portability', label: 'Data portability' },
    { id: 'objection', label: 'Object to processing' }
  ]}
/>

import { DSRDashboard } from '@tantainnovative/ndpr-toolkit';

<DSRDashboard
  requests={dsrRequests}
  onUpdateRequest={handleUpdateRequest}
  onDeleteRequest={handleDeleteRequest}
  onAssignRequest={handleAssignRequest}
/>

import { DSRTracker } from '@tantainnovative/ndpr-toolkit';

<DSRTracker
  requestId="dsr-123456"
  onLookup={handleLookupRequest}
/>

import { BreachReportForm } from '@tantainnovative/ndpr-toolkit';

<BreachReportForm
  onSubmit={handleSubmitBreachReport}
  formDescription="Report a data breach that has occurred within your organization."
  recipientEmail="dpo@example.com"
/>

Usage

Here's a complete example of how to implement the Data Subject Rights system in your application:

import { useState, useEffect } from 'react';
import {
  DSRRequestForm,
  DSRDashboard,
  DSRTracker,
  useDSR,
  DSRType,
  DSRStatus
} from '@tantainnovative/ndpr-toolkit';

const requestTypes = [
  { id: 'access', label: 'Access my data' },
  { id: 'rectification', label: 'Correct my data' },
  { id: 'erasure', label: 'Delete my data' },
  { id: 'restriction', label: 'Restrict processing of my data' },
  { id: 'portability', label: 'Data portability' },
  { id: 'objection', label: 'Object to processing' }
];

function DSRPortal() {
  const [activeTab, setActiveTab] = useState('submit');
  const [trackingId, setTrackingId] = useState('');

  const {
    requests,
    submitRequest,
    updateRequest,
    deleteRequest,
    getRequestById
  } = useDSR();

  const handleSubmitRequest = (request) => {
    const newRequest = submitRequest({
      type: request.type,
      subject: {
        name: request.name,
        email: request.email,
        phone: request.phone
      },
      details: request.details
    });
    alert(`Your request has been submitted. Your tracking ID is: ${newRequest.id}`);
  };

  const handleLookupRequest = (id) => {
    return getRequestById(id);
  };

  return (
    <div>
      <nav>
        <button onClick={() => setActiveTab('submit')}>Submit Request</button>
        <button onClick={() => setActiveTab('track')}>Track Request</button>
        <button onClick={() => setActiveTab('admin')}>Admin Dashboard</button>
      </nav>

      {activeTab === 'submit' && (
        <DSRRequestForm onSubmit={handleSubmitRequest} requestTypes={requestTypes} />
      )}

      {activeTab === 'track' && (
        <div>
          <h2>Track Your Request</h2>
          <input
            type="text"
            value={trackingId}
            onChange={(e) => setTrackingId(e.target.value)}
            placeholder="Enter your tracking ID"
          />
          {trackingId && (
            <DSRTracker requestId={trackingId} onLookup={handleLookupRequest} />
          )}
        </div>
      )}

      {activeTab === 'admin' && (
        <DSRDashboard
          requests={requests}
          onUpdateRequest={updateRequest}
          onDeleteRequest={deleteRequest}
        />
      )}
    </div>
  );
}

API Reference

DSRRequestForm Props

useDSR Hook

import { useDSR } from '@tantainnovative/ndpr-toolkit';

const {
  requests,                // Array of all DSR requests
  submitRequest,           // Function to submit a new request
  updateRequest,           // Function to update an existing request
  deleteRequest,           // Function to delete a request
  getRequestById,          // Function to get a request by ID
  filterRequestsByStatus,  // Function to filter requests by status
  filterRequestsByType     // Function to filter requests by type
} = useDSR();

// Submit a new request
const newRequest = submitRequest({
  type: 'access',
  subject: {
    name: 'John Doe',
    email: 'john@example.com',
    phone: '1234567890'
  },
  details: 'I would like to access all my personal data.'
});

// Update a request
updateRequest('request-id', {
  status: 'inProgress',
  assignedTo: 'data-officer@example.com'
});

// Filter requests
const pendingRequests = filterRequestsByStatus('pending');
const accessRequests = filterRequestsByType('access');

DSRType Enum

export type DSRType = 'access' | 'rectification' | 'erasure' | 'restriction' | 'portability' | 'objection';

DSRStatus Enum

export type DSRStatus = 'pending' | 'awaitingVerification' | 'inProgress' | 'completed' | 'rejected';

DSRRequest Interface

export interface DSRRequest {
  id: string;
  type: DSRType;
  status: DSRStatus;
  createdAt: number;
  updatedAt: number;
  completedAt?: number;
  verifiedAt?: number;
  dueDate?: number;
  description?: string;
  subject: {
    name: string;
    email: string;
    phone?: string;
    identifierValue?: string;
    identifierType?: string;
  };
  additionalInfo?: Record<string, any>;
  internalNotes?: Array<{
    timestamp: number;
    author: string;
    note: string;
  }>;
}

Best Practices

• Verification Process: Implement a verification process to confirm the identity of the data subject making the request.
• Response Timeframe: The NDPA requires organizations to respond to DSARs within 30 days. Ensure your process allows for timely responses.
• Complete Responses:Provide complete information in response to access requests, including what data you hold, how it's used, who it's shared with, and its source.
• Record Keeping: Maintain records of all DSARs and your responses to them. The DSRDashboard component helps with this.
• Staff Training: Ensure staff handling DSARs are trained on the requirements of the NDPA and your internal processes.

Accessibility

The Data Subject Rights components are built with accessibility in mind:

• All form elements have proper labels and ARIA attributes
• Focus states are clearly visible
• Color contrast meets WCAG 2.1 AA standards
• Keyboard navigation is fully supported
• Error messages are announced to screen readers

Need Help?

If you have questions about implementing the Data Subject Rights system or need assistance with NDPA compliance, check out these resources: