Merge pull request #92 from pineapaul/sandbox

Redesign system configuration page with modern UI and integrate exist…

Author: pineapaul

app/components/Icon.tsx

@@ -86,7 +86,8 @@ import {
   faHome,
   faRefresh,
   faCircleXmark,
-  faFileExport
+  faFileExport,
+  faListCheck
 } from '@fortawesome/free-solid-svg-icons'
 
 interface IconProps {
@@ -166,6 +167,7 @@ export default function Icon({ name, size = 20, className = '' }: IconProps) {
     'user-group': faUsers,
     'people-group': faUsers,
     'shield-exclamation': faShieldHalved,
+    'shield-halved': faShieldHalved,
     'message-circle': faMessage,
     send: faPaperPlane,
     comments: faComments,
@@ -194,6 +196,7 @@ export default function Icon({ name, size = 20, className = '' }: IconProps) {
     'x-circle': faCircleXmark,
     'circle-xmark': faCircleXmark,
     'file-export': faFileExport,
+    'list-check': faListCheck,
   }
 
   const icon = icons[name]
@@ -279,6 +282,7 @@ function getFallbackEmoji(name: string): string {
     'user-group': '👥',
     'people-group': '👥',
     'shield-exclamation': '🛡️',
+    'shield-halved': '🛡️',
     'shield-x': '🛡️❌',
     'message-circle': '💬',
     send: '📤',
@@ -307,6 +311,7 @@ function getFallbackEmoji(name: string): string {
     'x-circle': '❌',
     'circle-xmark': '❌',
     'file-export': '📤',
+    'list-check': '✅',
   }
   return emojiMap[name] || '📄'
 } 

app/components/RiskMatrix.tsx

@@ -170,20 +170,20 @@ export default function RiskMatrix({
 
   React.useEffect(() => {
     if (selected) setActive({ l: selected.likelihoodIndex, c: selected.consequenceIndex });
-  }, [selected?.likelihoodIndex, selected?.consequenceIndex]);
+  }, [selected]);
 
   const currentRiskCoords = useMemo(() => 
     currentRisk 
       ? findMatrixCoordinates(currentRisk.likelihoodRating, currentRisk.consequenceRating, likelihoodLabels, consequenceLabels)
       : null,
-    [currentRisk?.likelihoodRating, currentRisk?.consequenceRating, likelihoodLabels, consequenceLabels]
+    [currentRisk, likelihoodLabels, consequenceLabels]
   );
 
   const residualRiskCoords = useMemo(() => 
     residualRisk 
       ? findMatrixCoordinates(residualRisk.residualLikelihood, residualRisk.residualConsequence, likelihoodLabels, consequenceLabels)
       : null,
-    [residualRisk?.residualLikelihood, residualRisk?.residualConsequence, likelihoodLabels, consequenceLabels]
+    [residualRisk, likelihoodLabels, consequenceLabels]
   );
 
   const handleSelect = (lIndex: number, cIndex: number) => {

app/hooks/useToast.ts

@@ -0,0 +1,74 @@
+'use client'
+
+import { useState, useCallback, useEffect, useRef } from 'react'
+import type { ToastProps } from '@/app/components/Toast'
+
+export interface ToastOptions {
+  type: 'success' | 'error' | 'warning' | 'info'
+  title: string
+  message?: string
+  duration?: number
+}
+
+export function useToast() {
+  const [toasts, setToasts] = useState<ToastProps[]>([])
+  const timeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map())
+
+  // Cleanup function to clear all timeouts
+  const clearAllTimeouts = useCallback(() => {
+    timeoutsRef.current.forEach(timeout => clearTimeout(timeout))
+    timeoutsRef.current.clear()
+  }, [])
+
+  const removeToast = useCallback((id: string) => {
+    // Clear the timeout if it exists
+    const timeout = timeoutsRef.current.get(id)
+    if (timeout) {
+      clearTimeout(timeout)
+      timeoutsRef.current.delete(id)
+    }
+    
+    setToasts(prev => prev.filter(toast => toast.id !== id))
+  }, [])
+
+  // Auto-remove toast after duration
+  const scheduleToastRemoval = useCallback((id: string, duration: number) => {
+    const timeout = setTimeout(() => {
+      removeToast(id)
+    }, duration)
+    
+    timeoutsRef.current.set(id, timeout)
+  }, [removeToast])
+
+  const showToast = useCallback((options: ToastOptions) => {
+    const id = crypto.randomUUID()
+    const newToast: ToastProps = {
+      id,
+      type: options.type,
+      title: options.title,
+      message: options.message,
+      duration: options.duration || 5000,
+      onClose: (toastId: string) => {
+        removeToast(toastId)
+      }
+    }
+    
+    setToasts(prev => [...prev, newToast])
+    
+    // Schedule auto-removal
+    scheduleToastRemoval(id, newToast.duration || 5000)
+  }, [scheduleToastRemoval, removeToast])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearAllTimeouts()
+    }
+  }, [clearAllTimeouts])
+
+  return {
+    toasts,
+    showToast,
+    removeToast
+  }
+}

