updates to structure, [id].tsx, moved data types into types

src/app/dashboard/dashboard-bar-chart/dashboard-bar-chart.tsx

@@ -3,7 +3,7 @@
 import { BarGraph } from '@metrostar/comet-data-viz';
 import { Spacecraft } from '../../../types/spacecraft';
 import React, { useEffect, useState } from 'react';
-import { ChartData } from '../types';
+import { ChartData } from '../../../types/data';
 
 interface DashboardBarChartProps {
   items: Spacecraft[] | undefined;

src/app/dashboard/dashboard-pie-chart/dashboard-pie-chart.tsx

@@ -3,7 +3,7 @@
 import { PieChart } from '@metrostar/comet-data-viz';
 import { Spacecraft } from '../../../types/spacecraft';
 import React, { useEffect, useState } from 'react';
-import { ChartData } from '../types';
+import { ChartData } from '../../../types/data';
 
 interface DashboardPieChartProps {
   items: Spacecraft[] | undefined;

src/app/dashboard/dashboard-table/dashboard-table.test.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import { DashboardTable } from './dashboard-table';
 import { vi } from 'vitest';
-import { Spacecraft } from 'spacecraft';
+//import { Spacecraft } from 'spacecraft';
 
 
 // Mock the DataTable component

src/app/dashboard/dashboard-table/dashboard-table.tsx

@@ -5,7 +5,7 @@ import { Spacecraft } from '../../../types/spacecraft';
 import { ColumnDef } from '@tanstack/react-table';
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { TableData } from '../types';
+import { TableData } from '../../../types/data';
 
 interface DashboardTableProps {
   items: Spacecraft[] | undefined;
@@ -16,16 +16,15 @@ export const DashboardTable = ({
 }: DashboardTableProps): React.ReactElement => {
   const [data, setData] = useState<TableData[]>();
 
-  // Ensure window-related operations run only on the client side
+
   React.useEffect(() => {
     if (typeof window !== 'undefined' && items) {
       console.log('ITEMS: ', items)
       const newData: TableData[] = [];
       items.forEach((item: Spacecraft) => {
         newData.push({
           name: (
-            // <Link id={`details-link-${item.id}`} href={`/details/${item.id}`}>
-            <Link id={`details-link-${item.id}`} href={`../../details/${item.id}`}>
+             <Link id={`details-link-${item.id}`} href={`/details/${item.id}`}>
               {item.name}
             </Link>
           ),
@@ -38,13 +37,6 @@ export const DashboardTable = ({
     }
   }, [items]);
 
-  // Log details folder to console
-  React.useEffect(() => {
-    if (typeof window !== 'undefined') {
-      console.log('Details folder:', items);
-    }
-  }, [items]);
-
   const cols = React.useMemo<ColumnDef<TableData>[]>(
     () => [
       {

src/app/details/[id].tsx

@@ -0,0 +1,88 @@
+// app/details/[id].tsx
+
+"use client";
+
+import { Spinner } from '@metrostar/comet-extras';
+import { Card } from '@metrostar/comet-uswds';
+import { mockData } from '../../data/spacecraft';
+import { Spacecraft } from '../../types/spacecraft';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+import { useRouter } from 'next/router';
+import ErrorNotification from '@components/error-notification/error-notification';
+import useAuth from '@hooks/use-auth';
+// import axios from '@src/utils/axios';
+
+export const Details = (): React.ReactElement => {
+  const router = useRouter();
+  const { id } = router.query;
+  const { isSignedIn } = useAuth();
+  const { isLoading, error, data } = useQuery<Spacecraft, { message: string }>({
+    queryKey: ['details', id],
+    queryFn: () =>
+      // axios.get(`/spacecraft/${id}`).then((response) => {
+      //   return response.data;
+      // }),
+
+      // TODO: Remove this mock response and uncomment above if API available
+      Promise.resolve(
+        mockData.items.filter((item) => item.id.toString() === id)[0],
+      ),
+    enabled: isSignedIn && !!id,
+  });
+
+  return (
+    <div className="grid-container">
+      <>
+        <div className="grid-row">
+          <div className="grid-col">
+            <h1>Details</h1>
+          </div>
+        </div>
+        {error && (
+          <div className="grid-row padding-bottom-2">
+            <div className="grid-col">
+              <ErrorNotification error={error.message} />
+            </div>
+          </div>
+        )}
+        <div className="grid-row">
+          <div className="grid-col">
+            {isLoading ? (
+              <Spinner
+                id="spinner"
+                type="small"
+                loadingText="Loading..."
+                className="padding-top-2"
+              />
+            ) : data ? (
+              <Card id="details-card">
+                <ul>
+                  <li>
+                    <b>Name:</b> {data.name}
+                  </li>
+                  <li>
+                    <b>Description:</b> {data.description}
+                  </li>
+                  <li>
+                    <b>Affiliation:</b> {data.affiliation}
+                  </li>
+                  <li>
+                    <b>Dimensions:</b> {data.dimensions}
+                  </li>
+                  <li>
+                    <b>Appearances:</b> {data.appearances}
+                  </li>
+                </ul>
+              </Card>
+            ) : (
+              <>No items found</>
+            )}
+          </div>
+        </div>
+      </>
+    </div>
+  );
+};
+
+export default Details;

src/app/details/details.test.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Details from './page';
+import Details from './[id]';
 import { vi } from 'vitest';
 
 // Mocking the hooks

src/app/dashboard/types.ts → src/types/data.ts

@@ -10,4 +10,4 @@ export interface TableData {
 export interface ChartData {
   x: string;
   y: number;
-}
+}