@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.4

package/src/app/globals.css

@@ -1,123 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "./accessibility.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
-}
-
-.dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/src/app/layout.tsx

@@ -1,37 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import { ErrorBoundary } from "@/components/ErrorBoundary";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "NDPR Toolkit - Nigerian Data Protection Compliance",
-  description: "Open-source toolkit for implementing NDPR and DPA compliant features in Nigerian applications",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <ErrorBoundary>
-          {children}
-        </ErrorBoundary>
-      </body>
-    </html>
-  );
-}

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

@@ -1,354 +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 { BreachReportForm, BreachRiskAssessment, BreachNotificationManager, BreachReport, RiskAssessment, RegulatoryReportGenerator } from '@tantainnovative/ndpr-toolkit';
-import { v4 as uuidv4 } from 'uuid';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/Card';
-
-export default function BreachDemoPage() {
-  const [activeTab, setActiveTab] = useState('notification');
-  const [isClient, setIsClient] = useState(false);
-  const [breaches, setBreaches] = useState<BreachReport[]>([]);
-  const [riskAssessments, setRiskAssessments] = useState<RiskAssessment[]>([]);
-  // Define interface based on documentation for regulatory notifications
-interface RegulatoryNotification {
-  id: string;
-  breachId: string;
-  sentAt: number;
-  method: 'email' | 'portal' | 'letter' | 'other';
-  referenceNumber?: string;
-  content: string;
-  attachments?: Array<{
-    id: string;
-    name: string;
-    type: string;
-    url: string;
-  }>;
-}
-
-  const [regulatoryNotifications, setRegulatoryNotifications] = useState<RegulatoryNotification[]>([]);
-  const [selectedBreach, setSelectedBreach] = useState<BreachReport | null>(null);
-  
-  // This effect runs only on the client side after hydration
-  useEffect(() => {
-    setIsClient(true);
-    
-    // Load sample data for demo purposes
-    const sampleBreaches: BreachReport[] = [
-      {
-        id: uuidv4(),
-        title: 'Customer Database Unauthorized Access',
-        description: 'Unauthorized access to customer database detected through suspicious login patterns',
-        category: 'unauthorized_access',
-        discoveredAt: Date.now() - 5 * 24 * 60 * 60 * 1000, // 5 days ago
-        reportedAt: Date.now() - 4 * 24 * 60 * 60 * 1000, // 4 days ago
-        reporter: {
-          name: 'John Smith',
-          email: 'john@example.com',
-          department: 'IT Security'
-        },
-        affectedSystems: ['customer_database', 'user_accounts'],
-        dataTypes: ['name', 'email', 'phone', 'address'],
-        estimatedAffectedSubjects: 1200,
-        status: 'ongoing',
-        initialActions: 'Access blocked, passwords reset, system isolated for investigation'
-      },
-      {
-        id: uuidv4(),
-        title: 'Employee Email Phishing Incident',
-        description: 'Several employees clicked on phishing links potentially exposing credentials',
-        category: 'phishing',
-        discoveredAt: Date.now() - 10 * 24 * 60 * 60 * 1000, // 10 days ago
-        reportedAt: Date.now() - 9 * 24 * 60 * 60 * 1000, // 9 days ago
-        reporter: {
-          name: 'Jane Doe',
-          email: 'jane@example.com',
-          department: 'HR'
-        },
-        affectedSystems: ['email_system', 'employee_accounts'],
-        dataTypes: ['email credentials'],
-        estimatedAffectedSubjects: 0, // No confirmed data exposure
-        status: 'resolved',
-        initialActions: 'Password resets, email scanning, blocking of malicious domains'
-      },
-      {
-        id: uuidv4(),
-        title: 'Lost Company Laptop',
-        description: 'Employee reported company laptop lost during business travel',
-        category: 'device_loss',
-        discoveredAt: Date.now() - 15 * 24 * 60 * 60 * 1000, // 15 days ago
-        reportedAt: Date.now() - 15 * 24 * 60 * 60 * 1000, // 15 days ago
-        reporter: {
-          name: 'Robert Johnson',
-          email: 'robert@example.com',
-          department: 'Sales'
-        },
-        affectedSystems: ['laptop_device', 'company_data'],
-        dataTypes: ['name', 'email', 'project data'],
-        estimatedAffectedSubjects: 50,
-        status: 'resolved',
-        initialActions: 'Remote wipe initiated, account passwords changed'
-      }
-    ];
-    
-    setBreaches(sampleBreaches);
-  }, []);
-
-  const handleSubmitBreach = (data: { 
-    title: string; 
-    description: string; 
-    category?: string;
-    reporter?: { 
-      name?: string; 
-      email?: string; 
-      department?: string; 
-    };
-    affectedSystems?: string[];
-    dataTypes?: string[];
-    estimatedAffectedSubjects?: number;
-    initialActions?: string;
-  }) => {
-    const newBreach: BreachReport = {
-      id: uuidv4(),
-      title: data.title,
-      description: data.description,
-      category: data.category || 'other',
-      discoveredAt: Date.now(),
-      reportedAt: Date.now(),
-      reporter: {
-        name: data.reporter?.name || 'Anonymous',
-        email: data.reporter?.email || 'anonymous@example.com',
-        department: data.reporter?.department || 'Unknown'
-      },
-      affectedSystems: data.affectedSystems || [],
-      dataTypes: data.dataTypes || [],
-      estimatedAffectedSubjects: data.estimatedAffectedSubjects || 0,
-      status: 'ongoing',
-      initialActions: data.initialActions || ''
-    };
-
-    setBreaches((prev) => [newBreach, ...prev]);
-    setActiveTab('register');
-  };
-
-  const handleUpdateBreach = (breachId: string, updates: Partial<BreachReport>) => {
-    setBreaches((prev) =>
-      prev.map((breach) => {
-        if (breach.id === breachId) {
-          return {
-            ...breach,
-            ...updates
-          };
-        }
-        return breach;
-      })
-    );
-  };
-
-  const handleSelectBreach = (breachId: string) => {
-    const breach = breaches.find((b) => b.id === breachId);
-    setSelectedBreach(breach || null);
-    setActiveTab('assessment');
-  };
-
-  // Add a function to handle regulatory notifications
-  const handleGenerateReport = (breachId: string) => {
-    if (!selectedBreach) return;
-    
-    // Create a sample regulatory notification based on the breach
-    const newNotification: RegulatoryNotification = {
-      id: uuidv4(),
-      breachId: breachId,
-      sentAt: Date.now(),
-      method: 'email',
-      content: `Notification regarding breach: ${selectedBreach.title}`,
-      referenceNumber: `REF-${Date.now().toString().substring(0, 8)}`
-    };
-    
-    // Add to notifications list
-    setRegulatoryNotifications(prev => [...prev, newNotification]);
-    
-    // Update breach status
-    handleUpdateBreach(breachId, { status: 'contained' }); // Using a valid status from the BreachReport type
-  };
-
-  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">Breach Management Demo</h1>
-      
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="mb-6">
-          <TabsTrigger value="notification">Breach Notification</TabsTrigger>
-          <TabsTrigger value="register">Breach Register</TabsTrigger>
-          <TabsTrigger value="assessment">Breach Assessment</TabsTrigger>
-        </TabsList>
-        
-        <TabsContent value="notification" className="mt-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Breach Notification Form</CardTitle>
-              <CardDescription>
-                This form is used to report and document data breaches within your organization.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <BreachReportForm
-                onSubmit={handleSubmitBreach}
-                title="Report a Data Breach"
-                categories={[
-                  { id: 'unauthorized_access', name: 'Unauthorized Access', description: 'Unauthorized access to systems or data', defaultSeverity: 'high' },
-                  { id: 'phishing', name: 'Phishing Attack', description: 'Phishing or social engineering attack', defaultSeverity: 'medium' },
-                  { id: 'device_loss', name: 'Device Loss/Theft', description: 'Loss or theft of device containing personal data', defaultSeverity: 'medium' },
-                  { id: 'malware', name: 'Malware/Ransomware', description: 'Malware or ransomware infection', defaultSeverity: 'high' },
-                  { id: 'other', name: 'Other', description: 'Other type of data breach', defaultSeverity: 'medium' }
-                ]}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        
-        <TabsContent value="register" className="mt-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Breach Register</CardTitle>
-              <CardDescription>
-                This component maintains a register of all data breaches and their current status.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <BreachNotificationManager
-                breachReports={breaches}
-                riskAssessments={riskAssessments}
-                regulatoryNotifications={regulatoryNotifications}
-                onSelectBreach={handleSelectBreach}
-                onRequestAssessment={(breachId) => {
-                  handleSelectBreach(breachId);
-                  setActiveTab('assessment');
-                }}
-                onRequestNotification={(breachId: string) => {
-                  handleSelectBreach(breachId);
-                  // Generate a regulatory notification
-                  setTimeout(() => {
-                    if (selectedBreach) {
-                      handleGenerateReport(breachId);
-                    }
-                  }, 500);
-                }}
-                title="Data Breach Register"
-                description="A record of all data breaches and security incidents affecting personal data."
-                showBreachDetails={true}
-                showNotificationTimeline={true}
-                showDeadlineAlerts={true}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        
-        <TabsContent value="assessment" className="mt-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Breach Assessment</CardTitle>
-              <CardDescription>
-                This component helps assess the severity and impact of a data breach.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              {selectedBreach ? (
-                <div className="space-y-8">
-                  <BreachRiskAssessment
-                    breachData={selectedBreach}
-                    onComplete={(assessment: RiskAssessment) => {
-                      if (selectedBreach) {
-                      // Update the breach status based on the assessment
-                      handleUpdateBreach(selectedBreach.id, {
-                        status: assessment.riskLevel === 'critical' ? 'ongoing' : 'contained',
-                      });
-                      
-                      // Store the risk assessment
-                      const newAssessment = {
-                        ...assessment,
-                        id: uuidv4(),
-                        breachId: selectedBreach.id,
-                        assessedAt: Date.now(),
-                        assessor: {
-                          name: 'Demo User',
-                          role: 'Data Protection Officer',
-                          email: 'dpo@example.com'
-                        }
-                      };
-                      
-                      setRiskAssessments(prev => {
-                        // Remove any existing assessment for this breach
-                        const filtered = prev.filter(a => a.breachId !== selectedBreach.id);
-                        // Add the new assessment
-                        return [...filtered, newAssessment];
-                      });
-                    }
-                    }}
-                    title="Breach Risk Assessment"
-                    description="Assess the severity, impact, and required actions for this data breach."
-                    className=""
-                    buttonClassName=""
-                    showBreachSummary={true}
-                    showNotificationRequirements={true}
-                  />
-                  
-                  {/* Add Regulatory Report Generator component */}
-                  <div className="mt-8 pt-8 border-t border-gray-200">
-                    <h3 className="text-lg font-medium mb-4">Generate Regulatory Report</h3>
-                    <RegulatoryReportGenerator
-                      breachData={selectedBreach}
-                      organizationInfo={{
-                        name: 'Example Company Ltd.',
-                        address: '123 Main Street, Lagos, Nigeria',
-                        dpoName: 'John Doe',
-                        dpoEmail: 'dpo@example.com',
-                        dpoPhone: '+234 123 456 7890'
-                      }}
-                      onGenerate={() => handleGenerateReport(selectedBreach.id)}
-                    />
-                  </div>
-                </div>
-              ) : (
-                <div className="p-4 text-center">
-                  <p>No breach selected. Please select a breach from the Breach Register.</p>
-                </div>
-              )}
-            </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 breach management components from the NDPR Toolkit:
-        </p>
-        <ul className="list-disc pl-5 space-y-2">
-          <li><code>BreachReportForm</code>: For reporting and documenting data breaches</li>
-          <li><code>BreachRegister</code>: For maintaining a record of all data breaches</li>
-          <li><code>BreachAssessment</code>: For assessing the severity and impact of breaches</li>
-        </ul>
-        <p className="mt-4">
-          For detailed documentation, see the{' '}
-          <Link href="/docs/components/breach-management" className="text-blue-600 hover:underline">
-            Breach Management documentation
-          </Link>
-          .
-        </p>
-      </div>
-    </div>
-  );
-}