ppt-tool/frontend/app/presentation-templates/ExampleSlideLayout.tsx
Vadym Samoilenko cf21ba4516 Phase 1-2: Foundation + Admin Panel & Client Management
Phase 1 (Foundation):
- Project restructure (presenton-main → backend/ + frontend/)
- Database schema (8 new models, Alembic config, seed script)
- Auth (Azure AD SSO + dev bypass, JWT sessions, AuthMiddleware)
- RBAC (access_service, rbac_middleware, admin routers)
- Audit logging (fire-and-forget, AuditMiddleware, admin router)
- i18n (react-i18next with 5 namespace files)

Phase 2 (Admin Panel & Client Management):
- Admin panel shell (sidebar layout, role guard, 12 pages)
- Redux admin slice with 18 async thunks
- User management (role changes, deactivation)
- Client management (CRUD, brand config, team management)
- Brand config editor (colors, fonts, logos, voice rules)
- Master deck upload & parser (PPTX → HTML → React pipeline)
- Audit log viewer with filters and CSV/JSON export

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 15:37:17 +00:00

100 lines
3 KiB
TypeScript

import * as z from "zod";
import { ImageSchema, IconSchema } from "@/app/presentation-templates/defaultSchemes";
export const Schema = z.object({
title: z.string().min(5).max(50).default("Quarterly Business Review").meta({
description: "Main slide title",
}),
subtitle: z
.string()
.min(3)
.max(100)
.optional()
.default("Q1 2024 Performance Summary")
.meta({
description: "Optional subtitle",
}),
metrics: z
.array(
z.object({
label: z.string().min(2).max(20),
value: z.string().min(1).max(10),
trend: z.enum(["up", "down", "stable"]),
})
)
.default([
{ label: "Revenue", value: "$2.4M", trend: "up" },
{ label: "Growth", value: "15%", trend: "up" },
])
.meta({
description: "Key performance metrics",
}),
chartImage: ImageSchema.default({
__image_url__: "https://example.com/quarterly-chart.png",
__image_prompt__: "Quarterly performance chart showing upward trend",
}).meta({
description: "Main performance chart",
}),
trendIcon: IconSchema.default({
__icon_url__: "/static/icons/placeholder.svg",
__icon_query__: "upward trend arrow icon",
}).meta({
description: "Trend indicator icon",
}),
});
type SchemaType = z.infer<typeof Schema>;
export default function ExampleSlideLayout({ data }: { data: SchemaType }) {
const { title, subtitle, metrics, chartImage, trendIcon } = data;
return (
<div className="aspect-video max-w-[1280px] w-full bg-white">
<header className="slide-header">
{title && <h1 className="text-4xl font-bold text-gray-900">{title}</h1>}
{subtitle && <p className="text-xl text-gray-600 mt-2">{subtitle}</p>}
</header>
<main className="slide-content flex-1 flex">
{chartImage?.__image_url__ && (
<div className="chart-section flex-1">
<img
src={chartImage.__image_url__}
alt={chartImage.__image_prompt__}
className="w-full h-auto max-h-96 object-contain"
/>
</div>
)}
{metrics && metrics.length > 0 && (
<div className="metrics-section w-1/3 ml-6">
<h2 className="text-2xl font-semibold mb-4">Key Metrics</h2>
{metrics.map((metric, index) => (
<div
key={index}
className="metric-item mb-4 p-3 bg-gray-50 rounded"
>
<div className="flex items-center justify-between">
<span className="font-medium">{metric.label}</span>
{trendIcon?.__icon_url__ && (
<img
src={trendIcon.__icon_url__}
alt={metric.trend}
className="w-6 h-6"
/>
)}
</div>
<span className="text-2xl font-bold text-blue-600">
{metric.value}
</span>
</div>
))}
</div>
)}
</main>
</div>
);
}