@hed-hog/studio 0.0.285

package/hedhog/frontend/app/projects/form/page.tsx.ejs

@@ -0,0 +1,129 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const schema = z.object({
+  title: z.string().min(3),
+  description: z.string().optional(),
+  projectType: z.string().min(1),
+  binding: z.string().optional(),
+  owner: z.string().min(1),
+  editor: z.string().optional(),
+  currentStage: z.string().min(1),
+  status: z.string().min(1),
+  plannedAt: z.string().optional(),
+  thumbnail: z.string().optional(),
+  notes: z.string().optional(),
+});
+
+export default function StudioProjectFormPage() {
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: '',
+      description: '',
+      projectType: 'course_lesson',
+      binding: '',
+      owner: '',
+      editor: '',
+      currentStage: 'preparation',
+      status: 'draft',
+      plannedAt: '',
+      thumbnail: '',
+      notes: '',
+    },
+  });
+
+  return (
+    <Page>
+      <PageHeader
+        title="Formulario de Projeto"
+        description="Cadastro estatico para validacao de UX"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Studio', href: '/studio' },
+          { label: 'Projeto' },
+        ]}
+      />
+
+      <Form {...form}>
+        <form
+          className="grid gap-4"
+          onSubmit={form.handleSubmit(() => undefined)}
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            {[
+              ['title', 'Titulo', 'Nome do projeto'],
+              ['projectType', 'Tipo', 'course_lesson | standalone'],
+              ['binding', 'Vinculo externo', 'lms.lesson #123'],
+              ['owner', 'Responsavel', 'Usuario responsavel'],
+              ['editor', 'Editor', 'Usuario editor'],
+              ['currentStage', 'Etapa atual', 'preparation | recording'],
+              ['status', 'Status', 'draft | planned | in_editing'],
+              ['plannedAt', 'Data planejada', '2026-03-20T09:00'],
+              ['thumbnail', 'Thumbnail', 'ID/URL da imagem'],
+            ].map(([name, label, placeholder]) => (
+              <FormField
+                key={name}
+                control={form.control}
+                name={name as keyof z.infer<typeof schema>}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{label}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={placeholder} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ))}
+          </div>
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Descricao</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Resumo do projeto" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="notes"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Observacoes</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Notas de producao" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Salvar Projeto
+          </Button>
+        </form>
+      </Form>
+    </Page>
+  );
+}

package/hedhog/frontend/app/projects/page.tsx.ejs

