changes made to fix the VAPT testing
This commit is contained in:
parent
c97053e0e3
commit
81565d294b
78
index.html
78
index.html
@ -1,61 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<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 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<!-- Ensure proper icon rendering and layout -->
|
||||
<style>
|
||||
/* 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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -15,24 +15,24 @@ interface FormattedDescriptionProps {
|
||||
export function FormattedDescription({ content, className }: FormattedDescriptionProps) {
|
||||
const processedContent = React.useMemo(() => {
|
||||
if (!content) return '';
|
||||
|
||||
|
||||
// Wrap tables that aren't already wrapped in a scrollable container using regex
|
||||
// Match <table> tags that aren't already inside a .table-wrapper
|
||||
let processed = content;
|
||||
|
||||
|
||||
// Pattern to match table tags that aren't already wrapped
|
||||
const tablePattern = /<table[^>]*>[\s\S]*?<\/table>/gi;
|
||||
|
||||
|
||||
processed = processed.replace(tablePattern, (match) => {
|
||||
// Check if this table is already wrapped
|
||||
if (match.includes('table-wrapper')) {
|
||||
return match;
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}, [content]);
|
||||
|
||||
|
||||
@ -68,55 +68,55 @@ export function RichTextEditor({
|
||||
const cleanWordHTML = React.useCallback((html: string): string => {
|
||||
// Remove HTML comments (like Word style definitions)
|
||||
html = html.replace(/<!--[\s\S]*?-->/g, '');
|
||||
|
||||
|
||||
// Remove style tags (Word CSS)
|
||||
html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
|
||||
|
||||
|
||||
// Remove script tags
|
||||
html = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
|
||||
|
||||
|
||||
// Remove meta tags
|
||||
html = html.replace(/<meta[^>]*>/gi, '');
|
||||
|
||||
|
||||
// Remove Word-specific classes and attributes
|
||||
html = html.replace(/\s*class="Mso[^"]*"/gi, '');
|
||||
html = html.replace(/\s*class="mso[^"]*"/gi, '');
|
||||
html = html.replace(/\s*style="[^"]*mso-[^"]*"/gi, '');
|
||||
html = html.replace(/\s*style="[^"]*font-family:[^"]*"/gi, '');
|
||||
|
||||
|
||||
// Remove xmlns attributes
|
||||
html = html.replace(/\s*xmlns[^=]*="[^"]*"/gi, '');
|
||||
|
||||
|
||||
// Remove o:p tags (Word paragraph markers)
|
||||
html = html.replace(/<\/?o:p[^>]*>/gi, '');
|
||||
|
||||
|
||||
// Remove v:shapes and other Word-specific elements
|
||||
html = html.replace(/<v:[^>]*>[\s\S]*?<\/v:[^>]*>/gi, '');
|
||||
html = html.replace(/<v:[^>]*\/>/gi, '');
|
||||
|
||||
|
||||
// Clean up empty paragraphs
|
||||
html = html.replace(/<p[^>]*>\s*<\/p>/gi, '');
|
||||
html = html.replace(/<div[^>]*>\s*<\/div>/gi, '');
|
||||
|
||||
|
||||
// Remove excessive whitespace
|
||||
html = html.replace(/\s+/g, ' ');
|
||||
html = html.trim();
|
||||
|
||||
|
||||
return html;
|
||||
}, []);
|
||||
|
||||
// Handle paste event to preserve formatting
|
||||
const handlePaste = React.useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
const clipboardData = e.clipboardData;
|
||||
let pastedData = clipboardData.getData('text/html') || clipboardData.getData('text/plain');
|
||||
|
||||
|
||||
// Clean Word/Office metadata if HTML
|
||||
if (pastedData.includes('<!--') || pastedData.includes('<style') || pastedData.includes('MsoNormal')) {
|
||||
pastedData = cleanWordHTML(pastedData);
|
||||
}
|
||||
|
||||
|
||||
if (!editorRef.current) return;
|
||||
|
||||
const selection = window.getSelection();
|
||||
@ -131,12 +131,12 @@ export function RichTextEditor({
|
||||
|
||||
// Clean and preserve formatting
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
|
||||
// Process each node to preserve lists, tables, and basic formatting
|
||||
Array.from(tempDiv.childNodes).forEach((node) => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
const element = node as HTMLElement;
|
||||
|
||||
|
||||
// Preserve lists (ul, ol)
|
||||
if (element.tagName === 'UL' || element.tagName === 'OL') {
|
||||
const list = element.cloneNode(true) as HTMLElement;
|
||||
@ -169,9 +169,6 @@ export function RichTextEditor({
|
||||
// Wrap table in scrollable container for mobile
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'table-wrapper';
|
||||
wrapper.style.overflowX = 'auto';
|
||||
wrapper.style.maxWidth = '100%';
|
||||
wrapper.style.margin = '8px 0';
|
||||
wrapper.appendChild(table);
|
||||
fragment.appendChild(wrapper);
|
||||
}
|
||||
@ -182,7 +179,7 @@ export function RichTextEditor({
|
||||
const innerHTML = element.innerHTML;
|
||||
// Remove style tags and comments from inner HTML
|
||||
const cleaned = innerHTML.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
|
||||
.replace(/<!--[\s\S]*?-->/g, '');
|
||||
.replace(/<!--[\s\S]*?-->/g, '');
|
||||
p.innerHTML = cleaned;
|
||||
p.removeAttribute('style');
|
||||
p.removeAttribute('class');
|
||||
@ -227,7 +224,7 @@ export function RichTextEditor({
|
||||
}
|
||||
|
||||
range.insertNode(fragment);
|
||||
|
||||
|
||||
// Move cursor to end of inserted content
|
||||
range.collapse(false);
|
||||
selection.removeAllRanges();
|
||||
@ -242,21 +239,21 @@ export function RichTextEditor({
|
||||
// Check active formats (bold, italic, etc.)
|
||||
const checkActiveFormats = React.useCallback(() => {
|
||||
if (!editorRef.current || !isFocused) return;
|
||||
|
||||
|
||||
const formats = new Set<string>();
|
||||
const selection = window.getSelection();
|
||||
|
||||
|
||||
if (selection && selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
const commonAncestor = range.commonAncestorContainer;
|
||||
let element: HTMLElement | null = null;
|
||||
|
||||
|
||||
if (commonAncestor.nodeType === Node.TEXT_NODE) {
|
||||
element = commonAncestor.parentElement;
|
||||
} else {
|
||||
element = commonAncestor as HTMLElement;
|
||||
}
|
||||
|
||||
|
||||
while (element && element !== editorRef.current) {
|
||||
const tagName = element.tagName.toLowerCase();
|
||||
if (tagName === 'strong' || tagName === 'b') formats.add('bold');
|
||||
@ -267,40 +264,40 @@ export function RichTextEditor({
|
||||
if (tagName === 'h3') formats.add('h3');
|
||||
if (tagName === 'ul') formats.add('ul');
|
||||
if (tagName === 'ol') formats.add('ol');
|
||||
|
||||
|
||||
const style = window.getComputedStyle(element);
|
||||
if (style.textAlign === 'center') formats.add('center');
|
||||
if (style.textAlign === 'right') formats.add('right');
|
||||
if (style.textAlign === 'left') formats.add('left');
|
||||
|
||||
// Convert RGB/RGBA to hex for comparison
|
||||
const colorToHex = (color: string): string | null => {
|
||||
// If already hex format
|
||||
if (color.startsWith('#')) {
|
||||
return color.toUpperCase();
|
||||
}
|
||||
// If RGB/RGBA format
|
||||
const result = color.match(/\d+/g);
|
||||
if (!result || result.length < 3) return null;
|
||||
const r = result[0];
|
||||
const g = result[1];
|
||||
const b = result[2];
|
||||
if (!r || !g || !b) return null;
|
||||
const rHex = parseInt(r).toString(16).padStart(2, '0');
|
||||
const gHex = parseInt(g).toString(16).padStart(2, '0');
|
||||
const bHex = parseInt(b).toString(16).padStart(2, '0');
|
||||
return `#${rHex}${gHex}${bHex}`.toUpperCase();
|
||||
};
|
||||
|
||||
|
||||
// Convert RGB/RGBA to hex for comparison
|
||||
const colorToHex = (color: string): string | null => {
|
||||
// If already hex format
|
||||
if (color.startsWith('#')) {
|
||||
return color.toUpperCase();
|
||||
}
|
||||
// If RGB/RGBA format
|
||||
const result = color.match(/\d+/g);
|
||||
if (!result || result.length < 3) return null;
|
||||
const r = result[0];
|
||||
const g = result[1];
|
||||
const b = result[2];
|
||||
if (!r || !g || !b) return null;
|
||||
const rHex = parseInt(r).toString(16).padStart(2, '0');
|
||||
const gHex = parseInt(g).toString(16).padStart(2, '0');
|
||||
const bHex = parseInt(b).toString(16).padStart(2, '0');
|
||||
return `#${rHex}${gHex}${bHex}`.toUpperCase();
|
||||
};
|
||||
|
||||
// Check for background color (highlight)
|
||||
const bgColor = style.backgroundColor;
|
||||
// Check if background color is set and not transparent/default
|
||||
if (bgColor &&
|
||||
bgColor !== 'rgba(0, 0, 0, 0)' &&
|
||||
bgColor !== 'transparent' &&
|
||||
bgColor !== 'rgb(255, 255, 255)' &&
|
||||
bgColor !== '#ffffff' &&
|
||||
bgColor !== '#FFFFFF') {
|
||||
if (bgColor &&
|
||||
bgColor !== 'rgba(0, 0, 0, 0)' &&
|
||||
bgColor !== 'transparent' &&
|
||||
bgColor !== 'rgb(255, 255, 255)' &&
|
||||
bgColor !== '#ffffff' &&
|
||||
bgColor !== '#FFFFFF') {
|
||||
formats.add('highlight');
|
||||
const hexColor = colorToHex(bgColor);
|
||||
if (hexColor) {
|
||||
@ -321,15 +318,15 @@ export function RichTextEditor({
|
||||
// Only reset if we haven't found a highlight yet
|
||||
setCurrentHighlightColor(null);
|
||||
}
|
||||
|
||||
|
||||
// Check for text color
|
||||
const textColor = style.color;
|
||||
// Convert to hex for comparison
|
||||
const hexTextColor = colorToHex(textColor);
|
||||
// Check if text color is set and not default black
|
||||
if (textColor && hexTextColor &&
|
||||
textColor !== 'rgba(0, 0, 0, 0)' &&
|
||||
hexTextColor !== '#000000') {
|
||||
if (textColor && hexTextColor &&
|
||||
textColor !== 'rgba(0, 0, 0, 0)' &&
|
||||
hexTextColor !== '#000000') {
|
||||
formats.add('textColor');
|
||||
// Find matching color from our palette
|
||||
const matchedColor = HIGHLIGHT_COLORS.find(c => {
|
||||
@ -350,23 +347,23 @@ export function RichTextEditor({
|
||||
setCurrentTextColor(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
element = element.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setActiveFormats(formats);
|
||||
}, [isFocused]);
|
||||
|
||||
// Apply formatting command
|
||||
const applyFormat = React.useCallback((command: string, value?: string) => {
|
||||
if (!editorRef.current) return;
|
||||
|
||||
|
||||
// Restore focus if needed
|
||||
if (!isFocused) {
|
||||
editorRef.current.focus();
|
||||
}
|
||||
|
||||
|
||||
// Save current selection
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) {
|
||||
@ -374,15 +371,15 @@ export function RichTextEditor({
|
||||
editorRef.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Execute formatting command
|
||||
document.execCommand(command, false, value);
|
||||
|
||||
|
||||
// Update content
|
||||
if (editorRef.current) {
|
||||
onChange(editorRef.current.innerHTML);
|
||||
}
|
||||
|
||||
|
||||
// Check active formats after a short delay
|
||||
setTimeout(checkActiveFormats, 10);
|
||||
}, [isFocused, onChange, checkActiveFormats]);
|
||||
@ -390,12 +387,12 @@ export function RichTextEditor({
|
||||
// Apply highlight color
|
||||
const applyHighlight = React.useCallback((color: string) => {
|
||||
if (!editorRef.current) return;
|
||||
|
||||
|
||||
// Restore focus if needed
|
||||
if (!isFocused) {
|
||||
editorRef.current.focus();
|
||||
}
|
||||
|
||||
|
||||
// Save current selection
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) {
|
||||
@ -403,26 +400,26 @@ export function RichTextEditor({
|
||||
editorRef.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Check if this color is already applied by checking the selection's style
|
||||
let isAlreadyApplied = false;
|
||||
if (selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
const commonAncestor = range.commonAncestorContainer;
|
||||
let element: HTMLElement | null = null;
|
||||
|
||||
|
||||
if (commonAncestor.nodeType === Node.TEXT_NODE) {
|
||||
element = commonAncestor.parentElement;
|
||||
} else {
|
||||
element = commonAncestor as HTMLElement;
|
||||
}
|
||||
|
||||
|
||||
// Check if the selected element has the same background color
|
||||
while (element && element !== editorRef.current) {
|
||||
const style = window.getComputedStyle(element);
|
||||
const bgColor = style.backgroundColor;
|
||||
if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' &&
|
||||
bgColor !== 'rgb(255, 255, 255)' && bgColor !== '#ffffff' && bgColor !== '#FFFFFF') {
|
||||
if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' &&
|
||||
bgColor !== 'rgb(255, 255, 255)' && bgColor !== '#ffffff' && bgColor !== '#FFFFFF') {
|
||||
// Convert to hex and compare
|
||||
const colorToHex = (c: string): string | null => {
|
||||
if (c.startsWith('#')) return c.toUpperCase();
|
||||
@ -446,7 +443,7 @@ export function RichTextEditor({
|
||||
element = element.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Use backColor command for highlight (background color)
|
||||
if (color === 'transparent' || isAlreadyApplied) {
|
||||
// Remove highlight - use a more aggressive approach to fully remove
|
||||
@ -454,10 +451,10 @@ export function RichTextEditor({
|
||||
if (!range.collapsed) {
|
||||
// Store the range before manipulation
|
||||
const contents = range.extractContents();
|
||||
|
||||
|
||||
// Create a new text node or span without background color
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
|
||||
// Process extracted contents to remove background colors
|
||||
const processNode = (node: Node) => {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
@ -465,14 +462,14 @@ export function RichTextEditor({
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
const el = node as HTMLElement;
|
||||
const newEl = document.createElement(el.tagName.toLowerCase());
|
||||
|
||||
|
||||
// Copy all attributes except style-related ones
|
||||
Array.from(el.attributes).forEach(attr => {
|
||||
if (attr.name !== 'style' && attr.name !== 'class') {
|
||||
newEl.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Process children and copy without background color
|
||||
Array.from(el.childNodes).forEach(child => {
|
||||
const processed = processNode(child);
|
||||
@ -480,27 +477,27 @@ export function RichTextEditor({
|
||||
newEl.appendChild(processed);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Remove background color if present
|
||||
if (el.style.backgroundColor) {
|
||||
newEl.style.backgroundColor = '';
|
||||
}
|
||||
|
||||
|
||||
return newEl;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
Array.from(contents.childNodes).forEach(child => {
|
||||
const processed = processNode(child);
|
||||
if (processed) {
|
||||
fragment.appendChild(processed);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Insert the cleaned fragment
|
||||
range.insertNode(fragment);
|
||||
|
||||
|
||||
// Also use execCommand to ensure removal
|
||||
document.execCommand('removeFormat', false);
|
||||
} else {
|
||||
@ -523,21 +520,21 @@ export function RichTextEditor({
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Clear selection immediately after applying to prevent "sticky" highlight mode
|
||||
const sel = window.getSelection();
|
||||
if (sel) {
|
||||
sel.removeAllRanges();
|
||||
}
|
||||
|
||||
|
||||
// Update content
|
||||
if (editorRef.current) {
|
||||
onChange(editorRef.current.innerHTML);
|
||||
}
|
||||
|
||||
|
||||
// Close popover
|
||||
setHighlightColorOpen(false);
|
||||
|
||||
|
||||
// Refocus editor after a short delay and check formats
|
||||
setTimeout(() => {
|
||||
if (editorRef.current) {
|
||||
@ -550,12 +547,12 @@ export function RichTextEditor({
|
||||
// Apply text color
|
||||
const applyTextColor = React.useCallback((color: string) => {
|
||||
if (!editorRef.current) return;
|
||||
|
||||
|
||||
// Restore focus if needed
|
||||
if (!isFocused) {
|
||||
editorRef.current.focus();
|
||||
}
|
||||
|
||||
|
||||
// Save current selection
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) {
|
||||
@ -563,20 +560,20 @@ export function RichTextEditor({
|
||||
editorRef.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Check if this color is already applied by checking the selection's style
|
||||
let isAlreadyApplied = false;
|
||||
if (selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
const commonAncestor = range.commonAncestorContainer;
|
||||
let element: HTMLElement | null = null;
|
||||
|
||||
|
||||
if (commonAncestor.nodeType === Node.TEXT_NODE) {
|
||||
element = commonAncestor.parentElement;
|
||||
} else {
|
||||
element = commonAncestor as HTMLElement;
|
||||
}
|
||||
|
||||
|
||||
// Check if the selected element has the same text color
|
||||
while (element && element !== editorRef.current) {
|
||||
const style = window.getComputedStyle(element);
|
||||
@ -612,7 +609,7 @@ export function RichTextEditor({
|
||||
element = element.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Use foreColor command for text color
|
||||
if (color === 'transparent' || color === 'default' || isAlreadyApplied) {
|
||||
// Remove text color by removing format or setting to default
|
||||
@ -633,15 +630,15 @@ export function RichTextEditor({
|
||||
setCustomTextColor(color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Update content
|
||||
if (editorRef.current) {
|
||||
onChange(editorRef.current.innerHTML);
|
||||
}
|
||||
|
||||
|
||||
// Close popover
|
||||
setTextColorOpen(false);
|
||||
|
||||
|
||||
// Check active formats after a short delay
|
||||
setTimeout(checkActiveFormats, 10);
|
||||
}, [isFocused, onChange, checkActiveFormats]);
|
||||
@ -692,11 +689,11 @@ export function RichTextEditor({
|
||||
// Handle selection change to update active formats
|
||||
React.useEffect(() => {
|
||||
if (!isFocused) return;
|
||||
|
||||
|
||||
const handleSelectionChange = () => {
|
||||
checkActiveFormats();
|
||||
};
|
||||
|
||||
|
||||
document.addEventListener('selectionchange', handleSelectionChange);
|
||||
return () => {
|
||||
document.removeEventListener('selectionchange', handleSelectionChange);
|
||||
@ -748,7 +745,7 @@ export function RichTextEditor({
|
||||
>
|
||||
<Underline className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Highlight Color Picker */}
|
||||
<Popover open={highlightColorOpen} onOpenChange={setHighlightColorOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
@ -765,8 +762,8 @@ export function RichTextEditor({
|
||||
<Highlighter className="h-4 w-4" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-2"
|
||||
<PopoverContent
|
||||
className="w-auto p-2"
|
||||
align="start"
|
||||
onPointerDownOutside={(e) => {
|
||||
// Prevent closing when clicking inside popover
|
||||
@ -791,7 +788,7 @@ export function RichTextEditor({
|
||||
>
|
||||
<X className="h-4 w-4 text-gray-500" />
|
||||
</Button>
|
||||
|
||||
|
||||
<div className="text-xs font-semibold text-gray-700 mb-2 pr-6">Highlight Color</div>
|
||||
<div className="grid grid-cols-6 gap-1.5 pr-1 mb-2">
|
||||
{HIGHLIGHT_COLORS.map((color) => {
|
||||
@ -833,7 +830,7 @@ export function RichTextEditor({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Remove Highlight Button - Standard pattern */}
|
||||
{currentHighlightColor && currentHighlightColor !== 'transparent' && (
|
||||
<div className="mb-2">
|
||||
@ -852,7 +849,7 @@ export function RichTextEditor({
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Custom Color Picker */}
|
||||
<div className="border-t border-gray-200 pt-2 mt-2">
|
||||
<div className="text-xs font-semibold text-gray-700 mb-1.5">Custom Color</div>
|
||||
@ -899,7 +896,7 @@ export function RichTextEditor({
|
||||
// Get pasted text from clipboard
|
||||
const pastedText = e.clipboardData.getData('text').trim();
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
// Process after paste event completes
|
||||
setTimeout(() => {
|
||||
// Check if it's a valid hex color with #
|
||||
@ -980,7 +977,7 @@ export function RichTextEditor({
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
|
||||
{/* Text Color Picker */}
|
||||
<Popover open={textColorOpen} onOpenChange={setTextColorOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
@ -997,8 +994,8 @@ export function RichTextEditor({
|
||||
<Type className="h-4 w-4" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-2"
|
||||
<PopoverContent
|
||||
className="w-auto p-2"
|
||||
align="start"
|
||||
onPointerDownOutside={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
@ -1022,7 +1019,7 @@ export function RichTextEditor({
|
||||
>
|
||||
<X className="h-4 w-4 text-gray-500" />
|
||||
</Button>
|
||||
|
||||
|
||||
<div className="text-xs font-semibold text-gray-700 mb-2 pr-6">Text Color</div>
|
||||
<div className="grid grid-cols-6 gap-1.5 pr-1 mb-2">
|
||||
{/* Default/Black Color Option - First position (standard) */}
|
||||
@ -1085,7 +1082,7 @@ export function RichTextEditor({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Remove Text Color Button - Standard pattern */}
|
||||
{currentTextColor && currentTextColor !== '#000000' && (
|
||||
<div className="mb-2">
|
||||
@ -1104,7 +1101,7 @@ export function RichTextEditor({
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Custom Text Color Picker */}
|
||||
<div className="border-t border-gray-200 pt-2 mt-2">
|
||||
<div className="text-xs font-semibold text-gray-700 mb-1.5">Custom Color</div>
|
||||
|
||||
@ -5,6 +5,7 @@ import { AuthProvider } from './contexts/AuthContext';
|
||||
import { AuthenticatedApp } from './pages/Auth';
|
||||
import { store } from './redux/store';
|
||||
import './styles/globals.css';
|
||||
import './styles/base-layout.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
|
||||
@ -33,8 +33,7 @@ export function CriticalAlertsSection({
|
||||
}: CriticalAlertsSectionProps) {
|
||||
return (
|
||||
<Card
|
||||
className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden"
|
||||
style={{ height: '100%' }}
|
||||
className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden h-full"
|
||||
data-testid="critical-alerts-section"
|
||||
>
|
||||
<CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
|
||||
@ -60,8 +59,7 @@ export function CriticalAlertsSection({
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent
|
||||
className="overflow-y-auto flex-1 p-4"
|
||||
style={{ maxHeight: pagination.totalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}
|
||||
className={`overflow-y-auto flex-1 p-4 ${pagination.totalPages > 1 ? 'max-h-[calc(100%-140px)]' : 'max-h-[calc(100%-80px)]'}`}
|
||||
>
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{breachedRequests.length === 0 ? (
|
||||
|
||||
@ -84,11 +84,7 @@ export function PriorityDistributionReport({
|
||||
fill="#1f2937"
|
||||
textAnchor={x > cx ? 'start' : 'end'}
|
||||
dominantBaseline="central"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
className="text-sm font-semibold pointer-events-none"
|
||||
>
|
||||
{`${name}: ${percentage}%`}
|
||||
</text>
|
||||
@ -102,13 +98,13 @@ export function PriorityDistributionReport({
|
||||
onNavigate(`requests?priority=${data.priority}`);
|
||||
}
|
||||
}}
|
||||
style={{ cursor: 'pointer' }}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{priorityDistribution.map((priority, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={priority.priority === 'express' ? '#ef4444' : '#3b82f6'}
|
||||
style={{ cursor: 'pointer' }}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
|
||||
@ -40,8 +40,7 @@ export function RecentActivitySection({
|
||||
}: RecentActivitySectionProps) {
|
||||
return (
|
||||
<Card
|
||||
className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden"
|
||||
style={{ height: '100%' }}
|
||||
className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden h-full"
|
||||
data-testid="recent-activity-section"
|
||||
>
|
||||
<CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
|
||||
@ -73,8 +72,7 @@ export function RecentActivitySection({
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent
|
||||
className="overflow-y-auto flex-1 p-4"
|
||||
style={{ maxHeight: pagination.totalPages > 1 ? 'calc(100% - 140px)' : 'calc(100% - 80px)' }}
|
||||
className={`overflow-y-auto flex-1 p-4 ${pagination.totalPages > 1 ? 'max-h-[calc(100%-140px)]' : 'max-h-[calc(100%-80px)]'}`}
|
||||
>
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
{recentActivity.length === 0 ? (
|
||||
|
||||
@ -16,23 +16,29 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
|
||||
*/
|
||||
const stripHtmlTags = (html: string): string => {
|
||||
if (!html) return '';
|
||||
|
||||
// Check if we're in a browser environment
|
||||
if (typeof document === 'undefined') {
|
||||
// Fallback for SSR: use regex to strip HTML tags
|
||||
return html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
// Create a temporary div to parse HTML
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = html;
|
||||
|
||||
// Get text content (automatically strips HTML tags)
|
||||
let text = tempDiv.textContent || tempDiv.innerText || '';
|
||||
|
||||
// Clean up extra whitespace
|
||||
|
||||
// 1. Replace block-level tags with a space to avoid merging words (e.g. </div><div> -> " ")
|
||||
// This preserves readability for the card preview
|
||||
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, ' ');
|
||||
|
||||
// 2. Replace <br> with space
|
||||
text = text.replace(/<br\s*\/?>/gi, ' ');
|
||||
|
||||
// 3. Strip all other tags
|
||||
text = text.replace(/<[^>]*>/g, '');
|
||||
|
||||
// 4. Clean up extra whitespace
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
|
||||
|
||||
// 5. Basic HTML entity decoding for common characters
|
||||
text = text
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'");
|
||||
|
||||
return text;
|
||||
};
|
||||
|
||||
@ -101,18 +107,18 @@ export function RequestCard({ request, index, onViewRequest }: RequestCardProps)
|
||||
{(() => {
|
||||
const templateType = request?.templateType || (request as any)?.template_type || '';
|
||||
const templateTypeUpper = templateType?.toUpperCase() || '';
|
||||
|
||||
|
||||
// Direct mapping from templateType
|
||||
let templateLabel = 'Non-Templatized';
|
||||
let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
|
||||
|
||||
|
||||
if (templateTypeUpper === 'DEALER CLAIM') {
|
||||
templateLabel = 'Dealer Claim';
|
||||
templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
|
||||
} else if (templateTypeUpper === 'TEMPLATE') {
|
||||
templateLabel = 'Template';
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
|
||||
@ -16,22 +16,28 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
|
||||
const stripHtmlTags = (html: string): string => {
|
||||
if (!html) return '';
|
||||
|
||||
// Check if we're in a browser environment
|
||||
if (typeof document === 'undefined') {
|
||||
// Fallback for SSR: use regex to strip HTML tags
|
||||
return html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
// 1. Replace block-level tags with a space to avoid merging words (e.g. </div><div> -> " ")
|
||||
// This preserves readability for the card preview
|
||||
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, ' ');
|
||||
|
||||
// Create a temporary div to parse HTML
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = html;
|
||||
// 2. Replace <br> with space
|
||||
text = text.replace(/<br\s*\/?>/gi, ' ');
|
||||
|
||||
// Get text content (automatically strips HTML tags)
|
||||
let text = tempDiv.textContent || tempDiv.innerText || '';
|
||||
// 3. Strip all other tags
|
||||
text = text.replace(/<[^>]*>/g, '');
|
||||
|
||||
// Clean up extra whitespace
|
||||
// 4. Clean up extra whitespace
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
|
||||
// 5. Basic HTML entity decoding for common characters
|
||||
text = text
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'");
|
||||
|
||||
return text;
|
||||
};
|
||||
|
||||
|
||||
42
src/styles/base-layout.css
Normal file
42
src/styles/base-layout.css
Normal 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;
|
||||
}
|
||||
@ -43,7 +43,7 @@ const ensureChunkOrder = () => {
|
||||
const reactChunk = Object.keys(bundle).find(
|
||||
(key) => bundle[key].type === 'chunk' && bundle[key].name === 'react-vendor'
|
||||
);
|
||||
|
||||
|
||||
if (reactChunk) {
|
||||
// Ensure Radix vendor chunk depends on React vendor chunk
|
||||
Object.keys(bundle).forEach((key) => {
|
||||
@ -75,8 +75,6 @@ export default defineConfig({
|
||||
server: {
|
||||
port: 3000,
|
||||
open: true,
|
||||
host: true,
|
||||
allowedHosts: ['9b89f4bfd360.ngrok-free.app','c6ba819712b5.ngrok-free.app'],
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
@ -126,10 +124,10 @@ export default defineConfig({
|
||||
// Radix UI components try to access React before it's initialized
|
||||
// Option 1: Don't split React - keep it in main bundle (most reliable)
|
||||
// Option 2: Keep React in separate chunk but ensure it loads first
|
||||
|
||||
|
||||
// For now, let's keep React in main bundle to avoid initialization issues
|
||||
// Only split other vendors
|
||||
|
||||
|
||||
// Radix UI - CRITICAL: ALL Radix packages MUST stay together in ONE chunk
|
||||
// This chunk will import React from the main bundle, avoiding initialization issues
|
||||
if (id.includes('node_modules/@radix-ui')) {
|
||||
@ -173,6 +171,10 @@ export default defineConfig({
|
||||
},
|
||||
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: {
|
||||
include: [
|
||||
'react',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user