@hed-hog/lms 0.0.365 → 0.0.366

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-lesson-xp-tab.tsx.ejs

@@ -435,7 +435,7 @@ export function LessonXpTab({
             icon={<Cpu className="size-4 text-sky-600" />}
             total={xpMap.totalXp}
             items={areaDistribution}
-            toneClassName="bg-linear-to-r from-sky-500/10 via-sky-500/5 to-transparent"
+            toneClassName=""
           />
           <DistributionCard
             title="Skills"
@@ -443,7 +443,7 @@ export function LessonXpTab({
             icon={<Zap className="size-4 text-emerald-600" />}
             total={xpMap.totalXp}
             items={skillDistribution}
-            toneClassName="bg-linear-to-r from-emerald-500/10 via-emerald-500/5 to-transparent"
+            toneClassName=""
           />
           <TimelineCard
             segmentViews={segmentViews}
@@ -670,7 +670,7 @@ function TimelineCard({
 
   return (
     <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)] xl:col-span-2">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-slate-500/10 via-slate-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <div>
             <CardTitle className="text-sm font-semibold">
@@ -761,7 +761,7 @@ function LearningTypesCard({ items }: { items: DistributionItem[] }) {
 
   return (
     <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)] xl:col-span-2">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-violet-500/10 via-violet-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <CardTitle className="text-sm font-semibold">
             Tipos de aprendizado
@@ -775,7 +775,7 @@ function LearningTypesCard({ items }: { items: DistributionItem[] }) {
         {items.map((item) => (
           <div
             key={item.id}
-            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/20 hover:bg-background/95 hover:shadow-md"
+            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
           >
             <div className="flex flex-wrap items-center justify-between gap-2">
               <span className="min-w-0 flex-1 font-medium">{item.label}</span>
@@ -813,7 +813,7 @@ function SegmentsSection({
 }) {
   return (
     <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/60 bg-linear-to-r from-cyan-500/10 via-cyan-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <CardTitle className="text-sm font-semibold">
             Segmentos ({segments.length})
@@ -829,14 +829,14 @@ function SegmentsSection({
             <div
               key={segment.id}
               className={cn(
-                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-muted/25 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-500/15 hover:to-muted/35 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
+                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-card/90 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
                 !segment.shouldGrantXp && 'opacity-50'
               )}
             >
               <div className="flex flex-wrap items-start justify-between gap-2">
                 <div className="flex min-w-0 flex-col gap-1">
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <span className="rounded-full border border-cyan-500/15 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-cyan-700 transition-all duration-200 hover:bg-cyan-500/15 hover:shadow-sm dark:text-cyan-300">
+                    <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                       {segment.label}
                     </span>
                     <span className="rounded-full border border-border/60 bg-background/90 px-2 py-0.5 font-mono text-[10px] text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
@@ -856,7 +856,7 @@ function SegmentsSection({
                 </div>
 
                 <div className="flex flex-wrap items-center justify-end gap-1.5">
-                  <span className="rounded-full border border-amber-500/15 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-700 dark:text-amber-300">
+                  <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                     {segment.xpValue} XP
                   </span>
                   <DifficultyBadge difficulty={segment.difficulty} />
@@ -1031,14 +1031,7 @@ function MetricPill({
   value: string;
   tone?: 'default' | 'sky' | 'emerald' | 'violet';
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
-      : tone === 'emerald'
-        ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
-        : tone === 'violet'
-          ? 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300'
-          : 'border-border/60 bg-muted/40 text-foreground';
+  const toneClassName = 'border-border/60 bg-muted/40 text-foreground';
 
   return (
     <div
@@ -1069,12 +1062,7 @@ function SegmentBreakdownGroup({
     color: string;
   }>;
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/8'
-      : tone === 'emerald'
-        ? 'border-emerald-500/15 bg-emerald-500/8'
-        : 'border-violet-500/15 bg-violet-500/8';
+  const toneClassName = 'border-border/60 bg-muted/20';
 
   if (!items.length) {
     return null;

package/hedhog/frontend/app/courses/[id]/structure/_components/xp-premium-pills.tsx.ejs

@@ -11,14 +11,7 @@ export function XpHighlightPill({
   value: string;
   tone: 'sky' | 'amber' | 'emerald' | 'violet';
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
-      : tone === 'amber'
-        ? 'border-amber-500/15 bg-amber-500/10 text-amber-700 dark:text-amber-300'
-        : tone === 'emerald'
-          ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
-          : 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300';
+  const toneClassName = 'border-border/60 bg-muted/30 text-muted-foreground';
 
   return (
     <div

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-content-overview.ts.ejs

@@ -17,6 +17,8 @@ export type CourseContentOverview = {
     lessonCount: number;
     withTranscription: number;
     withXp: number;
+    withVideo: number;
+    withProcessedVideo: number;
   };
   media: {
     extractedImageCount: number;

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

@@ -318,7 +318,7 @@ const OFFERING_TYPE_COLOR: Record<string, string> = {
   hibrido: 'bg-teal-50 text-teal-700 border-teal-200',
 };
 
-const PAGE_SIZES = [6, 12, 24] as const;
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 // ── Seed Data ─────────────────────────────────────────────────────────────────
 
@@ -388,10 +388,44 @@ export default function CursosPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({
+        url: '/setting/group/general',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: PAGE_SIZES,
+    allowedValues: pageSizeOptions,
   });
 
   const form = useForm<CourseSheetFormValues>({
@@ -1091,7 +1125,7 @@ export default function CursosPage() {
                 ],
               },
             ]}
-            afterSearchButton={
+            actions={
               <ViewModeToggle
                 viewMode={viewMode}
                 onViewModeChange={setViewMode}
@@ -1292,12 +1326,9 @@ export default function CursosPage() {
         />
       ) : (
         <div className="relative">
-          {cardsRefreshing && (
-            <div className="absolute inset-0 z-10 rounded-2xl bg-background/55 backdrop-blur-[1px]" />
-          )}
           {viewMode === 'cards' ? (
             <motion.div
-              className={`grid gap-4 sm:grid-cols-2 lg:grid-cols-3 ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+              className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
               variants={stagger}
               initial="hidden"
               animate="show"
@@ -1464,7 +1495,7 @@ export default function CursosPage() {
             </motion.div>
           ) : (
             <div
-              className={`overflow-hidden rounded-xl border border-border/70 ${cardsRefreshing ? 'pointer-events-none' : ''}`}
+              className="overflow-hidden rounded-xl border border-border/70"
             >
               <Table>
                 <TableHeader>
@@ -1672,7 +1703,7 @@ export default function CursosPage() {
               setPageSize(nextPageSize);
               setCurrentPage(1);
             }}
-            pageSizeOptions={PAGE_SIZES}
+            pageSizeOptions={pageSizeOptions}
             selectedCount={selectedIds.size}
           />
         </div>

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

@@ -25,6 +25,7 @@ import { notFound, useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { AdministratorsTab } from '../_components/enterprise-administrators-tab';
 import { ClassesTab } from '../_components/enterprise-classes-tab';
+import { ClassesCalendarTab } from '../_components/enterprise-classes-calendar-tab';
 import { CoursesTab } from '../_components/enterprise-courses-tab';
 import { EnterpriseSheet } from '../_components/enterprise-sheet';
 import { StudentsTab } from '../_components/enterprise-students-tab';
@@ -265,6 +266,7 @@ export default function EnterpriseDetailPage() {
             <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
             <TabsTrigger value="crm">{t('tabs.crm')}</TabsTrigger>
             <TabsTrigger value="classes">{t('tabs.classes')}</TabsTrigger>
+            <TabsTrigger value="classesCalendar">{t('tabs.classesCalendar')}</TabsTrigger>
             <TabsTrigger value="courses">{t('tabs.courses')}</TabsTrigger>
             <TabsTrigger value="students">{t('tabs.students')}</TabsTrigger>
             <TabsTrigger value="administrators">
@@ -288,6 +290,10 @@ export default function EnterpriseDetailPage() {
             <ClassesTab enterpriseId={account.id} />
           </TabsContent>
 
+          <TabsContent value="classesCalendar" className="mt-4 px-1">
+            <ClassesCalendarTab enterpriseId={account.id} />
+          </TabsContent>
+
           <TabsContent value="courses" className="mt-4">
             <CoursesTab enterpriseId={account.id} />
           </TabsContent>

package/hedhog/frontend/app/enterprise/_components/enterprise-classes-calendar-tab.tsx.ejs

@@ -0,0 +1,264 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  addMonths,
+  addDays,
+  eachDayOfInterval,
+  format,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isToday,
+  parseISO,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+} from 'date-fns';
+import { ptBR } from 'date-fns/locale/pt-BR';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { EnterpriseClass } from './enterprise-types';
+
+const STATUS_COLORS: Record<string, string> = {
+  open: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+  ongoing:
+    'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
+  completed:
+    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  cancelled:
+    'bg-muted text-muted-foreground line-through',
+};
+
+const DAY_HEADERS_PT = ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'];
+const DAY_HEADERS_EN = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+function parseDate(value: string | null | undefined): Date | null {
+  if (!value) return null;
+  try {
+    const d = parseISO(String(value).slice(0, 10));
+    return isNaN(d.getTime()) ? null : d;
+  } catch {
+    return null;
+  }
+}
+
+function isClassActiveOnDay(
+  cls: EnterpriseClass,
+  day: Date
+): boolean {
+  const start = parseDate(cls.startDate);
+  const end = parseDate(cls.endDate);
+  if (!start) return false;
+  const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+  const startDay = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+  const endDay = end
+    ? new Date(end.getFullYear(), end.getMonth(), end.getDate())
+    : startDay;
+  return (
+    (isSameDay(dayStart, startDay) || isAfter(dayStart, startDay)) &&
+    (isSameDay(dayStart, endDay) || isBefore(dayStart, endDay))
+  );
+}
+
+export function ClassesCalendarTab({
+  enterpriseId,
+}: {
+  enterpriseId: number;
+}) {
+  const { request } = useApp();
+  const router = useRouter();
+  const locale = useLocale();
+  const t = useTranslations('lms.EnterpriseDetailPage');
+  const dateLocale = locale.startsWith('pt') ? ptBR : undefined;
+  const dayHeaders = locale.startsWith('pt') ? DAY_HEADERS_PT : DAY_HEADERS_EN;
+
+  const [currentDate, setCurrentDate] = useState(() => new Date());
+  const [selectedDay, setSelectedDay] = useState<Date | null>(null);
+
+  const { data, isLoading } = useQuery<{ data: EnterpriseClass[] }>({
+    queryKey: ['enterprise-classes-calendar', enterpriseId],
+    queryFn: async () =>
+      request<{ data: EnterpriseClass[] }>({
+        url: `/lms/enterprise/${enterpriseId}/classes?page=1&pageSize=500`,
+        method: 'GET',
+      }).then((r) => r.data),
+  });
+
+  const classes = useMemo(() => data?.data ?? [], [data]);
+
+  const monthStart = startOfMonth(currentDate);
+  const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const days = eachDayOfInterval({ start: gridStart, end: addDays(gridStart, 41) });
+
+  const getClassesForDay = (day: Date) =>
+    classes.filter((cls) => isClassActiveOnDay(cls, day));
+
+  const selectedDayClasses = selectedDay ? getClassesForDay(selectedDay) : [];
+
+  const monthLabel = format(
+    currentDate,
+    locale.startsWith('pt') ? "MMMM 'de' yyyy" : 'MMMM yyyy',
+    { locale: dateLocale }
+  );
+
+  return (
+    <div className="space-y-4 pb-6">
+      {/* Month navigation */}
+      <div className="flex items-center justify-between rounded-xl border bg-muted/20 px-3 py-2">
+        <button
+          type="button"
+          onClick={() => { setCurrentDate((d) => subMonths(d, 1)); setSelectedDay(null); }}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label="Mês anterior"
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <span className="text-sm font-semibold capitalize">{monthLabel}</span>
+        <button
+          type="button"
+          onClick={() => { setCurrentDate((d) => addMonths(d, 1)); setSelectedDay(null); }}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label="Próximo mês"
+        >
+          <ChevronRight className="size-4" />
+        </button>
+      </div>
+
+      {/* Day headers */}
+      <div className="grid grid-cols-7 text-center">
+        {dayHeaders.map((h) => (
+          <div key={h} className="pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            {h}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      {isLoading ? (
+        <div className="grid grid-cols-7 gap-px">
+          {Array.from({ length: 42 }).map((_, i) => (
+            <div key={i} className="h-16 animate-pulse rounded bg-muted/30" />
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-7 gap-px rounded-lg border bg-border/40 overflow-hidden">
+          {days.map((day) => {
+            const dayClasses = getClassesForDay(day);
+            const isCurrentMonth = isSameMonth(day, currentDate);
+            const isSelected = selectedDay ? isSameDay(day, selectedDay) : false;
+            const todayDay = isToday(day);
+
+            return (
+              <button
+                key={day.toISOString()}
+                type="button"
+                onClick={() => setSelectedDay(isSelected ? null : day)}
+                className={[
+                  'flex min-h-16 flex-col gap-0.5 bg-background p-1 text-left transition-colors hover:bg-muted/40',
+                  !isCurrentMonth && 'opacity-40',
+                  isSelected && 'ring-2 ring-inset ring-primary',
+                ].filter(Boolean).join(' ')}
+              >
+                <span
+                  className={[
+                    'flex size-5 items-center justify-center self-end rounded-full text-[11px] font-medium',
+                    todayDay
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-foreground',
+                  ].join(' ')}
+                >
+                  {format(day, 'd')}
+                </span>
+                <div className="flex min-h-0 flex-col gap-0.5 overflow-hidden">
+                  {dayClasses.slice(0, 3).map((cls) => (
+                    <span
+                      key={cls.id}
+                      className={[
+                        'truncate rounded px-1 text-[9px] font-medium leading-4',
+                        STATUS_COLORS[cls.status] ?? STATUS_COLORS.open,
+                      ].join(' ')}
+                    >
+                      {cls.courseTitle ?? cls.title ?? `#${cls.id}`}
+                    </span>
+                  ))}
+                  {dayClasses.length > 3 && (
+                    <span className="px-1 text-[9px] text-muted-foreground">
+                      +{dayClasses.length - 3}
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Selected day detail */}
+      {selectedDay && (
+        <div className="space-y-2 rounded-xl border bg-muted/20 p-3">
+          <p className="text-xs font-semibold text-muted-foreground">
+            {format(selectedDay, locale.startsWith('pt') ? "d 'de' MMMM" : 'MMMM d', { locale: dateLocale })}
+          </p>
+          {selectedDayClasses.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Nenhuma turma neste dia.</p>
+          ) : (
+            <div className="space-y-1.5">
+              {selectedDayClasses.map((cls) => (
+                <button
+                  key={cls.id}
+                  type="button"
+                  onClick={() => router.push(`/lms/classes/${cls.id}`)}
+                  className="flex w-full items-center gap-3 rounded-lg border bg-background px-3 py-2 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">
+                      {cls.courseTitle ?? cls.title ?? `Turma #${cls.id}`}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {[cls.code, cls.instructorName].filter(Boolean).join(' • ')}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 flex-col items-end gap-1">
+                    <Badge
+                      variant="outline"
+                      className={['text-[10px] px-1.5 py-0', STATUS_COLORS[cls.status]].join(' ')}
+                    >
+                      {cls.status}
+                    </Badge>
+                    {cls.capacity != null && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {cls.enrolledCount}/{cls.capacity}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-3">
+        {Object.entries({
+          open: 'Aberta',
+          ongoing: 'Em andamento',
+          completed: 'Concluída',
+          cancelled: 'Cancelada',
+        }).map(([status, label]) => (
+          <div key={status} className="flex items-center gap-1.5">
+            <span className={['rounded px-1.5 py-0.5 text-[10px] font-medium', STATUS_COLORS[status]].join(' ')}>
+              {label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}