@hed-hog/studio 0.0.285

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function StudioEditingPage() {
+  return (
+    <Page>
+      <PageHeader
+        title="Edicao"
+        description="Pipeline e execucao de etapas de edicao"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Studio', href: '/studio' },
+          { label: 'Edicao' },
+        ]}
+      />
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Pipeline atual</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div>Preparation • completed</div>
+            <div>Recording • completed</div>
+            <div>Rough cut • in_progress</div>
+            <div>Cleanup • pending</div>
+            <div>Finalization • pending</div>
+            <div>Publication • pending</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Composicao base</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div>Tipo: multi_participant</div>
+            <div>Fonte primaria: microphone_audio</div>
+            <div>Status: in_editing</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Pacotes</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div>raw_take_bundle • available</div>
+            <div>editing_bundle • generating</div>
+            <div>proxy_bundle • pending</div>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { STUDIO_INCIDENTS } from '../_lib/mocks';
+import { StudioStatusBadge } from '../_components/studio-status-badge';
+
+export default function StudioIncidentsPage() {
+  return (
+    <Page>
+      <PageHeader
+        title="Incidentes"
+        description="Falhas tecnicas e acompanhamento de resolucao"
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: 'Studio', href: '/studio' },
+          { label: 'Incidentes' },
+        ]}
+      />
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Tipo</TableHead>
+              <TableHead>Severidade</TableHead>
+              <TableHead>Alvo</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Detectado em</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {STUDIO_INCIDENTS.map((incident) => (
+              <TableRow key={incident.id}>
+                <TableCell>{incident.type}</TableCell>
+                <TableCell>
+                  <StudioStatusBadge value={incident.severity} />
+                </TableCell>
+                <TableCell>{incident.target}</TableCell>
+                <TableCell>
+                  <StudioStatusBadge value={incident.status} />
+                </TableCell>
+                <TableCell>
+                  {new Date(incident.detectedAt).toLocaleString('pt-BR')}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </Page>
+  );
+}

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

@@ -0,0 +1,207 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  StatsCards,
+  type StatCardConfig,
+} 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  AlertTriangle,
+  Clapperboard,
+  Clock3,
+  Film,
+  UploadCloud,
+  Video,
+} from 'lucide-react';
+import Link from 'next/link';
+import { StudioStatusBadge } from './_components/studio-status-badge';
+import {
+  STUDIO_INCIDENTS,
+  STUDIO_PROJECTS,
+  STUDIO_SESSIONS,
+  STUDIO_TAKES,
+} from './_lib/mocks';
+
+export default function StudioDashboardPage() {
+  const breadcrumbs: PageHeaderProps['breadcrumbs'] = [
+    { label: 'Home', href: '/' },
+    { label: 'Studio' },
+  ];
+
+  const stats: StatCardConfig[] = [
+    {
+      title: 'Projetos totais',
+      value: STUDIO_PROJECTS.length,
+      icon: <Clapperboard className="size-5" />,
+      iconBgColor: 'bg-cyan-50',
+      iconColor: 'text-cyan-700',
+    },
+    {
+      title: 'Em gravacao',
+      value: STUDIO_PROJECTS.filter((item) => item.status === 'in_recording')
+        .length,
+      icon: <Video className="size-5" />,
+      iconBgColor: 'bg-orange-50',
+      iconColor: 'text-orange-700',
+    },
+    {
+      title: 'Em edicao',
+      value: STUDIO_PROJECTS.filter((item) => item.status === 'in_editing')
+        .length,
+      icon: <Film className="size-5" />,
+      iconBgColor: 'bg-violet-50',
+      iconColor: 'text-violet-700',
+    },
+    {
+      title: 'Takes pendentes',
+      value: STUDIO_TAKES.filter((item) => item.status === 'partial').length,
+      icon: <UploadCloud className="size-5" />,
+      iconBgColor: 'bg-amber-50',
+      iconColor: 'text-amber-700',
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        title="Studio"
+        description="Visao operacional de producao audiovisual"
+        breadcrumbs={breadcrumbs as { label: string; href?: string }[]}
+        actions={
+          <Button asChild size="sm">
+            <Link href="/studio/projects/form">Novo Projeto</Link>
+          </Button>
+        }
+      />
+
+      <StatsCards stats={stats} />
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Projetos recentes</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Titulo</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Responsavel</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {STUDIO_PROJECTS.map((project) => (
+                  <TableRow key={project.id}>
+                    <TableCell>
+                      <Link
+                        href={`/studio/projects/${project.id}`}
+                        className="hover:underline"
+                      >
+                        {project.title}
+                      </Link>
+                    </TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={project.status} />
+                    </TableCell>
+                    <TableCell>{project.owner}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Sessoes em andamento</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {STUDIO_SESSIONS.map((session) => (
+              <div
+                key={session.id}
+                className="flex items-center justify-between rounded-md border p-3"
+              >
+                <div>
+                  <div className="font-medium">{session.title}</div>
+                  <div className="text-muted-foreground text-xs">
+                    Room {session.roomKey}
+                  </div>
+                </div>
+                <StudioStatusBadge value={session.status} />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-base">Incidentes recentes</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {STUDIO_INCIDENTS.map((incident) => (
+              <div
+                key={incident.id}
+                className="flex items-center justify-between rounded-md border p-3"
+              >
+                <div className="flex items-start gap-3">
+                  <AlertTriangle className="mt-0.5 size-4 text-red-600" />
+                  <div>
+                    <div className="font-medium">{incident.type}</div>
+                    <div className="text-muted-foreground text-xs">
+                      {incident.target}
+                    </div>
+                  </div>
+                </div>
+                <StudioStatusBadge value={incident.severity} />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Atalhos</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-2 text-sm">
+            <Link
+              href="/studio/projects"
+              className="rounded-md border px-3 py-2 hover:bg-muted"
+            >
+              Ir para projetos
+            </Link>
+            <Link
+              href="/studio/sessions"
+              className="rounded-md border px-3 py-2 hover:bg-muted"
+            >
+              Monitorar sessoes
+            </Link>
+            <Link
+              href="/studio/storage-profiles"
+              className="rounded-md border px-3 py-2 hover:bg-muted"
+            >
+              Gerenciar storage
+            </Link>
+            <div className="text-muted-foreground flex items-center gap-2 pt-2 text-xs">
+              <Clock3 className="size-3" /> Ultima sincronizacao agora
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}

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

@@ -0,0 +1,323 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import type { PageHeaderProps } from '@/components/entity-list/page-header';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useParams } from 'next/navigation';
+import { StudioStatusBadge } from '../../_components/studio-status-badge';
+import {
+  STUDIO_ASSETS,
+  STUDIO_INCIDENTS,
+  STUDIO_PROJECTS,
+  STUDIO_PUBLICATION_TARGETS,
+  STUDIO_SCENES,
+  STUDIO_SESSIONS,
+  STUDIO_TAKES,
+} from '../../_lib/mocks';
+
+export default function StudioProjectDetailPage() {
+  const params = useParams<{ id: string }>();
+  const projectId = Number(params.id);
+  const project = STUDIO_PROJECTS.find((item) => item.id === projectId);
+
+  if (!project) {
+    return null;
+  }
+
+  const currentProject = project!;
+
+  const breadcrumbs: PageHeaderProps['breadcrumbs'] = [
+    { label: 'Home', href: '/' },
+    { label: 'Studio', href: '/studio' },
+    { label: 'Projetos', href: '/studio/projects' },
+    { label: `Projeto #${currentProject.id}` },
+  ];
+
+  const scenes = STUDIO_SCENES.filter(
+    (item) => item.projectId === currentProject.id
+  );
+  const sessions = STUDIO_SESSIONS.filter(
+    (item) => item.projectId === currentProject.id
+  );
+  const takes = STUDIO_TAKES.filter(
+    (item) => item.projectId === currentProject.id
+  );
+  const incidents = STUDIO_INCIDENTS.filter(
+    (item) => item.projectId === currentProject.id
+  );
+  const publicationTargets = STUDIO_PUBLICATION_TARGETS.filter(
+    (item) => item.projectId === currentProject.id
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title={currentProject.title}
+        description="Painel central do projeto de producao"
+        breadcrumbs={breadcrumbs as { label: string; href?: string }[]}
+      />
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList className="grid w-full grid-cols-4 lg:grid-cols-8">
+          <TabsTrigger value="overview">Visao geral</TabsTrigger>
+          <TabsTrigger value="scenes">Cenas</TabsTrigger>
+          <TabsTrigger value="sessions">Sessoes</TabsTrigger>
+          <TabsTrigger value="takes">Takes</TabsTrigger>
+          <TabsTrigger value="assets">Arquivos</TabsTrigger>
+          <TabsTrigger value="editing">Edicao</TabsTrigger>
+          <TabsTrigger value="publication">Publicacao</TabsTrigger>
+          <TabsTrigger value="incidents">Incidentes</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="grid gap-4 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Resumo</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div>Tipo: {currentProject.projectType}</div>
+              <div>
+                Status: <StudioStatusBadge value={currentProject.status} />
+              </div>
+              <div>
+                Etapa: <StudioStatusBadge value={currentProject.currentStage} />
+              </div>
+              <div>Binding: {currentProject.binding}</div>
+              <div>Responsavel: {currentProject.owner}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Metricas</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div>Cenas: {scenes.length}</div>
+              <div>Sessoes: {sessions.length}</div>
+              <div>Takes: {takes.length}</div>
+              <div>
+                Assets:{' '}
+                {
+                  STUDIO_ASSETS.filter((item) =>
+                    takes.some((take) => take.id === item.takeId)
+                  ).length
+                }
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="scenes">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Cena</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Duracao Est.</TableHead>
+                  <TableHead>Takes</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {scenes.map((scene) => (
+                  <TableRow key={scene.id}>
+                    <TableCell>{scene.name}</TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={scene.status} />
+                    </TableCell>
+                    <TableCell>{scene.estimatedSeconds}s</TableCell>
+                    <TableCell>{scene.takes}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="sessions">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Titulo</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Tipo</TableHead>
+                  <TableHead>Host</TableHead>
+                  <TableHead>Participantes</TableHead>
+                  <TableHead>Room</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sessions.map((session) => (
+                  <TableRow key={session.id}>
+                    <TableCell>{session.title}</TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={session.status} />
+                    </TableCell>
+                    <TableCell>{session.sessionType}</TableCell>
+                    <TableCell>{session.host}</TableCell>
+                    <TableCell>{session.participants}</TableCell>
+                    <TableCell>{session.roomKey}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="takes">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Take</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Participantes</TableHead>
+                  <TableHead>Upload</TableHead>
+                  <TableHead>Integridade</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {takes.map((take) => (
+                  <TableRow key={take.id}>
+                    <TableCell>#{take.id}</TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={take.status} />
+                    </TableCell>
+                    <TableCell>{take.participants}</TableCell>
+                    <TableCell>
+                      {take.uploadedFiles}/{take.expectedFiles}
+                    </TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={take.integrity} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="assets">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Participante</TableHead>
+                  <TableHead>Take</TableHead>
+                  <TableHead>Tipo</TableHead>
+                  <TableHead>Disponibilidade</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {STUDIO_ASSETS.filter((item) =>
+                  takes.some((take) => take.id === item.takeId)
+                ).map((asset) => (
+                  <TableRow key={asset.id}>
+                    <TableCell>{asset.participant}</TableCell>
+                    <TableCell>#{asset.takeId}</TableCell>
+                    <TableCell>{asset.sourceType}</TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={asset.availability} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="editing" className="grid gap-4 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Pipeline</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div>Preparation: completed</div>
+              <div>Recording: in_progress</div>
+              <div>Rough cut: pending</div>
+              <div>Finalization: pending</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Pacotes para editor</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div>Raw take bundle: available</div>
+              <div>Proxy bundle: generating</div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="publication">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Destino</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Agendamento</TableHead>
+                  <TableHead>URL</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {publicationTargets.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>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="incidents">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Tipo</TableHead>
+                  <TableHead>Severidade</TableHead>
+                  <TableHead>Alvo</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {incidents.map((incident) => (
+                  <TableRow key={incident.id}>
+                    <TableCell>{incident.type}</TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={incident.severity} />
+                    </TableCell>
+                    <TableCell>{incident.target}</TableCell>
+                    <TableCell>
+                      <StudioStatusBadge value={incident.status} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}