@@ -0,0 +1,169 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import type { PageHeaderProps } from '@/components/entity-list/page-header';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { StudioStatusBadge } from '../_components/studio-status-badge';
+import { STUDIO_PROJECTS } from '../_lib/mocks';
+
+export default function StudioProjectsPage() {
+  const breadcrumbs: PageHeaderProps['breadcrumbs'] = [
+    { label: 'Home', href: '/' },
+    { label: 'Studio', href: '/studio' },
+    { label: 'Projetos' },
+  ];
+
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('all');
+  const [type, setType] = useState('all');
+  const [stage, setStage] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const filtered = useMemo(() => {
+    return STUDIO_PROJECTS.filter((item) => {
+      if (status !== 'all' && item.status !== status) return false;
+      if (type !== 'all' && item.projectType !== type) return false;
+      if (stage !== 'all' && item.currentStage !== stage) return false;
+      if (
+        search &&
+        !item.title.toLowerCase().includes(search.toLowerCase()) &&
+        !item.binding.toLowerCase().includes(search.toLowerCase())
+      ) {
+        return false;
+      }
+      return true;
+    });
+  }, [search, stage, status, type]);
+
+  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);
+
+  return (
+    <Page>
+      <PageHeader
+        title="Projetos"
+        description="Gestao de projetos audiovisuais"
+        breadcrumbs={breadcrumbs as { label: string; href?: string }[]}
+        actions={
+          <Button asChild size="sm">
+            <Link href="/studio/projects/form">Novo Projeto</Link>
+          </Button>
+        }
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => setPage(1)}
+        placeholder="Buscar por titulo ou vinculo"
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: status,
+            onChange: setStatus,
+            options: [
+              { value: 'all', label: 'Status' },
+              { value: 'draft', label: 'Draft' },
+              { value: 'in_recording', label: 'In recording' },
+              { value: 'in_editing', label: 'In editing' },
+              { value: 'ready_to_publish', label: 'Ready to publish' },
+            ],
+          },
+          {
+            id: 'type',
+            type: 'select',
+            value: type,
+            onChange: setType,
+            options: [
+              { value: 'all', label: 'Tipo' },
+              { value: 'course_lesson', label: 'Course lesson' },
+              { value: 'standalone', label: 'Standalone' },
+              { value: 'social_content', label: 'Social content' },
+            ],
+          },
+          {
+            id: 'stage',
+            type: 'select',
+            value: stage,
+            onChange: setStage,
+            options: [
+              { value: 'all', label: 'Etapa' },
+              { value: 'preparation', label: 'Preparation' },
+              { value: 'recording', label: 'Recording' },
+              { value: 'rough_cut', label: 'Rough cut' },
+              { value: 'publication', label: 'Publication' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Titulo</TableHead>
+              <TableHead>Tipo</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Etapa</TableHead>
+              <TableHead>Vinculo</TableHead>
+              <TableHead>Responsavel</TableHead>
+              <TableHead>Atualizado</TableHead>
+              <TableHead className="text-right">Acoes</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paged.map((project) => (
+              <TableRow key={project.id}>
+                <TableCell className="font-medium">{project.title}</TableCell>
+                <TableCell>{project.projectType}</TableCell>
+                <TableCell>
+                  <StudioStatusBadge value={project.status} />
+                </TableCell>
+                <TableCell>
+                  <StudioStatusBadge value={project.currentStage} />
+                </TableCell>
+                <TableCell>{project.binding}</TableCell>
+                <TableCell>{project.owner}</TableCell>
+                <TableCell>
+                  {new Date(project.updatedAt).toLocaleString('pt-BR')}
+                </TableCell>
+                <TableCell className="text-right">
+                  <Button asChild variant="outline" size="sm">
+                    <Link href={`/studio/projects/${project.id}`}>Abrir</Link>
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={filtered.length}
+        onPageChange={setPage}
+        onPageSizeChange={(value) => {
+          setPageSize(value);
+          setPage(1);
+        }}
+      />
+    </Page>
+  );
+}

package/hedhog/frontend/app/publication/page.tsx.ejs

@@ -0,0 +1,62 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { STUDIO_PUBLICATION_TARGETS } from '../_lib/mocks';
+import { StudioStatusBadge } from '../_components/studio-status-badge';
+
+export default function StudioPublicationPage() {
+  return (
+    <Page>
+      <PageHeader
+        title="Publicacao"
+        description="Destinos e estado de publicacao"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Studio', href: '/studio' },
+          { label: 'Publicacao' },
+        ]}
+      />
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Destino</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Agendamento</TableHead>
+              <TableHead>URL</TableHead>
+              <TableHead className="text-right">Acoes</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {STUDIO_PUBLICATION_TARGETS.map((target) => (
+              <TableRow key={target.id}>
+                <TableCell>{target.targetType}</TableCell>
+                <TableCell>
+                  <StudioStatusBadge value={target.status} />
+                </TableCell>
+                <TableCell>
+                  {target.scheduledAt
+                    ? new Date(target.scheduledAt).toLocaleString('pt-BR')
+                    : '-'}
+                </TableCell>
+                <TableCell>{target.publishedUrl || '-'}</TableCell>
+                <TableCell className="text-right">
+                  <Button size="sm">Publicar</Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </Page>
+  );
+}

package/hedhog/frontend/app/scenes/form/page.tsx.ejs

@@ -0,0 +1,110 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const schema = z.object({
+  name: z.string().min(2),
+  description: z.string().optional(),
+  scriptExcerpt: z.string().optional(),
+  sequenceOrder: z.string().min(1),
+  estimatedDuration: z.string().optional(),
+  status: z.string().min(1),
+});
+
+export default function StudioSceneFormPage() {
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: '',
+      description: '',
+      scriptExcerpt: '',
+      sequenceOrder: '1',
+      estimatedDuration: '',
+      status: 'pending',
+    },
+  });
+
+  return (
+    <Page>
+      <PageHeader
+        title="Formulario de Cena"
+        description="Cadastro estatico de cena"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Studio', href: '/studio' },
+          { label: 'Cena' },
+        ]}
+      />
+      <Form {...form}>
+        <form
+          className="grid gap-4"
+          onSubmit={form.handleSubmit(() => undefined)}
+        >
+          {[
+            ['name', 'Nome', 'Cena de abertura'],
+            ['sequenceOrder', 'Ordem', '1'],
+            ['estimatedDuration', 'Duracao estimada (s)', '120'],
+            ['status', 'Status', 'pending | recorded'],
+          ].map(([name, label, placeholder]) => (
+            <FormField
+              key={name}
+              control={form.control}
+              name={name as keyof z.infer<typeof schema>}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{label}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={placeholder} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ))}
+
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Descricao</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Descricao da cena" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="scriptExcerpt"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Trecho do script</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Fal falada ou orientacao" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Salvar Cena
+          </Button>
+        </form>
+      </Form>
+    </Page>
+  );
+}

