114 lines
4.1 KiB
Vue
114 lines
4.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { Card, Typography, Divider, List, Timeline, Space } from 'ant-design-vue'
|
||
|
|
|
||
|
|
const pathways = [
|
||
|
|
'Admin: system settings, user management, reporting, invitations.',
|
||
|
|
'Manager: create onboarding flows, assign roles, monitor team progress.',
|
||
|
|
'Employee: complete training modules, assessments, and track personal progress.',
|
||
|
|
]
|
||
|
|
|
||
|
|
const highlights = [
|
||
|
|
'Ready for agent-driven workflows that guide people through onboarding tasks.',
|
||
|
|
'Flexible role-based gating across pages (managers/admins vs employees).',
|
||
|
|
'Django REST API + Vue 3 frontend with a shared Pinia auth/session store.',
|
||
|
|
'Docker-friendly dev setup (frontend on 5173, API on 8000).',
|
||
|
|
]
|
||
|
|
|
||
|
|
const roadmap = [
|
||
|
|
{
|
||
|
|
title: 'Short term',
|
||
|
|
items: [
|
||
|
|
'Add richer assessments with adaptive scoring.',
|
||
|
|
'Improve content versioning for training modules.',
|
||
|
|
'Expose activity feed for audits.',
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Next',
|
||
|
|
items: [
|
||
|
|
'Integrate external IDP (SSO) and SCIM user sync.',
|
||
|
|
'Launch webhooks for downstream HRIS updates.',
|
||
|
|
'Add multilingual content support.',
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const steps = [
|
||
|
|
'Register or login (demo credentials only).',
|
||
|
|
'Complete Onboarding and Training to simulate a role journey.',
|
||
|
|
'Managers assign employees to roles and review progress reports.',
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="page">
|
||
|
|
<Card class="panel" :bordered="false">
|
||
|
|
<Typography.Title :level="2">About Agentic Trainers</Typography.Title>
|
||
|
|
<Typography.Paragraph type="secondary">
|
||
|
|
Agentic Trainers is a lightweight platform for onboarding, training, and assessing
|
||
|
|
employees with modular content and agent-driven workflows. It is designed for teams
|
||
|
|
that want to ship tangible learning experiences quickly without complex LMS setup.
|
||
|
|
</Typography.Paragraph>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
<Typography.Title :level="4">Role pathways</Typography.Title>
|
||
|
|
<List :data-source="pathways" :bordered="false">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<List.Item class="row">{{ item }}</List.Item>
|
||
|
|
</template>
|
||
|
|
</List>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
<Typography.Title :level="4">Highlights</Typography.Title>
|
||
|
|
<List :data-source="highlights" :bordered="false">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<List.Item class="row">{{ item }}</List.Item>
|
||
|
|
</template>
|
||
|
|
</List>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
<Typography.Title :level="4">Getting started</Typography.Title>
|
||
|
|
<List :data-source="steps" :bordered="false">
|
||
|
|
<template #renderItem="{ item, index }">
|
||
|
|
<List.Item class="row">
|
||
|
|
<strong>{{ index + 1 }}.</strong>
|
||
|
|
{{ item }}
|
||
|
|
</List.Item>
|
||
|
|
</template>
|
||
|
|
</List>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
<Typography.Title :level="4">Roadmap</Typography.Title>
|
||
|
|
<Space :size="24" direction="vertical" style="width: 100%">
|
||
|
|
<Timeline>
|
||
|
|
<Timeline.Item v-for="bucket in roadmap" :key="bucket.title">
|
||
|
|
<Typography.Text strong>{{ bucket.title }}</Typography.Text>
|
||
|
|
<List :data-source="bucket.items" :bordered="false">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<List.Item class="row">{{ item }}</List.Item>
|
||
|
|
</template>
|
||
|
|
</List>
|
||
|
|
</Timeline.Item>
|
||
|
|
</Timeline>
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
<Typography.Paragraph type="secondary" style="margin-top: 1rem">
|
||
|
|
Demo-only auth; integrate a real identity provider for production use.
|
||
|
|
</Typography.Paragraph>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.page {
|
||
|
|
padding: 2rem 1.5rem;
|
||
|
|
}
|
||
|
|
.panel {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.row {
|
||
|
|
padding: 0.5rem 0;
|
||
|
|
}
|
||
|
|
</style>
|