Compare commits
2 Commits
009ec193c6
...
4e92cb73cf
| Author | SHA1 | Date | |
|---|---|---|---|
| 4e92cb73cf | |||
|
2a92668788 |
944
Markdown_Viewer.html
Normal file
944
Markdown_Viewer.html
Normal file
@ -0,0 +1,944 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Markdown Viewer</title>
|
||||
<!-- Marked.js for Markdown parsing -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<!-- Highlight.js for syntax highlighting -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<!-- DOMPurify for XSS protection -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.1em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 1fr;
|
||||
gap: 30px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #f8f9fa;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 3px dashed #667eea;
|
||||
border-radius: 15px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #764ba2;
|
||||
background: #f0f4ff;
|
||||
}
|
||||
|
||||
.upload-area.dragover {
|
||||
border-color: #764ba2;
|
||||
background: #e8ecff;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 3em;
|
||||
margin-bottom: 15px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.upload-area p {
|
||||
color: #666;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
padding: 15px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.95em;
|
||||
resize: vertical;
|
||||
transition: border-color 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.options-group {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.options-group h3 {
|
||||
font-size: 1em;
|
||||
color: #667eea;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#markdownOutput {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
min-height: 500px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 250px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.export-controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
min-width: 100px;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
.export-btn.success {
|
||||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 4em;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
border: 2px solid #fcc;
|
||||
color: #c33;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #efe;
|
||||
border: 2px solid #cfc;
|
||||
color: #3c3;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* Markdown Styling */
|
||||
#markdownOutput.rendered {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 2px solid #eaecef;
|
||||
padding-bottom: 0.3em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding-bottom: 0.3em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered h3 {
|
||||
font-size: 1.25em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered h4,
|
||||
#markdownOutput.rendered h5,
|
||||
#markdownOutput.rendered h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered ul,
|
||||
#markdownOutput.rendered ol {
|
||||
padding-left: 2em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered li {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered blockquote {
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #dfe2e5;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered pre code {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered table th,
|
||||
#markdownOutput.rendered table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered table th {
|
||||
font-weight: 600;
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #c6cbd1;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
#markdownOutput.rendered hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e1e4e8;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Dark theme for code blocks */
|
||||
#markdownOutput.rendered pre code.hljs {
|
||||
background: #2d2d2d;
|
||||
color: #f8f8f2;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
box-shadow: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel:first-child,
|
||||
.export-controls {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#markdownOutput {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 968px) {
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.export-controls {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>📝 Markdown Viewer</h1>
|
||||
<p>Upload a file or paste your Markdown to see beautiful rendered output</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="panel">
|
||||
<h2>📄 Input</h2>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('paste')">Paste Markdown</button>
|
||||
<button class="tab-btn" onclick="switchTab('upload')">Upload File</button>
|
||||
</div>
|
||||
|
||||
<div id="pasteTab" class="tab-content active">
|
||||
<textarea id="markdownCode" placeholder="Paste your Markdown content here...
|
||||
|
||||
Example:
|
||||
# Hello World
|
||||
|
||||
This is **bold** and this is *italic*.
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
```javascript
|
||||
console.log('Hello, World!');
|
||||
```
|
||||
"></textarea>
|
||||
<button class="btn" onclick="renderMarkdown()">🎨 Render Markdown</button>
|
||||
</div>
|
||||
|
||||
<div id="uploadTab" class="tab-content">
|
||||
<div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
|
||||
<div class="upload-icon">📁</div>
|
||||
<p><strong>Click to upload</strong> or drag and drop</p>
|
||||
<p style="font-size: 0.9em; margin-top: 10px; opacity: 0.7;">Supports .md, .markdown, .txt files</p>
|
||||
</div>
|
||||
<input type="file" id="fileInput" accept=".md,.markdown,.txt" onchange="handleFile(event)">
|
||||
</div>
|
||||
|
||||
<div class="options-group">
|
||||
<h3>⚙️ Options</h3>
|
||||
<div class="checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="enableGFM" checked>
|
||||
GitHub Flavored Markdown (GFM)
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="enableBreaks" checked>
|
||||
Line breaks
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="enableTables" checked>
|
||||
Tables support
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="enableSanitize" checked>
|
||||
Sanitize HTML (Security)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>👁️ Preview</h2>
|
||||
<div id="markdownOutput">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon">📄</div>
|
||||
<p>Your rendered Markdown will appear here</p>
|
||||
</div>
|
||||
<div class="export-controls" id="exportControls">
|
||||
<button class="export-btn success" onclick="exportAsHTML()" title="Export as HTML">💾 HTML</button>
|
||||
<button class="export-btn" onclick="exportAsPDF()" title="Print as PDF">🖨️ PDF</button>
|
||||
<button class="export-btn" onclick="copyToClipboard()" title="Copy HTML to Clipboard">📋 Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentTab = 'paste';
|
||||
|
||||
// Configure marked with options
|
||||
function getMarkedOptions() {
|
||||
return {
|
||||
gfm: document.getElementById('enableGFM').checked,
|
||||
breaks: document.getElementById('enableBreaks').checked,
|
||||
tables: document.getElementById('enableTables').checked,
|
||||
highlight: function(code, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return hljs.highlight(code, { language: lang }).value;
|
||||
} catch (err) {
|
||||
console.error('Highlight error:', err);
|
||||
}
|
||||
}
|
||||
return hljs.highlightAuto(code).value;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function switchTab(tab) {
|
||||
currentTab = tab;
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
||||
|
||||
if (tab === 'paste') {
|
||||
document.querySelector('.tab-btn:first-child').classList.add('active');
|
||||
document.getElementById('pasteTab').classList.add('active');
|
||||
} else {
|
||||
document.querySelector('.tab-btn:last-child').classList.add('active');
|
||||
document.getElementById('uploadTab').classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function showMessage(message, type) {
|
||||
const messageDiv = document.getElementById('message');
|
||||
messageDiv.innerHTML = `<div class="${type}">${message}</div>`;
|
||||
setTimeout(() => {
|
||||
messageDiv.innerHTML = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function renderMarkdown() {
|
||||
const code = document.getElementById('markdownCode').value;
|
||||
const output = document.getElementById('markdownOutput');
|
||||
const exportControls = document.getElementById('exportControls');
|
||||
|
||||
if (!code.trim()) {
|
||||
showMessage('Please provide Markdown content', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Configure marked with current options
|
||||
marked.setOptions(getMarkedOptions());
|
||||
|
||||
// Parse markdown
|
||||
let html = marked.parse(code);
|
||||
|
||||
// Sanitize if enabled
|
||||
if (document.getElementById('enableSanitize').checked) {
|
||||
html = DOMPurify.sanitize(html, {
|
||||
ALLOWED_TAGS: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'strong', 'em', 'u', 's', 'ul', 'ol', 'li', 'a', 'img', 'code', 'pre', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'hr', 'div', 'span'],
|
||||
ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style', 'target', 'rel']
|
||||
});
|
||||
}
|
||||
|
||||
// Render to output
|
||||
output.innerHTML = html;
|
||||
output.classList.add('rendered');
|
||||
|
||||
// Highlight code blocks
|
||||
output.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
|
||||
// Show export controls
|
||||
const controlsDiv = document.createElement('div');
|
||||
controlsDiv.className = 'export-controls';
|
||||
controlsDiv.id = 'exportControls';
|
||||
controlsDiv.style.display = 'flex';
|
||||
controlsDiv.innerHTML = `
|
||||
<button class="export-btn success" onclick="exportAsHTML()" title="Export as HTML">💾 HTML</button>
|
||||
<button class="export-btn" onclick="exportAsPDF()" title="Print as PDF">🖨️ PDF</button>
|
||||
<button class="export-btn" onclick="copyToClipboard()" title="Copy HTML to Clipboard">📋 Copy</button>
|
||||
`;
|
||||
|
||||
// Remove old controls if exist
|
||||
const oldControls = output.querySelector('.export-controls');
|
||||
if (oldControls) {
|
||||
oldControls.remove();
|
||||
}
|
||||
|
||||
output.appendChild(controlsDiv);
|
||||
|
||||
showMessage('✅ Markdown rendered successfully!', 'success');
|
||||
} catch (error) {
|
||||
output.innerHTML = '<div class="placeholder"><div class="placeholder-icon">❌</div><p>Failed to render Markdown</p></div>';
|
||||
showMessage('❌ Error: ' + error.message, 'error');
|
||||
console.error('Render error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFile(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const content = e.target.result;
|
||||
document.getElementById('markdownCode').value = content;
|
||||
renderMarkdown();
|
||||
showMessage('✅ File loaded: ' + file.name, 'success');
|
||||
};
|
||||
reader.onerror = function() {
|
||||
showMessage('❌ Error reading file', 'error');
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function exportAsHTML() {
|
||||
const output = document.getElementById('markdownOutput');
|
||||
const html = output.innerHTML;
|
||||
|
||||
if (!html || html.includes('placeholder')) {
|
||||
showMessage('❌ No content to export', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Create complete HTML document
|
||||
const fullHTML = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Markdown Export</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #24292e;
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
${getMarkdownStyles()}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${html}
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
// Create blob and download
|
||||
const blob = new Blob([fullHTML], { type: 'text/html;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = `markdown-export-${Date.now()}.html`;
|
||||
link.href = url;
|
||||
link.click();
|
||||
|
||||
// Cleanup
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showMessage('✅ HTML exported successfully!', 'success');
|
||||
} catch (error) {
|
||||
showMessage('❌ Error: ' + error.message, 'error');
|
||||
console.error('Export error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function exportAsPDF() {
|
||||
showMessage('📄 Opening print dialog... Choose "Save as PDF" from the printer options', 'success');
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
const output = document.getElementById('markdownOutput');
|
||||
const html = output.innerHTML;
|
||||
|
||||
if (!html || html.includes('placeholder')) {
|
||||
showMessage('❌ No content to copy', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Copy to clipboard
|
||||
navigator.clipboard.writeText(html).then(() => {
|
||||
showMessage('✅ HTML copied to clipboard!', 'success');
|
||||
}).catch(err => {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = html;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
showMessage('✅ HTML copied to clipboard!', 'success');
|
||||
});
|
||||
} catch (error) {
|
||||
showMessage('❌ Error: ' + error.message, 'error');
|
||||
console.error('Copy error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function getMarkdownStyles() {
|
||||
return `
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 2px solid #eaecef;
|
||||
padding-bottom: 0.3em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding-bottom: 0.3em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
blockquote {
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #dfe2e5;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #2d2d2d;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
pre code {
|
||||
display: block;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
table th {
|
||||
font-weight: 600;
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e1e4e8;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
// Drag and drop support
|
||||
const uploadArea = document.getElementById('uploadArea');
|
||||
|
||||
uploadArea.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('dragleave', () => {
|
||||
uploadArea.classList.remove('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.remove('dragover');
|
||||
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(event) {
|
||||
const content = event.target.result;
|
||||
document.getElementById('markdownCode').value = content;
|
||||
renderMarkdown();
|
||||
showMessage('✅ File loaded: ' + file.name, 'success');
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard shortcut
|
||||
document.getElementById('markdownCode').addEventListener('keydown', function(e) {
|
||||
if (e.ctrlKey && e.key === 'Enter') {
|
||||
renderMarkdown();
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-render on option change
|
||||
document.querySelectorAll('.checkbox-group input').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', () => {
|
||||
const code = document.getElementById('markdownCode').value;
|
||||
if (code.trim()) {
|
||||
renderMarkdown();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -355,9 +355,9 @@ graph TD
|
||||
<button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
|
||||
<button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom" style="font-size: 1.2em;">⟲</button>
|
||||
<button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen" style="font-size: 1.2em;">⛶</button>
|
||||
<button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG" style="font-size: 1em;">PNG</button>
|
||||
<button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG" style="font-size: 1em;">JPG</button>
|
||||
<button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG" style="font-size: 1em;">SVG</button>
|
||||
<button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG (Best for Word/PDF - Vector Format)" style="font-size: 1em; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">SVG</button>
|
||||
<button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG (Raster Format)" style="font-size: 1em;">PNG</button>
|
||||
<button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG (Raster Format)" style="font-size: 1em;">JPG</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -638,18 +638,119 @@ graph TD
|
||||
clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
|
||||
|
||||
// Add embedded style for standard fonts
|
||||
const styleElement = document.createElementNS('http://www.w3.org/2000/svg', 'style');
|
||||
styleElement.textContent = `
|
||||
text {
|
||||
font-family: Arial, Helvetica, Verdana, sans-serif !important;
|
||||
font-size: 14px !important;
|
||||
// Convert foreignObject elements to native SVG text (Word doesn't support foreignObject)
|
||||
const foreignObjects = clonedSvg.querySelectorAll('foreignObject');
|
||||
foreignObjects.forEach(fo => {
|
||||
const foText = fo.textContent || '';
|
||||
if (foText.trim()) {
|
||||
const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
|
||||
// Handle multi-line text by splitting into tspan elements
|
||||
const lines = foText.trim().split('\n').filter(line => line.trim());
|
||||
|
||||
// Copy position attributes
|
||||
const x = fo.getAttribute('x') || '0';
|
||||
const y = fo.getAttribute('y') || '0';
|
||||
const width = fo.getAttribute('width') || '100';
|
||||
const height = fo.getAttribute('height') || '20';
|
||||
|
||||
const centerX = parseFloat(x) + parseFloat(width)/2;
|
||||
const centerY = parseFloat(y) + parseFloat(height)/2;
|
||||
|
||||
textElement.setAttribute('x', centerX);
|
||||
textElement.setAttribute('y', centerY);
|
||||
textElement.setAttribute('text-anchor', 'middle');
|
||||
textElement.setAttribute('dominant-baseline', 'middle');
|
||||
textElement.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
|
||||
textElement.setAttribute('font-size', '14px');
|
||||
textElement.setAttribute('fill', 'black');
|
||||
textElement.setAttribute('stroke', 'none');
|
||||
|
||||
if (lines.length === 1) {
|
||||
textElement.textContent = lines[0];
|
||||
} else {
|
||||
// Multi-line text
|
||||
lines.forEach((line, index) => {
|
||||
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
||||
tspan.textContent = line;
|
||||
tspan.setAttribute('x', centerX);
|
||||
tspan.setAttribute('dy', index === 0 ? '0' : '1.2em');
|
||||
textElement.appendChild(tspan);
|
||||
});
|
||||
}
|
||||
|
||||
// Replace foreignObject with text
|
||||
fo.parentNode.replaceChild(textElement, fo);
|
||||
} else {
|
||||
fo.remove();
|
||||
}
|
||||
.nodeLabel, .edgeLabel {
|
||||
font-family: Arial, Helvetica, Verdana, sans-serif !important;
|
||||
});
|
||||
|
||||
// ONLY process text elements - leave shapes and paths untouched
|
||||
const allTextElements = clonedSvg.querySelectorAll('text');
|
||||
allTextElements.forEach((textElement, index) => {
|
||||
// Remove contentEditable
|
||||
textElement.removeAttribute('contentEditable');
|
||||
|
||||
// Only add missing font attributes, don't modify existing ones
|
||||
if (!textElement.hasAttribute('font-family')) {
|
||||
textElement.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
|
||||
}
|
||||
`;
|
||||
clonedSvg.insertBefore(styleElement, clonedSvg.firstChild);
|
||||
if (!textElement.hasAttribute('font-size')) {
|
||||
textElement.setAttribute('font-size', '14px');
|
||||
}
|
||||
if (!textElement.hasAttribute('fill')) {
|
||||
textElement.setAttribute('fill', 'black');
|
||||
}
|
||||
|
||||
// Only clean up pointer-events and user-select from style, keep everything else
|
||||
const styleAttr = textElement.getAttribute('style');
|
||||
if (styleAttr) {
|
||||
const cleanedStyles = styleAttr.split(';')
|
||||
.filter(s => {
|
||||
const trimmed = s.trim();
|
||||
return trimmed &&
|
||||
!trimmed.startsWith('pointer-events') &&
|
||||
!trimmed.startsWith('user-select') &&
|
||||
!trimmed.startsWith('-webkit-user-select') &&
|
||||
!trimmed.startsWith('-moz-user-select');
|
||||
})
|
||||
.join('; ');
|
||||
|
||||
if (cleanedStyles) {
|
||||
textElement.setAttribute('style', cleanedStyles);
|
||||
} else {
|
||||
textElement.removeAttribute('style');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Process tspan elements - minimal changes
|
||||
const allTspanElements = clonedSvg.querySelectorAll('tspan');
|
||||
allTspanElements.forEach(tspan => {
|
||||
tspan.removeAttribute('contentEditable');
|
||||
|
||||
// Only clean up pointer-events and user-select
|
||||
const styleAttr = tspan.getAttribute('style');
|
||||
if (styleAttr) {
|
||||
const cleanedStyles = styleAttr.split(';')
|
||||
.filter(s => {
|
||||
const trimmed = s.trim();
|
||||
return trimmed &&
|
||||
!trimmed.startsWith('pointer-events') &&
|
||||
!trimmed.startsWith('user-select') &&
|
||||
!trimmed.startsWith('-webkit-user-select') &&
|
||||
!trimmed.startsWith('-moz-user-select');
|
||||
})
|
||||
.join('; ');
|
||||
|
||||
if (cleanedStyles) {
|
||||
tspan.setAttribute('style', cleanedStyles);
|
||||
} else {
|
||||
tspan.removeAttribute('style');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Get SVG dimensions
|
||||
const bbox = svg.getBBox();
|
||||
@ -684,7 +785,7 @@ graph TD
|
||||
// Cleanup
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showMessage('✅ Diagram exported as SVG', 'success');
|
||||
showMessage('✅ SVG exported - Optimized for Word/PDF with full text compatibility', 'success');
|
||||
} catch (error) {
|
||||
showMessage('❌ Error: ' + error.message, 'error');
|
||||
console.error('SVG export error:', error);
|
||||
|
||||
2665
RE_Workflow_Complete_Project_Setup.md
Normal file
2665
RE_Workflow_Complete_Project_Setup.md
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
BIN
Royal Enfield Documentation_11.pdf
Normal file
BIN
Royal Enfield Documentation_11.pdf
Normal file
Binary file not shown.
@ -1,9 +1,9 @@
|
||||
graph TD
|
||||
|
||||
DDT[DD Team<br/>First point of contact,<br/>Initial processing] --> ZM[ZM<br/>Evaluates and Approves/Rejects]
|
||||
ZM --> RBM[RBM<br/>Reviews ZM-approved applications,<br/>Makes final decisions]
|
||||
RBM --> DDL[DDL<br/>Evaluates RBM-approved applications<br/>and Forwards to Finance]
|
||||
DDL --> FDD[FDD Team<br/>Financial Due Diligence<br/>and Document Submission]
|
||||
FDD --> NBH[NBH<br/>Final Review and Approval]
|
||||
NBH --> Legal[Legal<br/>Handles Legal Documentation<br/>and Compliance]
|
||||
Legal --> SuperAdmin[Super Admin<br/>Full Oversight and Management]
|
||||
DDT[DD Team - First point of contact, Initial processing] --> ZM[ZM - Evaluates and Approves/Rejects]
|
||||
ZM --> RBM[RBM - Reviews ZM-approved applications, Makes final decisions]
|
||||
RBM --> DDL[DDL - Evaluates RBM-approved applications and Forwards to Finance]
|
||||
DDL --> FDD[FDD Team - Financial Due Diligence and Document Submission]
|
||||
FDD --> NBH[NBH - Final Review and Approval]
|
||||
NBH --> Legal[Legal - Handles Legal Documentation and Compliance]
|
||||
Legal --> SuperAdmin[Super Admin - Full Oversight and Management]
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
graph TD
|
||||
|
||||
%% ===== Start =====
|
||||
Start([🟢 Start: Dealer Claim Process]) --> RI[1️⃣ Request Initiation<br/><i>Requestor</i><br/>Submits activity request<br/>with dealer info, type, date, location, and details]
|
||||
Start([🟢 Start: Dealer Claim Process]) --> RI[1️⃣ Request Initiation - <i>Requestor</i> - Submits activity request with dealer info, type, date, location, and details]
|
||||
|
||||
%% ===== Proposal Submission =====
|
||||
RI --> PS[2️⃣ Proposal Submission<br/><i>Dealer</i><br/>Submits proposal with<br/>cost breakup, timeline,<br/>and supporting documents]
|
||||
RI --> PS[2️⃣ Proposal Submission - <i>Dealer</i> - Submits proposal with cost breakup, timeline, and supporting documents]
|
||||
|
||||
%% ===== Request Evaluation =====
|
||||
PS --> RE[3️⃣ Request Evaluation<br/><i>Requestor</i><br/>Reviews dealer proposal<br/>and adds comments]
|
||||
PS --> RE[3️⃣ Request Evaluation - <i>Requestor</i> - Reviews dealer proposal and adds comments]
|
||||
|
||||
RE --> RE_Decision{Proposal Satisfactory?}
|
||||
RE_Decision -->|❌ Needs Clarification| RE_Clarify[Requestor Requests Clarification]
|
||||
@ -15,22 +15,22 @@ graph TD
|
||||
RE_Decision -->|✅ Confirmed to Proceed| DLA
|
||||
|
||||
%% ===== Department Lead Approval =====
|
||||
DLA[4️⃣ Department Lead Approval<br/><i>Dept. Lead</i><br/>Reviews and Approves Request] --> DLA_Decision{Lead Decision}
|
||||
DLA[4️⃣ Department Lead Approval - <i>Dept. Lead</i> - Reviews and Approves Request] --> DLA_Decision{Lead Decision}
|
||||
DLA_Decision -->|❌ Needs Clarification| DLA_Clarify[Lead Requests Clarification]
|
||||
DLA_Clarify --> RE
|
||||
DLA_Decision -->|✅ Approved| BUD
|
||||
|
||||
%% ===== Budgeting =====
|
||||
BUD[5️⃣ Budgeting<br/><i>Finance or System</i><br/>Blocks budget under IO Internal Order] --> AC
|
||||
BUD[5️⃣ Budgeting - <i>Finance or System</i> - Blocks budget under IO Internal Order] --> AC
|
||||
|
||||
%% ===== Activity Creation =====
|
||||
AC[6️⃣ Activity Creation<br/><i>System</i><br/>Creates Activity and Sends Notifications<br/>to Requestor, Dealer and Lead] --> AE
|
||||
AC[6️⃣ Activity Creation - <i>System</i> - Creates Activity and Sends Notifications to Requestor, Dealer and Lead] --> AE
|
||||
|
||||
%% ===== Activity Execution =====
|
||||
AE[7️⃣ Activity Execution<br/><i>Dealer</i><br/>Executes Activity<br/>and Uploads Proof Documents] --> CA
|
||||
AE[7️⃣ Activity Execution - <i>Dealer</i> - Executes Activity and Uploads Proof Documents] --> CA
|
||||
|
||||
%% ===== Claim Approval =====
|
||||
CA[8️⃣ Claim Approval<br/><i>Requestor</i><br/>Reviews submitted documents] --> CA_Decision{Documents OK?}
|
||||
CA[8️⃣ Claim Approval - <i>Requestor</i> - Reviews submitted documents] --> CA_Decision{Documents OK?}
|
||||
CA_Decision -->|❌ Needs More Info| CA_Clarify[Requestor Requests Additional Information]
|
||||
CA_Clarify --> AE
|
||||
CA_Decision -->|✅ Approved| CA_Type{Approval Type}
|
||||
@ -38,7 +38,7 @@ graph TD
|
||||
CA_Type -->|Partial Approval| EI
|
||||
|
||||
%% ===== E-Invoicing =====
|
||||
EI[9️⃣ E-Invoicing<br/><i>Finance or System</i><br/>Generates E-Invoice<br/>and Issues Credit Note] --> End([✅ Claim Settled<br/>Process Completed])
|
||||
EI[9️⃣ E-Invoicing - <i>Finance or System</i> - Generates E-Invoice and Issues Credit Note] --> End([✅ Claim Settled - Process Completed])
|
||||
|
||||
%% ===== Styles =====
|
||||
style RI fill:#e3f2fd,stroke:#2196f3,stroke-width:2px,color:#000
|
||||
|
||||
776
streamlined_approvals.md
Normal file
776
streamlined_approvals.md
Normal file
@ -0,0 +1,776 @@
|
||||
RE Workflow Management – Not Templatized
|
||||
System Requirements Specifications
|
||||
13 - Oct- 2025
|
||||
Version 1. 0
|
||||
Contents
|
||||
1 System Overview & Problem Statement
|
||||
2 Use case examples
|
||||
3 Intended Audience
|
||||
4 HiFi Wireframe,Goals and Expected Outcomes
|
||||
5 Definitions and Acronyms
|
||||
6 Flow of Application
|
||||
6.1 High-Level Flow
|
||||
7 System Features & Requirements
|
||||
7.1 SSO Login
|
||||
7.2 Dashboard
|
||||
7.3 Side Navigation Menu
|
||||
7.4 Create New Request – Template Selection
|
||||
7.5 Create New Request – Basic Information
|
||||
7.6 Create New Request – Approval Workflow
|
||||
7.7 Create New Request – Participants & Access
|
||||
7.8 Create New Request – Documents & Attachments
|
||||
7.9 Create New Request – Review & Submit
|
||||
7.10 Notifications
|
||||
7.11 My Requests.............................................................................................................
|
||||
7.12 Request Detail View
|
||||
7.13 Request Detail view - Workflow
|
||||
7.14 Request Detail view - Document
|
||||
7.15 Request Detail view – Activity
|
||||
7.16 Add Work Note
|
||||
7.17 Add Approver & Spectator
|
||||
7.18 Approve / Reject Request (Popup Window)
|
||||
7.19 Closure Remark
|
||||
8 Client Feedback Log (Post-Review Updates)
|
||||
9 Non-Functional Requirements
|
||||
10 Technology Matrix
|
||||
11 Infra requirements & System Hygiene
|
||||
12 Not in scope
|
||||
1 System Overview & Problem Statement
|
||||
The Workflow Management System – Non-Templatized is a strategic digital initiative aimed at
|
||||
bringing structure, traceability, and efficiency to approval-based processes within Royal Enfield
|
||||
(RE).
|
||||
|
||||
Currently, most approvals and related communications are handled through emails , which often
|
||||
results in:
|
||||
|
||||
Unstructured and fragmented approval chains
|
||||
Loss of critical information due to scattered email threads
|
||||
Lack of visibility on approval status and ownership
|
||||
No defined Turnaround Time (TAT) , leading to delays and open-ended tasks
|
||||
These challenges collectively reduce process transparency , accountability , and decision
|
||||
efficiency across teams.
|
||||
|
||||
The proposed Workflow Management System – Non-Templatized will address these issues by
|
||||
providing a centralized, intuitive platform where:
|
||||
|
||||
Users can create requests ,
|
||||
Define custom approval hierarchies ,
|
||||
Set and monitor TATs , and
|
||||
Track real-time progress and final outcomes.
|
||||
All workflows will be captured, organized, and closed within a single system of record —
|
||||
ensuring clarity, control, and compliance throughout the process.
|
||||
|
||||
A thoughtfully designed User Interface (UI) will further enhance usability, adoption, and
|
||||
productivity , ensuring smooth navigation and a clean experience across departments.
|
||||
|
||||
2 Use case examples
|
||||
The following are some illustrative use cases for the Workflow Management System – Non-
|
||||
Templatized. These examples represent common approval scenarios within the organization,
|
||||
though additional use cases may be added over time as business needs evolve:
|
||||
|
||||
Approval for a new office location – involving multiple stakeholders such as facilities,
|
||||
finance, and leadership teams.
|
||||
Approval of unbudgeted incentives – requiring justification and review from HR and
|
||||
finance departments.
|
||||
Sponsorship or participation in an event – covering approvals from marketing, branding,
|
||||
and finance.
|
||||
Purchase of material from a new vendor – requiring validation, procurement, and
|
||||
financial approvals.
|
||||
These examples demonstrate the system’s flexibility to handle a wide range of approval
|
||||
workflows across departments.
|
||||
|
||||
3 Intended Audience
|
||||
The Workflow Management System – Non-Templatized will be accessible to all Royal Enfield
|
||||
(RE) employees who have valid SSO (Single Sign-On) credentials.
|
||||
|
||||
Initially, the system will be introduced in a pilot environment for selected users and
|
||||
departments. Based on feedback and performance, it will later be rolled out organization-wide.
|
||||
|
||||
The system will involve the following user roles :
|
||||
|
||||
Initiator – The user who creates and submits a workflow request.
|
||||
Participants – Individuals involved in the workflow at different stages or approval levels.
|
||||
Final Approver – The ultimate authority responsible for approving or rejecting the
|
||||
workflow request.
|
||||
Consultation – A user or subject matter expert whom the Final Approver may consult
|
||||
before making a final decision.
|
||||
Spectators – Users who are invited to view the workflow for information or transparency
|
||||
purposes, similar to how individuals are copied (CC’d) on email communications.
|
||||
This defined role structure ensures clarity, accountability, and collaboration throughout the
|
||||
workflow lifecycle.
|
||||
|
||||
4 HiFi Wireframe,Goals and Expected Outcomes
|
||||
Hi-Fi Wireframe: https://sway-dense-03017508.figma.site
|
||||
|
||||
The Workflow Management System – Non-Templatized is designed with a user-centric
|
||||
approach, supported by a high-fidelity (Hi-Fi) wireframe that visually represents the layout,
|
||||
navigation flow, and user interactions.
|
||||
|
||||
Through the implementation of this system, Royal Enfield (RE) aims to achieve the
|
||||
following measurable goals :
|
||||
|
||||
Centralization: Consolidate all approval workflows and related communications within a
|
||||
single unified platform.
|
||||
Transparency: Provide real-time visibility into each workflow’s stage, status, and assigned
|
||||
approvers.
|
||||
Accountability: Define clear ownership at every stage and maintain a complete audit trail
|
||||
of all user actions.
|
||||
Efficiency: Reduce approval cycle times by implementing TAT-based
|
||||
tracking , automated reminders , and smart notifications.
|
||||
Traceability: Maintain structured and retrievable records of all approvals to support easy
|
||||
reference, audit, and reporting.
|
||||
Scalability: Enable flexible configuration of non-templatized workflows that can adapt to
|
||||
various departmental and business needs.
|
||||
User Experience: Deliver a clean, intuitive, and responsive interface that enhances
|
||||
usability and encourages regular adoption.
|
||||
5 Definitions and Acronyms
|
||||
Term Definition
|
||||
Workflow A sequence of tasks, approvals, or activities linked to a business process.
|
||||
Non-
|
||||
Templatized
|
||||
A flexible structure where each workflow can be created dynamically without a fixed
|
||||
format.
|
||||
Admin System user with full privileges.
|
||||
6 Flow of Application
|
||||
This section describes the end-to-end flow of the Workflow Management – Non-Templatized
|
||||
application. It outlines how users interact with the system, how approvals move through
|
||||
different stages, and how data transitions between modules until final closure.
|
||||
|
||||
6.1 High-Level Flow
|
||||
Login (SSO Integration)
|
||||
o Users access the system via the RE SSO Bridge using their organizational
|
||||
credentials.
|
||||
o Upon successful authentication, users are redirected to the Dashboard.
|
||||
Dashboard & Navigation
|
||||
o The Dashboard provides a summary of pending, approved, and rejected requests.
|
||||
o The left Side Menu gives access to My Requests , Open Requests , Closed Requests ,
|
||||
and Raise New Request.
|
||||
Creating a New Request
|
||||
o User clicks “Raise New Request” and chooses between:
|
||||
▪ Custom Request – Create a flexible, non-templatized workflow.
|
||||
▪ Existing Template – (Future scope) Use a predefined structure.
|
||||
o The user proceeds through a 6 - step wizard :
|
||||
▪ Template Selection
|
||||
▪ Basic Information
|
||||
▪ Approval Workflow
|
||||
▪ Participants & Access
|
||||
▪ Documents & Attachments
|
||||
▪ Review & Submit
|
||||
Defining Approval Workflow
|
||||
o The user configures approval levels dynamically , assigning approvers via @
|
||||
tagging.
|
||||
o Each approver level has a defined TAT (in hours or days).
|
||||
o System calculates the total TAT by summing all levels.
|
||||
o TAT starts only when a request reaches that approver’s level.
|
||||
Adding Participants
|
||||
o User can add Spectators (view-only participants) who can comment but not
|
||||
approve.
|
||||
o Spectators receive notifications and see the request in read-only mode.
|
||||
Uploading Documents
|
||||
o User attaches supporting files (PDF, Word, Excel, PPT, or images) or links Google
|
||||
Docs/Sheets.
|
||||
o PDFs and images are previewable , while other formats can be downloaded.
|
||||
Submitting the Request
|
||||
o The user reviews all information in the Review & Submit step.
|
||||
o Once submitted, the request enters the Approval Workflow and notifies the first
|
||||
approver.
|
||||
Approval Process
|
||||
o Approvers receive a notification and can:
|
||||
▪ Approve Request – Moves to the next level or closes if final approver.
|
||||
▪ Reject Request – Sends remarks to the initiator and marks as closed.
|
||||
o Each action requires comments and remarks (mandatory).
|
||||
o TAT tracking is visible with color-coded status (Green = Within TAT, Yellow =
|
||||
Approaching Deadline, Red = Breached).
|
||||
o Auto-reminders are sent at configured thresholds (e.g., 80% TAT usage).
|
||||
Work Notes & Collaboration
|
||||
o Participants communicate via the Work Notes (Chat View).
|
||||
o Supports @mentions, file sharing, and reactions.
|
||||
o All discussions are stored chronologically and linked to the request.
|
||||
Activity Tracking
|
||||
o Every event — creation, comment, document upload, approval, rejection, or TAT
|
||||
alert — is captured in the Activity Tab with timestamps.
|
||||
Request Closure & Conclusion
|
||||
o After final approval, the request returns to the Initiator with AI-generated
|
||||
conclusion remarks.
|
||||
o The initiator reviews, optionally edits, and marks the request as closed.
|
||||
o The Conclusion Remark summarizing the workflow becomes part of the final
|
||||
record and appears under:
|
||||
▪ My Requests (Approved)
|
||||
▪ Open Requests
|
||||
▪ Closed Requests
|
||||
Post-Closure Access & Sharing
|
||||
o Closed requests remain accessible to all participants and spectators.
|
||||
o Requests can be shared internally via Add Spectator ;
|
||||
download permissions apply only to Work Note attachments.
|
||||
o All actions and comments remain viewable for audit purposes.
|
||||
7 System Features & Requirements
|
||||
Here, we describe the system features along with their respective Width and Depth to provide
|
||||
complete visibility of each requirement.
|
||||
|
||||
The Width defines the functional coverage of a feature — outlining what the feature does,
|
||||
its boundaries, use cases, and user interactions. It answers the question: “What scenarios and
|
||||
actions are covered by this feature?”
|
||||
|
||||
The Depth captures the operational and behavioral details — describing how the feature
|
||||
behaves through its logic, workflow, system responses, and edge-case handling. It answers the
|
||||
question: “How does the system execute and respond in these scenarios?”
|
||||
|
||||
7.1 SSO Login
|
||||
The system will integrate with the existing RE SSO Bridge to enable secure, seamless login for all
|
||||
authorized Royal Enfield employees. This ensures unified authentication, eliminating the need
|
||||
for separate credentials and maintaining compliance with RE’s security standards.
|
||||
|
||||
Width:
|
||||
|
||||
Integrates with the existing RE SSO Bridge for secure authentication.
|
||||
Allows access only to authorized Royal Enfield employees.
|
||||
Automatically retrieves user details ( name, employee ID, department ).
|
||||
Depth:
|
||||
|
||||
Uses token-based authentication and HTTPS for secure sessions.
|
||||
Handles session timeout and re-authentication per RE’s IT security policy.
|
||||
Dependency
|
||||
|
||||
SSO implementation guide and sample users are required.
|
||||
7.2 Dashboard
|
||||
The Dashboard is an open element that is currently under discussion and will be finalized in later
|
||||
phases. It is expected to serve as a central view for users to monitor workflow status, pending
|
||||
approvals, and key metrics once its structure and content are defined.
|
||||
|
||||
7.3 Side Navigation Menu
|
||||
The Side Menu provides users with quick and consistent navigation across the application. It
|
||||
includes the following primary sections:
|
||||
|
||||
Dashboard: Overview of workflow activities, key metrics, and pending actions.
|
||||
My Requests: Displays all workflow requests created by the logged-in user.
|
||||
Open Requests: Lists all active or in-progress workflows requiring action. These may
|
||||
include requests initiated by or assigned to the logged-in user.
|
||||
Closed Requests: Shows all completed or approved workflows for reference. These may
|
||||
include requests created by or processed by the logged-in user.
|
||||
Raise New Request: Allows users to initiate and submit a new workflow request.
|
||||
Width:
|
||||
|
||||
Offers persistent navigation to Dashboard , My Requests , Open Requests , Closed
|
||||
Requests , and Raise New Request.
|
||||
Ensures consistent access throughout the system.
|
||||
Depth:
|
||||
|
||||
Implements active route highlighting and role-based visibility.
|
||||
Includes search, sort, and filter capabilities.
|
||||
Supports pagination and stable ID-based navigation to detail screens.
|
||||
7.4 Create New Request – Template Selection
|
||||
This screen appears when the user clicks “Raise New Request.” It introduces a wizard-style
|
||||
navigation that guides users through the request creation process in sequential steps.
|
||||
|
||||
Custom Request (Non Templatized): Allows users to create a fully flexible workflow tailored to
|
||||
unique business needs.
|
||||
|
||||
To initiate the request flow, users must select “Custom Request.” The system then progresses
|
||||
step by step to capture all required details, ensuring clarity and completeness before submission.
|
||||
|
||||
Width:
|
||||
|
||||
Enables users to choose Custom Request (non-templatized)
|
||||
Displays wizard navigation with progress indicator.
|
||||
Depth:
|
||||
|
||||
In the current version, only Custom Request is enabled.
|
||||
Enforces mandatory selection before proceeding.
|
||||
Saves the chosen configuration as part of the workflow metadata.
|
||||
Activates after completion of wizard
|
||||
7.5 Create New Request – Basic Information
|
||||
In this step, users outline the what, why, and how soon of their request, creating clarity for all
|
||||
participants involved in the approval process.
|
||||
|
||||
Users are required to enter:
|
||||
|
||||
Request Title: A short and descriptive title that summarizes the purpose of the request
|
||||
(e.g., Approval for new office location ).
|
||||
Detailed Description: A comprehensive explanation outlining the need, background, and
|
||||
expected outcome of the request.
|
||||
Priority Level: Selection between two options —
|
||||
o Express (Urgent): Includes calendar days in the TAT for faster processing.
|
||||
o Standard (Default): Includes working days in the TAT for regular processing.
|
||||
This step ensures that each request is well-defined, prioritized appropriately, and easily
|
||||
understood by all participants in the approval flow.
|
||||
|
||||
Width:
|
||||
|
||||
Captures core request details :
|
||||
o Request Title
|
||||
o Detailed Description
|
||||
o Priority Level – Express or Standard
|
||||
Depth:
|
||||
|
||||
Express: Uses calendar days in TAT calculation.
|
||||
Standard: Uses working days (default).
|
||||
Supports rich text formatting and pasted tables for better clarity.
|
||||
Support comprehensive email like formatting features , including table insertion, links,
|
||||
and text formatting such as bold and italics
|
||||
•
|
||||
7.6 Create New Request – Approval Workflow
|
||||
In this step, users define the approval hierarchy and assign approvers for each level. The number
|
||||
of approvers is dynamically configurable based on the workflow’s complexity, with a maximum
|
||||
of ten levels supported.
|
||||
|
||||
Each approver’s Turnaround Time (TAT) must be defined individually in hours or days ,
|
||||
depending on the urgency and scope of the request. The system automatically calculates
|
||||
the overall TAT by summing the TAT values of all approval levels.
|
||||
|
||||
An important behavior to note: the TAT timer for each participant starts only when the request
|
||||
reaches that level. Any delay at a previous level impacts only that approver’s TAT and does not
|
||||
affect subsequent ones.
|
||||
|
||||
Approvers can be tagged using the “@” symbol for easy identification, and each level’s
|
||||
configuration is summarized in real time under the Approval Flow Summary and TAT
|
||||
Summary sections for complete visibility. All the taggable users must be available in Active
|
||||
Directory (AD).
|
||||
|
||||
Width:
|
||||
|
||||
Allows defining a multi-level approval hierarchy with dynamic levels (up to 10).
|
||||
Each level includes a TAT (in hours or days).
|
||||
Approvers can be added using @ tagging.
|
||||
Depth:
|
||||
|
||||
System computes overall TAT by summing all levels.
|
||||
TAT timer starts only when a level becomes active — delays are isolated per level.
|
||||
Displays real-time Approval Flow Summary and TAT Summary for transparency.
|
||||
7.7 Create New Request – Participants & Access
|
||||
The system allows adding Spectators — users who can view the workflow, add comments, and
|
||||
stay informed , but cannot approve or modify the request. Spectators can be added using
|
||||
the “@” tag , ensuring relevant stakeholders remain in the loop throughout the approval process.
|
||||
|
||||
Width:
|
||||
|
||||
Allows adding Spectators who can view and comment but cannot approve.
|
||||
Ensures visibility is restricted to participants and spectators only.
|
||||
Depth:
|
||||
|
||||
@ tagging used to add spectators easily.
|
||||
Spectators can add comments but have no edit or approval privileges.
|
||||
All changes are logged in the audit trail.
|
||||
7.8 Create New Request – Documents & Attachments
|
||||
In this step, users can upload supporting documents and reference materials required for the
|
||||
workflow request. The system supports file formats such as PDF, Word, Excel, PowerPoint, and
|
||||
images , with a maximum upload size of 10 MB per file.
|
||||
|
||||
Users can drag and drop files directly into the upload area or use the Browse Files option to
|
||||
attach them.
|
||||
|
||||
PDF and image files can be previewed directly within the system.
|
||||
Other formats such as Word, Excel, or PowerPoint must be downloaded to view.
|
||||
Additionally, users can associate Google Docs and Google Sheets links as part of the
|
||||
request for collaborative reference.
|
||||
This feature ensures that all relevant documents are easily accessible and centralized for
|
||||
smoother review and approval.
|
||||
|
||||
Width:
|
||||
|
||||
Supports uploads of PDF, Word, Excel, PowerPoint, and image files (up to 10 MB each ).
|
||||
Allows linking of Google Docs and Google Sheets.
|
||||
Depth:
|
||||
|
||||
Provides inline preview for PDFs and images.
|
||||
Other formats must be downloaded to view.
|
||||
Stores file metadata (name, size, uploader, timestamp) for traceability.
|
||||
7.9 Create New Request – Review & Submit
|
||||
This is the final step before the request enters the approval cycle. Users can review all captured
|
||||
details and ensure the accuracy of every input. The screen provides a structured summary of:
|
||||
|
||||
Request Overview: Displays key attributes such as Request Type, Priority, Workflow
|
||||
Type, and Request Title.
|
||||
Basic Information: Shows the request description and priority level entered earlier.
|
||||
Approval Workflow: Summarizes approval hierarchy, approvers, and defined TAT for
|
||||
each level.
|
||||
Participants & Access Control: Lists spectators, permissions, and comment settings.
|
||||
After verification, the user can either save the request as draft or click “Submit Request.” Once
|
||||
submitted, the workflow is activated, and notifications are automatically triggered to all
|
||||
assigned approvers and spectators.
|
||||
|
||||
This final step ensures each request is validated, structured, and complete before moving into
|
||||
execution.
|
||||
|
||||
Width:
|
||||
|
||||
Displays a complete summary of all entered details before submission:
|
||||
o Request Overview
|
||||
o Basic Information
|
||||
o Approval Workflow
|
||||
o Participants & Access
|
||||
Provides options to Save as Draft or Submit Request.
|
||||
Depth:
|
||||
|
||||
Performs final validation of all required fields.
|
||||
Computes total TAT and confirms approver hierarchy.
|
||||
Upon submission, sends notifications to approvers and spectators.
|
||||
7.10 Notifications
|
||||
The system provides real-time notifications to keep users informed about workflow activities
|
||||
and pending actions. Notifications appear through a bell icon in the application header with a
|
||||
visible count of unread alerts.
|
||||
|
||||
Users receive updates such as:
|
||||
|
||||
Approval Reminders: Alerts when a request requires action or when its SLA/TAT is about
|
||||
to expire.
|
||||
Comments and Mentions: Notifications when someone adds a comment or tags the user
|
||||
in a workflow discussion.
|
||||
Each notification includes the request ID, message, and timestamp , allowing users to respond
|
||||
quickly and maintain timely workflow progress.
|
||||
|
||||
Width:
|
||||
|
||||
Centralized bell icon for all system alerts with unread count.
|
||||
Covers events like:
|
||||
o Approval assignments
|
||||
o SLA/TAT warnings
|
||||
o Comments or mentions
|
||||
o Status updates and closures
|
||||
Depth:
|
||||
|
||||
Delivers real-time in-app alerts (optional email integration).
|
||||
Each alert includes request ID, event type, user, and timestamp.
|
||||
Supports click navigation , read/unread states , and auto-cleanup of old alerts.
|
||||
Highlights high-priority or SLA-related notifications distinctly.
|
||||
7.11 My Requests.............................................................................................................
|
||||
This screen allows users to view, track, and manage all workflow requests they have created
|
||||
within the system. It provides a consolidated view of request status, type, and progress for easy
|
||||
monitoring.
|
||||
|
||||
Width:
|
||||
|
||||
Displays all workflow requests submitted by the logged-in user , categorized as Total, In
|
||||
Progress, Approved, Rejected, and Draft.
|
||||
Each record shows critical details like Request Title, Priority (Express/Standard),
|
||||
Template Type, ID, Submission Date, and Current Level.
|
||||
Includes search and filter options for status and priority to quickly locate specific
|
||||
requests.
|
||||
Depth:
|
||||
|
||||
Each request card provides real-time tracking of the current approver , workflow level ,
|
||||
and estimated completion date.
|
||||
Supports click navigation to open the detailed workflow view.
|
||||
Uses color-coded indicators for status identification (e.g., green for Approved, red for
|
||||
Rejected, yellow for Pending).
|
||||
Data refreshes upon page load when new requests are created or status updates occur,
|
||||
ensuring users always see the latest information.
|
||||
7.12 Request Detail View
|
||||
This screen allows users to view, review, and act on individual workflow requests. It
|
||||
consolidates all key information — request details, approver actions, documents, and activity
|
||||
logs — into a single, interactive view for efficient decision-making.
|
||||
|
||||
Width:
|
||||
|
||||
Displays comprehensive request details , including title, description, initiator info,
|
||||
department, and contact details.
|
||||
Shows priority , TAT progress bar , and remaining time until the TAT expires.
|
||||
Provides a tab-based layout for:
|
||||
o Overview (request details and status)
|
||||
o Workflow (approval hierarchy and progress)
|
||||
o Documents (uploaded files)
|
||||
o Activity (comments and action log)
|
||||
Includes Quick Actions for approvers: Add Work Note, Add Approver, Add Spectator,
|
||||
Approve Request, and Reject Request.
|
||||
Lists Spectators with view-only access.
|
||||
Depth:
|
||||
|
||||
TAT progress bar dynamically updates based on elapsed and remaining time, color-coded
|
||||
for urgency (e.g., red for nearing expiry).
|
||||
Each action (approval, rejection, addition of approver/spectator) is logged in
|
||||
chronology within the activity tab for full traceability.
|
||||
Approvers can add comments or attachments before taking a decision.
|
||||
When the request reaches its final approver , the system allows closure and triggers an AI-
|
||||
generated conclusion remark summarizing the discussion (as per feedback notes).
|
||||
Page refresh updates data to reflect new comments, document uploads, or action
|
||||
changes.
|
||||
7.13 Request Detail view - Workflow
|
||||
This screen provides a stage-by-stage view of the approval hierarchy within a specific workflow.
|
||||
It helps users and approvers track progress, review comments, and monitor TAT (Turnaround
|
||||
Time) performance at each approval level.
|
||||
|
||||
Width:
|
||||
|
||||
Displays each approver level , showing their name, designation, and TAT allocation.
|
||||
Shows real-time progress of approvals — Completed, Pending, Waiting, or Approaching
|
||||
Deadline.
|
||||
Includes TAT tracking with both elapsed and remaining time indicators.
|
||||
Highlights whether each step was completed within or beyond TAT.
|
||||
Lists approver comments for visibility and decision traceability.
|
||||
Auto-sends system-generated reminders when TAT thresholds are reached (e.g., 50% or
|
||||
100% usage).
|
||||
Depth:
|
||||
|
||||
The system tracks individual TAT usage per approver level , ensuring delays are isolated
|
||||
to that stage only.
|
||||
TAT bars dynamically update color (e.g., green for Within TAT , yellow for Approaching
|
||||
Deadline , red for Breached ).
|
||||
Automatically sends TAT reminders based on configured thresholds — manual reminders
|
||||
are disabled as per design notes.
|
||||
Supports chronological logging of every action and comment, visible in the activity trail.
|
||||
Approvers can add notes, attach files, or escalate to higher levels if TAT expires without
|
||||
action.
|
||||
The final approver’s action closes the workflow , triggering summary notifications and AI-
|
||||
generated closure remarks.
|
||||
7.14 Request Detail view - Document
|
||||
This tab provides a centralized space to view, manage, and access all documents attached to the
|
||||
workflow request. It ensures that approvers and spectators have visibility into all supporting
|
||||
materials necessary for informed decision-making.
|
||||
|
||||
Width:
|
||||
|
||||
Displays a list of uploaded documents associated with the request, showing:
|
||||
o File name , size , type/category , uploader , and timestamp.
|
||||
Supports standard file types such as PDF, Word, Excel, PowerPoint, and images.
|
||||
Allows users to preview or download files directly from the list.
|
||||
PDF and image files can be previewed inline ; other file types must be downloaded.
|
||||
Shows Quick Actions (e.g., Add Work Note, Add Approver, Add Spectator ) on the side
|
||||
panel for easy context switching.
|
||||
Depth:
|
||||
|
||||
Ensures document version integrity — if the same file name is uploaded again, the latest
|
||||
version is timestamped and saved separately.
|
||||
Records audit entries whenever a file is uploaded, deleted, or viewed.
|
||||
Provides metadata-based filtering (by file type, uploader, or date).
|
||||
Allows association of Google Docs and Google Sheets links for live collaboration.
|
||||
Refreshes file list upon page load or when a new document is uploaded , ensuring users
|
||||
always view the most updated set of attachments.
|
||||
7.15 Request Detail view – Activity
|
||||
The Activity Tab serves as a chronological timeline that records every action, event, and update
|
||||
associated with a workflow request. It provides complete transparency for users to trace
|
||||
approvals, comments, document uploads, and system-generated notifications.
|
||||
|
||||
Width:
|
||||
|
||||
Displays a real-time activity timeline , including events such as:
|
||||
o Request creation
|
||||
o Approvals and rejections
|
||||
o Comments and notes added
|
||||
o Document uploads or deletions
|
||||
o System-generated TAT warnings or reminders
|
||||
Each activity entry shows:
|
||||
o Event type , description , timestamp , and initiator name.
|
||||
Differentiates between user actions (e.g., “Document Added”) and system events (e.g.,
|
||||
“TAT Warning Sent”).
|
||||
Depth:
|
||||
|
||||
Activities are displayed in reverse chronological order , with the latest updates at the top.
|
||||
Color-coded event icons visually represent action types (e.g., green for approval, red for
|
||||
warnings).
|
||||
Automatically logs system-generated events such as TAT breach alerts or reminder
|
||||
dispatches.
|
||||
Records file uploads with metadata (file name, uploader, timestamp) for audit
|
||||
traceability.
|
||||
Ensures immutable logging — entries cannot be modified or deleted once created.
|
||||
Data refreshes upon page load , ensuring users always view the most updated timeline.
|
||||
7.16 Add Work Note
|
||||
The Work Notes section enables participants to communicate and collaborate directly within a
|
||||
workflow request , ensuring that all discussions, clarifications, and shared files remain tied to the
|
||||
request record. This eliminates dependency on external email threads and improves traceability.
|
||||
|
||||
Width:
|
||||
|
||||
Displays a chronological chat-style conversation between workflow participants.
|
||||
Supports @mentions to tag users for feedback or updates.
|
||||
Allows file sharing within messages — uploaded files appear as inline attachments with
|
||||
download options.
|
||||
Each message displays the sender’s name, role, timestamp, and message content.
|
||||
Offers reaction options
|
||||
Includes a message composer at the bottom with:
|
||||
o Text box for entering messages (max 2000 characters).
|
||||
Automatically differentiates roles using colored badges (e.g., Initiator, Approver,
|
||||
Spectator ).
|
||||
Depth:
|
||||
|
||||
Messages are displayed in reverse chronological order , preserving a clear dialogue
|
||||
history.
|
||||
@mentions trigger system notifications to the tagged users.
|
||||
Each message is time-stamped, immutable, and stored as part of the request’s
|
||||
permanent record.
|
||||
Inline attachments are linked to the Documents Tab for centralized access.
|
||||
Priority tags (e.g., P – Priority ) appear inline when approvers mark messages as urgent.
|
||||
The chat interface automatically refreshes upon page load to reflect the latest messages
|
||||
and reactions.
|
||||
Chat data remains available throughout the workflow lifecycle and is archived upon
|
||||
closure.
|
||||
If there is a query at any level, user will mention it here and ask additional details.
|
||||
7.17 Add Approver & Spectator
|
||||
This feature allows users to add new participants —either as Approvers or Spectators —to an
|
||||
ongoing workflow request. It provides flexibility for dynamically updating the workflow hierarchy
|
||||
or visibility list during the approval process.
|
||||
|
||||
Width:
|
||||
|
||||
Displays a modal popup titled “Add Approver” or “Add Spectator,” depending on the
|
||||
selected action.
|
||||
Provides a single input field for email address entry using the @ mention convention.
|
||||
Allows users to search and add participants by email or username.
|
||||
Includes two action buttons: Confirm (Add) and Cancel.
|
||||
Approvers: Gain the ability to review, approve, or reject the request.
|
||||
Spectators: Gain view-only access with the ability to comment and receive notifications.
|
||||
Both participant types receive automated notifications upon being added.
|
||||
Depth:
|
||||
|
||||
The Approver is inserted into the approval hierarchy in the defined sequence;
|
||||
the Spectator is added to the visibility list.
|
||||
All additions are recorded in the activity timeline for audit and transparency.
|
||||
Notifications are sent automatically to the newly added users via the system’s alert
|
||||
service.
|
||||
Approver TAT begins only when their stage becomes active in the workflow.
|
||||
The popup closes automatically upon successful addition, refreshing the request view to
|
||||
reflect the change.
|
||||
7.18 Approve / Reject Request (Popup Window)
|
||||
This feature enables approvers to write their decision on a workflow request by either
|
||||
approving or rejecting it. It ensures that each decision is properly documented with remarks,
|
||||
creating a transparent and traceable approval trail.
|
||||
|
||||
Width:
|
||||
|
||||
Displays a modal window titled “Approve Request” or “Reject Request.”
|
||||
Shows key request information:
|
||||
o Request ID
|
||||
o Request Title
|
||||
o Action Type ( Approve or Reject ).
|
||||
Includes a mandatory Comments & Remarks field (up to 500 characters) for justifying the
|
||||
decision.
|
||||
Contains two buttons:
|
||||
o Approve Request / Reject Request — confirms and submits the decision.
|
||||
o Cancel — closes the modal without any action.
|
||||
Shows a contextual message:
|
||||
o Approval Confirmation for approval flow.
|
||||
o Rejection Guidelines encouraging constructive feedback.
|
||||
Depth:
|
||||
|
||||
Comments are mandatory for both approval and rejection to ensure context for future
|
||||
reference.
|
||||
Upon approval:
|
||||
o The system forwards the request to the next approver in the hierarchy or closes
|
||||
it if this is the final level.
|
||||
o If the final approver needs to consult with someone, he can use work note to
|
||||
specify that user, conclude and put the final closing remarks
|
||||
o Status updates automatically across all linked screens.
|
||||
Upon rejection:
|
||||
o The system sends a notification to the initiator along with rejection remarks.
|
||||
o The request is marked as “Rejected” and closed for further approval.
|
||||
All actions are logged in the Activity Tab with timestamps and user details.
|
||||
The popup automatically closes upon successful submission , refreshing the view to
|
||||
display the updated status.
|
||||
7.19 Closure Remark
|
||||
This stage marks the final closure of a workflow request after all approvals are completed.
|
||||
Once the final approver submits their decision, the request automatically returns to the
|
||||
Initiator with an AI-generated Conclusion Remark summarizing the entire workflow journey.
|
||||
|
||||
The Initiator reviews, optionally edits, and marks the request as closed , completing the
|
||||
lifecycle.
|
||||
|
||||
Width:
|
||||
|
||||
Becomes available after the final approver’s action is recorded.
|
||||
Displays an AI-generated Conclusion Remark summarizing:
|
||||
o Discussion highlights and decision points
|
||||
o Key approval or rejection reasons
|
||||
o Notable attachments or supporting references
|
||||
Allows the Initiator to review and, if required, edit or enhance the remark before final
|
||||
closure.
|
||||
Once confirmed, the request status changes to “Closed” , and the final remark becomes
|
||||
part of the permanent workflow record.
|
||||
The Conclusion Remark is visible under:
|
||||
o My Requests (Approved)
|
||||
o Open Requests
|
||||
o Closed Requests
|
||||
If no remark exists, a placeholder message is displayed:
|
||||
“No conclusion remarks added yet. This section will highlight the main points or core
|
||||
conclusions of the request.”
|
||||
Depth:
|
||||
|
||||
The AI engine compiles the initial remark using inputs from Work Notes, Approver
|
||||
Comments, and Activity Logs.
|
||||
The remark generation occurs immediately after the final approval action is completed.
|
||||
The Initiator can make final edits or confirmations before closing the request.
|
||||
Once marked as closed, the remark becomes read-only for all other participants and
|
||||
spectators.
|
||||
The finalized conclusion is stored with workflow metadata for audit, compliance, and
|
||||
reporting.
|
||||
Closed requests retain full visibility of their conclusion remarks for traceability and
|
||||
knowledge retention.
|
||||
8 Client Feedback Log (Post-Review Updates)
|
||||
This section tracks all client-driven changes, clarifications, or design validations received after
|
||||
initial wireframe or SRS review. Each point is linked to the relevant feature section for traceability.
|
||||
|
||||
# Client Request / Feedback Response / Action Taken (Rohit) Linked
|
||||
Feature
|
||||
Section
|
||||
1 Remove the TAT
|
||||
modification option for
|
||||
approvers, allowing only during
|
||||
initiation.
|
||||
Accepted – TAT edit will be available
|
||||
only at request initiation, not at
|
||||
approval stages.
|
||||
Approval
|
||||
Workflow
|
||||
2 Display Conclusion
|
||||
Remarks in My Requests for
|
||||
approved requests, consistent
|
||||
with Open and Closed Requests.
|
||||
Agreed – Will be implemented during
|
||||
development. To align with design
|
||||
limitation noted in section 6.20.
|
||||
My Requests,
|
||||
Conclusion
|
||||
Remark
|
||||
3 Need to see how conclusion
|
||||
workflow works ; final approver
|
||||
should have ability to enter
|
||||
conclusion.
|
||||
Confirmed – After final approval,
|
||||
request returns to initiator with AI-
|
||||
generated comments for review/edit
|
||||
before closure.
|
||||
Conclusion
|
||||
Remark
|
||||
4 Add restrictive view for sharing
|
||||
approved requests with non-
|
||||
participants.
|
||||
Accepted – To be managed via Work
|
||||
Notes option with permission control.
|
||||
Work Notes
|
||||
5 Clarify sharing and
|
||||
download permissions for
|
||||
requests.
|
||||
Approved – Requests can be shared
|
||||
internally using Add
|
||||
Spectator. Download option will be
|
||||
enabled for Work Notes attachments
|
||||
only.
|
||||
Add
|
||||
Participant,
|
||||
Work Notes
|
||||
9 Non-Functional Requirements
|
||||
Category Requirement
|
||||
Performance Average response time < 3 seconds for standard operations.
|
||||
Scalability Should scale horizontally on GCP.
|
||||
Security JWT tokens, encrypted passwords, HTTPS enforced.
|
||||
Usability Intuitive UI, consistent icons, and simple navigation.
|
||||
Reliability 99% uptime target.
|
||||
Backup & Recovery Daily database backup and weekly full snapshot.
|
||||
Compliance Follows RE IT data privacy guidelines.
|
||||
10 Technology Matrix
|
||||
Component Specification
|
||||
Database PGSQL (Managed or local instance)
|
||||
Application Stack Node.js (Backend) + React.js (Frontend)
|
||||
Authentication RE SSO Bridge
|
||||
11 Infra requirements & System Hygiene
|
||||
Component Specification
|
||||
Environment QA / Testing
|
||||
# of Virtual Machines (VMs) 1
|
||||
CPU Configuration 4 - Core
|
||||
Memory (RAM) 16 GB
|
||||
Disk Size 500 GB
|
||||
Operating System Ubuntu 24.04 LTS
|
||||
Storage Type Cloud
|
||||
Backup and Recovery
|
||||
|
||||
Daily incremental and weekly full backups.
|
||||
Restore process must not exceed 2 hours.
|
||||
12 Not in scope
|
||||
Anything which comes beyond the scope defined above in terms of Width and depth
|
||||
174
workflow_complete_flow.mermaid
Normal file
174
workflow_complete_flow.mermaid
Normal file
@ -0,0 +1,174 @@
|
||||
flowchart TD
|
||||
Start([User Access System]) --> SSO[SSO Login via RE Bridge]
|
||||
SSO --> Auth{Authentication Successful?}
|
||||
Auth -->|No| SSO
|
||||
Auth -->|Yes| Dashboard[Dashboard]
|
||||
|
||||
Dashboard --> NavMenu[Side Navigation Menu]
|
||||
NavMenu --> MenuChoice{User Selection}
|
||||
|
||||
MenuChoice -->|My Requests| MyReq[View My Requests]
|
||||
MenuChoice -->|Open Requests| OpenReq[View Open Requests]
|
||||
MenuChoice -->|Closed Requests| ClosedReq[View Closed Requests]
|
||||
MenuChoice -->|Raise New Request| RaiseReq[Create New Request]
|
||||
|
||||
%% My Requests Flow
|
||||
MyReq --> ViewReqDetail[View Request Details]
|
||||
OpenReq --> ViewReqDetail
|
||||
ClosedReq --> ViewReqDetail
|
||||
|
||||
%% Create New Request Flow
|
||||
RaiseReq --> Step1[Step 1: Template Selection]
|
||||
Step1 --> SelectCustom[Select Custom Request]
|
||||
SelectCustom --> Step2[Step 2: Basic Information]
|
||||
|
||||
Step2 --> EnterBasic[Enter Request Details: Title, Description, Priority Express/Standard]
|
||||
EnterBasic --> Step3[Step 3: Approval Workflow]
|
||||
|
||||
Step3 --> DefineApproval[Define Approval Hierarchy: Add Approvers @mention, Set TAT per level, Max 10 levels]
|
||||
DefineApproval --> CalcTAT[System Calculates Total TAT]
|
||||
CalcTAT --> Step4[Step 4: Participants & Access]
|
||||
|
||||
Step4 --> AddSpectators[Add Spectators @mention - View-only access]
|
||||
AddSpectators --> Step5[Step 5: Documents & Attachments]
|
||||
|
||||
Step5 --> UploadDocs[Upload Documents: PDF, Word, Excel, PPT, Images - Max 10MB per file - Link Google Docs/Sheets]
|
||||
UploadDocs --> Step6[Step 6: Review & Submit]
|
||||
|
||||
Step6 --> ReviewAll[Review All Details: Request Overview, Basic Info, Approval Workflow, Participants, Documents]
|
||||
ReviewAll --> SubmitChoice{User Action}
|
||||
|
||||
SubmitChoice -->|Save as Draft| Dashboard
|
||||
SubmitChoice -->|Submit Request| ValidateReq[Validate All Fields]
|
||||
ValidateReq --> SendNotif[Send Notifications to Approvers & Spectators]
|
||||
|
||||
%% Approval Process Flow
|
||||
SendNotif --> ApprovalLevel[Request at Approval Level N]
|
||||
ApprovalLevel --> StartTAT[Start TAT Timer for Level N]
|
||||
StartTAT --> NotifyApprover[Notify Approver]
|
||||
|
||||
NotifyApprover --> ApproverAction{Approver Action}
|
||||
ApproverAction -->|View Request| ViewReqDetail
|
||||
|
||||
ViewReqDetail --> DetailTabs{View Tabs}
|
||||
DetailTabs -->|Overview| ShowOverview[Display Request Details & TAT Progress Bar]
|
||||
DetailTabs -->|Workflow| ShowWorkflow[Display Approval Hierarchy & TAT Status per Level]
|
||||
DetailTabs -->|Documents| ShowDocs[Display Uploaded Files & Preview PDF/Images]
|
||||
DetailTabs -->|Activity| ShowActivity[Display Timeline: All Actions & Events]
|
||||
|
||||
ShowOverview --> QuickActions
|
||||
ShowWorkflow --> QuickActions
|
||||
ShowDocs --> QuickActions
|
||||
ShowActivity --> QuickActions
|
||||
|
||||
QuickActions[Quick Actions Available] --> ActionChoice{Select Action}
|
||||
|
||||
ActionChoice -->|Add Work Note| WorkNote[Add Comment/Message, @mention users, Attach files]
|
||||
ActionChoice -->|Add Approver| AddApprover[Add New Approver to Hierarchy]
|
||||
ActionChoice -->|Add Spectator| AddSpectatorAction[Add New Spectator - View-only]
|
||||
ActionChoice -->|Approve| ApproveModal[Approve Request Modal]
|
||||
ActionChoice -->|Reject| RejectModal[Reject Request Modal]
|
||||
|
||||
WorkNote --> LogActivity1[Log to Activity Tab]
|
||||
AddApprover --> LogActivity1
|
||||
AddSpectatorAction --> LogActivity1
|
||||
LogActivity1 --> SendNotif2[Send Notifications]
|
||||
SendNotif2 --> ViewReqDetail
|
||||
|
||||
%% Approval Decision Flow
|
||||
ApproveModal --> EnterApproveComment[Enter Comments & Remarks - Mandatory - 500 chars max]
|
||||
EnterApproveComment --> ConfirmApprove{Confirm Approval?}
|
||||
ConfirmApprove -->|Cancel| ViewReqDetail
|
||||
ConfirmApprove -->|Approve| CheckLevel{Is Final Approver?}
|
||||
|
||||
CheckLevel -->|No| NextLevel[Move to Next Level]
|
||||
NextLevel --> LogApproval[Log Approval in Activity]
|
||||
LogApproval --> UpdateStatus1[Update Request Status]
|
||||
UpdateStatus1 --> ApprovalLevel
|
||||
|
||||
CheckLevel -->|Yes| FinalApproval[Final Approval Recorded]
|
||||
FinalApproval --> ConsultCheck{Need Consultation?}
|
||||
ConsultCheck -->|Yes| UseWorkNote[Use Work Note to Consult with Expert]
|
||||
UseWorkNote --> FinalApproval
|
||||
ConsultCheck -->|No| GenerateConclusion
|
||||
|
||||
%% Rejection Flow
|
||||
RejectModal --> EnterRejectComment[Enter Rejection Remarks - Mandatory - 500 chars max]
|
||||
EnterRejectComment --> ConfirmReject{Confirm Rejection?}
|
||||
ConfirmReject -->|Cancel| ViewReqDetail
|
||||
ConfirmReject -->|Reject| LogRejection[Log Rejection in Activity]
|
||||
LogRejection --> NotifyInitiator[Notify Initiator with Rejection Remarks]
|
||||
NotifyInitiator --> MarkRejected[Mark Request as Rejected]
|
||||
MarkRejected --> CloseRejected[Close Request]
|
||||
CloseRejected --> ArchivedReq[Move to Closed Requests]
|
||||
|
||||
%% TAT Monitoring
|
||||
StartTAT --> MonitorTAT[Monitor TAT Progress]
|
||||
MonitorTAT --> TATCheck{TAT Status}
|
||||
TATCheck -->|Within TAT| GreenStatus[Green Indicator]
|
||||
TATCheck -->|80% Used| YellowStatus[Yellow Indicator - Send Reminder]
|
||||
TATCheck -->|Breached| RedStatus[Red Indicator - Send Alert]
|
||||
|
||||
YellowStatus --> ContinueMonitor[Continue Monitoring]
|
||||
RedStatus --> ContinueMonitor
|
||||
GreenStatus --> ContinueMonitor
|
||||
ContinueMonitor --> ApproverAction
|
||||
|
||||
%% Closure Flow
|
||||
GenerateConclusion[AI Generates Conclusion Remark from Work Notes, Comments, Activity Logs]
|
||||
GenerateConclusion --> ReturnToInitiator[Return to Initiator]
|
||||
ReturnToInitiator --> InitiatorReview[Initiator Reviews AI-Generated Conclusion]
|
||||
InitiatorReview --> EditConclusion{Edit Conclusion?}
|
||||
|
||||
EditConclusion -->|Yes| ModifyConclusion[Edit Conclusion Remark]
|
||||
EditConclusion -->|No| ConfirmClosure
|
||||
ModifyConclusion --> ConfirmClosure[Confirm & Close Request]
|
||||
|
||||
ConfirmClosure --> MarkClosed[Mark Request as Closed]
|
||||
MarkClosed --> FinalRecord[Conclusion Becomes Permanent Record]
|
||||
FinalRecord --> VisibleIn[Visible in: My Requests, Open Requests, Closed Requests]
|
||||
VisibleIn --> PostClosure
|
||||
|
||||
%% Post-Closure Access
|
||||
PostClosure[Post-Closure Access] --> AccessibleTo[Accessible to All Participants & Spectators]
|
||||
AccessibleTo --> ShareOptions{Sharing Options}
|
||||
ShareOptions -->|Add Spectator| ShareInternal[Share Internally via Add Spectator]
|
||||
ShareOptions -->|Download| DownloadWorkNotes[Download Work Note Attachments Only]
|
||||
|
||||
ShareInternal --> AuditTrail[All Actions Viewable for Audit]
|
||||
DownloadWorkNotes --> AuditTrail
|
||||
|
||||
%% Notification System
|
||||
SendNotif -.->|In-App Alert| BellIcon[Bell Icon Notification with Count]
|
||||
SendNotif2 -.->|In-App Alert| BellIcon
|
||||
YellowStatus -.->|Auto Reminder| BellIcon
|
||||
RedStatus -.->|Auto Alert| BellIcon
|
||||
NotifyInitiator -.->|In-App Alert| BellIcon
|
||||
ReturnToInitiator -.->|In-App Alert| BellIcon
|
||||
|
||||
BellIcon --> NotifDetails[Show Request ID, Message & Timestamp]
|
||||
NotifDetails --> ClickToView[Click to View Request]
|
||||
ClickToView --> ViewReqDetail
|
||||
|
||||
AuditTrail --> End([Workflow Complete])
|
||||
ArchivedReq --> End
|
||||
|
||||
style Start fill:#e1f5ff
|
||||
style SSO fill:#fff3cd
|
||||
style Dashboard fill:#d4edda
|
||||
style Step1 fill:#cfe2ff
|
||||
style Step2 fill:#cfe2ff
|
||||
style Step3 fill:#cfe2ff
|
||||
style Step4 fill:#cfe2ff
|
||||
style Step5 fill:#cfe2ff
|
||||
style Step6 fill:#cfe2ff
|
||||
style ApproveModal fill:#d1e7dd
|
||||
style RejectModal fill:#f8d7da
|
||||
style GenerateConclusion fill:#d1ecf1
|
||||
style MarkClosed fill:#d4edda
|
||||
style End fill:#e1f5ff
|
||||
style GreenStatus fill:#d1e7dd
|
||||
style YellowStatus fill:#fff3cd
|
||||
style RedStatus fill:#f8d7da
|
||||
style BellIcon fill:#ffeaa7
|
||||
|
||||
Binary file not shown.
BIN
~WRL1115.tmp
BIN
~WRL1115.tmp
Binary file not shown.
Loading…
Reference in New Issue
Block a user