use co2e everywhere and fix responsive dashboard graph layout

frontend/src/app/(main)/dashboard/page.tsx

@@ -23,57 +23,68 @@ const DashboardContent: React.FC = () => {
   const bottomLeftRef = useRef<HTMLDivElement>(null);
   const bottomRightRef = useRef<HTMLDivElement>(null);
 
+  const { summary, isSummaryLoading } = useEmissionSummary();
+
   // Function to adjust heights
+
   useEffect(() => {
+    // Function to adjust heights
     const adjustHeights = () => {
+      // Only adjust on desktop layout
+      if (window.innerWidth < 1024) return;
+
       // Reset heights before recalculating
       if (topLeftRef.current) topLeftRef.current.style.height = "auto";
       if (topRightRef.current) topRightRef.current.style.height = "auto";
       if (bottomLeftRef.current) bottomLeftRef.current.style.height = "auto";
       if (bottomRightRef.current) bottomRightRef.current.style.height = "auto";
 
-      // Wait for next frame to ensure heights have been reset
+      // Use requestAnimationFrame to ensure DOM has updated
       requestAnimationFrame(() => {
-        // Adjust only on desktop layout
-        if (window.innerWidth >= 1024) {
-          // lg breakpoint
-          // Adjust top row
-          if (topLeftRef.current && topRightRef.current) {
-            const height = Math.max(
-              topLeftRef.current.scrollHeight,
-              topRightRef.current.scrollHeight
-            );
-            topLeftRef.current.style.height = `${height}px`;
-            topRightRef.current.style.height = `${height}px`;
-          }
-
-          // Adjust bottom row
-          if (bottomLeftRef.current && bottomRightRef.current) {
-            const height = Math.max(
-              bottomLeftRef.current.scrollHeight,
-              bottomRightRef.current.scrollHeight
-            );
-            bottomLeftRef.current.style.height = `${height}px`;
-            bottomRightRef.current.style.height = `${height}px`;
-          }
+        // Adjust top row
+        if (topLeftRef.current && topRightRef.current) {
+          const height = Math.max(
+            topLeftRef.current.scrollHeight,
+            topRightRef.current.scrollHeight
+          );
+          topLeftRef.current.style.height = `${height}px`;
+          topRightRef.current.style.height = `${height}px`;
+        }
+
+        // Adjust bottom row
+        if (bottomLeftRef.current && bottomRightRef.current) {
+          const height = Math.max(
+            bottomLeftRef.current.scrollHeight,
+            bottomRightRef.current.scrollHeight
+          );
+          bottomLeftRef.current.style.height = `${height}px`;
+          bottomRightRef.current.style.height = `${height}px`;
         }
       });
     };
 
-    // Initial adjustment with a slight delay to ensure components are fully rendered
-    const timer = setTimeout(adjustHeights, 100);
+    // Run adjustment when component mounts with a longer delay
+    const initialTimer = setTimeout(adjustHeights, 700);
 
-    // Adjust on window resize
-    window.addEventListener("resize", adjustHeights);
+    // Run again after data is likely loaded
+    const dataLoadedTimer = setTimeout(adjustHeights, 2000);
+
+    // Adjust on window resize (debounced to prevent excessive calls)
+    let resizeTimer: NodeJS.Timeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(adjustHeights, 100);
+    };
+
+    window.addEventListener("resize", handleResize);
 
     // Cleanup
     return () => {
-      clearTimeout(timer);
-      window.removeEventListener("resize", adjustHeights);
+      clearTimeout(initialTimer);
+      clearTimeout(dataLoadedTimer);
+      window.removeEventListener("resize", handleResize);
     };
-  }, []);
-
-  const { summary, isSummaryLoading } = useEmissionSummary();
+  }, [summary, dateRange]);
 
   return (
     <div className="flex flex-col h-full py-0">

frontend/src/components/contacts/ContactDetailsColumns.tsx

@@ -35,7 +35,7 @@ const scopeColumn: ColumnDef<LineItem> = {
 const co2Column: ColumnDef<LineItem> = {
   accessorKey: "co2",
   header: ({ column }) => {
-    return <ColumnHeader name="CO2e" column={column} />;
+    return <ColumnHeader name="CO₂e" column={column} />;
   },
   cell: ({ row }) => {
     const value = row.getValue("co2") as number;

frontend/src/components/contacts/ContactDetailsContent.tsx

@@ -392,15 +392,15 @@ export default function ContactDetailsContent() {
                 <p className="font-bold">{summary.totalOffsetTransactions}</p>
               </div>
               <div className="p-4 flex justify-between items-center">
-                <h3 className="font-medium">Reconciled Emissions</h3>
-                <p className="font-bold">
-                  {formatNumber(summary.totalEmissions)} Kg CO<sub>2</sub>
+                <h3 className="font-medium ">Reconciled Emissions</h3>
+                <p className="font-bold ml-4 whitespace-nowrap">
+                  {formatNumber(summary.totalEmissions)} kg CO<sub>2</sub>e
                 </p>
               </div>
               <div className="p-4 flex justify-between items-center">
                 <h3 className="font-medium">Offset Emissions</h3>
-                <p className="font-bold">
-                  {summary.totalOffset.toFixed(0)} Kg CO<sub>2</sub>
+                <p className="font-bold whitespace-nowrap">
+                  {formatNumber(summary.totalOffset, "0")} kg CO<sub>2</sub>e
                 </p>
               </div>
             </div>

frontend/src/components/contacts/ContactLineItemTable.tsx

@@ -20,14 +20,21 @@ import {
 import { ChevronRight } from "lucide-react";
 import { LineItem } from "@/types";
 import { ModalDialog } from "@/components/transactions/ModalDialog";
-import { reconciledColumns, offsetColumns, unreconciledColumns } from "./ContactDetailsColumns";
+import {
+  reconciledColumns,
+  offsetColumns,
+  unreconciledColumns,
+} from "./ContactDetailsColumns";
 
 interface ContactLineItemTableProps {
   data: LineItem[];
   tableType: "reconciled" | "unreconciled" | "offsets";
 }
 
-export function ContactLineItemTable({ data, tableType }: ContactLineItemTableProps) {
+export function ContactLineItemTable({
+  data,
+  tableType,
+}: ContactLineItemTableProps) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [selectedRow, setSelectedRow] = useState<Row<LineItem> | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -64,7 +71,7 @@ export function ContactLineItemTable({ data, tableType }: ContactLineItemTablePr
     <>
       <div className="rounded-md border">
         <Table>
-          <TableHeader>
+          <TableHeader className="h-14">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
@@ -77,14 +84,18 @@ export function ContactLineItemTable({ data, tableType }: ContactLineItemTablePr
                         )}
                   </TableHead>
                 ))}
-                <TableHead key="actions"></TableHead>{/* Empty header for action column */}
+                <TableHead key="actions"></TableHead>
+                {/* Empty header for action column */}
               </TableRow>
             ))}
           </TableHeader>
           <TableBody>
             {table.getRowModel().rows.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} className="cursor-pointer hover:bg-gray-50">
+                <TableRow
+                  key={row.id}
+                  className="cursor-pointer hover:bg-gray-50"
+                >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
                       {flexRender(
@@ -126,4 +137,4 @@ export function ContactLineItemTable({ data, tableType }: ContactLineItemTablePr
       )}
     </>
   );
-}
+}

