feat: Add @tanstack/react-table dependency and implement table filtering/sorting

- Add @tanstack/react-table v8.21.3 to both ARO and MCC frontends
- Implement TanStack React Table in all major table components:
  - ARO requests table with status filtering and column sorting
  - MCC ARO requests view with coordinate formatting and status colors
  - MCC telemetry data table with real-time updates and multi-column filtering
  - MCC system logs with search filtering and timestamp sorting
  - MCC mission commands with output filtering
- Add shared TypeScript types aligned with database schema
- Implement proper enum types for AROCommandStatus and other statuses
- Add responsive table design with sorting indicators
- Include error handling and loading states
- Update API integration for real data fetching

Resolves #346

Author: Ayan-Nalawade

gs/frontend/aro/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "^5.87.4",
+    "@tanstack/react-table": "^8.21.3",
     "@types/react-router-dom": "^5.3.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -30,6 +31,6 @@
     "globals": "^16.3.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
+    "vite": "^7.1.5"
   }
 }

gs/frontend/aro/package.json

@@ -1,5 +1,6 @@
 import "./new-request-form.css";
 import { type ChangeEvent, useState } from "react";
+import React from "react";
 
 const NewRequestForm = () => {
   const [latitude, setLatitude] = useState(0);
@@ -11,16 +12,42 @@ const NewRequestForm = () => {
     // TODO: Show a map centered at latitude / longitude.
   });
 
-  const handleSubmit = () => {
-    // TODO: Use the proper type for this
-    const submission = {
-      latitude,
-      longitude,
-    };
-    // TODO: Submit form to backend
-    console.log(submission);
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    
+    try {
+      const submission = {
+        latitude,
+        longitude,
 
-    alert("Thanks for submitting!");
+      };
+      
+      const response = await fetch('http://localhost:5000/aro-request', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          // NOTE TO REVIEWERS:
+          // Add authentication headers when implemented
+          // 'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify(submission),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      console.log('Request submitted successfully:', result);
+      
+      alert("Request submitted successfully! You can view it in your requests list.");
+      
+
+      
+    } catch (error) {
+      console.error('Error submitting request:', error);
+      alert("Error submitting request. Please try again.");
+    }
   };
 
   const handleLatitudeChange = (event: ChangeEvent<HTMLInputElement>) => {

gs/frontend/aro/src/new-request/new-request-form.tsx

@@ -4,20 +4,49 @@ import type { ProfileData } from "./profile-data.ts";
  * @brief Gets the profile info of the current user
  */
 export const getProfile = async (): Promise<ProfileData> => {
-  // This is a mock implementation of an API call
-  return {
-    name: "John Doe",
-    email: "john.doe@gmail.com",
-    call_sign: "VAYPO",
-    phone: "1234567890",
-  };
+  try {
+    const response = await fetch('http://localhost:5000/user/profile', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        // Add authentication headers here when implemented
+        // 'Authorization': `Bearer ${token}`
+      },
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching profile:', error);
+    throw error;
+  }
 };
 
 /**
  * @brief Updates the profile info of the current user
  * @param data The new profile data
  */
 export const updateProfile = async (data: ProfileData): Promise<void> => {
-  // This is a mock implementation of an API call
-  console.log(data);
+  try {
+    const response = await fetch('http://localhost:5000/user/profile', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        // Add authentication headers here when implemented
+        // 'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify(data),
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error('Error updating profile:', error);
+    throw error;
+  }
 };

gs/frontend/aro/src/profile/profile-api.ts

@@ -1,12 +1,23 @@
+
+export type AROCommandStatus = 
+  | 'pending' 
+  | 'scheduled' 
+  | 'taken' 
+  | 'cancelled' 
+  | 'failed' 
+  | 'completed';
+
 export interface RequestItemData {
   id: number;
-  latitude: number;
-  longitude: number;
-  status: string;
+  aro_id?: number;
+  latitude: number; 
+  longitude: number; 
+  status: AROCommandStatus; 
   created_on: Date;
   request_sent_to_obc_on: Date | null;
   pic_taken_on: Date | null;
   pic_transmitted_on: Date | null;
-  cancellable_after: Date;
+  packet_id?: number | null; 
+  cancellable_after: Date; 
   // Add more properties as needed
 }

gs/frontend/aro/src/requests/request-item-data.ts

@@ -1,28 +1,27 @@
 import type { RequestItemData } from "./request-item-data.ts";
 
 export const getRequestItems = async (): Promise<RequestItemData[]> => {
-  return [
-    {
-      id: 1,
-      status: "Pending",
-      longitude: 100,
-      latitude: 80,
-      created_on: new Date(2024, 10),
-      cancellable_after: new Date(2025, 12),
-      request_sent_to_obc_on: null,
-      pic_transmitted_on: null,
-      pic_taken_on: null,
-    },
-    {
-      id: 2,
-      status: "Pending",
-      longitude: 120,
-      latitude: 80,
-      created_on: new Date(2024, 10),
-      cancellable_after: new Date(2025, 12),
-      request_sent_to_obc_on: null,
-      pic_transmitted_on: null,
-      pic_taken_on: null,
-    },
-  ];
+  try {
+    const response = await fetch('http://localhost:5000/aro-request');
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    // Transform API response to match our interface if needed
+    return data.map((item: any) => ({
+      ...item,
+      status: item.status.toLowerCase(), // Ensure status matches our enum
+      created_on: new Date(item.created_on),
+      request_sent_to_obc_on: item.request_sent_to_obc_on ? new Date(item.request_sent_to_obc_on) : null,
+      pic_taken_on: item.pic_taken_on ? new Date(item.pic_taken_on) : null,
+      pic_transmitted_on: item.pic_transmitted_on ? new Date(item.pic_transmitted_on) : null,
+      cancellable_after: item.cancellable_after ? new Date(item.cancellable_after) : new Date(), // Calculate or get from API
+    }));
+  } catch (error) {
+    console.error('Error fetching ARO requests:', error);
+    throw error;
+  }
 };