admin/38631-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.0

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-20 00:47:28 +00:00
parent 93822e8efd
commit ad3471b840
2 changed files with 236 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
frontend/src/menuAside.ts
View File

@ -7,165 +7,142 @@ const menuAside: MenuAsideItem[] = [
icon: icon.mdiViewDashboardOutline,
label: 'Dashboard',
},
{
href: '/users/users-list',
label: 'Users',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiAccountGroup ?? icon.mdiTable,
permissions: 'READ_USERS'
label: 'Compliance Engine',
icon: icon.mdiGavel,
menu: [
{
href: '/reg_changes/reg_changes-list',
label: 'Reg Changes',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiFileDocumentEditOutline,
permissions: 'READ_REG_CHANGES'
},
{
href: '/pipeline_runs/pipeline_runs-list',
label: 'Pipeline Runs',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiPlayCircleOutline,
permissions: 'READ_PIPELINE_RUNS'
},
{
href: '/evidence_packs/evidence_packs-list',
label: 'Evidence Packs',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiArchiveOutline,
permissions: 'READ_EVIDENCE_PACKS'
},
]
},
{
href: '/roles/roles-list',
label: 'Roles',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
permissions: 'READ_ROLES'
label: 'Curation',
icon: icon.mdiClipboardCheckOutline,
menu: [
{
href: '/requirements/requirements-list',
label: 'Requirements Queue',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiClipboardListOutline,
permissions: 'READ_REQUIREMENTS'
},
{
href: '/curation_actions/curation_actions-list',
label: 'Curation History',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiHistory,
permissions: 'READ_CURATION_ACTIONS'
},
]
},
{
href: '/permissions/permissions-list',
label: 'Permissions',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
permissions: 'READ_PERMISSIONS'
label: 'Knowledge Graph',
icon: icon.mdiGraphOutline,
menu: [
{
href: '/chunks/chunks-list',
label: 'Chunks',
icon: icon.mdiFileDocumentOutline,
permissions: 'READ_CHUNKS'
},
{
href: '/subtopics/subtopics-list',
label: 'Subtopics',
icon: icon.mdiTagMultipleOutline,
permissions: 'READ_SUBTOPICS'
},
{
href: '/statements/statements-list',
label: 'Statements',
icon: icon.mdiCommentTextMultipleOutline,
permissions: 'READ_STATEMENTS'
},
{
href: '/artifacts/artifacts-list',
label: 'Artifacts',
icon: icon.mdiFileTreeOutline,
permissions: 'READ_ARTIFACTS'
},
{
href: '/graph_edges/graph_edges-list',
label: 'Traceability Edges',
icon: icon.mdiLinkVariant,
permissions: 'READ_GRAPH_EDGES'
},
]
},
{
href: '/organizations/organizations-list',
label: 'Organizations',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_ORGANIZATIONS'
},
{
href: '/tenants/tenants-list',
label: 'Tenants',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiDomain' in icon ? icon['mdiDomain' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_TENANTS'
},
{
href: '/projects/projects-list',
label: 'Projects',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFolderCog' in icon ? icon['mdiFolderCog' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_PROJECTS'
},
{
href: '/reg_changes/reg_changes-list',
label: 'Reg changes',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiGavel' in icon ? icon['mdiGavel' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_REG_CHANGES'
},
{
href: '/pipeline_runs/pipeline_runs-list',
label: 'Pipeline runs',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiPlayCircleOutline' in icon ? icon['mdiPlayCircleOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_PIPELINE_RUNS'
},
{
href: '/stage_tasks/stage_tasks-list',
label: 'Stage tasks',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiProgressWrench' in icon ? icon['mdiProgressWrench' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_STAGE_TASKS'
},
{
href: '/model_versions/model_versions-list',
label: 'Model versions',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiRobot' in icon ? icon['mdiRobot' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_MODEL_VERSIONS'
},
{
href: '/chunks/chunks-list',
label: 'Chunks',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFileDocumentOutline' in icon ? icon['mdiFileDocumentOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_CHUNKS'
},
{
href: '/subtopics/subtopics-list',
label: 'Subtopics',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiTagMultipleOutline' in icon ? icon['mdiTagMultipleOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_SUBTOPICS'
},
{
href: '/statements/statements-list',
label: 'Statements',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiCommentTextMultipleOutline' in icon ? icon['mdiCommentTextMultipleOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_STATEMENTS'
},
{
href: '/requirements/requirements-list',
label: 'Requirements',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiClipboardCheckOutline' in icon ? icon['mdiClipboardCheckOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_REQUIREMENTS'
},
{
href: '/artifacts/artifacts-list',
label: 'Artifacts',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFileTreeOutline' in icon ? icon['mdiFileTreeOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_ARTIFACTS'
},
{
href: '/graph_edges/graph_edges-list',
label: 'Graph edges',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiGraphOutline' in icon ? icon['mdiGraphOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_GRAPH_EDGES'
},
{
href: '/curation_actions/curation_actions-list',
label: 'Curation actions',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiThumbsUpDownOutline' in icon ? icon['mdiThumbsUpDownOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_CURATION_ACTIONS'
},
{
href: '/evidence_packs/evidence_packs-list',
label: 'Evidence packs',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiArchiveOutline' in icon ? icon['mdiArchiveOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_EVIDENCE_PACKS'
label: 'Administration',
icon: icon.mdiCogOutline,
menu: [
{
href: '/users/users-list',
label: 'Users',
icon: icon.mdiAccountGroup,
permissions: 'READ_USERS'
},
{
href: '/roles/roles-list',
label: 'Roles',
icon: icon.mdiShieldAccountVariantOutline,
permissions: 'READ_ROLES'
},
{
href: '/organizations/organizations-list',
label: 'Organizations',
icon: icon.mdiTable,
permissions: 'READ_ORGANIZATIONS'
},
{
href: '/projects/projects-list',
label: 'Projects',
icon: icon.mdiFolderCog,
permissions: 'READ_PROJECTS'
},
{
href: '/model_versions/model_versions-list',
label: 'AI Models',
icon: icon.mdiRobot,
permissions: 'READ_MODEL_VERSIONS'
},
]
},
{
href: '/profile',
label: 'Profile',
icon: icon.mdiAccountCircle,
},
{
href: '/api-docs',
target: '_blank',
label: 'Swagger API',
label: 'API Docs',
icon: icon.mdiFileCode,
permissions: 'READ_API_DOCS'
},
]
export default menuAside
export default menuAside

