added table to Energy Use History in Case Summary

heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistory.tsx

@@ -1,3 +1,5 @@
+import { EnergyUseHistoryChart } from './EnergyUseHistoryChart.tsx'
+
 export function EnergyUseHistory() {
 	const averageIndoorTemperature = '63.5'
 	const dailyOtherUsage = '1.07'
@@ -44,7 +46,7 @@ export function EnergyUseHistory() {
 				</div>
 			</div>
 			<div className="item-title-small">Usage Details</div>
-			<div className="item-title-small">(insert chart here)</div>
+			<EnergyUseHistoryChart />
 		</div>
 	)
 }

heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistoryChart.tsx

@@ -0,0 +1,58 @@
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '../../../components/ui/table.tsx'
+
+const months = [
+	{
+		includeData: true,
+		startDate: '02/02/2018',
+		endDate: '02/28/2018',
+		daysInBill: '27',
+		usage: 'Yes',
+		fUA: '10',
+	},
+	{
+		includeData: true,
+		startDate: '03/01/2018',
+		endDate: '03/31/2018',
+		daysInBill: '31',
+		usage: 'Modest',
+		fUA: '30',
+	},
+]
+
+export function EnergyUseHistoryChart() {
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead className="w-[100px]">#</TableHead>
+					<TableHead>Include Data</TableHead>
+					<TableHead>Start Date</TableHead>
+					<TableHead>End Date</TableHead>
+					<TableHead>Days in Bill</TableHead>
+					<TableHead>Usage (therms)</TableHead>
+					<TableHead>60.5 °F UA (BTU/h-F)</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{months.map((month, index) => (
+					<TableRow key={index}>
+						<TableCell className="font-medium">{index + 1}</TableCell>
+						<TableCell>{month.includeData}</TableCell>
+						<TableCell>{month.startDate}</TableCell>
+						<TableCell>{month.endDate}</TableCell>
+						<TableCell>{month.daysInBill}</TableCell>
+						<TableCell>{month.usage}</TableCell>
+						<TableCell>{month.fUA}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	)
+}

heat-stack/app/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "#app/utils/misc.tsx"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}