Handling Data Subject Requests

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

function AdminDashboard() {
  const [requests, setRequests] = useState([]);
  
  useEffect(() => {
    // Fetch requests from your backend
    fetch('/api/dsr-requests')
      .then(response => response.json())
      .then(data => setRequests(data));
  }, []);
  
  const handleUpdateStatus = (requestId, status) => {
    // Update request status in your backend
    fetch(`/api/dsr-requests/${requestId}/status`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ status }),
    })
    .then(response => response.json())
    .then(data => {
      // Update local state
      setRequests(requests.map(request => 
        request.id === requestId ? { ...request, status } : request
      ));
    });
  };
  
  const handleAssignRequest = (requestId, assignee) => {
    // Assign request to staff member in your backend
    fetch(`/api/dsr-requests/${requestId}/assign`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ assignee }),
    })
    .then(response => response.json())
    .then(data => {
      // Update local state
      setRequests(requests.map(request => 
        request.id === requestId ? { ...request, assignedTo: assignee } : request
      ));
    });
  };
  
  const handleAddNote = (requestId, note) => {
    // Add note to request in your backend
    fetch(`/api/dsr-requests/${requestId}/notes`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ note }),
    })
    .then(response => response.json())
    .then(data => {
      // Update local state
      setRequests(requests.map(request => 
        request.id === requestId ? { 
          ...request, 
          notes: [...request.notes, data] 
        } : request
      ));
    });
  };

  return (
    <div>
      <h1>DSR Admin Dashboard</h1>
      
      <DSRDashboard 
        requests={requests}
        onUpdateStatus={handleUpdateStatus}
        onAssignRequest={handleAssignRequest}
        onAddNote={handleAddNote}
        staff={[
          { id: 'john', name: 'John Doe' },
          { id: 'jane', name: 'Jane Smith' },
          { id: 'bob', name: 'Bob Johnson' }
        ]}
        statuses={[
          { id: 'pending', label: 'Pending', color: 'yellow' },
          { id: 'verifying', label: 'Verifying Identity', color: 'blue' },
          { id: 'processing', label: 'Processing', color: 'purple' },
          { id: 'completed', label: 'Completed', color: 'green' },
          { id: 'rejected', label: 'Rejected', color: 'red' }
        ]}
      />
    </div>
  );
}

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

function RequestTrackingPage() {
  const [requestId, setRequestId] = useState('');
  const [email, setEmail] = useState('');
  const [request, setRequest] = useState(null);
  const [error, setError] = useState(null);
  
  const handleTrackRequest = () => {
    // Fetch request status from your backend
    fetch(`/api/dsr-requests/track?id=${requestId}&email=${email}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Request not found or email does not match');
        }
        return response.json();
      })
      .then(data => {
        setRequest(data);
        setError(null);
      })
      .catch(err => {
        setRequest(null);
        setError(err.message);
      });
  };

  return (
    <div>
      <h1>Track Your Request</h1>
      <p>
        Enter your request reference number and the email address you used to submit the request.
      </p>
      
      <div className="form-group">
        <label htmlFor="requestId">Request Reference Number</label>
        <input
          type="text"
          id="requestId"
          value={requestId}
          onChange={(e) => setRequestId(e.target.value)}
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="email">Email Address</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      
      <button onClick={handleTrackRequest}>Track Request</button>
      
      {error && (
        <div className="error">
          {error}
        </div>
      )}
      
      {request && (
        <DSRTracker 
          request={request}
          statusDescriptions={{
            'pending': 'Your request has been received and is awaiting review.',
            'verifying': 'We are verifying your identity to process your request.',
            'processing': 'Your request is being processed.',
            'completed': 'Your request has been completed.',
            'rejected': 'Your request has been rejected. Please see the notes for more information.'
          }}
        />
      )}
    </div>
  );
}