app/inventory/information-assets/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import DataTable, { Column } from '@/app/components/DataTable'
 import Icon from '@/app/components/Icon'
@@ -49,11 +49,7 @@ export default function InformationAssetsPage() {
     'availability', 'criticality', 'additionalInfo', 'actions'
   ]))
 
-  useEffect(() => {
-    fetchAssets()
-  }, [])
-
-  const fetchAssets = async () => {
+  const fetchAssets = useCallback(async () => {
     try {
       setLoading(true)
       const response = await fetch('/api/information-assets')
@@ -70,7 +66,11 @@ export default function InformationAssetsPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [])
+
+  useEffect(() => {
+    fetchAssets()
+  }, [fetchAssets])
 
   const allColumns: Column[] = [
     {

app/inventory/third-parties/new/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import Icon from '@/app/components/Icon'
 import Link from 'next/link'
@@ -32,11 +32,7 @@ export default function NewThirdPartyPage() {
     status: 'Active'
   })
 
-  useEffect(() => {
-    fetchInformationAssets()
-  }, [])
-
-  const fetchInformationAssets = async () => {
+  const fetchInformationAssets = useCallback(async () => {
     try {
       const response = await fetch('/api/information-assets')
       const result = await response.json()
@@ -47,7 +43,11 @@ export default function NewThirdPartyPage() {
     } catch (error) {
       console.error('Error fetching information assets:', error)
     }
-  }
+  }, [])
+
+  useEffect(() => {
+    fetchInformationAssets()
+  }, [fetchInformationAssets])
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target

app/inventory/third-parties/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import DataTable, { Column } from '@/app/components/DataTable'
 import Icon from '@/app/components/Icon'
 import Link from 'next/link'
@@ -54,23 +54,7 @@ export default function ThirdPartiesPage() {
     sortOrder: 'asc'
   })
 
-  useEffect(() => {
-    fetchThirdParties()
-    fetchInformationAssets()
-  }, [])
-
-  // Handle filter changes
-  const handleFilterChange = (newFilters: any) => {
-    setFilters(prev => ({ ...prev, ...newFilters }))
-    fetchThirdParties(1, { ...filters, ...newFilters })
-  }
-
-  // Handle pagination
-  const handlePageChange = (newPage: number) => {
-    fetchThirdParties(newPage, filters)
-  }
-
-  const fetchThirdParties = async (page = 1, newFilters = filters) => {
+  const fetchThirdParties = useCallback(async (page = 1, newFilters = filters) => {
     try {
       setLoading(true)
 
@@ -101,19 +85,35 @@ export default function ThirdPartiesPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [filters, pagination.limit])
 
-  const fetchInformationAssets = async () => {
+  const fetchInformationAssets = useCallback(async () => {
     try {
       const response = await fetch('/api/information-assets')
       const result = await response.json()
 
       if (result.success) {
         setInformationAssets(result.data)
       }
-    } catch (error) {
-      console.error('Error fetching information assets:', error)
+    } catch (err) {
+      console.error('Error fetching information assets:', err)
     }
+  }, [])
+
+  useEffect(() => {
+    fetchThirdParties()
+    fetchInformationAssets()
+  }, [fetchThirdParties, fetchInformationAssets])
+
+  // Handle filter changes
+  const handleFilterChange = (newFilters: any) => {
+    setFilters(prev => ({ ...prev, ...newFilters }))
+    fetchThirdParties(1, { ...filters, ...newFilters })
+  }
+
+  // Handle pagination
+  const handlePageChange = (newPage: number) => {
+    fetchThirdParties(newPage, filters)
   }
 
 

app/risk-management/risks/new/page.tsx

@@ -182,7 +182,7 @@ export default function NewRisk() {
     fetchInformationAssets()
     fetchSOAControls()
     generateAndSetRiskId()
-  }, [])
+  }, [showToast])
 
   // Modal functions
   const openAssetModal = () => {