laxmanhalaki/Re_Figma_Code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes made to fix the VAPT testing

Browse Source
This commit is contained in:
laxmanhalaki 2026-02-07 14:57:21 +05:30
parent c97053e0e3
commit 81565d294b
11 changed files with 229 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -1,61 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<!-- CSP: Allows blob URLs for file previews and cross-origin API calls during development -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: https: blob:; connect-src 'self' blob: data: http://localhost:5000 http://localhost:3000 ws://localhost:5000 ws://localhost:3000 wss://localhost:5000 wss://localhost:3000; frame-src 'self' blob:; font-src 'self' https://fonts.gstatic.com data:; object-src 'none'; base-uri 'self'; form-action 'self';" />
<link rel="icon" type="image/svg+xml" href="/royal_enfield_logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Royal Enfield Approval & Request Management Portal - Streamlined approval workflows for enterprise operations" />
<meta name="theme-color" content="#2d4a3e" />
<title>Royal Enfield | Approval Portal</title>
<!-- Preload critical fonts and icons --> <head>
<link rel="preconnect" href="https://fonts.googleapis.com"> <meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="icon" type="image/svg+xml" href="/royal_enfield_logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Royal Enfield Approval & Request Management Portal - Streamlined approval workflows for enterprise operations" />
<meta name="theme-color" content="#2d4a3e" />
<title>Royal Enfield | Approval Portal</title>
<!-- Ensure proper icon rendering and layout --> <!-- Preload critical fonts and icons -->
<style> <link rel="preconnect" href="https://fonts.googleapis.com">
/* Ensure Lucide icons render properly */ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
svg { </head>
display: inline-block;
vertical-align: middle;
}
/* Fix for icon alignment in buttons */ <body>
button svg { <div id="root"></div>
flex-shrink: 0; <script type="module" src="/src/main.tsx"></script>
} </body>
/* Ensure proper text rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Fix for mobile viewport and sidebar */
@media (max-width: 768px) {
html {
overflow-x: hidden;
}
}
/* Ensure proper sidebar toggle behavior */
.sidebar-toggle {
transition: all 0.3s ease-in-out;
}
/* Fix for icon button hover states */
button:hover svg {
transform: scale(1.05);
transition: transform 0.2s ease;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html> </html>

2
src/components/common/FormattedDescription.tsx
View File

@ -30,7 +30,7 @@ export function FormattedDescription({ content, className }: FormattedDescriptio
} }
// Wrap the table in a scrollable container // Wrap the table in a scrollable container
return `<div class="table-wrapper" style="overflow-x: auto; max-width: 100%; margin: 8px 0;">${match}</div>`; return `<div class="table-wrapper">${match}</div>`;
}); });
return processed; return processed;

57
src/components/ui/rich-text-editor.tsx
View File

