analytica-frontend-lib/dist/TimeReport/index.d.ts

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import { type HTMLAttributes, type ReactNode } from 'react';
import { PROFILE_ROLES } from '../types/chat';
import type { StudentsHighlightPeriod } from '../hooks/useStudentsHighlight';
/**
 * API types - reusing existing enums/types from the project
 */
export { PROFILE_ROLES } from '../types/chat';
export type { StudentsHighlightPeriod as TimeReportPeriod } from '../hooks/useStudentsHighlight';
export interface TimeReportRequest {
    period: StudentsHighlightPeriod;
    profile?: PROFILE_ROLES;
    school_group_ids?: string[];
    school_ids?: string[];
    all_school_groups?: boolean;
}
export interface TimeMetric {
    hours: number;
    variation_percent: number | null;
}
export interface CountMetric {
    count: number;
    variation_percent: number | null;
}
export interface TimeReportData {
    total_platform_time: TimeMetric;
    activity_time: TimeMetric;
    exam_simulation_time?: TimeMetric;
    content_time?: TimeMetric;
    questionnaire_time?: TimeMetric;
    recommended_classes_time: TimeMetric;
    total_access_count?: CountMetric;
}
export interface TimeReportResponse {
    message: string;
    data: TimeReportData;
}
/**
 * Format decimal hours to "Xh Ymin" display string
 */
export declare const formatHoursToTime: (hours: number) => string;
/**
 * Get trend direction from variation percentage
 */
export declare const getTrendDirection: (variationPercent: number | null) => TimeCardTrend | undefined;
/**
 * Format variation percentage to display string (e.g., "+12.3%", "-5.2%")
 */
export declare const formatVariation: (variationPercent: number | null) => string | undefined;
/**
 * Trend direction for time card indicators
 */
export type TimeCardTrend = 'up' | 'down';
/**
 * Data for a single time card
 */
export interface TimeCardData {
    /** Unique identifier */
    id: string;
    /** Uppercase label (e.g., "TEMPO NA PLATAFORMA") */
    label: string;
    /** Formatted time value (e.g., "12h 20min") */
    value: string;
    /** Icon element for the card */
    icon: ReactNode;
    /** Trend percentage string (e.g., "+10%", "-5%") */
    trendValue?: string;
    /** Trend direction - determines color */
    trendDirection?: TimeCardTrend;
    /** Optional footer text shown below the value (e.g., "de 16.778 escolas") */
    footer?: ReactNode;
    /**
     * Plain gray line under the value (e.g., "1 município • 134 escolas"), for
     * cards whose context is a breakdown rather than a trend. Rendered alongside
     * the trend when both are present.
     */
    subtitle?: string;
}
/**
 * Tab configuration for the TimeReport component
 */
export interface TimeReportTab {
    /** Unique value identifying this tab */
    value: string;
    /** Display label */
    label: string;
    /** Icon element for the tab header */
    icon?: ReactNode;
    /** Cards to display when this tab is active */
    cards: TimeCardData[];
}
/**
 * Props for the TimeCard component
 */
export interface TimeCardProps extends HTMLAttributes<HTMLDivElement> {
    /** Card data */
    data: TimeCardData;
}
/**
 * Props for the TimeReport component
 */
export interface TimeReportProps extends HTMLAttributes<HTMLDivElement> {
    /** Tab configurations with associated card data */
    tabs: TimeReportTab[];
    /** Default active tab value */
    defaultTab?: string;
    /** Controlled active tab value */
    activeTab?: string;
    /** Callback when active tab changes */
    onTabChange?: (value: string) => void;
}
/**
 * TimeCard component - displays a single time statistic
 */
export declare const TimeCard: ({ data, className, ...props }: TimeCardProps) => import("react/jsx-runtime").JSX.Element;
/**
 * TimeReport component
 *
 * Displays time statistics organized in tabs, each with configurable cards.
 * Used in the manager report page to show platform access time metrics.
 *
 * @example
 * ```tsx
 * <TimeReport
 *   tabs={[
 *     {
 *       value: 'student',
 *       label: 'Estudante',
 *       icon: <Student size={17} />,
 *       cards: [
 *         { id: 'platform', label: 'TEMPO NA PLATAFORMA', value: '12h 20min', icon: <Monitor />, trendValue: '+10%', trendDirection: 'up' },
 *       ],
 *     },
 *   ]}
 *   onTabChange={(tab) => console.log(tab)}
 * />
 * ```
 */
export declare const TimeReport: ({ tabs, defaultTab, activeTab, onTabChange, className, ...props }: TimeReportProps) => import("react/jsx-runtime").JSX.Element;
export default TimeReport;
//# sourceMappingURL=TimeReport.d.ts.map