@tantainnovative/ndpr-toolkit 1.0.2 → 1.0.3

package/src/components/breach-notification/BreachNotificationForm.tsx

@@ -0,0 +1,479 @@
+'use client';
+
+import { useState } from 'react';
+import { BreachSeverity } from '@/types';
+import { Input } from '@/components/ui/Input';
+import { TextArea } from '@/components/ui/TextArea';
+import { Button } from '@/components/ui/Button';
+import { FormField } from '@/components/ui/FormField';
+import { Checkbox } from '@/components/ui/Checkbox';
+
+interface BreachNotificationFormProps {
+  onSubmit: (data: {
+    title: string;
+    description: string;
+    discoveryDate: string;
+    affectedDataSubjects: number;
+    dataCategories: string[];
+    severity: BreachSeverity;
+    mitigationSteps: string[];
+    reportedToAuthorities: boolean;
+    reportedToDataSubjects: boolean;
+  }) => void;
+  className?: string;
+}
+
+export default function BreachNotificationForm({
+  onSubmit,
+  className = '',
+}: BreachNotificationFormProps) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    discoveryDate: '',
+    affectedDataSubjects: 0,
+    dataCategories: [] as string[],
+    severity: 'medium' as BreachSeverity,
+    mitigationSteps: [] as string[],
+    reportedToAuthorities: false,
+    reportedToDataSubjects: false,
+  });
+  
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [newMitigationStep, setNewMitigationStep] = useState('');
+  const [newDataCategory, setNewDataCategory] = useState('');
+
+  // Default data categories
+  const defaultDataCategories = [
+    'Personal identifiers (name, ID numbers)',
+    'Contact information',
+    'Financial information',
+    'Health information',
+    'Biometric data',
+    'Location data',
+    'Online identifiers (IP address, cookies)',
+    'Credentials (usernames, passwords)',
+  ];
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    const { name, value, type } = e.target as HTMLInputElement;
+    
+    if (type === 'checkbox') {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: (e.target as HTMLInputElement).checked,
+      }));
+    } else if (type === 'number') {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: parseInt(value) || 0,
+      }));
+    } else {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    }
+    
+    // Clear error when field is edited
+    if (errors[name]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[name];
+        return newErrors;
+      });
+    }
+  };
+
+  const handleDataCategoryToggle = (category: string) => {
+    setFormData((prev) => {
+      const updatedCategories = prev.dataCategories.includes(category)
+        ? prev.dataCategories.filter((c) => c !== category)
+        : [...prev.dataCategories, category];
+      
+      return {
+        ...prev,
+        dataCategories: updatedCategories,
+      };
+    });
+    
+    // Clear error when field is edited
+    if (errors.dataCategories) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors.dataCategories;
+        return newErrors;
+      });
+    }
+  };
+
+  const handleAddDataCategory = (e?: React.MouseEvent) => {
+    // Prevent form submission if this is triggered by a button click
+    if (e) {
+      e.preventDefault();
+    }
+    
+    if (newDataCategory.trim()) {
+      // Check if category already exists to avoid duplicates
+      if (!formData.dataCategories.includes(newDataCategory.trim())) {
+        setFormData((prev) => ({
+          ...prev,
+          dataCategories: [...prev.dataCategories, newDataCategory.trim()],
+        }));
+      }
+      setNewDataCategory('');
+      
+      // Clear error when field is edited
+      if (errors.dataCategories) {
+        setErrors((prev) => {
+          const newErrors = { ...prev };
+          delete newErrors.dataCategories;
+          return newErrors;
+        });
+      }
+    }
+  };
+
+  const handleAddMitigationStep = (e?: React.MouseEvent) => {
+    // Prevent form submission if this is triggered by a button click
+    if (e) {
+      e.preventDefault();
+    }
+    if (newMitigationStep.trim()) {
+      setFormData((prev) => ({
+        ...prev,
+        mitigationSteps: [...prev.mitigationSteps, newMitigationStep.trim()],
+      }));
+      setNewMitigationStep('');
+      
+      // Clear error when field is edited
+      if (errors.mitigationSteps) {
+        setErrors((prev) => {
+          const newErrors = { ...prev };
+          delete newErrors.mitigationSteps;
+          return newErrors;
+        });
+      }
+    }
+  };
+
+  const handleRemoveMitigationStep = (index: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      mitigationSteps: prev.mitigationSteps.filter((_, i) => i !== index),
+    }));
+  };
+
+  // Handle key press for adding data category and mitigation steps
+  const handleKeyPress = (e: React.KeyboardEvent, type: 'category' | 'mitigation') => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (type === 'category') {
+        handleAddDataCategory();
+      } else {
+        handleAddMitigationStep();
+      }
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+    
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    }
+    
+    if (!formData.discoveryDate) {
+      newErrors.discoveryDate = 'Discovery date is required';
+    }
+    
+    if (formData.affectedDataSubjects <= 0) {
+      newErrors.affectedDataSubjects = 'Number of affected data subjects must be greater than 0';
+    }
+    
+    if (formData.dataCategories.length === 0) {
+      newErrors.dataCategories = 'Please select at least one data category';
+    }
+    
+    if (formData.mitigationSteps.length === 0) {
+      newErrors.mitigationSteps = 'Please add at least one mitigation step';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm()) return;
+    
+    setIsSubmitting(true);
+    
+    try {
+      // In a real implementation, this would call an API
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
+      
+      onSubmit({
+        title: formData.title,
+        description: formData.description,
+        discoveryDate: formData.discoveryDate,
+        affectedDataSubjects: formData.affectedDataSubjects,
+        dataCategories: formData.dataCategories,
+        severity: formData.severity,
+        mitigationSteps: formData.mitigationSteps,
+        reportedToAuthorities: formData.reportedToAuthorities,
+        reportedToDataSubjects: formData.reportedToDataSubjects,
+      });
+    } catch (error) {
+      console.error('Error submitting breach notification:', error);
+      setErrors({
+        submit: 'An error occurred while submitting the breach notification. Please try again.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className={`bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 p-6 ${className}`}>
+      <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Data Breach Notification Form</h3>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <FormField
+          id="title"
+          label="Breach Title"
+          required
+          error={errors.title}
+        >
+          <Input
+            id="title"
+            name="title"
+            value={formData.title}
+            onChange={handleChange}
+            placeholder="Enter title describing the breach"
+          />
+        </FormField>
+
+        <FormField
+          id="description"
+          label="Breach Description"
+          required
+          error={errors.description}
+        >
+          <TextArea
+            id="description"
+            name="description"
+            value={formData.description}
+            onChange={handleChange}
+            rows={4}
+            placeholder="Detailed description of what happened, how it happened, and the potential impact"
+          />
+        </FormField>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FormField
+            id="discoveryDate"
+            label="Date of Discovery"
+            required
+            error={errors.discoveryDate}
+          >
+            <Input
+              type="date"
+              id="discoveryDate"
+              name="discoveryDate"
+              value={formData.discoveryDate}
+              onChange={handleChange}
+              max={new Date().toISOString().split('T')[0]}
+            />
+          </FormField>
+
+          <FormField
+            id="affectedDataSubjects"
+            label="Number of Affected Data Subjects"
+            required
+            error={errors.affectedDataSubjects}
+          >
+            <Input
+              type="number"
+              id="affectedDataSubjects"
+              name="affectedDataSubjects"
+              value={formData.affectedDataSubjects}
+              onChange={handleChange}
+              min={0}
+            />
+          </FormField>
+        </div>
+
+        <FormField
+          id="severity"
+          label="Breach Severity"
+          required
+          error={errors.severity}
+        >
+          <select
+            id="severity"
+            name="severity"
+            value={formData.severity}
+            onChange={handleChange}
+            className="block w-full px-3 py-2 text-base border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
+          >
+            <option value="low">Low - Minimal impact on data subjects</option>
+            <option value="medium">Medium - Moderate impact on data subjects</option>
+            <option value="high">High - Significant impact on data subjects</option>
+            <option value="critical">Critical - Severe impact on data subjects</option>
+          </select>
+        </FormField>
+
+        <FormField
+          id="dataCategories"
+          label="Categories of Data Involved"
+          required
+          error={errors.dataCategories}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
+            {formData.dataCategories.length > 0 && formData.dataCategories.filter(cat => !defaultDataCategories.includes(cat)).length > 0 && (
+              <div className="col-span-2 mb-2 p-2 bg-gray-50 dark:bg-gray-800 rounded">
+                <h4 className="text-sm font-medium mb-1">Added Categories:</h4>
+                <div className="flex flex-wrap gap-2">
+                  {formData.dataCategories
+                    .filter(cat => !defaultDataCategories.includes(cat))
+                    .map((category, index) => (
+                      <span key={index} className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                        {category}
+                        <button 
+                          type="button" 
+                          className="ml-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                          onClick={() => {
+                            setFormData(prev => ({
+                              ...prev,
+                              dataCategories: prev.dataCategories.filter(c => c !== category)
+                            }));
+                          }}
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                </div>
+              </div>
+            )}
+            {defaultDataCategories.map((category) => (
+              <Checkbox
+                key={category}
+                id={`category-${category}`}
+                label={category}
+                checked={formData.dataCategories.includes(category)}
+                onChange={() => handleDataCategoryToggle(category)}
+              />
+            ))}
+          </div>
+          
+          <div className="flex space-x-2 mt-4">
+            <Input
+              type="text"
+              id="newDataCategory"
+              value={newDataCategory}
+              onChange={(e) => setNewDataCategory(e.target.value)}
+              onKeyPress={(e) => handleKeyPress(e, 'category')}
+              placeholder="Add other data category"
+              className="flex-1"
+            />
+            <Button
+              type="button"
+              onClick={(e) => handleAddDataCategory(e)}
+              size="sm"
+            >
+              Add
+            </Button>
+          </div>
+        </FormField>
+
+        <FormField
+          id="mitigationSteps"
+          label="Mitigation Steps Taken"
+          error={errors.mitigationSteps}
+        >
+          <div className="flex space-x-2 mb-2">
+            <Input
+              type="text"
+              id="newMitigationStep"
+              value={newMitigationStep}
+              onChange={(e) => setNewMitigationStep(e.target.value)}
+              onKeyPress={(e) => handleKeyPress(e, 'mitigation')}
+              placeholder="e.g., Changed all passwords, Patched vulnerability"
+              className="flex-1"
+            />
+            <Button
+              type="button"
+              onClick={(e) => handleAddMitigationStep(e)}
+              size="sm"
+            >
+              Add
+            </Button>
+          </div>
+          
+          {formData.mitigationSteps.length > 0 && (
+            <ul className="mt-2 space-y-1">
+              {formData.mitigationSteps.map((step, index) => (
+                <li key={index} className="flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-2 rounded">
+                  <span className="text-sm text-gray-700 dark:text-gray-300">{step}</span>
+                  <Button
+                    type="button"
+                    onClick={() => handleRemoveMitigationStep(index)}
+                    variant="ghost"
+                    size="sm"
+                    className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+                  >
+                    Remove
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </FormField>
+        
+        <div className="space-y-4">
+          <Checkbox
+            id="reportedToAuthorities"
+            name="reportedToAuthorities"
+            checked={formData.reportedToAuthorities}
+            onChange={handleChange}
+            label="Reported to Nigerian Data Protection Commission (NDPC)"
+          />
+          
+          <Checkbox
+            id="reportedToDataSubjects"
+            name="reportedToDataSubjects"
+            checked={formData.reportedToDataSubjects}
+            onChange={handleChange}
+            label="Reported to affected data subjects"
+          />
+        </div>
+        
+        {errors.submit && (
+          <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+            <p className="text-sm text-red-700 dark:text-red-400">{errors.submit}</p>
+          </div>
+        )}
+        
+        <div className="flex justify-end">
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            variant="default"
+          >
+            {isSubmitting ? 'Submitting...' : 'Submit Breach Notification'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/components/consent/ConsentBanner.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState } from 'react';
+import { ConsentOption } from '@/types';
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+interface ConsentBannerProps {
+  title?: string;
+  description?: string;
+  privacyPolicyUrl?: string;
+  options: ConsentOption[];
+  onSave: (consents: Record<string, boolean>) => void;
+  onClose?: () => void;
+  className?: string;
+}
+
+export default function ConsentBanner({
+  title = 'Privacy Preferences',
+  description = 'We use cookies and similar technologies to provide certain features, enhance the user experience and deliver content that is relevant to your interests.',
+  privacyPolicyUrl = '/privacy-policy',
+  options,
+  onSave,
+  className = '',
+}: ConsentBannerProps) {
+  const [consents, setConsents] = useState<Record<string, boolean>>(
+    options.reduce((acc, option) => {
+      acc[option.id] = option.defaultValue ?? false;
+      return acc;
+    }, {} as Record<string, boolean>)
+  );
+
+  const handleToggle = (id: string) => {
+    const option = options.find(opt => opt.id === id);
+    if (option?.required) return;
+    
+    setConsents(prev => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  };
+
+  const handleAcceptAll = () => {
+    const allConsents = options.reduce((acc, option) => {
+      acc[option.id] = true;
+      return acc;
+    }, {} as Record<string, boolean>);
+    
+    setConsents(allConsents);
+    onSave(allConsents);
+  };
+
+  const handleSave = () => {
+    onSave(consents);
+  };
+
+  const handleRejectAll = () => {
+    const rejectedConsents = options.reduce((acc, option) => {
+      acc[option.id] = option.required ? true : false;
+      return acc;
+    }, {} as Record<string, boolean>);
+    
+    setConsents(rejectedConsents);
+    onSave(rejectedConsents);
+  };
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/50 ${className}`}>
+      <Card className="w-full max-w-3xl max-h-[90vh] overflow-auto shadow-xl animate-in fade-in slide-in-from-bottom-5 duration-300">
+        <CardHeader className="border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-xl">{title}</CardTitle>
+              <CardDescription className="mt-2">{description}</CardDescription>
+            </div>
+            <Badge variant="primary" className="hidden sm:flex">Privacy Settings</Badge>
+          </div>
+          <a 
+            href={privacyPolicyUrl} 
+            className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-flex items-center"
+          >
+            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+            </svg>
+            View our Privacy Policy
+          </a>
+        </CardHeader>
+        
+        <CardContent className="space-y-4 p-6">
+          <div className="grid gap-4">
+            {options.map((option) => (
+              <div 
+                key={option.id} 
+                className={`p-4 rounded-lg border ${consents[option.id] ? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700'} transition-colors duration-200`}
+              >
+                <div className="flex items-start">
+                  <div className="flex-1">
+                    <div className="flex items-center">
+                      <h3 className="text-sm font-medium text-gray-900 dark:text-white">
+                        {option.label}
+                      </h3>
+                      {option.required && (
+                        <Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
+                      )}
+                    </div>
+                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                      {option.description}
+                    </p>
+                  </div>
+                  <div className="ml-3 flex h-5 items-center">
+                    <Checkbox
+                      id={`consent-${option.id}`}
+                      checked={consents[option.id]}
+                      onChange={() => handleToggle(option.id)}
+                      disabled={option.required}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        
+        <CardFooter className="flex flex-col sm:flex-row sm:justify-between border-t border-gray-200 dark:border-gray-700 p-6 bg-gray-50 dark:bg-gray-800">
+          <div className="mb-4 sm:mb-0">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              You can change your preferences at any time by visiting your account settings.
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
+            <Button 
+              variant="outline" 
+              onClick={handleRejectAll}
+              className="sm:order-1"
+            >
+              Reject All
+            </Button>
+            <Button 
+              variant="secondary" 
+              onClick={handleSave}
+              className="sm:order-2"
+            >
+              Save Preferences
+            </Button>
+            <Button 
+              variant="default" 
+              onClick={handleAcceptAll}
+              className="sm:order-3"
+            >
+              Accept All
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}