#13: add table info page

makefile

@@ -8,6 +8,7 @@ build:
 
 gen:
 	yarn run openapi-ts -i http://dm2.sao.ru:81/api/openapi.json -o ./src/clients/backend
+	yarn run openapi-ts -i http://dm2.sao.ru:81/admin/api/openapi.json -o ./src/clients/admin
 
 image-build:
 	docker build . -t ghcr.io/hyperleda/hyperleda-webapp:$(GIT_VERSION)

package.json

@@ -18,6 +18,7 @@
     "classnames": "^2.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.0.1",
     "react-router-dom": "^7.2.0",
     "remark-gfm": "^4.0.1",
@@ -37,4 +38,4 @@
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"
   }
-}
+}

src/.gitignore

@@ -1 +1,2 @@
-clients/backend
+clients/backend
+clients/admin

src/App.tsx

@@ -3,6 +3,8 @@ import { Footer } from "./components/ui/footer";
 import { HomePage } from "./pages/Home";
 import { SearchResultsPage } from "./pages/SearchResults";
 import { ObjectDetailsPage } from "./pages/ObjectDetails";
+import { NotFoundPage } from "./pages/NotFound";
+import { TableDetailsPage } from "./pages/TableDetails";
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -41,6 +43,18 @@ function App() {
             </Layout>
           }
         />
+        <Route
+          path="/table/:tableName"
+          element={
+            <Layout>
+              <TableDetailsPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="*"
+          element={<NotFoundPage />}
+        />
       </Routes>
     </BrowserRouter>
   );

src/components/ui/button.tsx

@@ -22,8 +22,8 @@ export const Button: React.FC<ButtonProps> = ({
       onClick={onClick}
       disabled={disabled}
       className={classNames(
-        "px-4 py-2 flex items-center bg-blue-500 text-white font-semibold rounded hover:bg-blue-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed",
-        className
+        "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white",
+        className,
       )}
     >
       {children}

src/components/ui/common-table.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import classNames from "classnames";
 
-interface Column {
+export interface Column {
     name: string;
+    renderCell?: (value: any) => React.ReactNode;
 }
 
 interface CommonTableProps {
     columns: Column[];
-    data: Record<string, string | number | undefined>[];
+    data: Record<string, any>[];
     className?: string;
     tableClassName?: string;
     headerClassName?: string;
@@ -21,15 +22,24 @@ export const CommonTable: React.FC<CommonTableProps> = ({
     data,
     className = "",
     tableClassName = "",
-    headerClassName = "",
-    columnHeaderClassName = "",
-    cellClassName = "",
+    headerClassName = "bg-gray-700 border-gray-600",
+    columnHeaderClassName = "bg-gray-600 text-white",
+    cellClassName = "text-gray-200",
     children,
 }) => {
-    const renderCell = (value: string | number | undefined): React.ReactNode => {
+    const renderCell = (value: any, column: Column): React.ReactNode => {
+        if (column.renderCell) {
+            return column.renderCell(value);
+        }
+
         if (value === undefined || value === null) {
             return <span className="text-gray-400 italic">NULL</span>;
         }
+
+        if (React.isValidElement(value)) {
+            return value;
+        }
+
         return <span>{String(value)}</span>;
     };
 
@@ -49,7 +59,7 @@ export const CommonTable: React.FC<CommonTableProps> = ({
                                 <th
                                     key={column.name}
                                     className={classNames(
-                                        "border border-gray-300 px-4 py-2 text-left font-semibold text-gray-700",
+                                        "border border-gray-300 px-2 py-1 text-center font-semibold text-gray-700",
                                         columnHeaderClassName
                                     )}
                                 >
@@ -64,8 +74,7 @@ export const CommonTable: React.FC<CommonTableProps> = ({
                             <tr
                                 key={rowIndex}
                                 className={classNames(
-                                    "hover:bg-gray-50",
-                                    rowIndex % 2 === 0 ? "bg-white" : "bg-gray-50"
+                                    "bg-gray-700 hover:bg-gray-800 transition-colors duration-150"
                                 )}
                             >
                                 {columns.map((column) => {
@@ -74,11 +83,11 @@ export const CommonTable: React.FC<CommonTableProps> = ({
                                         <td
                                             key={column.name}
                                             className={classNames(
-                                                "border border-gray-300 px-4 py-2 text-black",
-                                                cellClassName
+                                                "border border-gray-300 px-2 py-1",
+                                                cellClassName,
                                             )}
                                         >
-                                            {renderCell(cellValue)}
+                                            {renderCell(cellValue, column)}
                                         </td>
                                     );
                                 })}

src/components/ui/footer.tsx

@@ -10,7 +10,7 @@ Old version: http://leda.univ-lyon1.fr/
 `;
 
 export function Footer() {
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
 
   const toggleCollapse = () => {
     setIsCollapsed(!isCollapsed);

src/index.css

@@ -36,25 +36,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/pages/NotFound.tsx

@@ -0,0 +1,30 @@
+import { useNavigate } from "react-router-dom";
+import { Button } from "../components/ui/button";
+
+export function NotFoundPage() {
+    const navigate = useNavigate();
+
+    return (
+        <div className="min-h-screen flex items-center justify-center">
+            <div className="max-w-md w-full text-center">
+                <div className="mb-8">
+                    <h1 className="text-9xl font-bold">404</h1>
+                    <h2 className="text-2xl font-semibold mb-4">
+                        Page Not Found
+                    </h2>
+                    <p className="text-gray-400 mb-8">
+                        The page you're looking for doesn't exist or has been moved.
+                    </p>
+                </div>
+                <div className="flex justify-center">
+                    <Button
+                        onClick={() => navigate("/")}
+                        className="px-6 py-3 text-base"
+                    >
+                        Go Back Home
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

src/pages/ObjectDetails.tsx

@@ -153,7 +153,7 @@ export const ObjectDetailsPage: React.FC = () => {
     ];
 
     return (
-      <div className="space-y-6 p-6 rounded-lg">
+      <div className="space-y-6 p-4 rounded-lg">
         <div className="flex items-start space-x-6">
           {object.catalogs?.coordinates?.equatorial && (
             <AladinViewer
@@ -176,9 +176,6 @@ export const ObjectDetailsPage: React.FC = () => {
           <CommonTable
             columns={coordinatesColumns}
             data={coordinatesData}
-            headerClassName="bg-gray-700 border-gray-600"
-            columnHeaderClassName="bg-gray-600 text-white"
-            cellClassName="bg-gray-700 text-gray-200"
           >
             <h2 className="text-xl font-bold text-white">Coordinates</h2>
             <p className="text-gray-300">Celestial coordinates of the object</p>
@@ -189,9 +186,6 @@ export const ObjectDetailsPage: React.FC = () => {
           <CommonTable
             columns={redshiftColumns}
             data={redshiftData}
-            headerClassName="bg-gray-700 border-gray-600"
-            columnHeaderClassName="bg-gray-600 text-white"
-            cellClassName="bg-gray-700 text-gray-200"
           >
             <h2 className="text-xl font-bold text-white">Redshift</h2>
             <p className="text-gray-300">Redshift measurements</p>
@@ -202,9 +196,6 @@ export const ObjectDetailsPage: React.FC = () => {
           <CommonTable
             columns={velocityColumns}
             data={velocityData}
-            headerClassName="bg-gray-700 border-gray-600"
-            columnHeaderClassName="bg-gray-600 text-white"
-            cellClassName="bg-gray-700 text-gray-200"
           >
             <h2 className="text-xl font-bold text-white">Velocity</h2>
             <p className="text-gray-300">Velocity measurements with respect to different apexes</p>