@hed-hog/lms 0.0.365 → 0.0.370

package/hedhog/frontend/app/courses/[id]/structure/_components/course-overview-tab.tsx.ejs

@@ -414,8 +414,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
       key: 'storage',
       label: 'Armazenamento',
       value: formatBytes(data.storage.totalBytes),
-      toneClassName:
-        'border-cyan-500/15 bg-cyan-500/10 text-cyan-700 dark:text-cyan-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
     {
       key: 'coverage',
@@ -424,22 +423,19 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
         totalLessons > 0
           ? `${Math.round((videoCount / totalLessons) * 100)}% das aulas`
           : '0% das aulas',
-      toneClassName:
-        'border-teal-500/15 bg-teal-500/10 text-teal-700 dark:text-teal-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
     {
       key: 'images',
       label: 'Imagens extraídas',
       value: `${data.media.extractedImageCount}`,
-      toneClassName:
-        'border-amber-500/15 bg-amber-500/10 text-amber-700 dark:text-amber-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
     {
       key: 'resources',
       label: 'Arquivos de apoio',
       value: `${data.resources.fileCount}`,
-      toneClassName:
-        'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300',
+      toneClassName: 'border-border/60 bg-muted/30 text-muted-foreground',
     },
   ];
 
@@ -569,7 +565,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
         <div className="rounded-2xl border border-border/70 bg-linear-to-br from-background via-background to-muted/30 px-2.5 py-2 shadow-[0_14px_34px_-28px_rgba(15,23,42,0.45)] backdrop-blur-sm sm:px-3 sm:py-2.5">
           <div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/50 pb-2">
             <div className="min-w-0">
-              <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-cyan-700/80 dark:text-cyan-300/80">
+              <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                 Course overview
               </div>
               <div className="mt-1 text-sm font-semibold text-foreground">
@@ -609,14 +605,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
         </div>
 
         <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-          <CardHeader className="border-b border-border/70 bg-linear-to-r from-cyan-500/12 via-sky-500/6 to-transparent pt-2.5 pb-1.5!">
+          <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
             <div className="flex flex-wrap items-start justify-between gap-3">
               <div className="flex min-w-0 items-start gap-3">
                 <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-cyan-500/10 text-cyan-600 ring-1 ring-inset ring-cyan-500/15 dark:text-cyan-400">
                   <HardDrive className="size-4" />
                 </div>
                 <div className="min-w-0">
-                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-cyan-600/80 dark:text-cyan-400/80">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Storage footprint
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -628,15 +624,15 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   </CardDescription>
                 </div>
               </div>
-              <div className="rounded-full border border-cyan-500/15 bg-cyan-500/10 px-2.5 py-1 text-[10px] font-semibold text-cyan-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-cyan-500/15 hover:shadow-md dark:text-cyan-300">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {formatBytes(data.storage.totalBytes)}
               </div>
             </div>
           </CardHeader>
           <CardContent className="grid gap-3 px-2.5 py-2.5 sm:px-3 xl:grid-cols-[minmax(0,240px)_minmax(0,1fr)]">
             <div className="grid gap-2">
-              <div className="rounded-2xl border border-cyan-500/15 bg-linear-to-br from-cyan-500/12 via-sky-500/6 to-transparent px-3 py-3 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-                <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-cyan-700/80 dark:text-cyan-300/80">
+              <div className="rounded-2xl border border-border/60 bg-muted/20 px-3 py-3 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                   Total armazenado
                 </div>
                 <div className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
@@ -675,7 +671,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   return (
                     <div
                       key={category.key}
-                      className="overflow-hidden rounded-2xl border border-border/60 bg-card/90 transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="overflow-hidden rounded-2xl border border-border/60 bg-card/90 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className={`h-1.5 w-full bg-linear-to-r ${category.accentClassName}`}
@@ -794,14 +790,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
 
         <div className="grid gap-3 xl:grid-cols-2">
           <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-            <CardHeader className="border-b border-border/70 bg-linear-to-r from-sky-500/12 via-blue-500/6 to-transparent pt-2.5 pb-1.5!">
+            <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
               <div className="flex flex-wrap items-start justify-between gap-3">
                 <div className="flex min-w-0 items-start gap-3">
                   <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-sky-500/10 text-sky-600 ring-1 ring-inset ring-sky-500/15 dark:text-sky-400">
                     <Layers className="size-4" />
                   </div>
                   <div className="min-w-0">
-                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-sky-600/80 dark:text-sky-400/80">
+                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                       Lesson mix
                     </div>
                     <CardTitle className="mt-1 text-sm font-semibold">
@@ -812,7 +808,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                     </CardDescription>
                   </div>
                 </div>
-                <div className="rounded-full border border-sky-500/15 bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-sky-500/15 hover:shadow-md dark:text-sky-300">
+                <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                   {totalLessons} aulas
                 </div>
               </div>
@@ -886,7 +882,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   return (
                     <div
                       key={item.type}
-                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-sky-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className="flex size-8 shrink-0 items-center justify-center rounded-lg"
@@ -926,16 +922,131 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
             </CardContent>
           </Card>
 
+          {/* Video pipeline */}
+          {videoCount > 0 && (
+            <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
+              <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div className="flex min-w-0 items-start gap-3">
+                    <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-600 ring-1 ring-inset ring-violet-500/15 dark:text-violet-400">
+                      <Film className="size-4" />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                        Video pipeline
+                      </div>
+                      <CardTitle className="mt-1 text-sm font-semibold">
+                        {t('videoPipeline.title')}
+                      </CardTitle>
+                      <CardDescription className="mt-0.5">
+                        {t('videoPipeline.description')}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
+                    {videoCount} vídeos
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-3 px-2.5 py-2.5 sm:px-3">
+                {(
+                  [
+                    {
+                      key: 'total',
+                      label: t('videoPipeline.total'),
+                      value: videoCount,
+                      total: videoCount,
+                      color: '#8b5cf6',
+                      bgColor: 'bg-violet-500/10',
+                      textColor: 'text-violet-600 dark:text-violet-400',
+                      icon: Clapperboard,
+                    },
+                    {
+                      key: 'withVideo',
+                      label: t('videoPipeline.withVideo'),
+                      value: data.videos.withVideo,
+                      total: videoCount,
+                      color: '#a855f7',
+                      bgColor: 'bg-purple-500/10',
+                      textColor: 'text-purple-600 dark:text-purple-400',
+                      icon: Film,
+                    },
+                    {
+                      key: 'withProcessedVideo',
+                      label: t('videoPipeline.withProcessedVideo'),
+                      value: data.videos.withProcessedVideo,
+                      total: videoCount,
+                      color: '#d946ef',
+                      bgColor: 'bg-fuchsia-500/10',
+                      textColor: 'text-fuchsia-600 dark:text-fuchsia-400',
+                      icon: Sparkles,
+                    },
+                  ] as const
+                ).map((stat) => {
+                  const pct =
+                    stat.total > 0
+                      ? Math.round((stat.value / stat.total) * 100)
+                      : stat.key === 'total'
+                        ? 100
+                        : 0;
+                  const Icon = stat.icon;
+                  return (
+                    <div
+                      key={stat.key}
+                      className="flex flex-col gap-2 rounded-xl border border-transparent px-2 py-1 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/70 hover:shadow-sm"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div
+                          className={`flex size-8 shrink-0 items-center justify-center rounded-lg ${stat.bgColor}`}
+                        >
+                          <Icon className={`size-4 ${stat.textColor}`} />
+                        </div>
+                        <div className="flex flex-1 items-center justify-between">
+                          <span className="text-sm font-medium text-foreground">
+                            {stat.label}
+                          </span>
+                          <div className="flex items-center gap-2">
+                            <span className="font-mono text-xs text-muted-foreground">
+                              {stat.value}/{stat.total}
+                            </span>
+                            <span
+                              className="rounded-full px-2 py-0.5 text-[10px] font-semibold transition-all duration-200 hover:shadow-sm"
+                              style={{
+                                backgroundColor: `${stat.color}20`,
+                                color: stat.color,
+                              }}
+                            >
+                              {pct}%
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="ml-11 h-2 w-full overflow-hidden rounded-full bg-muted">
+                        <div
+                          className="h-full rounded-full transition-all duration-700 ease-out"
+                          style={{
+                            width: `${pct}%`,
+                            backgroundColor: stat.color,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          )}
+
           {/* Video coverage */}
           <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-            <CardHeader className="border-b border-border/70 bg-linear-to-r from-teal-500/12 via-cyan-500/6 to-transparent pt-2.5 pb-1.5!">
+            <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
               <div className="flex flex-wrap items-start justify-between gap-3">
                 <div className="flex min-w-0 items-start gap-3">
                   <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-teal-500/10 text-teal-600 ring-1 ring-inset ring-teal-500/15 dark:text-teal-400">
                     <Clapperboard className="size-4" />
                   </div>
                   <div className="min-w-0">
-                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-teal-600/80 dark:text-teal-400/80">
+                    <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                       Video coverage
                     </div>
                     <CardTitle className="mt-1 text-sm font-semibold">
@@ -946,7 +1057,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                     </CardDescription>
                   </div>
                 </div>
-                <div className="rounded-full border border-teal-500/15 bg-teal-500/10 px-2.5 py-1 text-[10px] font-semibold text-teal-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-teal-500/15 hover:shadow-md dark:text-teal-300">
+                <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                   {videoCount} vídeos
                 </div>
               </div>
@@ -1051,14 +1162,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
           <div className="grid gap-3 xl:grid-cols-2">
             {xpData.areas.length > 0 && (
               <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-                <CardHeader className="border-b border-border/70 bg-linear-to-r from-teal-500/10 via-cyan-500/5 to-transparent pt-2.5 pb-1.5!">
+                <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
                   <div className="flex flex-wrap items-start justify-between gap-3">
                     <div className="flex min-w-0 items-start gap-3">
                       <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-teal-500/10 text-teal-600 ring-1 ring-inset ring-teal-500/15 dark:text-teal-400">
                         <Sparkles className="size-4" />
                       </div>
                       <div className="min-w-0">
-                        <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-teal-600/80 dark:text-teal-400/80">
+                        <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                           Macro areas
                         </div>
                         <CardTitle className="mt-1 text-sm font-semibold">
@@ -1069,7 +1180,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                         </CardDescription>
                       </div>
                     </div>
-                    <div className="rounded-full border border-teal-500/15 bg-teal-500/10 px-2.5 py-1 text-[10px] font-semibold text-teal-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-teal-500/15 hover:shadow-md dark:text-teal-300">
+                    <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                       {xpData.areas.length} áreas
                     </div>
                   </div>
@@ -1078,7 +1189,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   {xpData.areas.map((area, index) => (
                     <div
                       key={area.xpAreaId}
-                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-teal-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
@@ -1109,14 +1220,14 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
 
             {xpData.skills.length > 0 && (
               <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-                <CardHeader className="border-b border-border/70 bg-linear-to-r from-orange-500/10 via-amber-500/5 to-transparent pt-2.5 pb-1.5!">
+                <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
                   <div className="flex flex-wrap items-start justify-between gap-3">
                     <div className="flex min-w-0 items-start gap-3">
                       <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-orange-500/10 text-orange-600 ring-1 ring-inset ring-orange-500/15 dark:text-orange-400">
                         <Target className="size-4" />
                       </div>
                       <div className="min-w-0">
-                        <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-orange-600/80 dark:text-orange-400/80">
+                        <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                           Skills
                         </div>
                         <CardTitle className="mt-1 text-sm font-semibold">
@@ -1127,7 +1238,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                         </CardDescription>
                       </div>
                     </div>
-                    <div className="rounded-full border border-orange-500/15 bg-orange-500/10 px-2.5 py-1 text-[10px] font-semibold text-orange-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-orange-500/15 hover:shadow-md dark:text-orange-300">
+                    <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                       {xpData.skills.length} skills
                     </div>
                   </div>
@@ -1136,7 +1247,7 @@ export function CourseOverviewTab({ courseId, locale }: Props) {
                   {xpData.skills.map((skill, index) => (
                     <div
                       key={skill.xpSkillId}
-                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-orange-500/20 hover:bg-background/95 hover:shadow-md"
+                      className="flex items-center gap-3 rounded-xl border border-border/60 bg-muted/20 px-3 py-2.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
                     >
                       <div
                         className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"

package/hedhog/frontend/app/courses/[id]/structure/_components/course-xp-overview-tab.tsx.ejs

@@ -262,7 +262,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
       <div className="rounded-2xl border border-border/70 bg-linear-to-br from-background via-background to-muted/30 px-2.5 py-2 shadow-[0_14px_34px_-28px_rgba(15,23,42,0.45)] backdrop-blur-sm sm:px-3 sm:py-2.5">
         <div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/50 pb-2">
           <div className="min-w-0">
-            <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-cyan-700/80 dark:text-cyan-300/80">
+            <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
               Course XP overview
             </div>
             <div className="mt-1 text-sm font-semibold text-foreground">
@@ -301,14 +301,14 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
 
       <div className="grid gap-3 xl:grid-cols-[minmax(0,1.06fr)_minmax(0,0.94fr)]">
         <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-          <CardHeader className="border-b border-border/70 bg-linear-to-r from-teal-500/12 via-cyan-500/6 to-transparent pt-2.5 pb-1.5!">
+          <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
             <div className="flex flex-wrap items-start justify-between gap-3">
               <div className="flex min-w-0 items-start gap-3">
                 <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-teal-500/10 text-teal-600 ring-1 ring-inset ring-teal-500/15 dark:text-teal-400">
                   <ChartPie className="size-4" />
                 </div>
                 <div className="min-w-0">
-                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-teal-600/80 dark:text-teal-400/80">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Macro areas
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -319,7 +319,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
                   </CardDescription>
                 </div>
               </div>
-              <div className="rounded-full border border-teal-500/15 bg-teal-500/10 px-2.5 py-1 text-[10px] font-semibold text-teal-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-teal-500/15 hover:shadow-md dark:text-teal-300">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {data.areas.length} áreas
               </div>
             </div>
@@ -388,7 +388,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
               {areaData.map((item, index) => (
                 <div
                   key={item.xpAreaId}
-                  className="rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-sky-500/5 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-sky-500/20 hover:to-sky-500/10 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+                  className="rounded-2xl border border-border/60 bg-card/90 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
                 >
                   <div className="flex items-center gap-2">
                     <span
@@ -423,14 +423,14 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
         </Card>
 
         <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-          <CardHeader className="border-b border-border/70 bg-linear-to-r from-orange-500/12 via-amber-500/6 to-transparent pt-2.5 pb-1.5!">
+          <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
             <div className="flex flex-wrap items-start justify-between gap-3">
               <div className="flex min-w-0 items-start gap-3">
                 <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-orange-500/10 text-orange-600 ring-1 ring-inset ring-orange-500/15 dark:text-orange-400">
                   <BarChart3 className="size-4" />
                 </div>
                 <div className="min-w-0">
-                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-orange-600/80 dark:text-orange-400/80">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Skill density
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -441,7 +441,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
                   </CardDescription>
                 </div>
               </div>
-              <div className="rounded-full border border-orange-500/15 bg-orange-500/10 px-2.5 py-1 text-[10px] font-semibold text-orange-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-orange-500/15 hover:shadow-md dark:text-orange-300">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {data.skills.length} skills
               </div>
             </div>
@@ -518,7 +518,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
               {skillData.map((item, index) => (
                 <div
                   key={item.xpSkillId}
-                  className="rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-orange-500/5 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-orange-500/20 hover:to-orange-500/10 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+                  className="rounded-2xl border border-border/60 bg-card/90 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
                 >
                   <div className="flex flex-wrap items-center justify-between gap-2">
                     <div className="flex min-w-0 items-center gap-2">
@@ -556,14 +556,14 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
 
       {learningTypeData.length > 0 && (
         <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-          <CardHeader className="border-b border-border/70 bg-linear-to-r from-violet-500/10 via-fuchsia-500/5 to-transparent pt-2.5 pb-1.5!">
+          <CardHeader className="border-b border-border/70 pt-2.5 pb-1.5!">
             <div className="flex flex-wrap items-start justify-between gap-3">
               <div className="flex min-w-0 items-start gap-3">
                 <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-600 ring-1 ring-inset ring-violet-500/15 dark:text-violet-400">
                   <Sparkles className="size-4" />
                 </div>
                 <div className="min-w-0">
-                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-violet-600/80 dark:text-violet-400/80">
+                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
                     Learning mix
                   </div>
                   <CardTitle className="mt-1 text-sm font-semibold">
@@ -574,7 +574,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
                   </CardDescription>
                 </div>
               </div>
-              <div className="rounded-full border border-violet-500/15 bg-violet-500/10 px-2.5 py-1 text-[10px] font-semibold text-violet-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-violet-500/15 hover:shadow-md dark:text-violet-300">
+              <div className="rounded-full border border-border/60 bg-muted/30 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm">
                 {learningTypeData.length} tipos
               </div>
             </div>
@@ -583,7 +583,7 @@ export function CourseXpOverviewTab({ courseId, locale }: Props) {
             {learningTypeData.map((item, index) => (
               <div
                 key={item.xpLearningTypeId}
-                className="flex h-full flex-col justify-start gap-1.5 rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-violet-500/5 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/20 hover:to-violet-500/10 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
+                className="flex h-full flex-col justify-start gap-1.5 rounded-2xl border border-border/60 bg-card/90 px-3 py-2 shadow-[0_14px_28px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:shadow-[0_18px_34px_-22px_rgba(15,23,42,0.5)]"
               >
                 <div className="flex flex-wrap items-center gap-2">
                   <div className="flex min-w-0 flex-1 items-center gap-2">

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-course.tsx.ejs

@@ -1,19 +1,60 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { BookOpen, Globe, Hash, Tag } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { BookOpen, Globe, Hash, Loader2, Tag, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useDeleteCourseTranscriptionsMutation } from '../_data/use-transcription-segments';
 import { useStructureStore } from './store';
 
 export function DetailCourse() {
   const course = useStructureStore((s) => s.course);
   const sessions = useStructureStore((s) => s.sessions);
   const lessons = useStructureStore((s) => s.lessons);
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+  const courseId = useStructureStore((s) => s.courseId);
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteCourseTranscriptions, isPending: isDeletingTranscriptions } =
+    useDeleteCourseTranscriptionsMutation(courseId);
 
   const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
   const hours = Math.floor(totalMinutes / 60);
   const minutes = totalMinutes % 60;
 
+  const handleDeleteAllTranscriptions = () => {
+    showConfirm({
+      title: 'Excluir todas as transcrições e traduções',
+      description:
+        'Isso remove permanentemente todas as transcrições e traduções de todas as aulas deste curso. Esta ação não pode ser desfeita.',
+      confirmText: 'Excluir tudo',
+      destructive: true,
+      onConfirm: () => {
+        deleteCourseTranscriptions({
+          onSuccess: (result) => {
+            toast.success(
+              `Transcrições removidas (${result.deleted} segmento(s) excluído(s)).`,
+            );
+            queryClient.invalidateQueries({
+              queryKey: ['course-content-overview', courseId],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-locales'],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-segments'],
+            });
+          },
+          onError: (err) => {
+            toast.error(err.message || 'Erro ao excluir as transcrições.');
+          },
+        });
+      },
+    });
+  };
+
   return (
     <div className="flex flex-col overflow-y-auto h-full">
       {/* Header */}
@@ -78,6 +119,33 @@ export function DetailCourse() {
             </div>
           </>
         )}
+
+        <Separator />
+
+        {/* Zona de perigo */}
+        <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3">
+          <p className="text-xs font-semibold text-destructive mb-1">
+            Zona de perigo
+          </p>
+          <p className="text-xs text-muted-foreground mb-3">
+            Remove permanentemente todas as transcrições e traduções de todas as
+            aulas deste curso.
+          </p>
+          <Button
+            variant="destructive"
+            size="sm"
+            className="w-full"
+            disabled={isDeletingTranscriptions}
+            onClick={handleDeleteAllTranscriptions}
+          >
+            {isDeletingTranscriptions ? (
+              <Loader2 className="size-4 mr-2 animate-spin" />
+            ) : (
+              <Trash2 className="size-4 mr-2" />
+            )}
+            Excluir todas as transcrições e traduções
+          </Button>
+        </div>
       </div>
     </div>
   );