@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.4

package/packages/ndpr-toolkit/src/components/dpia/DPIAReport.tsx

@@ -1,373 +0,0 @@
-import React from 'react';
-import { DPIAResult, DPIASection, DPIARisk } from '../../types/dpia';
-
-export interface DPIAReportProps {
-  /**
-   * The DPIA result to display
-   */
-  result: DPIAResult;
-  
-  /**
-   * The sections of the DPIA questionnaire
-   */
-  sections: DPIASection[];
-  
-  /**
-   * Whether to show the full report or just a summary
-   * @default true
-   */
-  showFullReport?: boolean;
-  
-  /**
-   * Whether to allow printing the report
-   * @default true
-   */
-  allowPrint?: boolean;
-  
-  /**
-   * Whether to allow exporting the report as PDF
-   * @default true
-   */
-  allowExport?: boolean;
-  
-  /**
-   * Callback function called when the report is exported
-   */
-  onExport?: (format: 'pdf' | 'docx' | 'html') => void;
-  
-  /**
-   * Custom CSS class for the report container
-   */
-  className?: string;
-  
-  /**
-   * Custom CSS class for the buttons
-   */
-  buttonClassName?: string;
-}
-
-export const DPIAReport: React.FC<DPIAReportProps> = ({
-  result,
-  sections,
-  showFullReport = true,
-  allowPrint = true,
-  allowExport = true,
-  onExport,
-  className = '',
-  buttonClassName = ''
-}) => {
-  // Format a date from timestamp
-  const formatDate = (timestamp: number): string => {
-    return new Date(timestamp).toLocaleDateString('en-GB', {
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric'
-    });
-  };
-  
-  // Get the section title by ID
-  const getSectionTitle = (sectionId: string): string => {
-    const section = sections.find(s => s.id === sectionId);
-    return section?.title || 'Unknown Section';
-  };
-  
-  // Get the question text by ID
-  const getQuestionText = (questionId: string): string => {
-    let questionText = 'Unknown Question';
-    
-    sections.forEach(section => {
-      const question = section.questions.find(q => q.id === questionId);
-      if (question) {
-        questionText = question.text;
-      }
-    });
-    
-    return questionText;
-  };
-  
-  // Get the answer text for a question
-  const getAnswerText = (questionId: string): string => {
-    const answer = result.answers[questionId];
-    
-    if (answer === undefined || answer === null) {
-      return 'Not answered';
-    }
-    
-    if (typeof answer === 'boolean') {
-      return answer ? 'Yes' : 'No';
-    }
-    
-    if (Array.isArray(answer)) {
-      return answer.join(', ');
-    }
-    
-    return String(answer);
-  };
-  
-  // Handle print button click
-  const handlePrint = () => {
-    window.print();
-  };
-  
-  // Handle export button click
-  const handleExport = (format: 'pdf' | 'docx' | 'html') => {
-    if (onExport) {
-      onExport(format);
-    }
-  };
-  
-  // Render risk level badge
-  const renderRiskLevelBadge = (level: 'low' | 'medium' | 'high' | 'critical') => {
-    const colorClasses = {
-      low: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-      medium: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-      high: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
-      critical: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-    };
-    
-    return (
-      <span className={`px-2 py-1 rounded text-xs font-medium ${colorClasses[level]}`}>
-        {level.charAt(0).toUpperCase() + level.slice(1)}
-      </span>
-    );
-  };
-  
-  return (
-    <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 print:shadow-none print:p-0 ${className}`}>
-      {/* Report Header */}
-      <div className="mb-8 border-b border-gray-200 dark:border-gray-700 pb-6 print:pb-4">
-        <div className="flex justify-between items-start">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-              Data Protection Impact Assessment Report
-            </h1>
-            <h2 className="text-xl text-gray-700 dark:text-gray-300 mb-4">
-              {result.title}
-            </h2>
-          </div>
-          
-          {(allowPrint || allowExport) && (
-            <div className="flex space-x-2 print:hidden">
-              {allowPrint && (
-                <button
-                  onClick={handlePrint}
-                  className={`px-3 py-1 bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 ${buttonClassName}`}
-                >
-                  <span className="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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
-                    </svg>
-                    Print
-                  </span>
-                </button>
-              )}
-              
-              {allowExport && (
-                <div className="relative inline-block">
-                  <button
-                    onClick={() => handleExport('pdf')}
-                    className={`px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName}`}
-                  >
-                    <span className="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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                      </svg>
-                      Export PDF
-                    </span>
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-          <div>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              <span className="font-medium">Assessor:</span> {result.assessor.name}, {result.assessor.role}
-            </p>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              <span className="font-medium">Contact:</span> {result.assessor.email}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              <span className="font-medium">Started:</span> {formatDate(result.startedAt)}
-            </p>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              <span className="font-medium">Completed:</span> {result.completedAt ? formatDate(result.completedAt) : 'In progress'}
-            </p>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              <span className="font-medium">Next review:</span> {result.reviewDate ? formatDate(result.reviewDate) : 'Not scheduled'}
-            </p>
-          </div>
-        </div>
-      </div>
-      
-      {/* Executive Summary */}
-      <div className="mb-8">
-        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-          Executive Summary
-        </h2>
-        
-        <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-md mb-4">
-          <div className="flex items-center mb-2">
-            <span className="font-medium mr-2">Overall Risk Level:</span>
-            {renderRiskLevelBadge(result.overallRiskLevel)}
-          </div>
-          
-          <div className="mb-2">
-            <span className="font-medium">Conclusion:</span> {result.conclusion}
-          </div>
-          
-          <div>
-            <span className="font-medium">Can Proceed:</span> {result.canProceed ? 'Yes' : 'No'}
-          </div>
-        </div>
-        
-        <div>
-          <h3 className="font-medium text-gray-900 dark:text-white mb-2">
-            Processing Activity Description
-          </h3>
-          <p className="text-gray-700 dark:text-gray-300 mb-4">
-            {result.processingDescription}
-          </p>
-          
-          {result.recommendations && result.recommendations.length > 0 && (
-            <div>
-              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
-                Key Recommendations
-              </h3>
-              <ul className="list-disc pl-5 text-gray-700 dark:text-gray-300">
-                {result.recommendations.map((recommendation, index) => (
-                  <li key={index}>{recommendation}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-      </div>
-      
-      {/* Identified Risks */}
-      <div className="mb-8">
-        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-          Identified Risks
-        </h2>
-        
-        {result.risks.length === 0 ? (
-          <p className="text-gray-700 dark:text-gray-300">No risks identified.</p>
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-700">
-                <tr>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                    Risk
-                  </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                    Likelihood
-                  </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                    Impact
-                  </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                    Risk Level
-                  </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                    Mitigated
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                {result.risks.map((risk) => (
-                  <tr key={risk.id}>
-                    <td className="px-6 py-4 whitespace-normal text-sm text-gray-900 dark:text-gray-100">
-                      {risk.description}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                      {risk.likelihood} / 5
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                      {risk.impact} / 5
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm">
-                      {renderRiskLevelBadge(risk.level)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                      {risk.mitigated ? (
-                        <span className="text-green-600 dark:text-green-400">Yes</span>
-                      ) : (
-                        <span className="text-red-600 dark:text-red-400">No</span>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-      
-      {/* Full Assessment Details */}
-      {showFullReport && (
-        <div>
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-            Full Assessment Details
-          </h2>
-          
-          {sections.map((section) => {
-            const sectionQuestions = section.questions.filter(question => 
-              result.answers[question.id] !== undefined
-            );
-            
-            if (sectionQuestions.length === 0) {
-              return null;
-            }
-            
-            return (
-              <div key={section.id} className="mb-6">
-                <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-                  {section.title}
-                </h3>
-                
-                <div className="overflow-x-auto">
-                  <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                    <thead className="bg-gray-50 dark:bg-gray-700">
-                      <tr>
-                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                          Question
-                        </th>
-                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                          Answer
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                      {sectionQuestions.map((question) => (
-                        <tr key={question.id}>
-                          <td className="px-6 py-4 whitespace-normal text-sm text-gray-900 dark:text-gray-100">
-                            {question.text}
-                          </td>
-                          <td className="px-6 py-4 whitespace-normal text-sm text-gray-500 dark:text-gray-400">
-                            {getAnswerText(question.id)}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-      
-      {/* Footer */}
-      <div className="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400">
-        <p>This DPIA was conducted in accordance with the Nigeria Data Protection Regulation (NDPR).</p>
-        <p>DPIA Report Version: {result.version}</p>
-        <p>Generated on: {new Date().toLocaleDateString()}</p>
-      </div>
-    </div>
-  );
-};

package/packages/ndpr-toolkit/src/components/dpia/StepIndicator.tsx

@@ -1,174 +0,0 @@
-import React from 'react';
-
-export interface Step {
-  /**
-   * Unique identifier for the step
-   */
-  id: string;
-  
-  /**
-   * Display label for the step
-   */
-  label: string;
-  
-  /**
-   * Optional description for the step
-   */
-  description?: string;
-  
-  /**
-   * Whether the step is completed
-   */
-  completed: boolean;
-  
-  /**
-   * Whether the step is the current active step
-   */
-  active: boolean;
-  
-  /**
-   * Optional icon for the step
-   */
-  icon?: React.ReactNode;
-}
-
-export interface StepIndicatorProps {
-  /**
-   * Array of steps to display
-   */
-  steps: Step[];
-  
-  /**
-   * Callback function called when a step is clicked
-   */
-  onStepClick?: (stepId: string) => void;
-  
-  /**
-   * Whether the steps are clickable
-   * @default true
-   */
-  clickable?: boolean;
-  
-  /**
-   * Orientation of the step indicator
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  
-  /**
-   * Custom CSS class for the container
-   */
-  className?: string;
-  
-  /**
-   * Custom CSS class for the active step
-   */
-  activeStepClassName?: string;
-  
-  /**
-   * Custom CSS class for completed steps
-   */
-  completedStepClassName?: string;
-  
-  /**
-   * Custom CSS class for incomplete steps
-   */
-  incompleteStepClassName?: string;
-}
-
-export const StepIndicator: React.FC<StepIndicatorProps> = ({
-  steps,
-  onStepClick,
-  clickable = true,
-  orientation = 'horizontal',
-  className = '',
-  activeStepClassName = '',
-  completedStepClassName = '',
-  incompleteStepClassName = ''
-}) => {
-  const handleStepClick = (stepId: string) => {
-    if (clickable && onStepClick) {
-      onStepClick(stepId);
-    }
-  };
-  
-  const isVertical = orientation === 'vertical';
-  
-  return (
-    <div 
-      className={`${className} ${
-        isVertical 
-          ? 'flex flex-col space-y-4' 
-          : 'flex items-center justify-between'
-      }`}
-    >
-      {steps.map((step, index) => {
-        const isLast = index === steps.length - 1;
-        const stepClassName = step.active 
-          ? `font-medium ${activeStepClassName || 'text-blue-600 dark:text-blue-400'}` 
-          : step.completed 
-            ? `${completedStepClassName || 'text-green-600 dark:text-green-400'}` 
-            : `${incompleteStepClassName || 'text-gray-500 dark:text-gray-400'}`;
-        
-        return (
-          <React.Fragment key={step.id}>
-            <div 
-              className={`
-                ${isVertical ? 'flex items-start' : 'flex flex-col items-center'}
-                ${clickable ? 'cursor-pointer' : ''}
-              `}
-              onClick={() => handleStepClick(step.id)}
-            >
-              <div className={`
-                flex items-center justify-center
-                ${isVertical ? 'mr-4' : ''}
-              `}>
-                <div className={`
-                  flex items-center justify-center
-                  w-8 h-8 rounded-full
-                  ${step.active 
-                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 border-2 border-blue-600 dark:border-blue-400' 
-                    : step.completed 
-                      ? 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 border-2 border-green-600 dark:border-green-400' 
-                      : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border-2 border-gray-300 dark:border-gray-600'
-                  }
-                `}>
-                  {step.icon ? (
-                    step.icon
-                  ) : step.completed ? (
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                    </svg>
-                  ) : (
-                    <span>{index + 1}</span>
-                  )}
-                </div>
-              </div>
-              
-              <div className={`
-                ${isVertical ? 'flex-1' : 'mt-2 text-center'}
-              `}>
-                <div className={`text-sm font-medium ${stepClassName}`}>
-                  {step.label}
-                </div>
-                {step.description && (
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    {step.description}
-                  </div>
-                )}
-              </div>
-            </div>
-            
-            {!isLast && (
-              <div className={`
-                ${isVertical 
-                  ? 'ml-4 h-8 border-l-2 border-gray-300 dark:border-gray-600' 
-                  : 'w-full border-t-2 border-gray-300 dark:border-gray-600 hidden sm:block'}
-              `} />
-            )}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-};