Data Subject Rights Portal

yarn add @tantainnovative/ndpr-toolkit

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

// Define your request types
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
    });
    
    // Show the tracking ID to the user
    alert(`Your request has been submitted. Your tracking ID is: ${newRequest.id}`);
  };
  
  const handleLookupRequest = (id) => {
    const request = getRequestById(id);
    return request;
  };
  
  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"
          />
          <button onClick={() => setActiveTab('tracking')}>Track</button>
          
          {activeTab === 'tracking' && trackingId && (
            <DSRTracker 
              requestId={trackingId}
              onLookup={handleLookupRequest}
            />
          )}
        </div>
      )}
      
      {activeTab === 'admin' && (
        <DSRDashboard 
          requests={requests}
          onUpdateRequest={updateRequest}
          onDeleteRequest={deleteRequest}
        />
      )}
    </div>
  );
}

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

// Use the hook in your component
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'
});

// Get a request by ID
const request = getRequestById('request-id');

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

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

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

export interface DSRRequest {
  /**
   * Unique identifier for the request
   */
  id: string;
  
  /**
   * Type of request
   */
  type: DSRType;
  
  /**
   * Current status of the request
   */
  status: DSRStatus;
  
  /**
   * Timestamp when the request was submitted
   */
  createdAt: number;
  
  /**
   * Timestamp when the request was last updated
   */
  updatedAt: number;
  
  /**
   * Timestamp when the request was completed (if applicable)
   */
  completedAt?: number;
  
  /**
   * Timestamp when the identity was verified (if applicable)
   */
  verifiedAt?: number;
  
  /**
   * Due date for responding to the request (timestamp)
   */
  dueDate?: number;
  
  /**
   * Description or details of the request
   */
  description?: string;
  
  /**
   * Data subject information
   */
  subject: {
    /**
     * Name of the data subject
     */
    name: string;
    
    /**
     * Email address of the data subject
     */
    email: string;
    
    /**
     * Phone number of the data subject (optional)
     */
    phone?: string;
    
    /**
     * Identifier used to verify the data subject's identity (optional)
     */
    identifierValue?: string;
    
    /**
     * Type of identifier used (e.g., "email", "account", "customer_id") (optional)
     */
    identifierType?: string;
  };
  
  /**
   * Additional information provided by the data subject
   */
  additionalInfo?: Record<string, any>;
  
  /**
   * Notes added by staff processing the request
   */
  internalNotes?: Array<{
    timestamp: number;
    author: string;
    note: string;
  }>;
}