216 lines
9.0 KiB
TypeScript
216 lines
9.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { AuthenticatedLayout } from '../layout/AuthenticatedLayout';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
|
|
import { Button } from '../ui/button';
|
|
import { Input } from '../ui/input';
|
|
import { Badge } from '../ui/badge';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
|
import { Save, Eye, Send, Plus, Calendar } from 'lucide-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
interface ProgrammeComposerProps {
|
|
// onNavigate: (route: string) => void;
|
|
onLogout: () => void;
|
|
user: any;
|
|
}
|
|
|
|
export function ProgrammeComposer({ onLogout, user }: ProgrammeComposerProps) {
|
|
const [programmeTitle, setProgrammeTitle] = useState('New Executive Programme');
|
|
|
|
const breadcrumbs = [
|
|
{ label: 'Programmes', route: '/programmes' },
|
|
{ label: 'Programme Composer' }
|
|
];
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
currentRoute="/programmes/new"
|
|
// onNavigate={onNavigate}
|
|
onLogout={onLogout}
|
|
user={user}
|
|
breadcrumbs={breadcrumbs}
|
|
>
|
|
<div className="p-6 space-y-6">
|
|
{/* Composer Header */}
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<Input
|
|
value={programmeTitle}
|
|
onChange={(e) => setProgrammeTitle(e.target.value)}
|
|
className="text-lg font-semibold border-none shadow-none p-0 h-auto"
|
|
/>
|
|
<Badge variant="secondary">Draft</Badge>
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<Button variant="outline">
|
|
<Save className="h-4 w-4 mr-2" />
|
|
Save
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Eye className="h-4 w-4 mr-2" />
|
|
Preview
|
|
</Button>
|
|
<Button style={{ backgroundColor: 'var(--color-brand-primary)' }}>
|
|
<Send className="h-4 w-4 mr-2" />
|
|
Publish
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Programme Composer Tabs */}
|
|
<Tabs defaultValue="timeline" className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-4">
|
|
<TabsTrigger value="timeline">Timeline</TabsTrigger>
|
|
<TabsTrigger value="blocks">Content Blocks</TabsTrigger>
|
|
<TabsTrigger value="attachments">Attachments</TabsTrigger>
|
|
<TabsTrigger value="assignments">Assignments</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="timeline">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Programme Timeline</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-medium">Programme Structure</h3>
|
|
<Button variant="outline">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Timeline Block
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Card className="p-4 border-l-4 border-blue-500">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center space-x-2">
|
|
<Calendar className="h-4 w-4" />
|
|
<span className="font-medium">Week 1-2: Foundation</span>
|
|
</div>
|
|
<Button variant="ghost" size="sm">Edit</Button>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Introduction courses and initial assessments
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="p-4 border-l-4 border-green-500">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center space-x-2">
|
|
<Calendar className="h-4 w-4" />
|
|
<span className="font-medium">Week 3-4: Core Learning</span>
|
|
</div>
|
|
<Button variant="ghost" size="sm">Edit</Button>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Main course content and webinars
|
|
</p>
|
|
</Card>
|
|
|
|
<div className="text-center py-4 text-muted-foreground border-2 border-dashed border-muted rounded-lg">
|
|
<Plus className="h-8 w-8 mx-auto mb-2" />
|
|
<p>Add more timeline blocks</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="blocks">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Content Blocks</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<Card className="p-4 cursor-pointer hover:bg-accent" onClick={() => navigate('/courses')}>
|
|
<div className="text-center">
|
|
<div className="h-12 w-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
📚
|
|
</div>
|
|
<h4 className="font-medium">Courses</h4>
|
|
<p className="text-sm text-muted-foreground">Add courses from library</p>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-4 cursor-pointer hover:bg-accent" onClick={() => navigate('/webinars')}>
|
|
<div className="text-center">
|
|
<div className="h-12 w-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
🎥
|
|
</div>
|
|
<h4 className="font-medium">Webinars</h4>
|
|
<p className="text-sm text-muted-foreground">Select from Zoom webinars</p>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-4 cursor-pointer hover:bg-accent" onClick={() => navigate('/profilers')}>
|
|
<div className="text-center">
|
|
<div className="h-12 w-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
|
|
🎯
|
|
</div>
|
|
<h4 className="font-medium">Profilers</h4>
|
|
<p className="text-sm text-muted-foreground">Add assessment tools</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="attachments">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Programme Attachments</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<Plus className="h-12 w-12 mx-auto mb-4" />
|
|
<p>Attach additional resources from Content Manager</p>
|
|
<Button className="mt-4" onClick={() => navigate('/content')}>
|
|
Browse Content Library
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="assignments">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Programme Assignments</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-muted rounded-lg">
|
|
<h4 className="font-medium mb-2">Assignment Rules</h4>
|
|
<p className="text-sm text-muted-foreground">
|
|
Define who can access this programme and any prerequisites.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-2">
|
|
<input type="checkbox" id="auto-assign" className="rounded" />
|
|
<label htmlFor="auto-assign" className="text-sm">Auto-assign to new eligible learners</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<input type="checkbox" id="prerequisites" className="rounded" />
|
|
<label htmlFor="prerequisites" className="text-sm">Require prerequisite completion</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
} |