@tantainnovative/ndpr-toolkit 1.0.2 → 1.0.3

package/src/components/dpia/DPIAQuestionnaire.tsx

@@ -0,0 +1,483 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { RiskAssessmentQuestion } from '@/types';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { TextArea } from '@/components/ui/TextArea';
+import { FormField } from '@/components/ui/FormField';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+interface DPIAQuestionnaireProps {
+  questions: RiskAssessmentQuestion[];
+  onSubmit: (answers: Record<string, number>, projectName: string) => void;
+  className?: string;
+}
+
+export default function DPIAQuestionnaire({
+  questions,
+  onSubmit,
+  className = '',
+}: DPIAQuestionnaireProps) {
+  const [projectName, setProjectName] = useState('');
+  const [projectDescription, setProjectDescription] = useState('');
+  const [dataController, setDataController] = useState('');
+  const [assessmentDate, setAssessmentDate] = useState(new Date().toISOString().split('T')[0]);
+  const [answers, setAnswers] = useState<Record<string, number>>({});
+  const [currentStep, setCurrentStep] = useState(0);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [progress, setProgress] = useState(0);
+
+  // Since DPIAQuestion doesn't have a category, we'll create a single category
+  const categories: Record<string, RiskAssessmentQuestion[]> = {
+    'Assessment Questions': questions
+  };
+
+  const categoryNames = Object.keys(categories);
+
+  const handleAnswerChange = (questionId: string, value: number | string) => {
+    setAnswers((prev) => ({
+      ...prev,
+      [questionId]: typeof value === 'string' ? parseInt(value, 10) : value,
+    }));
+    
+    // Clear error when question is answered
+    if (errors[questionId]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[questionId];
+        return newErrors;
+      });
+    }
+  };
+
+  // Render different input types based on question type
+  const renderQuestionInput = (question: RiskAssessmentQuestion) => {
+    switch (question.type) {
+      case 'text':
+        return (
+          <Input
+            id={question.id}
+            value={answers[question.id] || ''}
+            onChange={(e) => handleAnswerChange(question.id, e.target.value)}
+            placeholder={question.guidance}
+            className="w-full"
+          />
+        );
+      
+      case 'textarea':
+        return (
+          <TextArea
+            id={question.id}
+            value={answers[question.id] || ''}
+            onChange={(e) => handleAnswerChange(question.id, e.target.value)}
+            placeholder={question.guidance}
+            rows={4}
+            className="w-full"
+          />
+        );
+      
+      case 'select':
+        return (
+          <select
+            id={question.id}
+            value={answers[question.id] || ''}
+            onChange={(e) => handleAnswerChange(question.id, e.target.value)}
+            className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          >
+            <option value="">Select an option</option>
+            {question.options?.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        );
+      
+      case 'radio':
+        return question.options?.map((option) => (
+          <div 
+            key={option.value} 
+            className={`p-3 border rounded-md cursor-pointer transition-colors ${answers[question.id] === parseInt(option.value) 
+              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 dark:border-blue-400' 
+              : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'}`}
+            onClick={() => handleAnswerChange(question.id, option.value)}
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id={`${question.id}-${option.value}`}
+                  name={question.id}
+                  type="radio"
+                  value={option.value}
+                  checked={answers[question.id] === parseInt(option.value)}
+                  onChange={() => handleAnswerChange(question.id, option.value)}
+                  className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <label
+                  htmlFor={`${question.id}-${option.value}`}
+                  className="ml-3 block text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
+                >
+                  {option.label}
+                </label>
+              </div>
+              {option.riskLevel && getRiskLevelIndicator(parseInt(option.value))}
+            </div>
+          </div>
+        ));
+      
+      case 'checkbox':
+        return question.options?.map((option) => (
+          <div key={option.value} className="flex items-center">
+            <input
+              id={`${question.id}-${option.value}`}
+              type="checkbox"
+              value={option.value}
+              checked={answers[question.id]?.toString().includes(option.value)}
+              onChange={(e) => {
+                const currentValues = answers[question.id]?.toString().split(',').filter(Boolean) || [];
+                if (e.target.checked) {
+                  currentValues.push(option.value);
+                } else {
+                  const index = currentValues.indexOf(option.value);
+                  if (index > -1) currentValues.splice(index, 1);
+                }
+                handleAnswerChange(question.id, currentValues.join(','));
+              }}
+              className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500 rounded"
+            />
+            <label
+              htmlFor={`${question.id}-${option.value}`}
+              className="ml-3 block text-sm text-gray-700 dark:text-gray-300"
+            >
+              {option.label}
+            </label>
+          </div>
+        ));
+      
+      case 'scale':
+        return (
+          <div className="space-y-2">
+            <input
+              type="range"
+              id={question.id}
+              min={question.minValue || 1}
+              max={question.maxValue || 5}
+              value={answers[question.id] || question.minValue || 1}
+              onChange={(e) => handleAnswerChange(question.id, e.target.value)}
+              className="w-full"
+            />
+            <div className="flex justify-between text-sm text-gray-600">
+              {question.scaleLabels ? (
+                Object.entries(question.scaleLabels).map(([value, label]) => (
+                  <span key={value}>{label}</span>
+                ))
+              ) : (
+                <>
+                  <span>{question.minValue || 1}</span>
+                  <span>{question.maxValue || 5}</span>
+                </>
+              )}
+            </div>
+          </div>
+        );
+      
+      default:
+        return <p className="text-gray-500">Unsupported question type: {question.type}</p>;
+    }
+  };
+
+  // Calculate overall progress
+  useEffect(() => {
+    const totalQuestions = questions.length;
+    const answeredQuestions = Object.keys(answers).length;
+    const projectInfoComplete = projectName.trim() !== '' ? 1 : 0;
+    
+    // Calculate progress percentage (project info counts as one question)
+    const calculatedProgress = Math.round(((answeredQuestions + projectInfoComplete) / (totalQuestions + 1)) * 100);
+    setProgress(calculatedProgress);
+  }, [answers, projectName, questions.length]);
+
+  const validateStep = (step: number) => {
+    const newErrors: Record<string, string> = {};
+    
+    if (step === 0) {
+      if (!projectName.trim()) {
+        newErrors.projectName = 'Project name is required';
+      }
+      // Description and data controller are optional, so no validation needed
+    } else {
+      const category = categoryNames[step - 1];
+      const categoryQuestions = categories[category];
+      
+      categoryQuestions.forEach((question) => {
+        if (answers[question.id] === undefined) {
+          newErrors[question.id] = 'Please select an answer for this question';
+        }
+      });
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleNext = () => {
+    if (validateStep(currentStep)) {
+      setCurrentStep((prev) => prev + 1);
+    }
+  };
+
+  const handleBack = () => {
+    setCurrentStep((prev) => prev - 1);
+  };
+
+  const handleSubmit = () => {
+    if (validateStep(currentStep)) {
+      // Submit with just the answers and project name as per interface definition
+      onSubmit(answers, projectName);
+    }
+  };
+
+  const renderStepContent = () => {
+    if (currentStep === 0) {
+      return (
+        <div className="space-y-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Project Information</h3>
+          
+          <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md mb-6">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              This Data Protection Impact Assessment (DPIA) will help you identify and minimize data protection risks in your project.
+              Please provide accurate information to receive the most relevant recommendations.
+            </p>
+          </div>
+          
+          <FormField
+            id="projectName"
+            label="Project Name"
+            required
+            error={errors.projectName}
+          >
+            <Input
+              id="projectName"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              placeholder="Enter the name of your project or data processing activity"
+            />
+          </FormField>
+          
+          <FormField
+            id="projectDescription"
+            label="Project Description"
+            description="Briefly describe the purpose and scope of your project"
+          >
+            <TextArea
+              id="projectDescription"
+              value={projectDescription}
+              onChange={(e) => setProjectDescription(e.target.value)}
+              rows={3}
+              placeholder="Briefly describe the purpose and scope of your project"
+            />
+          </FormField>
+          
+          <FormField
+            id="dataController"
+            label="Data Controller"
+            description="Organization responsible for the data"
+          >
+            <Input
+              id="dataController"
+              value={dataController}
+              onChange={(e) => setDataController(e.target.value)}
+              placeholder="Name of the organization responsible for the data"
+            />
+          </FormField>
+          
+          <FormField
+            id="assessmentDate"
+            label="Assessment Date"
+          >
+            <Input
+              type="date"
+              id="assessmentDate"
+              value={assessmentDate}
+              onChange={(e) => setAssessmentDate(e.target.value)}
+            />
+          </FormField>
+        </div>
+      );
+    }
+
+    const category = categoryNames[currentStep - 1];
+    const categoryQuestions = categories[category];
+
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center space-x-2">
+          <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+            <span className="text-blue-600 dark:text-blue-300 font-medium">{currentStep}</span>
+          </div>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">{category}</h3>
+        </div>
+        
+        <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md mb-4">
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {getCategoryDescription(category)}
+          </p>
+        </div>
+        
+        {categoryQuestions.map((question, index) => (
+          <div key={question.id} className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg space-y-4">
+            <div className="flex items-start">
+              <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3 mt-0.5">
+                <span className="text-blue-600 dark:text-blue-300 text-xs font-medium">{index + 1}</span>
+              </div>
+              <label className="block text-sm font-medium text-gray-800 dark:text-gray-200">
+                {question.text}
+              </label>
+            </div>
+            
+            <div className="ml-9 space-y-2">
+              {renderQuestionInput(question)}
+            </div>
+            
+            {errors[question.id] && (
+              <p className="ml-9 text-sm text-red-600 dark:text-red-400">{errors[question.id]}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Helper function to get category descriptions
+  const getCategoryDescription = (category: string): string => {
+    switch (category) {
+      case 'Data Collection':
+        return 'These questions help assess the risks associated with the types of personal data you collect and the sources of that data.';
+      case 'Data Processing':
+        return 'These questions evaluate how you use, analyze, and transform the personal data within your project.';
+      case 'Data Sharing':
+        return 'These questions examine the risks of sharing personal data with third parties or transferring it across borders.';
+      case 'Security Measures':
+        return 'These questions assess the safeguards you have in place to protect personal data from unauthorized access or breaches.';
+      case 'Data Subject Rights':
+        return 'These questions evaluate how well your project supports individuals in exercising their rights over their personal data.';
+      default:
+        return 'Please answer the following questions about your project.';
+    }
+  };
+
+  // Helper function to display risk level indicators
+  const getRiskLevelIndicator = (value: number) => {
+    const variants: Record<number, 'success' | 'warning' | 'danger' | 'primary'> = {
+      1: 'success',
+      2: 'warning',
+      3: 'danger',
+      4: 'danger'
+    };
+    
+    const labels = {
+      1: 'Low Risk',
+      2: 'Medium Risk',
+      3: 'High Risk',
+      4: 'Very High Risk'
+    };
+    
+    return (
+      <div className="flex items-center ml-auto pl-2">
+        <Badge variant={variants[value as keyof typeof variants]}>
+          {labels[value as keyof typeof labels]}
+        </Badge>
+      </div>
+    );
+  };
+
+  const totalSteps = categoryNames.length + 1; // +1 for the project info step
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle>Data Protection Impact Assessment</CardTitle>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Assess the data protection risks of your project with our DPIA tool.
+        </p>
+      </CardHeader>
+      
+      <CardContent>
+        <div className="mb-6">
+          <div className="flex items-center justify-between mb-2">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              Step {currentStep + 1} of {totalSteps}
+            </div>
+            <div className="text-sm font-medium text-gray-900 dark:text-white">
+              {currentStep === 0
+                ? 'Project Information'
+                : categoryNames[currentStep - 1]}
+            </div>
+          </div>
+          <div className="h-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div
+              className="h-2 bg-blue-600 rounded-full transition-all duration-300 ease-in-out"
+              style={{ width: `${((currentStep + 1) / totalSteps) * 100}%` }}
+            />
+          </div>
+          <div className="flex justify-between mt-2">
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              Overall completion: {progress}%
+            </div>
+            {currentStep > 0 && currentStep < totalSteps && (
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                {categories[categoryNames[currentStep - 1]].filter(q => 
+                  answers[q.id] !== undefined
+                ).length} of {categories[categoryNames[currentStep - 1]].length} questions answered
+              </div>
+            )}
+          </div>
+        </div>
+        
+        <div className="mb-6">
+          {renderStepContent()}
+        </div>
+        
+        <div className="flex justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
+          {currentStep > 0 ? (
+            <Button
+              type="button"
+              onClick={handleBack}
+              variant="outline"
+            >
+              <svg className="w-5 h-5 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="M15 19l-7-7 7-7" />
+              </svg>
+              Back
+            </Button>
+          ) : (
+            <div>{/* Empty div to maintain layout */}</div>
+          )}
+          
+          {currentStep < totalSteps - 1 ? (
+            <Button
+              type="button"
+              onClick={handleNext}
+              variant="default"
+            >
+              Next
+              <svg className="w-5 h-5 ml-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="M9 5l7 7-7 7" />
+              </svg>
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              onClick={handleSubmit}
+              variant="default"
+            >
+              Submit Assessment
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}