package/hedhog/frontend/app/sessions/[id]/page.tsx.ejs

@@ -0,0 +1,118 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import type { PageHeaderProps } from '@/components/entity-list/page-header';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useParams } from 'next/navigation';
+import { StudioStatusBadge } from '../../_components/studio-status-badge';
+import { STUDIO_SESSIONS } from '../../_lib/mocks';
+
+const participantStatus = [
+  { name: 'Ana Lima', status: 'recording', device: 'desktop_app ok' },
+  { name: 'Bruno Costa', status: 'ready', device: 'desktop_app ok' },
+  { name: 'Diego Nunes', status: 'recording', device: 'desktop_app warning' },
+  { name: 'Eva Souza', status: 'connected', device: 'browser ok' },
+];
+
+export default function StudioSessionDetailPage() {
+  const params = useParams<{ id: string }>();
+  const session = STUDIO_SESSIONS.find((item) => item.id === Number(params.id));
+
+  if (!session) {
+    return null;
+  }
+
+  const currentSession = session!;
+
+  const breadcrumbs: PageHeaderProps['breadcrumbs'] = [
+    { label: 'Home', href: '/' },
+    { label: 'Studio', href: '/studio' },
+    { label: 'Sessoes', href: '/studio/sessions' },
+    { label: `Sessao #${currentSession.id}` },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        title={currentSession.title}
+        description="Monitoramento de sessao ativa"
+        breadcrumbs={breadcrumbs as { label: string; href?: string }[]}
+      />
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Estado da sessao</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div>
+              Status: <StudioStatusBadge value={currentSession.status} />
+            </div>
+            <div>Room: {currentSession.roomKey}</div>
+            <div>Cena atual: Demonstracao em tela</div>
+            <div>Host: {currentSession.host}</div>
+          </CardContent>
+        </Card>
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-base">Comandos</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
+            <Button variant="outline">Armar</Button>
+            <Button>Iniciar gravacao</Button>
+            <Button variant="secondary">Parar</Button>
+            <Button variant="destructive">Cancelar take</Button>
+            <Button variant="outline">Proximo take</Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              Participantes conectados
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            {participantStatus.map((participant) => (
+              <div
+                key={participant.name}
+                className="flex items-center justify-between rounded-md border p-2"
+              >
+                <div>
+                  <div className="font-medium">{participant.name}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {participant.device}
+                  </div>
+                </div>
+                <StudioStatusBadge value={participant.status} />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Timeline de eventos</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div className="rounded-md border p-2">18:00 - Sessao iniciou</div>
+            <div className="rounded-md border p-2">
+              18:02 - Command arm emitido
+            </div>
+            <div className="rounded-md border p-2">
+              18:03 - Command start emitido
+            </div>
+            <div className="rounded-md border p-2">
+              18:08 - Incident delayed_stop detectado
+            </div>
+            <div className="rounded-md border p-2">
+              18:10 - Command stop emitido
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}

package/hedhog/frontend/app/sessions/form/page.tsx.ejs

@@ -0,0 +1,103 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const schema = z.object({
+  title: z.string().min(3),
+  description: z.string().optional(),
+  sessionType: z.string().min(1),
+  roomKey: z.string().min(1),
+  host: z.string().min(1),
+  status: z.string().min(1),
+  syncMode: z.string().min(1),
+});
+
+export default function StudioSessionFormPage() {
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: '',
+      description: '',
+      sessionType: 'remote_collaborative',
+      roomKey: '',
+      host: '',
+      status: 'idle',
+      syncMode: 'server_authoritative',
+    },
+  });
+
+  return (
+    <Page>
+      <PageHeader
+        title="Formulario de Sessao"
+        description="Cadastro estatico de sessao de gravacao"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Studio', href: '/studio' },
+          { label: 'Sessao' },
+        ]}
+      />
+
+      <Form {...form}>
+        <form
+          className="grid gap-4"
+          onSubmit={form.handleSubmit(() => undefined)}
+        >
+          {[
+            ['title', 'Titulo', 'Sessao principal do projeto X'],
+            ['sessionType', 'Tipo', 'local | remote_collaborative | hybrid'],
+            ['roomKey', 'Room key', 'studio-room-abc'],
+            ['host', 'Host', 'Usuario host'],
+            ['status', 'Status', 'idle | ready | recording'],
+            ['syncMode', 'Modo de sincronizacao', 'server_authoritative'],
+          ].map(([name, label, placeholder]) => (
+            <FormField
+              key={name}
+              control={form.control}
+              name={name as keyof z.infer<typeof schema>}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{label}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={placeholder} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ))}
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Descricao</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Contexto da sessao" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Salvar Sessao
+          </Button>
+        </form>
+      </Form>
+    </Page>
+  );
+}