fix: export raw WO+Inv-related icons for better styling

src/components/Icons/InvoiceStatusIcon.tsx

@@ -12,12 +12,18 @@ export const InvoiceStatusIcon = ({
   status: Invoice["status"];
 } & React.ComponentProps<typeof StyledIconContainer>) => (
   <StyledIconContainer style={style} {...props}>
-    {STATUS_ICONS[status]}
+    {INV_STATUS_ICONS_STYLED[status]}
   </StyledIconContainer>
 );
 
-const STATUS_ICONS: Record<Invoice["status"], React.ReactNode> = {
+export const INV_STATUS_ICONS_STYLED: Record<Invoice["status"], React.ReactNode> = {
   OPEN: <FileInvoiceDollarIcon sx={{ fontSize: 28, marginLeft: "2px" }} />,
   CLOSED: <DollarCheckmarkIcon sx={{ fontSize: 34, margin: "1px 0 0 1.5px" }} />,
   DISPUTED: <ExclamationMarkIcon sx={{ fontSize: 34 }} />
 };
+
+export const INV_STATUS_ICONS: Record<Invoice["status"], React.ReactNode> = {
+  OPEN: <FileInvoiceDollarIcon />,
+  CLOSED: <DollarCheckmarkIcon />,
+  DISPUTED: <ExclamationMarkIcon />
+};

src/components/Icons/RoadIcon/RoadIcon.tsx

@@ -0,0 +1,6 @@
+import SvgIcon from "@mui/material/SvgIcon";
+import { ReactComponent as RoadIconSVG } from "./fa-road.svg";
+
+export const RoadIcon = (props: React.ComponentProps<typeof SvgIcon>) => {
+  return <SvgIcon component={RoadIconSVG} inheritViewBox {...props} />;
+};

src/components/Icons/RoadIcon/index.ts

@@ -0,0 +1 @@
+export { RoadIcon } from "./RoadIcon";

src/components/Icons/TrowelBricksIcon/TrowelBricksIcon.tsx

@@ -0,0 +1,6 @@
+import SvgIcon from "@mui/material/SvgIcon";
+import { ReactComponent as TrowelBricksIconSVG } from "./fa-trowel-bricks.svg";
+
+export const TrowelBricksIcon = (props: React.ComponentProps<typeof SvgIcon>) => {
+  return <SvgIcon component={TrowelBricksIconSVG} inheritViewBox {...props} />;
+};

src/components/Icons/TrowelBricksIcon/index.ts

@@ -0,0 +1 @@
+export { TrowelBricksIcon } from "./TrowelBricksIcon";

src/components/Icons/WorkOrderCategoryIcon.tsx

@@ -0,0 +1,45 @@
+import RectanglesIcon from "@mui/icons-material/ViewQuilt";
+import LightningBoltIcon from "@mui/icons-material/FlashOn";
+import LayersIcon from "@mui/icons-material/Layers";
+import HomeRepairServiceIcon from "@mui/icons-material/HomeRepairService";
+import AirIcon from "@mui/icons-material/Air";
+import TreesIcon from "@mui/icons-material/Forest";
+import PaintRollerIcon from "@mui/icons-material/FormatPaint";
+import PestBugIcon from "@mui/icons-material/PestControl";
+import PlumbingIcon from "@mui/icons-material/Plumbing";
+import RoofingIcon from "@mui/icons-material/Roofing";
+import TrashCanIcon from "@mui/icons-material/DeleteOutline";
+import ToolsIcon from "@mui/icons-material/Construction";
+import WindowIcon from "@mui/icons-material/Window";
+import { TrowelBricksIcon } from "./TrowelBricksIcon";
+import { RoadIcon } from "./RoadIcon";
+import type SvgIcon from "@mui/material/SvgIcon";
+import type { WorkOrder } from "@types";
+
+export const WorkOrderCategoryIcon = ({
+  category,
+  ...props
+}: {
+  category: Extract<WorkOrder["category"], string>;
+} & React.ComponentProps<typeof SvgIcon>) => {
+  const CategoryIcon = () => WO_CATEGORY_ICONS[category];
+  return <CategoryIcon {...props} />;
+};
+
+export const WO_CATEGORY_ICONS = {
+  DRYWALL: <RectanglesIcon />,
+  ELECTRICAL: <LightningBoltIcon />,
+  FLOORING: <LayersIcon />,
+  GENERAL: <HomeRepairServiceIcon />,
+  HVAC: <AirIcon />,
+  LANDSCAPING: <TreesIcon />,
+  MASONRY: <TrowelBricksIcon />,
+  PAINTING: <PaintRollerIcon />,
+  PAVING: <RoadIcon />,
+  PEST: <PestBugIcon />,
+  PLUMBING: <PlumbingIcon />,
+  ROOFING: <RoofingIcon />,
+  TRASH: <TrashCanIcon />,
+  TURNOVER: <ToolsIcon />,
+  WINDOWS: <WindowIcon />
+};

src/components/Icons/WorkOrderStatusIcon.tsx

@@ -14,11 +14,11 @@ export const WorkOrderStatusIcon = ({
   status: WorkOrder["status"];
 } & React.ComponentProps<typeof StyledIconContainer>) => (
   <StyledIconContainer style={style} {...props}>
-    {STATUS_ICONS[status]}
+    {WO_STATUS_ICONS[status]}
   </StyledIconContainer>
 );
 
-const STATUS_ICONS: Record<WorkOrder["status"], React.ReactNode> = {
+export const WO_STATUS_ICONS: Record<WorkOrder["status"], React.ReactNode> = {
   UNASSIGNED: <DocumentIcon sx={{ fontSize: 33, marginLeft: "1.5px" }} />,
   ASSIGNED: <EngineerCogsIcon sx={{ fontSize: 30, marginLeft: "1px" }} />,
   IN_PROGRESS: <ClockDottedOutlineIcon sx={{ fontSize: 35, marginTop: "1px" }} />,

src/components/Icons/index.ts

@@ -1,7 +1,11 @@
 // Font Awesome icons:
 export { FileInvoiceDollarIcon } from "./FileInvoiceDollarIcon";
 export { PersonCircleExclamationIcon } from "./PersonCircleExclamationIcon";
+export { RoadIcon } from "./RoadIcon";
 export { StripeIcon } from "./StripeIcon";
+export { TrowelBricksIcon } from "./TrowelBricksIcon";
+
 // Fixit item icons:
-export { InvoiceStatusIcon } from "./InvoiceStatusIcon";
-export { WorkOrderStatusIcon } from "./WorkOrderStatusIcon";
+export { InvoiceStatusIcon, INV_STATUS_ICONS } from "./InvoiceStatusIcon";
+export { WorkOrderCategoryIcon, WO_CATEGORY_ICONS } from "./WorkOrderCategoryIcon";
+export { WorkOrderStatusIcon, WO_STATUS_ICONS } from "./WorkOrderStatusIcon";