Refactor: removed default exports.

src/app/(main)/reports/ReportDeleteButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useApi, useMessages, useModified } from '@/components/hooks';
-import ConfirmationForm from '@/components/common/ConfirmationForm';
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 
 export function ReportDeleteButton({
   reportId,
@@ -51,5 +51,3 @@ export function ReportDeleteButton({
     </ModalTrigger>
   );
 }
-
-export default ReportDeleteButton;

src/app/(main)/reports/ReportsDataTable.tsx

@@ -1,9 +1,9 @@
 import { useReports } from '@/components/hooks';
-import ReportsTable from './ReportsTable';
-import DataTable from '@/components/common/DataTable';
+import { ReportsTable } from './ReportsTable';
+import { DataTable } from '@/components/common/DataTable';
 import { ReactNode } from 'react';
 
-export default function ReportsDataTable({
+export function ReportsDataTable({
   websiteId,
   teamId,
   children,

src/app/(main)/reports/ReportsHeader.tsx

@@ -1,7 +1,7 @@
-import PageHeader from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/layout/PageHeader';
 import { Icon, Icons, Text } from 'react-basics';
 import { useLogin, useMessages, useTeamUrl } from '@/components/hooks';
-import LinkButton from '@/components/common/LinkButton';
+import { LinkButton } from '@/components/common/LinkButton';
 import { ROLES } from '@/lib/constants';
 
 export function ReportsHeader() {
@@ -23,5 +23,3 @@ export function ReportsHeader() {
     </PageHeader>
   );
 }
-
-export default ReportsHeader;

src/app/(main)/reports/ReportsPage.tsx

@@ -1,10 +1,10 @@
 'use client';
 import { Metadata } from 'next';
-import ReportsHeader from './ReportsHeader';
-import ReportsDataTable from './ReportsDataTable';
+import { ReportsHeader } from './ReportsHeader';
+import { ReportsDataTable } from './ReportsDataTable';
 import { useTeamUrl } from '@/components/hooks';
 
-export default function ReportsPage() {
+export function ReportsPage() {
   const { teamId } = useTeamUrl();
 
   return (

src/app/(main)/reports/ReportsTable.tsx

@@ -1,8 +1,8 @@
 import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import LinkButton from '@/components/common/LinkButton';
+import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useLogin, useTeamUrl } from '@/components/hooks';
 import { REPORT_TYPES } from '@/lib/constants';
-import ReportDeleteButton from './ReportDeleteButton';
+import { ReportDeleteButton } from './ReportDeleteButton';
 
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
@@ -46,5 +46,3 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
     </GridTable>
   );
 }
-
-export default ReportsTable;

src/app/(main)/reports/[reportId]/BaseParameters.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { FormRow } from 'react-basics';
 import { parseDateRange } from '@/lib/date';
-import DateFilter from '@/components/input/DateFilter';
-import WebsiteSelect from '@/components/input/WebsiteSelect';
+import { DateFilter } from '@/components/input/DateFilter';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
 import { ReportContext } from './Report';
 import styles from './BaseParameters.module.css';
@@ -63,5 +63,3 @@ export function BaseParameters({
     </>
   );
 }
-
-export default BaseParameters;

src/app/(main)/reports/[reportId]/FieldAddForm.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from '@/lib/constants';
-import PopupForm from './PopupForm';
-import FieldSelectForm from './FieldSelectForm';
+import { PopupForm } from './PopupForm';
+import { FieldSelectForm } from './FieldSelectForm';
 
 export function FieldAddForm({
   fields = [],
@@ -45,5 +45,3 @@ export function FieldAddForm({
     document.body,
   );
 }
-
-export default FieldAddForm;

src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx

@@ -1,7 +1,7 @@
 import { Form, FormRow, Menu, Item } from 'react-basics';
 import { useMessages } from '@/components/hooks';
 
-export default function FieldAggregateForm({
+export function FieldAggregateForm({
   name,
   type,
   onSelect,

src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx

@@ -33,7 +33,7 @@ export interface FieldFilterFormProps {
   isNew?: boolean;
 }
 
-export default function FieldFilterEditForm({
+export function FieldFilterEditForm({
   websiteId,
   name,
   label,

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -1,5 +1,5 @@
 import { useFields, useMessages } from '@/components/hooks';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { useContext } from 'react';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
 import FieldSelectForm from '../[reportId]/FieldSelectForm';
@@ -59,5 +59,3 @@ export function FieldParameters() {
     </FormRow>
   );
 }
-
-export default FieldParameters;

src/app/(main)/reports/[reportId]/FieldSelectForm.tsx

@@ -9,11 +9,7 @@ export interface FieldSelectFormProps {
   showType?: boolean;
 }
 
-export default function FieldSelectForm({
-  fields = [],
-  onSelect,
-  showType = true,
-}: FieldSelectFormProps) {
+export function FieldSelectForm({ fields = [], onSelect, showType = true }: FieldSelectFormProps) {
   const { formatMessage, labels } = useMessages();
 
   return (

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
 import FilterSelectForm from '../[reportId]/FilterSelectForm';
 import ParameterList from '../[reportId]/ParameterList';
@@ -134,5 +134,3 @@ const FilterParameter = ({
     </PopupTrigger>
   );
 };
-
-export default FilterParameters;

src/app/(main)/reports/[reportId]/FilterSelectForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import FieldSelectForm from './FieldSelectForm';
-import FieldFilterEditForm from './FieldFilterEditForm';
+import { FieldSelectForm } from './FieldSelectForm';
+import { FieldFilterEditForm } from './FieldFilterEditForm';
 
 export interface FilterSelectFormProps {
   websiteId?: string;
@@ -11,7 +11,7 @@ export interface FilterSelectFormProps {
   allowFilterSelect?: boolean;
 }
 
-export default function FilterSelectForm({
+export function FilterSelectForm({
   websiteId,
   fields,
   startDate,

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Icon } from 'react-basics';
-import Icons from '@/components/icons';
-import Empty from '@/components/common/Empty';
+import { Icons } from '@/components/icons';
+import { Empty } from '@/components/common/Empty';
 import { useMessages } from '@/components/hooks';
 import styles from './ParameterList.module.css';
 import classNames from 'classnames';
@@ -46,5 +46,3 @@ const Item = ({
 };
 
 ParameterList.Item = Item;
-
-export default ParameterList;

src/app/(main)/reports/[reportId]/PopupForm.tsx

@@ -21,5 +21,3 @@ export function PopupForm({
     </div>
   );
 }
-
-export default PopupForm;

src/app/(main)/reports/[reportId]/Report.tsx

@@ -29,5 +29,3 @@ export function Report({
     </ReportContext.Provider>
   );
 }
-
-export default Report;

src/app/(main)/reports/[reportId]/ReportBody.tsx

@@ -11,5 +11,3 @@ export function ReportBody({ children }) {
 
   return <div className={styles.body}>{children}</div>;
 }
-
-export default ReportBody;

src/app/(main)/reports/[reportId]/ReportHeader.tsx

@@ -4,7 +4,7 @@ import { useMessages, useApi, useNavigation, useTeamUrl } from '@/components/hoo
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from '@/lib/constants';
-import Breadcrumb from '@/components/common/Breadcrumb';
+import { Breadcrumb } from '@/components/common/Breadcrumb';
 
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
@@ -102,5 +102,3 @@ export function ReportHeader({ icon }) {
     </div>
   );
 }
-
-export default ReportHeader;

src/app/(main)/reports/[reportId]/ReportMenu.tsx

@@ -23,5 +23,3 @@ export function ReportMenu({ children }) {
     </div>
   );
 }
-
-export default ReportMenu;

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -20,7 +20,7 @@ const reports = {
   revenue: RevenueReport,
 };
 
-export default function ReportPage({ reportId }: { reportId: string }) {
+export function ReportPage({ reportId }: { reportId: string }) {
   const { report } = useReport(reportId);
 
   if (!report) {

src/app/(main)/reports/[reportId]/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import ReportPage from './ReportPage';
+import { ReportPage } from './ReportPage';
 
 export default async function ({ params }: { params: { reportId: string } }) {
   const { reportId } = await params;

src/app/(main)/reports/create/ReportCreatePage.tsx

@@ -1,6 +1,6 @@
 'use client';
-import ReportTemplates from './ReportTemplates';
+import { ReportTemplates } from './ReportTemplates';
 
-export default function ReportCreatePage() {
+export function ReportCreatePage() {
   return <ReportTemplates />;
 }

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -6,7 +6,7 @@ import Path from '@/assets/path.svg';
 import Tag from '@/assets/tag.svg';
 import Target from '@/assets/target.svg';
 import { useMessages, useTeamUrl } from '@/components/hooks';
-import PageHeader from '@/components/layout/PageHeader';
+import { PageHeader } from '@/components/layout/PageHeader';
 import Link from 'next/link';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './ReportTemplates.module.css';
@@ -97,5 +97,3 @@ function ReportItem({ title, description, url, icon }) {
     </div>
   );
 }
-
-export default ReportTemplates;

src/app/(main)/reports/create/page.tsx

@@ -1,4 +1,4 @@
-import ReportCreatePage from './ReportCreatePage';
+import { ReportCreatePage } from './ReportCreatePage';
 import { Metadata } from 'next';
 
 export default function () {

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
-import Empty from '@/components/common/Empty';
-import Icons from '@/components/icons';
+import { Empty } from '@/components/common/Empty';
+import { Icons } from '@/components/icons';
 import { useApi, useMessages } from '@/components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
 import { ReportContext } from '../[reportId]/Report';
@@ -137,5 +137,3 @@ export function EventDataParameters() {
     </Form>
   );
 }
-
-export default EventDataParameters;

src/app/(main)/reports/event-data/EventDataReport.tsx

@@ -2,8 +2,8 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import EventDataParameters from './EventDataParameters';
-import EventDataTable from './EventDataTable';
+import { EventDataParameters } from './EventDataParameters';
+import { EventDataTable } from './EventDataTable';
 import Nodes from '@/assets/nodes.svg';
 
 const defaultParameters = {
@@ -11,7 +11,7 @@ const defaultParameters = {
   parameters: { fields: [], filters: [] },
 };
 
-export default function EventDataReport({ reportId }: { reportId?: string }) {
+export function EventDataReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Nodes />} />

src/app/(main)/reports/event-data/EventDataReportPage.tsx

@@ -1,6 +1,6 @@
 'use client';
-import EventDataReport from './EventDataReport';
+import { EventDataReport } from './EventDataReport';
 
-export default function EventDataReportPage() {
+export function EventDataReportPage() {
   return <EventDataReport />;
 }

src/app/(main)/reports/event-data/EventDataTable.tsx

@@ -15,5 +15,3 @@ export function EventDataTable() {
     </GridTable>
   );
 }
-
-export default EventDataTable;

src/app/(main)/reports/event-data/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import EventDataReportPage from './EventDataReportPage';
+import { EventDataReportPage } from './EventDataReportPage';
 
 export default function () {
   return <EventDataReportPage />;

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -52,5 +52,3 @@ export function FunnelChart({ className }: FunnelChartProps) {
     </div>
   );
 }
-
-export default FunnelChart;

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -12,8 +12,8 @@ import {
   TextField,
   Button,
 } from 'react-basics';
-import Icons from '@/components/icons';
-import FunnelStepAddForm from './FunnelStepAddForm';
+import { Icons } from '@/components/icons';
+import { FunnelStepAddForm } from './FunnelStepAddForm';
 import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';
 import ParameterList from '../[reportId]/ParameterList';
@@ -124,5 +124,3 @@ export function FunnelParameters() {
     </Form>
   );
 }
-
-export default FunnelParameters;

src/app/(main)/reports/funnel/FunnelReport.tsx

@@ -1,5 +1,5 @@
-import FunnelChart from './FunnelChart';
-import FunnelParameters from './FunnelParameters';
+import { FunnelChart } from './FunnelChart';
+import { FunnelParameters } from './FunnelParameters';
 import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
@@ -12,7 +12,7 @@ const defaultParameters = {
   parameters: { window: 60, steps: [] },
 };
 
-export default function FunnelReport({ reportId }: { reportId?: string }) {
+export function FunnelReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Funnel />} />

src/app/(main)/reports/funnel/FunnelReportPage.tsx

@@ -1,6 +1,6 @@
 'use client';
-import FunnelReport from './FunnelReport';
+import { FunnelReport } from './FunnelReport';
 
-export default function FunnelReportPage() {
+export function FunnelReportPage() {
   return <FunnelReport />;
 }

src/app/(main)/reports/funnel/FunnelStepAddForm.tsx

@@ -76,5 +76,3 @@ export function FunnelStepAddForm({
     </Flexbox>
   );
 }
-
-export default FunnelStepAddForm;

src/app/(main)/reports/funnel/page.tsx

@@ -1,4 +1,4 @@
-import FunnelReportPage from './FunnelReportPage';
+import { FunnelReportPage } from './FunnelReportPage';
 import { Metadata } from 'next';
 
 export default function () {

src/app/(main)/reports/goals/GoalsAddForm.tsx

@@ -139,5 +139,3 @@ export function GoalsAddForm({
     </Flexbox>
   );
 }
-
-export default GoalsAddForm;

src/app/(main)/reports/goals/GoalsChart.tsx

@@ -70,5 +70,3 @@ export function GoalsChart({ className }: { className?: string; isLoading?: bool
     </div>
   );
 }
-
-export default GoalsChart;

src/app/(main)/reports/goals/GoalsParameters.tsx

@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import Icons from '@/components/icons';
+import { Icons } from '@/components/icons';
 import { formatNumber } from '@/lib/format';
 import { useContext } from 'react';
 import {
@@ -17,7 +17,7 @@ import BaseParameters from '../[reportId]/BaseParameters';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
 import { ReportContext } from '../[reportId]/Report';
-import GoalsAddForm from './GoalsAddForm';
+import { GoalsAddForm } from './GoalsAddForm';
 import styles from './GoalsParameters.module.css';
 
 export function GoalsParameters() {
@@ -137,5 +137,3 @@ export function GoalsParameters() {
     </Form>
   );
 }
-
-export default GoalsParameters;

src/app/(main)/reports/goals/GoalsReport.tsx

@@ -1,5 +1,5 @@
-import GoalsChart from './GoalsChart';
-import GoalsParameters from './GoalsParameters';
+import { GoalsChart } from './GoalsChart';
+import { GoalsParameters } from './GoalsParameters';
 import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
@@ -12,7 +12,7 @@ const defaultParameters = {
   parameters: { goals: [] },
 };
 
-export default function GoalsReport({ reportId }: { reportId?: string }) {
+export function GoalsReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Target />} />

src/app/(main)/reports/goals/GoalsReportPage.tsx

@@ -1,6 +1,6 @@
 'use client';
-import GoalReport from './GoalsReport';
+import { GoalReport } from './GoalsReport';
 
-export default function GoalReportPage() {
+export function GoalReportPage() {
   return <GoalReport />;
 }

src/app/(main)/reports/goals/page.tsx

@@ -1,4 +1,4 @@
-import GoalsReportPage from './GoalsReportPage';
+import { GoalsReportPage } from './GoalsReportPage';
 import { Metadata } from 'next';
 
 export default function () {

src/app/(main)/reports/insights/InsightsParameters.tsx

@@ -32,5 +32,3 @@ export function InsightsParameters() {
     </Form>
   );
 }
-
-export default InsightsParameters;

src/app/(main)/reports/insights/InsightsReport.tsx

@@ -2,8 +2,8 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import InsightsParameters from './InsightsParameters';
-import InsightsTable from './InsightsTable';
+import { InsightsParameters } from './InsightsParameters';
+import { InsightsTable } from './InsightsTable';
 import Lightbulb from '@/assets/lightbulb.svg';
 import { REPORT_TYPES } from '@/lib/constants';
 
@@ -12,7 +12,7 @@ const defaultParameters = {
   parameters: { fields: [], filters: [] },
 };
 
-export default function InsightsReport({ reportId }: { reportId?: string }) {
+export function InsightsReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Lightbulb />} />

src/app/(main)/reports/insights/InsightsReportPage.tsx

@@ -1,6 +1,6 @@
 'use client';
-import InsightsReport from './InsightsReport';
+import { InsightsReport } from './InsightsReport';
 
-export default function InsightsReportPage() {
+export function InsightsReportPage() {
   return <InsightsReport />;
 }

src/app/(main)/reports/insights/InsightsTable.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useFormat, useMessages } from '@/components/hooks';
 import { ReportContext } from '../[reportId]/Report';
-import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { formatShortTime } from '@/lib/format';
 
 export function InsightsTable() {
@@ -71,5 +71,3 @@ export function InsightsTable() {
     </GridTable>
   );
 }
-
-export default InsightsTable;

src/app/(main)/reports/insights/page.tsx

@@ -1,4 +1,4 @@
-import InsightsReportPage from './InsightsReportPage';
+import { InsightsReportPage } from './InsightsReportPage';
 import { Metadata } from 'next';
 
 export default function () {

src/app/(main)/reports/journey/JourneyParameters.tsx

@@ -59,5 +59,3 @@ export function JourneyParameters() {
     </Form>
   );
 }
-
-export default JourneyParameters;

src/app/(main)/reports/journey/JourneyReport.tsx

@@ -3,8 +3,8 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import JourneyParameters from './JourneyParameters';
-import JourneyView from './JourneyView';
+import { JourneyParameters } from './JourneyParameters';
+import { JourneyView } from './JourneyView';
 import Path from '@/assets/path.svg';
 import { REPORT_TYPES } from '@/lib/constants';
 
@@ -13,7 +13,7 @@ const defaultParameters = {
   parameters: { steps: 5 },
 };
 
-export default function JourneyReport({ reportId }: { reportId?: string }) {
+export function JourneyReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Path />} />

src/app/(main)/reports/journey/JourneyReportPage.tsx

@@ -1,5 +1,5 @@
-import JourneyReport from './JourneyReport';
+import { JourneyReport } from './JourneyReport';
 
-export default function JourneyReportPage() {
+export function JourneyReportPage() {
   return <JourneyReport />;
 }

src/app/(main)/reports/journey/JourneyView.tsx

@@ -12,7 +12,7 @@ const NODE_HEIGHT = 60;
 const NODE_GAP = 10;
 const LINE_WIDTH = 3;
 
-export default function JourneyView() {
+export function JourneyView() {
   const [selectedNode, setSelectedNode] = useState(null);
   const [activeNode, setActiveNode] = useState(null);
   const { report } = useContext(ReportContext);

src/app/(main)/reports/journey/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import JourneyReportPage from './JourneyReportPage';
+import { JourneyReportPage } from './JourneyReportPage';
 
 export default function () {
   return <JourneyReportPage />;

src/app/(main)/reports/page.tsx

@@ -1,4 +1,4 @@
-import ReportsPage from './ReportsPage';
+import { ReportsPage } from './ReportsPage';
 import { Metadata } from 'next';
 
 export default function () {

src/app/(main)/reports/retention/RetentionParameters.tsx

@@ -42,5 +42,3 @@ export function RetentionParameters() {
     </Form>
   );
 }
-
-export default RetentionParameters;

src/app/(main)/reports/retention/RetentionReport.tsx

@@ -1,5 +1,5 @@
-import RetentionTable from './RetentionTable';
-import RetentionParameters from './RetentionParameters';
+import { RetentionTable } from './RetentionTable';
+import { RetentionParameters } from './RetentionParameters';
 import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
@@ -18,7 +18,7 @@ const defaultParameters = {
   },
 };
 
-export default function RetentionReport({ reportId }: { reportId?: string }) {
+export function RetentionReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Magnet />} />

src/app/(main)/reports/retention/RetentionReportPage.tsx

@@ -1,8 +1,8 @@
 'use client';
 import { Metadata } from 'next';
-import RetentionReport from './RetentionReport';
+import { RetentionReport } from './RetentionReport';
 
-export default function RetentionReportPage() {
+export function RetentionReportPage() {
   return <RetentionReport />;
 }
 

src/app/(main)/reports/retention/RetentionTable.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
 import { ReportContext } from '../[reportId]/Report';
-import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { useMessages, useLocale } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import styles from './RetentionTable.module.css';
@@ -75,5 +75,3 @@ export function RetentionTable({ days = DAYS }) {
     </>
   );
 }
-
-export default RetentionTable;

src/app/(main)/reports/retention/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import RetentionReportPage from './RetentionReportPage';
+import { RetentionReportPage } from './RetentionReportPage';
 
 export default function () {
   return <RetentionReportPage />;

src/app/(main)/reports/revenue/RevenueParameters.tsx

@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import useRevenueValues from '@/components/hooks/queries/useRevenueValues';
+import { useRevenueValues } from '@/components/hooks/queries/useRevenueValues';
 import { useContext } from 'react';
 import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';
@@ -42,5 +42,3 @@ export function RevenueParameters() {
     </Form>
   );
 }
-
-export default RevenueParameters;

src/app/(main)/reports/revenue/RevenueReport.tsx

@@ -4,15 +4,15 @@ import Report from '../[reportId]/Report';
 import ReportBody from '../[reportId]/ReportBody';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
-import RevenueParameters from './RevenueParameters';
-import RevenueView from './RevenueView';
+import { RevenueParameters } from './RevenueParameters';
+import { RevenueView } from './RevenueView';
 
 const defaultParameters = {
   type: REPORT_TYPES.revenue,
   parameters: {},
 };
 
-export default function RevenueReport({ reportId }: { reportId?: string }) {
+export function RevenueReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Money />} />

src/app/(main)/reports/revenue/RevenueReportPage.tsx

@@ -1,6 +1,6 @@
 'use client';
-import RevenueReport from './RevenueReport';
+import { RevenueReport } from './RevenueReport';
 
-export default function RevenueReportPage() {
+export function RevenueReportPage() {
   return <RevenueReport />;
 }

src/app/(main)/reports/revenue/RevenueTable.tsx

@@ -1,4 +1,4 @@
-import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { useMessages } from '@/components/hooks';
 import { useContext } from 'react';
 import { GridColumn, GridTable } from 'react-basics';
@@ -34,5 +34,3 @@ export function RevenueTable() {
     </GridTable>
   );
 }
-
-export default RevenueTable;

src/app/(main)/reports/revenue/RevenueView.tsx

@@ -1,19 +1,19 @@
 import classNames from 'classnames';
 import { colord } from 'colord';
-import BarChart from '@/components/charts/BarChart';
-import PieChart from '@/components/charts/PieChart';
-import TypeIcon from '@/components/common/TypeIcon';
+import { BarChart } from '@/components/charts/BarChart';
+import { PieChart } from '@/components/charts/PieChart';
+import { TypeIcon } from '@/components/common/TypeIcon';
 import { useCountryNames, useLocale, useMessages } from '@/components/hooks';
 import { GridRow } from '@/components/layout/Grid';
-import ListTable from '@/components/metrics/ListTable';
-import MetricCard from '@/components/metrics/MetricCard';
-import MetricsBar from '@/components/metrics/MetricsBar';
+import { ListTable } from '@/components/metrics/ListTable';
+import { MetricCard } from '@/components/metrics/MetricCard';
+import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
 import { formatLongCurrency, formatLongNumber } from '@/lib/format';
 import { useCallback, useContext, useMemo } from 'react';
 import { ReportContext } from '../[reportId]/Report';
-import RevenueTable from './RevenueTable';
+import { RevenueTable } from './RevenueTable';
 import styles from './RevenueView.module.css';
 
 export interface RevenueViewProps {
@@ -152,5 +152,3 @@ export function RevenueView({ isLoading }: RevenueViewProps) {
     </>
   );
 }
-
-export default RevenueView;

src/app/(main)/reports/revenue/page.tsx

@@ -1,4 +1,4 @@
-import RevenueReportPage from './RevenueReportPage';
+import { RevenueReportPage } from './RevenueReportPage';
 import { Metadata } from 'next';
 
 export default function () {

src/app/(main)/reports/utm/UTMParameters.tsx

@@ -32,5 +32,3 @@ export function UTMParameters() {
     </Form>
   );
 }
-
-export default UTMParameters;

src/app/(main)/reports/utm/UTMReport.tsx

@@ -3,8 +3,8 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import UTMParameters from './UTMParameters';
-import UTMView from './UTMView';
+import { UTMParameters } from './UTMParameters';
+import { UTMView } from './UTMView';
 import Tag from '@/assets/tag.svg';
 import { REPORT_TYPES } from '@/lib/constants';
 
@@ -13,7 +13,7 @@ const defaultParameters = {
   parameters: {},
 };
 
-export default function UTMReport({ reportId }: { reportId?: string }) {
+export function UTMReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Tag />} />

src/app/(main)/reports/utm/UTMReportPage.tsx

@@ -1,5 +1,5 @@
-import UTMReport from './UTMReport';
+import { UTMReport } from './UTMReport';
 
-export default function UTMReportPage() {
+export function UTMReportPage() {
   return <UTMReport />;
 }

src/app/(main)/reports/utm/UTMView.tsx

@@ -2,8 +2,8 @@ import { useContext } from 'react';
 import { firstBy } from 'thenby';
 import { ReportContext } from '../[reportId]/Report';
 import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
-import PieChart from '@/components/charts/PieChart';
-import ListTable from '@/components/metrics/ListTable';
+import { PieChart } from '@/components/charts/PieChart';
+import { ListTable } from '@/components/metrics/ListTable';
 import styles from './UTMView.module.css';
 import { useMessages } from '@/components/hooks';
 
@@ -15,7 +15,7 @@ function toArray(data: { [key: string]: number } = {}) {
     .sort(firstBy('value', -1));
 }
 
-export default function UTMView() {
+export function UTMView() {
   const { formatMessage, labels } = useMessages();
   const { report } = useContext(ReportContext);
   const { data } = report || {};

src/app/(main)/reports/utm/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import UTMReportPage from './UTMReportPage';
+import { UTMReportPage } from './UTMReportPage';
 
 export default function () {
   return <UTMReportPage />;