frontend/src/components/contacts/ContactTable.tsx

@@ -63,7 +63,7 @@ export default function ContactTable() {
     <>
       <div className="rounded-md border bg-white">
         <Table>
-          <TableHeader>
+          <TableHeader className="h-14">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {

frontend/src/components/dashboard/GrossEmissionsBarGraph.tsx

@@ -64,8 +64,8 @@ export default function GrossEmissionsBarGraph() {
             <CardTitle className="text-black text-4xl mb-2 font-semibold">
               Gross Emissions
             </CardTitle>
-            <CardDescription className="text-black text-4xl font-semibold font-[Arimo]">
-              {totalEmissions || 0} kg
+            <CardDescription className="text-black text-3xl font-semibold font-[Arimo]">
+              {totalEmissions || 0} kg CO₂e
             </CardDescription>
             <CardDescription className="font-[Montserrat] py-2">
               Total emissions (kg) for{" "}

frontend/src/components/dashboard/NetEmissionsBarGraph.tsx

@@ -98,8 +98,8 @@ export default function NetEmissionsBarGraph() {
             <CardTitle className="font-header text-4xl mb-2 font-semibold">
               Net Emissions
             </CardTitle>
-            <CardDescription className="text-black text-4xl font-semibold font-[Arimo]">
-              {totalEmissions || 0} kg
+            <CardDescription className="text-black text-3xl font-semibold font-[Arimo]">
+              {totalEmissions || 0} kg CO₂e
             </CardDescription>
           </div>
           <CustomLegend />

frontend/src/components/dashboard/TopEmissions.tsx

@@ -55,48 +55,48 @@ export default function TopEmissionsFactors() {
           <span className="font-bold">{formattedDateRange}</span>
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-0 py-4 lg:py-12 flex-grow flex flex-col justify-between">
-        {emissions && emissions.length > 0 ? (
-          emissions.map((factor, index) => (
-            <div
-              key={factor.rank}
-              className={`flex justify-between items-center px-4 py-2 rounded-lg ${
-                index % 2 === 0 ? "bg-green-50" : "bg-white"
-              }`}
-            >
-              <div className="flex items-center w-2/3">
-                <span className="text-2xl font-bold text-gray-800 pr-6">
-                  {factor.rank}
-                </span>
-                <span className="text-md text-gray-700">
-                  {factor.emission_factor}
-                </span>
-              </div>
-              <div className="text-lg lg:text-md font-medium w-1/3 text-right">
-                {formatNumber(factor.total_co2)} kg
-              </div>
-            </div>
-          ))
-        ) : (
-          [1, 2, 3, 4, 5].map((index) => (
-            <div
-              key={"skeleton" + index}
-              className={`flex justify-between items-center px-4 py-2 rounded-lg ${
-                index % 2 === 0 ? "bg-green-50" : "bg-white"
-              }`}
-            >
-              <div className="flex items-center w-2/3 py-5">
-                <div className="pr-6">
-                  <div className="h-6 w-6 bg-gray-200 rounded animate-pulse"></div>
+      <CardContent className="px-0 py-4 lg:py-8 flex-grow">
+        <div className="grid grid-rows-5 gap-2 h-full">
+          {emissions && emissions.length > 0
+            ? emissions.map((factor, index) => (
+                <div
+                  key={factor.rank}
+                  className={`flex justify-between items-center px-4 py-3 rounded-lg ${
+                    index % 2 === 0 ? "bg-green-50" : "bg-white"
+                  }`}
+                >
+                  <div className="flex items-start w-3/4">
+                    <span className="text-2xl font-bold text-gray-800 pr-6 pt-0.5">
+                      {factor.rank}
+                    </span>
+                    <span className="text-md text-gray-700 break-words pr-2">
+                      {factor.emission_factor}
+                    </span>
+                  </div>
+                  <div className="text-lg lg:text-md font-medium w-1/4 text-right whitespace-nowrap">
+                    {formatNumber(factor.total_co2)} kg
+                  </div>
                 </div>
-                <div>
-                  <div className="h-5 w-24 bg-gray-200 rounded animate-pulse"></div>
+              ))
+            : [1, 2, 3, 4, 5].map((index) => (
+                <div
+                  key={"skeleton" + index}
+                  className={`flex justify-between items-center px-4 py-3 rounded-lg ${
+                    index % 2 === 0 ? "bg-green-50" : "bg-white"
+                  }`}
+                >
+                  <div className="flex items-center w-3/4">
+                    <div className="pr-6">
+                      <div className="h-6 w-6 bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                    <div className="w-full">
+                      <div className="h-5 w-full max-w-xs bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                  </div>
+                  <div className="h-5 w-20 ml-auto bg-gray-200 rounded animate-pulse w-1/4 justify-end"></div>
                 </div>
-              </div>
-              <div className="h-5 w-20 ml-auto bg-gray-200 rounded animate-pulse w-1/3 justify-end"></div>
-            </div>
-          ))
-        )}
+              ))}
+        </div>
       </CardContent>
     </Card>
   );

frontend/src/components/scope-breakdown/piechart.tsx

@@ -39,7 +39,7 @@ const ScopeChart: React.FC<{
           <Cell key={`cell-${index}`} fill={`url(#${index + 1})`} />
         ))}
         <Label
-          value={`${formatNumber(totalEmissions)} kg CO2`}
+          value={`${formatNumber(totalEmissions)} kg CO₂e`}
           position="center"
           fontSize={24}
           fill="#333"

frontend/src/components/scope-breakdown/scope-breakdown.tsx

@@ -59,7 +59,7 @@ const ScopeBreakdownChart = () => {
 
   const chartConfig = {
     visitors: {
-      label: "CO2e Emissions",
+      label: "CO₂e Emissions",
     },
     ...chartData.reduce((acc, item, index) => {
       acc[`Scope${index}`] = {
@@ -98,7 +98,8 @@ const ScopeBreakdownChart = () => {
                   className={styles.legend.percentage}
                 >{`${item.percentage}%`}</p>
                 <div className={styles.legend.label}>
-                  {`${item.name} - ${formatNumber(item.value)} kg CO2e`}
+                  {`${item.name} - ${formatNumber(item.value)} kg CO`}
+                  <sub>2</sub>e
                 </div>
               </div>
             ))}

frontend/src/components/transactions/ItemForm.tsx

@@ -517,7 +517,8 @@ export default function TransactionForm() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>
-                      CO2e Amount (kg) <span className="text-red-500">*</span>
+                      CO<sub>2</sub>e Amount (kg){" "}
+                      <span className="text-red-500">*</span>
                     </FormLabel>
                     <FormControl>
                       <Input