@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.4

package/src/app/ndpr-demos/dsr/page.tsx

@@ -1,280 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/Card';
-import { DSRRequestForm, DSRDashboard, DSRTracker, DSRRequest, DSRStatus, DSRType, RequestType } from '@tantainnovative/ndpr-toolkit';
-import { v4 as uuidv4 } from 'uuid';
-
-export default function DSRDemoPage() {
-  const [requests, setRequests] = useState<DSRRequest[]>([]);
-  const [activeTab, setActiveTab] = useState('request-form');
-  const [isClient, setIsClient] = useState(false);
-  
-  // Define request types
-  const requestTypes: RequestType[] = [
-    {
-      id: 'access',
-      name: 'Access Request',
-      description: 'Request to access your personal data',
-      estimatedCompletionTime: 30,
-      requiresAdditionalInfo: false
-    },
-    {
-      id: 'erasure',
-      name: 'Erasure Request',
-      description: 'Request to delete your personal data',
-      estimatedCompletionTime: 45,
-      requiresAdditionalInfo: false
-    },
-    {
-      id: 'rectification',
-      name: 'Rectification Request',
-      description: 'Request to correct your personal data',
-      estimatedCompletionTime: 15,
-      requiresAdditionalInfo: true
-    },
-    {
-      id: 'restriction',
-      name: 'Restriction Request',
-      description: 'Request to restrict processing of your personal data',
-      estimatedCompletionTime: 20,
-      requiresAdditionalInfo: true
-    }
-  ];
-
-  // This effect runs only on the client side after hydration
-  useEffect(() => {
-    setIsClient(true);
-    
-    // Load sample data for demo purposes
-    const sampleRequests: DSRRequest[] = [
-      {
-        id: uuidv4(),
-        type: 'access' as DSRType,
-        status: 'pending' as DSRStatus,
-        createdAt: Date.now() - 3 * 24 * 60 * 60 * 1000, // 3 days ago
-        updatedAt: Date.now() - 3 * 24 * 60 * 60 * 1000,
-        dueDate: Date.now() + 12 * 24 * 60 * 60 * 1000, // Due in 12 days
-        subject: {
-          name: 'John Doe',
-          email: 'john@example.com',
-          phone: '1234567890'
-        },
-        description: 'I want to access all my personal data stored in your systems.'
-      },
-      {
-        id: uuidv4(),
-        type: 'erasure' as DSRType,
-        status: 'inProgress' as DSRStatus,
-        createdAt: Date.now() - 5 * 24 * 60 * 60 * 1000, // 5 days ago
-        updatedAt: Date.now() - 2 * 24 * 60 * 60 * 1000, // 2 days ago
-        dueDate: Date.now() + 5 * 24 * 60 * 60 * 1000, // Due in 5 days
-        subject: {
-          name: 'Jane Smith',
-          email: 'jane@example.com'
-        },
-        description: 'Please delete all my personal data from your systems.'
-      },
-      {
-        id: uuidv4(),
-        type: 'rectification' as DSRType,
-        status: 'completed' as DSRStatus,
-        createdAt: Date.now() - 10 * 24 * 60 * 60 * 1000, // 10 days ago
-        updatedAt: Date.now() - 1 * 24 * 60 * 60 * 1000, // 1 day ago
-        completedAt: Date.now() - 1 * 24 * 60 * 60 * 1000,
-        dueDate: Date.now() - 2 * 24 * 60 * 60 * 1000, // Due 2 days ago (but completed)
-        subject: {
-          name: 'Bob Johnson',
-          email: 'bob@example.com'
-        },
-        description: 'My address is incorrect. Please update it to 123 Main St.'
-      },
-      {
-        id: uuidv4(),
-        type: 'restriction' as DSRType,
-        status: 'pending' as DSRStatus,
-        createdAt: Date.now() - 15 * 24 * 60 * 60 * 1000, // 15 days ago
-        updatedAt: Date.now() - 15 * 24 * 60 * 60 * 1000,
-        dueDate: Date.now() - 5 * 24 * 60 * 60 * 1000, // Due 5 days ago (overdue)
-        subject: {
-          name: 'Alice Williams',
-          email: 'alice@example.com',
-          phone: '9876543210'
-        },
-        description: 'I want to restrict processing of my personal data for marketing purposes.'
-      }
-    ];
-    
-    setRequests(sampleRequests);
-  }, []);
-
-  interface SubmitData {
-    requestType: string;
-    dataSubject: {
-      fullName: string;
-      email: string;
-      phone?: string;
-    };
-    additionalInfo?: {
-      description?: string;
-    };
-  }
-
-  const handleSubmitRequest = (data: Record<string, unknown>) => {
-    const req = data as unknown as SubmitData;
-    console.log('Received form data:', data);
-    
-    // Calculate due date based on request type (30 days for access, 15 days for erasure, etc.)
-    let dueDays = 30; // Default to 30 days
-    if (req.requestType === 'erasure') dueDays = 15;
-    if (req.requestType === 'rectification') dueDays = 10;
-    if (req.requestType === 'restriction') dueDays = 20;
-    
-    const newRequest: DSRRequest = {
-      id: uuidv4(),
-      type: req.requestType as DSRType,
-      status: 'pending' as DSRStatus,
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-      dueDate: Date.now() + (dueDays * 24 * 60 * 60 * 1000), // Set due date based on request type
-      subject: {
-        name: req.dataSubject.fullName,
-        email: req.dataSubject.email,
-        phone: req.dataSubject.phone
-      },
-      description: req.additionalInfo?.description || 'No description provided'
-    };
-
-    setRequests((prev) => [newRequest, ...prev]);
-    setActiveTab('dashboard');
-  };
-
-  const handleUpdateStatus = (requestId: string, status: DSRStatus) => {
-    setRequests((prev) =>
-      prev.map((request) => {
-        if (request.id === requestId) {
-          return {
-            ...request,
-            status,
-            updatedAt: Date.now(),
-            ...(status === 'completed' ? { completedAt: Date.now() } : {})
-          };
-        }
-        return request;
-      })
-    );
-  };
-
-  const handleSelectRequest = (requestId: string) => {
-    // In a real application, you might want to show detailed information
-    // about the selected request or perform other actions
-    console.log(`Request selected: ${requestId}`);
-  };
-
-  if (!isClient) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div className="container mx-auto py-10">
-      <div className="mb-6">
-        <Link href="/ndpr-demos" className="text-blue-600 hover:underline">
-          ← Back to NDPR Demos
-        </Link>
-      </div>
-      
-      <h1 className="text-3xl font-bold mb-8">Data Subject Rights Demo</h1>
-      
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="mb-6">
-          <TabsTrigger value="request-form">DSR Request Form</TabsTrigger>
-          <TabsTrigger value="dashboard">DSR Dashboard</TabsTrigger>
-          <TabsTrigger value="tracker">DSR Tracker</TabsTrigger>
-        </TabsList>
-        
-        <TabsContent value="request-form" className="mt-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Data Subject Request Form</CardTitle>
-              <CardDescription>
-                This form allows data subjects to submit requests to exercise their rights under NDPR.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <DSRRequestForm
-                requestTypes={requestTypes}
-                onSubmit={handleSubmitRequest}
-                title="Submit a Data Subject Request"
-                description="Use this form to submit a request regarding your personal data."
-                submitButtonText="Submit Request"
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        
-        <TabsContent value="dashboard" className="mt-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Data Subject Request Dashboard</CardTitle>
-              <CardDescription>
-                This dashboard allows administrators to manage and respond to data subject requests.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <DSRDashboard
-                requests={requests}
-                onUpdateStatus={handleUpdateStatus}
-                onSelectRequest={handleSelectRequest}
-                title="DSR Management Dashboard"
-                description="Track and manage data subject requests in compliance with NDPR requirements."
-                showRequestDetails={true}
-                showRequestTimeline={true}
-                showDeadlineAlerts={true}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        
-        <TabsContent value="tracker" className="mt-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Data Subject Request Tracker</CardTitle>
-              <CardDescription>
-                This component provides a simplified view for tracking DSR requests.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <DSRTracker
-                requests={requests}
-                onSelectRequest={handleSelectRequest}
-                title="DSR Request Tracker"
-                description="Track the status of data subject requests"
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-      
-      <div className="mt-10 p-4 bg-gray-100 rounded-lg">
-        <h2 className="text-xl font-semibold mb-2">Implementation Notes</h2>
-        <p className="mb-4">
-          This demo showcases the DSR components from the NDPR Toolkit:
-        </p>
-        <ul className="list-disc pl-5 space-y-2">
-          <li><code>DSRRequestForm</code>: For collecting and validating data subject requests</li>
-          <li><code>DSRDashboard</code>: For managing and processing requests</li>
-          <li><code>DSRTracker</code>: For tracking request status and metrics</li>
-        </ul>
-        <p className="mt-4">
-          For detailed documentation, see the{' '}
-          <Link href="/docs/components/data-subject-rights" className="text-blue-600 hover:underline">
-            DSR documentation
-          </Link>
-          .
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/app/ndpr-demos/page.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/Card';
-
-
-export default function NDPRDemosPage() {
-  const demos = [
-    {
-      title: 'Data Subject Rights',
-      description: 'Demos for DSR request forms, dashboard, and tracking components',
-      href: '/ndpr-demos/dsr'
-    },
-    {
-      title: 'Consent Management',
-      description: 'Demos for consent banner, manager, and storage components',
-      href: '/ndpr-demos/consent'
-    },
-    {
-      title: 'DPIA Tools',
-      description: 'Demos for Data Protection Impact Assessment components',
-      href: '/ndpr-demos/dpia'
-    },
-    {
-      title: 'Breach Management',
-      description: 'Demos for data breach notification and management components',
-      href: '/ndpr-demos/breach'
-    },
-    {
-      title: 'Privacy Policy',
-      description: 'Demos for privacy policy generation and management',
-      href: '/ndpr-demos/policy'
-    }
-  ];
-
-  return (
-    <div className="container mx-auto py-10">
-      <h1 className="text-3xl font-bold mb-8">NDPR Toolkit Demos</h1>
-      <p className="text-lg mb-6">
-        These demos showcase the components and functionality of the NDPR Toolkit package.
-        Each demo demonstrates how to use the toolkit in a real-world application.
-      </p>
-      
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {demos.map((demo, index) => (
-          <Link key={index} href={demo.href} className="no-underline">
-            <Card className="h-full hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle>{demo.title}</CardTitle>
-                <CardDescription>{demo.description}</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="text-sm text-blue-600">View Demo →</div>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
-      
-      <div className="mt-10 p-4 bg-gray-100 rounded-lg">
-        <h2 className="text-xl font-semibold mb-2">Documentation</h2>
-        <p>
-          For detailed documentation on how to use the NDPR Toolkit, please visit the{' '}
-          <Link href="/docs" className="text-blue-600 hover:underline">
-            documentation pages
-          </Link>
-          .
-        </p>
-      </div>
-    </div>
-  );
-}