From 666d522ee9243f5851df827f661fa249e5ab4cdf Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 15 Dec 2025 22:19:00 +0000
Subject: [PATCH] fc -> plain

---
 client/src/components/auth/AuthBasePage.tsx            |  4 ++--
 .../components/common/HeatmapResponseTimeTooltip.tsx   |  7 +++++--
 client/src/components/design-elements/Fallback.tsx     |  5 +----
 client/src/components/design-elements/InfoBox.tsx      |  2 +-
 client/src/components/design-elements/SkeletonCard.tsx |  7 +++----
 client/src/components/design-elements/StatBox.tsx      | 10 +++-------
 client/src/components/design-elements/StatusBox.tsx    |  2 +-
 client/src/components/design-elements/Table.tsx        |  2 +-
 client/src/components/design-elements/Tooltip.tsx      |  9 +++------
 client/src/components/inputs/AutoComplete.tsx          |  4 ++--
 client/src/components/inputs/ButtonGroup.tsx           |  4 ++--
 client/src/components/inputs/FieldLabel.tsx            |  4 ++--
 client/src/components/inputs/FormControlLabel.tsx      |  4 +---
 client/src/components/inputs/FormField.tsx             |  4 ++--
 client/src/components/inputs/RadioInput.tsx            | 10 ++++++----
 client/src/components/inputs/SwitchTeam.tsx            |  2 --
 client/src/components/monitors/Chart.tsx               |  4 ++--
 client/src/components/monitors/ChartResponseTime.tsx   |  6 +++---
 .../components/monitors/HistogramInfrastructure.tsx    |  4 ++--
 client/src/components/protected-route/index.tsx        |  8 ++------
 .../src/pages/infrastructure/InfraDetailsNetGraphs.tsx |  1 +
 21 files changed, 45 insertions(+), 58 deletions(-)

diff --git a/client/src/components/auth/AuthBasePage.tsx b/client/src/components/auth/AuthBasePage.tsx
index 6904cf343..8e855548e 100644
--- a/client/src/components/auth/AuthBasePage.tsx
+++ b/client/src/components/auth/AuthBasePage.tsx
@@ -13,12 +13,12 @@ interface AuthBasePageProps extends StackProps {
   children: React.ReactNode;
 }
 