246
frontend/src/pages/index.tsx
View File

@ -1,19 +1,15 @@
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import BaseDivider from '../components/BaseDivider';
import BaseButtons from '../components/BaseButtons';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
import { getPexelsImage } from '../helpers/pexels';
import * as icon from '@mdi/js';
import BaseIcon from '../components/BaseIcon';
export default function Starter() {
const [illustrationImage, setIllustrationImage] = useState({
@ -21,146 +17,140 @@ export default function Starter() {
photographer: undefined,
photographer_url: undefined,
})
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
const [contentType, setContentType] = useState('video');
const [contentPosition, setContentPosition] = useState('left');
const textColor = useAppSelector((state) => state.style.linkColor);
const title = 'RegChange AI'
const title = 'Reg Change Assessment AI'
// Fetch Pexels image/video
useEffect(() => {
async function fetchData() {
const image = await getPexelsImage();
const video = await getPexelsVideo();
setIllustrationImage(image);
setIllustrationVideo(video);
}
fetchData();
}, []);
const imageBlock = (image) => (
<div
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
style={{
backgroundImage: `${
image
? `url(${image?.src?.original})`
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
}`,
backgroundSize: 'cover',
backgroundPosition: 'left center',
backgroundRepeat: 'no-repeat',
}}
>
<div className='flex justify-center w-full bg-blue-300/20'>
<a
className='text-[8px]'
href={image?.photographer_url}
target='_blank'
rel='noreferrer'
>
Photo by {image?.photographer} on Pexels
</a>
</div>
</div>
);
const videoBlock = (video) => {
if (video?.video_files?.length > 0) {
return (
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
<video
className='absolute top-0 left-0 w-full h-full object-cover'
autoPlay
loop
muted
>
<source src={video?.video_files[0]?.link} type='video/mp4'/>
Your browser does not support the video tag.
</video>
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
<a
className='text-[8px]'
href={video?.user?.url}
target='_blank'
rel='noreferrer'
>
Video by {video.user.name} on Pexels
</a>
</div>
</div>)
}
};
return (
<div
style={
contentPosition === 'background'
? {
backgroundImage: `${
illustrationImage
? `url(${illustrationImage.src?.original})`
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
}`,
backgroundSize: 'cover',
backgroundPosition: 'left center',
backgroundRepeat: 'no-repeat',
}
: {}
}
>
<div className="bg-slate-900 text-white min-h-screen font-sans selection:bg-emerald-500/30">
<Head>
<title>{getPageTitle('Starter Page')}</title>
<title>{getPageTitle('Regulatory Assessment Platform')}</title>
</Head>
<SectionFullScreen bg='violet'>
<div
className={`flex ${
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
} min-h-screen w-full`}
>
{contentType === 'image' && contentPosition !== 'background'
? imageBlock(illustrationImage)
: null}
{contentType === 'video' && contentPosition !== 'background'
? videoBlock(illustrationVideo)
: null}
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
<CardBoxComponentTitle title="Welcome to your Reg Change Assessment AI app!"/>
<div className="space-y-3">
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
<p className='text-center text-gray-500'>For guides and documentation please check
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
</div>
<BaseButtons>
<BaseButton
href='/login'
label='Login'
color='info'
className='w-full'
/>
{/* Hero Section */}
<section className="relative overflow-hidden pt-16 pb-32">
{/* Background decoration */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-indigo-500 rounded-full blur-[120px]"></div>
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-emerald-500 rounded-full blur-[120px]"></div>
</div>
</BaseButtons>
</CardBox>
</div>
</div>
</SectionFullScreen>
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
Privacy Policy
</Link>
</div>
<nav className="container mx-auto px-6 flex justify-between items-center mb-16 relative z-10">
<div className="flex items-center space-x-2">
<div className="bg-emerald-500 p-1.5 rounded-lg shadow-lg shadow-emerald-500/20">
<BaseIcon path={icon.mdiGavel} className="text-white" size={24} />
</div>
<span className="text-xl font-bold tracking-tight">RegChange <span className="text-emerald-400">AI</span></span>
</div>
<div className="flex items-center space-x-6">
<Link href="/login" className="text-sm font-medium hover:text-emerald-400 transition-colors">Sign In</Link>
<Link href="/register" className="px-5 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold rounded-full shadow-lg shadow-emerald-600/20 transition-all transform hover:-translate-y-0.5">
Get Started
</Link>
</div>
</nav>
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center space-x-2 bg-slate-800/50 border border-slate-700/50 px-3 py-1 rounded-full mb-8">
<span className="flex h-2 w-2 rounded-full bg-emerald-500"></span>
<span className="text-xs font-semibold uppercase tracking-wider text-emerald-400">Powered by Agentic Workflows</span>
</div>
<h1 className="text-5xl md:text-7xl font-extrabold mb-8 tracking-tight leading-[1.1]">
Shrink Compliance <br />
<span className="bg-gradient-to-r from-emerald-400 to-indigo-400 bg-clip-text text-transparent">Weeks into Minutes</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 mb-12 max-w-2xl mx-auto leading-relaxed">
Transform complex regulatory documents into actionable requirements and implementation artifacts using our traceable knowledge graph and human-in-the-loop curation.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<Link href="/login" className="w-full sm:w-auto px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-2xl shadow-xl shadow-emerald-600/30 transition-all flex items-center justify-center">
Start Free Assessment
<BaseIcon path={icon.mdiArrowRight} className="ml-2" size={20} />
</Link>
<Link href="#features" className="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-2xl border border-slate-700 transition-all flex items-center justify-center">
Watch Demo
</Link>
</div>
</div>
{/* Dashboard Preview */}
<div className="mt-24 relative max-w-5xl mx-auto group">
<div className="absolute -inset-1 bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-3xl blur opacity-25 group-hover:opacity-40 transition duration-1000"></div>
<div className="relative bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-2xl">
<div className="h-8 bg-slate-800/50 border-b border-slate-700/50 flex items-center px-4 space-x-2">
<div className="w-2.5 h-2.5 rounded-full bg-red-500/50"></div>
<div className="w-2.5 h-2.5 rounded-full bg-amber-500/50"></div>
<div className="w-2.5 h-2.5 rounded-full bg-emerald-500/50"></div>
</div>
<div className="p-1 md:p-2">
<img
src={illustrationImage?.src?.large || "https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"}
alt="Dashboard Preview"
className="w-full rounded-2xl shadow-inner grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition duration-700"
/>
</div>
</div>
</div>
</div>
</section>
{/* Features Grid */}
<section id="features" className="py-32 bg-slate-950">
<div className="container mx-auto px-6">
<div className="text-center mb-20">
<h2 className="text-3xl md:text-5xl font-bold mb-4 tracking-tight">The Evidence of Compliance Engine</h2>
<p className="text-slate-400 max-w-2xl mx-auto">Our 5-stage pipeline ensures 100% traceability from regulation to test case.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{ title: 'Semantic Chunking', desc: 'Heading-aware document parsing with overlapping context spans.', icon: icon.mdiTextSearch },
{ title: 'Subtopic Clustering', desc: 'Automated clustering of regulatory themes using semantic embeddings.', icon: icon.mdiTagMultiple },
{ title: 'Statement Extraction', desc: 'Atomic claim extraction with modality (Obligation vs. Permission).', icon: icon.mdiCommentTextMultiple },
{ title: 'Requirement Synthesis', desc: 'Testable "shall" requirements mapped to business categories.', icon: icon.mdiClipboardCheck },
{ title: 'Artifact Generation', desc: 'User stories, Acceptance criteria, and Gherkin test cases.', icon: icon.mdiFileTree },
{ title: 'Audit-Ready Traceability', desc: 'Evidence packs with full provenance graph for audit defense.', icon: icon.mdiShieldCheck },
].map((feature, i) => (
<div key={i} className="bg-slate-900/50 border border-slate-800 p-8 rounded-3xl hover:border-emerald-500/50 transition-all group">
<div className="w-12 h-12 bg-emerald-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<BaseIcon path={feature.icon} className="text-emerald-500" size={28} />
</div>
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
<p className="text-slate-400 leading-relaxed text-sm">
{feature.desc}
</p>
</div>
))}
</div>
</div>
</section>
{/* Footer */}
<footer className="py-12 border-t border-slate-900 bg-slate-950">
<div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center">
<div className="flex items-center space-x-2 mb-6 md:mb-0">
<BaseIcon path={icon.mdiGavel} className="text-emerald-500" size={24} />
<span className="font-bold tracking-tight">RegChange AI</span>
</div>
<p className="text-slate-500 text-sm">© 2026 {title}. Audit-First Compliance Automation.</p>
<div className="flex space-x-6 mt-6 md:mt-0">
<Link href="/privacy-policy" className="text-slate-500 hover:text-white text-sm transition-colors">Privacy</Link>
<Link href="/terms-of-use" className="text-slate-500 hover:text-white text-sm transition-colors">Terms</Link>
</div>
</div>
</footer>
</div>
);
}
Starter.getLayout = function getLayout(page: ReactElement) {
return <LayoutGuest>{page}</LayoutGuest>;
};
};