@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.4

package/src/components/dpia/DPIAQuestionnaire.tsx

@@ -1,483 +0,0 @@
-'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>
-  );
-}