-export const AuthBasePage: React.FC<AuthBasePageProps> = ({
+export const AuthBasePage = ({
   children,
   title,
   subtitle,
   ...props
-}) => {
+}: AuthBasePageProps) => {
   const theme = useTheme();
   return (
     <Stack gap={theme.spacing(10)} minHeight="100vh" {...props}>
diff --git a/client/src/components/common/HeatmapResponseTimeTooltip.tsx b/client/src/components/common/HeatmapResponseTimeTooltip.tsx
index b127c6b20..3244b1aa5 100644
--- a/client/src/components/common/HeatmapResponseTimeTooltip.tsx
+++ b/client/src/components/common/HeatmapResponseTimeTooltip.tsx
@@ -6,10 +6,13 @@ import { useAppSelector } from "@/hooks/AppHooks";
 import type { LatestCheck } from "@/types/check";
 import { useTheme } from "@mui/material/styles";
 
-export const HeatmapResponseTimeTooltip: React.FC<{
+export const HeatmapResponseTimeTooltip = ({
+  children,
+  check,
+}: {
   children: React.ReactElement;
   check: LatestCheck;
-}> = ({ children, check }) => {
+}) => {
   const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
   const theme = useTheme();
 
diff --git a/client/src/components/design-elements/Fallback.tsx b/client/src/components/design-elements/Fallback.tsx
index 8f8f47478..14e9ecda1 100644
--- a/client/src/components/design-elements/Fallback.tsx
+++ b/client/src/components/design-elements/Fallback.tsx
@@ -13,10 +13,7 @@ interface BaseFallbackProps extends StackProps {
   children: React.ReactNode;
 }
 
-export const BaseFallback: React.FC<BaseFallbackProps> = ({
-  children,
-  ...props
-}) => {
+export const BaseFallback = ({ children, ...props }: BaseFallbackProps) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 
diff --git a/client/src/components/design-elements/InfoBox.tsx b/client/src/components/design-elements/InfoBox.tsx
index 89e83985b..04fb727d1 100644
--- a/client/src/components/design-elements/InfoBox.tsx
+++ b/client/src/components/design-elements/InfoBox.tsx
@@ -8,7 +8,7 @@ interface InfoBoxProps {
   description: string;
 }
 
-export const InfoBox: React.FC<InfoBoxProps> = ({ title, description }) => {
+export const InfoBox = ({ title, description }: InfoBoxProps) => {
   const theme = useTheme();
 
   return (
diff --git a/client/src/components/design-elements/SkeletonCard.tsx b/client/src/components/design-elements/SkeletonCard.tsx
index bd8517b9a..302b1a6c8 100644
--- a/client/src/components/design-elements/SkeletonCard.tsx
+++ b/client/src/components/design-elements/SkeletonCard.tsx
@@ -1,8 +1,7 @@
-import React from "react";
 import { Box, Stack, useTheme } from "@mui/material";
 
 interface SkeletonCardProps {
-  width?: number | string;
+  width?: number | string | { xs?: number | string; md?: number | string };
   showHalo?: boolean;
 }
 
@@ -11,10 +10,10 @@ interface SkeletonCardProps {
  * Shows an animated stacked card design with pulsing skeleton elements
  * Default size is 60% of original design
  */
-const SkeletonCard: React.FC<SkeletonCardProps> = ({
+const SkeletonCard = ({
   width = { xs: 130, md: 216 },
   showHalo = true,
-}) => {
+}: SkeletonCardProps) => {
   const theme = useTheme();
   const pulseAnimation = {
     "@keyframes pulse": {
diff --git a/client/src/components/design-elements/StatBox.tsx b/client/src/components/design-elements/StatBox.tsx
index 637610a5f..73b9dc90d 100644
--- a/client/src/components/design-elements/StatBox.tsx
+++ b/client/src/components/design-elements/StatBox.tsx
@@ -13,11 +13,7 @@ type GradientBox = React.PropsWithChildren<{
   sx?: SxProps;
 }>;
 
-export const GradientBox: React.FC<GradientBox> = ({
-  children,
-  palette,
-  sx,
-}) => {
+export const GradientBox = ({ children, palette, sx }: GradientBox) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
   const isLight = theme.palette.mode === "light";
@@ -51,7 +47,7 @@ type StatBoxProps = React.PropsWithChildren<{
   onClick?: () => void;
 }>;
 
-export const StatBox: React.FC<StatBoxProps> = ({
+export const StatBox = ({
   title,
   subtitle,
   palette,
@@ -59,7 +55,7 @@ export const StatBox: React.FC<StatBoxProps> = ({
   sx,
   tooltip,
   onClick,
-}) => {
+}: StatBoxProps) => {
   const theme = useTheme();
   const textColor = palette ? theme.palette[palette].contrastText : "inherit";
 
diff --git a/client/src/components/design-elements/StatusBox.tsx b/client/src/components/design-elements/StatusBox.tsx
index 0ccea02ce..3174ee268 100644
--- a/client/src/components/design-elements/StatusBox.tsx
+++ b/client/src/components/design-elements/StatusBox.tsx
@@ -9,7 +9,7 @@ import { useTheme } from "@mui/material/styles";
 
 type StatusBoxProps = React.PropsWithChildren<{ children: React.ReactNode }>;
 
-export const BGBox: React.FC<StatusBoxProps> = ({ children }) => {
+export const BGBox = ({ children }: StatusBoxProps) => {
   const theme = useTheme();
   return (
     <BaseBox
diff --git a/client/src/components/design-elements/Table.tsx b/client/src/components/design-elements/Table.tsx
index 97773b1a7..d4a0c8416 100644
--- a/client/src/components/design-elements/Table.tsx
+++ b/client/src/components/design-elements/Table.tsx
@@ -322,7 +322,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
   );
 }
 
-export const Pagination: React.FC<TablePaginationProps> = ({ ...props }) => {
+export const Pagination = ({ ...props }: TablePaginationProps) => {
   const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
   const theme = useTheme();
   return (
diff --git a/client/src/components/design-elements/Tooltip.tsx b/client/src/components/design-elements/Tooltip.tsx
index 4890056da..7a862bebf 100644
--- a/client/src/components/design-elements/Tooltip.tsx
+++ b/client/src/components/design-elements/Tooltip.tsx
@@ -6,10 +6,7 @@ import type { TooltipProps } from "@mui/material/Tooltip";
 
 type StyledTooltipProps = TooltipProps;
 
-export const Tooltip: React.FC<StyledTooltipProps> = ({
-  placement = "top",
-  ...props
-}) => {
+export const Tooltip = ({ placement = "top", ...props }: StyledTooltipProps) => {
   const theme = useTheme();
 
   return (
@@ -44,11 +41,11 @@ export interface TooltipWithInfoProps
   iconColor?: string;
 }
 
-export const TooltipWithInfo: React.FC<TooltipWithInfoProps> = ({
+export const TooltipWithInfo = ({
   iconSize = 14,
   iconColor,
   ...props
-}) => {
+}: TooltipWithInfoProps) => {
   const theme = useTheme();
 
   const defaultColor = theme.palette.text.secondary;
diff --git a/client/src/components/inputs/AutoComplete.tsx b/client/src/components/inputs/AutoComplete.tsx
index b9a8e5a2d..67991a803 100644
--- a/client/src/components/inputs/AutoComplete.tsx
+++ b/client/src/components/inputs/AutoComplete.tsx
@@ -21,12 +21,12 @@ type AutoCompleteInputProps = Omit<
   required?: boolean;
 };
 
-export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
+export const AutoCompleteInput = ({
   fieldLabel,
   required,
   renderInput,
   ...props
-}) => {
+}: AutoCompleteInputProps) => {
   const theme = useTheme();
   const multiple = props.multiple;
 
diff --git a/client/src/components/inputs/ButtonGroup.tsx b/client/src/components/inputs/ButtonGroup.tsx
index 48c1c2090..9d2a6debf 100644
--- a/client/src/components/inputs/ButtonGroup.tsx
+++ b/client/src/components/inputs/ButtonGroup.tsx
@@ -6,12 +6,12 @@ import MenuItem from "@mui/material/MenuItem";
 import type { ButtonGroupProps } from "@mui/material/ButtonGroup";
 import { ChevronDown } from "lucide-react";
 
-export const ButtonGroupInput: React.FC<ButtonGroupProps> = ({
+export const ButtonGroupInput = ({
   orientation,
   children,
   sx,
   ...props
-}) => {
+}: ButtonGroupProps) => {
   const isVertical = orientation === "vertical";
 
   if (!isVertical) {
diff --git a/client/src/components/inputs/FieldLabel.tsx b/client/src/components/inputs/FieldLabel.tsx
index 3e4caf019..807bc5e9f 100644
--- a/client/src/components/inputs/FieldLabel.tsx
+++ b/client/src/components/inputs/FieldLabel.tsx
@@ -7,11 +7,11 @@ interface FieldLabelProps {
   htmlFor?: string;
 }
 
-export const FieldLabel: React.FC<FieldLabelProps> = ({
+export const FieldLabel = ({
   children,
   required = false,
   htmlFor,
-}) => {
+}: FieldLabelProps) => {
   const theme = useTheme();
 
   return (
diff --git a/client/src/components/inputs/FormControlLabel.tsx b/client/src/components/inputs/FormControlLabel.tsx
index af9acc6d2..05eccf43d 100644
--- a/client/src/components/inputs/FormControlLabel.tsx
+++ b/client/src/components/inputs/FormControlLabel.tsx
@@ -1,9 +1,7 @@
 import MuiFormControlLabel from "@mui/material/FormControlLabel";
 import type { FormControlLabelProps } from "@mui/material/FormControlLabel";
 
-export const FormControlLabel: React.FC<FormControlLabelProps> = ({
-  ...props
-}) => {
+export const FormControlLabel = ({ ...props }: FormControlLabelProps) => {
   return (
     <MuiFormControlLabel
       {...props}
diff --git a/client/src/components/inputs/FormField.tsx b/client/src/components/inputs/FormField.tsx
index 90c78eac5..28e7f4f66 100644
--- a/client/src/components/inputs/FormField.tsx
+++ b/client/src/components/inputs/FormField.tsx
@@ -9,12 +9,12 @@ interface FormFieldProps {
   htmlFor?: string;
 }
 
-export const FormField: React.FC<FormFieldProps> = ({
+export const FormField = ({
   label,
   required = false,
   children,
   htmlFor,
-}) => {
+}: FormFieldProps) => {
   const theme = useTheme();
 
   return (
diff --git a/client/src/components/inputs/RadioInput.tsx b/client/src/components/inputs/RadioInput.tsx
index 20f06bd2c..1f646ec51 100644
--- a/client/src/components/inputs/RadioInput.tsx
+++ b/client/src/components/inputs/RadioInput.tsx
@@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
 
 interface RadioInputProps extends RadioProps {}
 
-export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
+export const RadioInput = ({ ...props }: RadioInputProps) => {
   const theme = useTheme();
   return (
     <Radio
@@ -39,9 +39,11 @@ export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
   );
 };
 
-export const RadioWithDescription: React.FC<
-  RadioInputProps & { label: string; description: string }
-> = ({ label, description, ...props }) => {
+export const RadioWithDescription = ({
+  label,
+  description,
+  ...props
+}: RadioInputProps & { label: string; description: string }) => {
   const theme = useTheme();
   return (
     <FormControlLabel
diff --git a/client/src/components/inputs/SwitchTeam.tsx b/client/src/components/inputs/SwitchTeam.tsx
index 29839ecff..fbbfbdced 100644
--- a/client/src/components/inputs/SwitchTeam.tsx
+++ b/client/src/components/inputs/SwitchTeam.tsx
@@ -9,7 +9,6 @@ import { Tooltip } from "@/components/design-elements";
 import { useState, useEffect } from "react";
 import { useAppSelector, useAppDispatch } from "@/hooks/AppHooks";
 import { setSelectedTeamId } from "@/features/authSlice";
-import { useNavigate } from "react-router";
 import { useGet } from "@/hooks/UseApi";
 import type { ApiResponse } from "@/hooks/UseApi";
 import { useTheme } from "@mui/material/styles";
@@ -17,7 +16,6 @@ import { useTranslation } from "react-i18next";
 
 export const TeamSwitch = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
diff --git a/client/src/components/monitors/Chart.tsx b/client/src/components/monitors/Chart.tsx
index af4472aa0..33e3691da 100644
--- a/client/src/components/monitors/Chart.tsx
+++ b/client/src/components/monitors/Chart.tsx
@@ -12,13 +12,13 @@ type BaseChartProps = React.PropsWithChildren<{
   maxWidth?: number | string;
 }>;
 
-export const BaseChart: React.FC<BaseChartProps> = ({
+export const BaseChart = ({
   children,
   icon,
   title,
   width = "100%",
   maxWidth = "100%",
-}) => {
+}: BaseChartProps) => {
   const theme = useTheme();
 
   return (
diff --git a/client/src/components/monitors/ChartResponseTime.tsx b/client/src/components/monitors/ChartResponseTime.tsx
index 3f8c90453..fda790cf9 100644
--- a/client/src/components/monitors/ChartResponseTime.tsx
+++ b/client/src/components/monitors/ChartResponseTime.tsx
@@ -29,7 +29,7 @@ type XTickProps = {
   range: string;
 };
 
-export const XTick: React.FC<XTickProps> = ({ x, y, payload, range }) => {
+export const XTick = ({ x, y, payload, range }: XTickProps) => {
   const format = tickDateFormatLookup(range);
   const theme = useTheme();
   const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
@@ -56,14 +56,14 @@ type ResponseTimeToolTipProps = {
   uiTimezone: string;
 };
 
-const ResponseTimeToolTip: React.FC<ResponseTimeToolTipProps> = ({
+const ResponseTimeToolTip = ({
   active,
   payload,
   label,
   range,
   theme,
   uiTimezone,
-}) => {
+}: ResponseTimeToolTipProps) => {
   if (!label) return null;
   if (!payload) return null;
   if (!active) return null;
diff --git a/client/src/components/monitors/HistogramInfrastructure.tsx b/client/src/components/monitors/HistogramInfrastructure.tsx
index 742759eb1..c109ca0f5 100644
--- a/client/src/components/monitors/HistogramInfrastructure.tsx
+++ b/client/src/components/monitors/HistogramInfrastructure.tsx
@@ -88,7 +88,7 @@ export const HistogramInfrastructure = ({
   range,
   title,
   type,
-  idx,
+  idx: _idx,
   checks,
   xKey,
   yDomain,
@@ -156,7 +156,7 @@ export const HistogramInfrastructure = ({
           {dataKeys?.map((dataKey, index) => {
             const gradientId = `gradient-${uniqueId}-${index}`;
             return (
-              <Fragment key={dataKey}>
+              <Fragment key={`${dataKey}-${index}`}>
                 {gradient === true &&
                   createGradient({
                     id: gradientId,
diff --git a/client/src/components/protected-route/index.tsx b/client/src/components/protected-route/index.tsx
index ce0741d67..eeb56d594 100644
--- a/client/src/components/protected-route/index.tsx
+++ b/client/src/components/protected-route/index.tsx
@@ -2,9 +2,7 @@ import { useAppSelector } from "@/hooks/AppHooks";
 import { Navigate } from "react-router";
 import NotFound from "@/pages/errors/NotFound";
 
-export const ProtectedRoute: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const ProtectedRoute = ({ children }: React.PropsWithChildren) => {
   const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
   const user = useAppSelector((state) => state.auth.user);
   if (!isAuthenticated) {
@@ -22,9 +20,7 @@ export const ProtectedRoute: React.FC<React.PropsWithChildren> = ({
   return <>{children}</>;
 };
 
-export const MasterRoute: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const MasterRoute = ({ children }: React.PropsWithChildren) => {
   const user = useAppSelector((state) => state.auth.user);
 
   if (user?.teams.length === 0) {
diff --git a/client/src/pages/infrastructure/InfraDetailsNetGraphs.tsx b/client/src/pages/infrastructure/InfraDetailsNetGraphs.tsx
index cf52d0a32..9879489ce 100644
--- a/client/src/pages/infrastructure/InfraDetailsNetGraphs.tsx
+++ b/client/src/pages/infrastructure/InfraDetailsNetGraphs.tsx
@@ -104,6 +104,7 @@ export const InfraDetailsNetGraphs = ({
               <HistogramInfrastructure
                 range={range}
                 title={config.type}
+                type={"net"}
                 idx={config.idx}
                 key={`${config.type}-${config.idx ?? ""}`}
                 checks={checks}