@ -169,9 +169,6 @@ export function RichTextEditor({
// Wrap table in scrollable container for mobile // Wrap table in scrollable container for mobile
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.className = 'table-wrapper'; wrapper.className = 'table-wrapper';
wrapper.style.overflowX = 'auto';
wrapper.style.maxWidth = '100%';
wrapper.style.margin = '8px 0';
wrapper.appendChild(table); wrapper.appendChild(table);
fragment.appendChild(wrapper); fragment.appendChild(wrapper);
} }
@ -182,7 +179,7 @@ export function RichTextEditor({
const innerHTML = element.innerHTML; const innerHTML = element.innerHTML;
// Remove style tags and comments from inner HTML // Remove style tags and comments from inner HTML
const cleaned = innerHTML.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') const cleaned = innerHTML.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
.replace(/<!--[\s\S]*?-->/g, ''); .replace(/<!--[\s\S]*?-->/g, '');
p.innerHTML = cleaned; p.innerHTML = cleaned;
p.removeAttribute('style'); p.removeAttribute('style');
p.removeAttribute('class'); p.removeAttribute('class');
@ -273,34 +270,34 @@ export function RichTextEditor({
if (style.textAlign === 'right') formats.add('right'); if (style.textAlign === 'right') formats.add('right');
if (style.textAlign === 'left') formats.add('left'); if (style.textAlign === 'left') formats.add('left');
// Convert RGB/RGBA to hex for comparison // Convert RGB/RGBA to hex for comparison
const colorToHex = (color: string): string | null => { const colorToHex = (color: string): string | null => {
// If already hex format // If already hex format
if (color.startsWith('#')) { if (color.startsWith('#')) {
return color.toUpperCase(); return color.toUpperCase();
} }
// If RGB/RGBA format // If RGB/RGBA format
const result = color.match(/\d+/g); const result = color.match(/\d+/g);
if (!result || result.length < 3) return null; if (!result || result.length < 3) return null;
const r = result[0]; const r = result[0];
const g = result[1]; const g = result[1];
const b = result[2]; const b = result[2];
if (!r || !g || !b) return null; if (!r || !g || !b) return null;
const rHex = parseInt(r).toString(16).padStart(2, '0'); const rHex = parseInt(r).toString(16).padStart(2, '0');
const gHex = parseInt(g).toString(16).padStart(2, '0'); const gHex = parseInt(g).toString(16).padStart(2, '0');
const bHex = parseInt(b).toString(16).padStart(2, '0'); const bHex = parseInt(b).toString(16).padStart(2, '0');
return `#${rHex}${gHex}${bHex}`.toUpperCase(); return `#${rHex}${gHex}${bHex}`.toUpperCase();
}; };
// Check for background color (highlight) // Check for background color (highlight)
const bgColor = style.backgroundColor; const bgColor = style.backgroundColor;
// Check if background color is set and not transparent/default // Check if background color is set and not transparent/default
if (bgColor && if (bgColor &&
bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'rgba(0, 0, 0, 0)' &&
bgColor !== 'transparent' && bgColor !== 'transparent' &&
bgColor !== 'rgb(255, 255, 255)' && bgColor !== 'rgb(255, 255, 255)' &&
bgColor !== '#ffffff' && bgColor !== '#ffffff' &&
bgColor !== '#FFFFFF') { bgColor !== '#FFFFFF') {
formats.add('highlight'); formats.add('highlight');
const hexColor = colorToHex(bgColor); const hexColor = colorToHex(bgColor);
if (hexColor) { if (hexColor) {
@ -328,8 +325,8 @@ export function RichTextEditor({
const hexTextColor = colorToHex(textColor); const hexTextColor = colorToHex(textColor);
// Check if text color is set and not default black // Check if text color is set and not default black
if (textColor && hexTextColor && if (textColor && hexTextColor &&
textColor !== 'rgba(0, 0, 0, 0)' && textColor !== 'rgba(0, 0, 0, 0)' &&
hexTextColor !== '#000000') { hexTextColor !== '#000000') {
formats.add('textColor'); formats.add('textColor');
// Find matching color from our palette // Find matching color from our palette
const matchedColor = HIGHLIGHT_COLORS.find(c => { const matchedColor = HIGHLIGHT_COLORS.find(c => {
@ -422,7 +419,7 @@ export function RichTextEditor({
const style = window.getComputedStyle(element); const style = window.getComputedStyle(element);
const bgColor = style.backgroundColor; const bgColor = style.backgroundColor;
if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' && if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' &&
bgColor !== 'rgb(255, 255, 255)' && bgColor !== '#ffffff' && bgColor !== '#FFFFFF') { bgColor !== 'rgb(255, 255, 255)' && bgColor !== '#ffffff' && bgColor !== '#FFFFFF') {
// Convert to hex and compare // Convert to hex and compare
const colorToHex = (c: string): string | null => { const colorToHex = (c: string): string | null => {
if (c.startsWith('#')) return c.toUpperCase(); if (c.startsWith('#')) return c.toUpperCase();

1
src/main.tsx
View File

@ -5,6 +5,7 @@ import { AuthProvider } from './contexts/AuthContext';
import { AuthenticatedApp } from './pages/Auth'; import { AuthenticatedApp } from './pages/Auth';
import { store } from './redux/store'; import { store } from './redux/store';
import './styles/globals.css'; import './styles/globals.css';
import './styles/base-layout.css';
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>

6
src/pages/Dashboard/components/sections/CriticalAlertsSection.tsx
View File

@ -33,8 +33,7 @@ export function CriticalAlertsSection({
}: CriticalAlertsSectionProps) { }: CriticalAlertsSectionProps) {
return ( return (
<Card <Card
className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden" className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden h-full"
style={{ height: '100%' }}
data-testid="critical-alerts-section" data-testid="critical-alerts-section"
> >
<CardHeader className="pb-3 sm:pb-4 flex-shrink-0"> <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
@ -60,8 +59,7 @@ export function CriticalAlertsSection({
</div> </div>
</CardHeader> </CardHeader>
<CardContent <CardContent
className="overflow-y-auto flex-1 p-4" className={`overflow-y-auto flex-1 p-4 ${pagination.totalPages > 1 ? 'max-h-[calc(100%-140px)]' : 'max-h-[calc(100%-80px)]'}`}
style={{ maxHeight: pagination.totalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}
> >
<div className="space-y-3 sm:space-y-4"> <div className="space-y-3 sm:space-y-4">
{breachedRequests.length === 0 ? ( {breachedRequests.length === 0 ? (

10
src/pages/Dashboard/components/sections/PriorityDistributionReport.tsx
View File

@ -84,11 +84,7 @@ export function PriorityDistributionReport({
fill="#1f2937" fill="#1f2937"
textAnchor={x > cx ? 'start' : 'end'} textAnchor={x > cx ? 'start' : 'end'}
dominantBaseline="central" dominantBaseline="central"
style={{ className="text-sm font-semibold pointer-events-none"
fontSize: '14px',
fontWeight: '600',
pointerEvents: 'none',
}}
> >
{`${name}: ${percentage}%`} {`${name}: ${percentage}%`}
</text> </text>
@ -102,13 +98,13 @@ export function PriorityDistributionReport({
onNavigate(`requests?priority=${data.priority}`); onNavigate(`requests?priority=${data.priority}`);
} }
}} }}
style={{ cursor: 'pointer' }} className="cursor-pointer"
> >
{priorityDistribution.map((priority, index) => ( {priorityDistribution.map((priority, index) => (
<Cell <Cell
key={`cell-${index}`} key={`cell-${index}`}
fill={priority.priority === 'express' ? '#ef4444' : '#3b82f6'} fill={priority.priority === 'express' ? '#ef4444' : '#3b82f6'}
style={{ cursor: 'pointer' }} className="cursor-pointer"
/> />
))} ))}
</Pie> </Pie>

6
src/pages/Dashboard/components/sections/RecentActivitySection.tsx
View File

@ -40,8 +40,7 @@ export function RecentActivitySection({
}: RecentActivitySectionProps) { }: RecentActivitySectionProps) {
return ( return (
<Card <Card
className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden" className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden h-full"
style={{ height: '100%' }}
data-testid="recent-activity-section" data-testid="recent-activity-section"
> >
<CardHeader className="pb-3 sm:pb-4 flex-shrink-0"> <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
@ -73,8 +72,7 @@ export function RecentActivitySection({
</div> </div>
</CardHeader> </CardHeader>
<CardContent <CardContent
className="overflow-y-auto flex-1 p-4" className={`overflow-y-auto flex-1 p-4 ${pagination.totalPages > 1 ? 'max-h-[calc(100%-140px)]' : 'max-h-[calc(100%-80px)]'}`}
style={{ maxHeight: pagination.totalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}
> >
<div className="space-y-2 sm:space-y-3"> <div className="space-y-2 sm:space-y-3">
{recentActivity.length === 0 ? ( {recentActivity.length === 0 ? (

28
src/pages/MyRequests/components/RequestCard.tsx
View File

@ -17,22 +17,28 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
const stripHtmlTags = (html: string): string => { const stripHtmlTags = (html: string): string => {
if (!html) return ''; if (!html) return '';
// Check if we're in a browser environment // 1. Replace block-level tags with a space to avoid merging words (e.g. </div><div> -> " ")
if (typeof document === 'undefined') { // This preserves readability for the card preview
// Fallback for SSR: use regex to strip HTML tags let text = html.replace(/<(address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|header|hr|li|main|nav|noscript|ol|p|pre|section|table|tfoot|ul|video)[^>]*>/gi, ' ');
return html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
}
// Create a temporary div to parse HTML // 2. Replace <br> with space
const tempDiv = document.createElement('div'); text = text.replace(/<br\s*\/?>/gi, ' ');
tempDiv.innerHTML = html;
// Get text content (automatically strips HTML tags) // 3. Strip all other tags
let text = tempDiv.textContent || tempDiv.innerText || ''; text = text.replace(/<[^>]*>/g, '');
// Clean up extra whitespace // 4. Clean up extra whitespace
text = text.replace(/\s+/g, ' ').trim(); text = text.replace(/\s+/g, ' ').trim();
// 5. Basic HTML entity decoding for common characters
text = text
.replace(/&nbsp;/g, ' ')
.replace(/&amp;/g, '&')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&quot;/g, '"')
.replace(/&#039;/g, "'");
return text; return text;
}; };

28
src/pages/Requests/components/RequestCard.tsx
View File

@ -16,22 +16,28 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
const stripHtmlTags = (html: string): string => { const stripHtmlTags = (html: string): string => {
if (!html) return ''; if (!html) return '';
// Check if we're in a browser environment // 1. Replace block-level tags with a space to avoid merging words (e.g. </div><div> -> " ")
if (typeof document === 'undefined') { // This preserves readability for the card preview
// Fallback for SSR: use regex to strip HTML tags let text = html.replace(/<(address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|header|hr|li|main|nav|noscript|ol|p|pre|section|table|tfoot|ul|video)[^>]*>/gi, ' ');
return html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
}
// Create a temporary div to parse HTML // 2. Replace <br> with space
const tempDiv = document.createElement('div'); text = text.replace(/<br\s*\/?>/gi, ' ');
tempDiv.innerHTML = html;
// Get text content (automatically strips HTML tags) // 3. Strip all other tags
let text = tempDiv.textContent || tempDiv.innerText || ''; text = text.replace(/<[^>]*>/g, '');
// Clean up extra whitespace // 4. Clean up extra whitespace
text = text.replace(/\s+/g, ' ').trim(); text = text.replace(/\s+/g, ' ').trim();
// 5. Basic HTML entity decoding for common characters
text = text
.replace(/&nbsp;/g, ' ')
.replace(/&amp;/g, '&')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&quot;/g, '"')
.replace(/&#039;/g, "'");
return text; return text;
}; };

42
src/styles/base-layout.css Normal file
View File

@ -0,0 +1,42 @@
/* Ensure Lucide icons render properly */
svg {
display: inline-block;
vertical-align: middle;
}
/* Fix for icon alignment in buttons */
button svg {
flex-shrink: 0;
}
/* Ensure proper text rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Fix for mobile viewport and sidebar */
@media (max-width: 768px) {
html {
overflow-x: hidden;
}
}
/* Ensure proper sidebar toggle behavior */
.sidebar-toggle {
transition: all 0.3s ease-in-out;
}
/* Fix for icon button hover states */
button:hover svg {
transform: scale(1.05);
transition: transform 0.2s ease;
}
/* Table wrapper for CSP-compliant horizontal scrolling */
.table-wrapper {
overflow-x: auto;
max-width: 100%;
margin: 8px 0;
}

6
vite.config.ts
View File

@ -75,8 +75,6 @@ export default defineConfig({
server: { server: {
port: 3000, port: 3000,
open: true, open: true,
host: true,
allowedHosts: ['9b89f4bfd360.ngrok-free.app','c6ba819712b5.ngrok-free.app'],
}, },
build: { build: {
outDir: 'dist', outDir: 'dist',
@ -173,6 +171,10 @@ export default defineConfig({
}, },
chunkSizeWarningLimit: 1500, // Increased limit since we have manual chunks chunkSizeWarningLimit: 1500, // Increased limit since we have manual chunks
}, },
esbuild: {
// CRITICAL: Strip all legal comments to prevent "Suspicious Comments" alerts (e.g. from Redux docs)
legalComments: 'none',
},
optimizeDeps: { optimizeDeps: {
include: [ include: [
'react', 'react',