feat: TODO's & improvements

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@solana/web3.js": "^1.95.3",
     "@tabler/icons-react": "^2.40.0",
     "@tanstack/react-table": "^8.20.5",

src/app/api/getCsvData/route.ts

@@ -1,8 +1,5 @@
-import fs from "fs";
-import path from "path";
 import { NextResponse } from "next/server";
 
-// This is just a temporary solution to serve the CSV files
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
   const tokenSymbol = searchParams.get("tokenSymbol");
@@ -16,21 +13,36 @@ export async function GET(request: Request) {
   }
 
   try {
-    const filePath = path.join(
-      process.cwd(),
-      "csv",
-      `${tokenSymbol}-${type}-model-output.csv`
-    );
+    const fileUrl = `https://storage.googleapis.com/mrgn-public/risk-model-output/${tokenSymbol}-${type}-model-output.csv`;
+    const response = await fetch(fileUrl);
 
-    if (fs.existsSync(filePath)) {
-      const csvData = fs.readFileSync(filePath, "utf8");
-      return NextResponse.json({ data: csvData }, { status: 200 });
-    } else {
-      console.error(`File not found: ${filePath}`);
+    if (response.ok) {
+      const csvData = await response.text();
+
+      return NextResponse.json(
+        { data: csvData },
+        {
+          status: 200,
+          headers: {
+            "Cache-Control":
+              "public, max-age=86400, stale-while-revalidate=43200", // Cache for 1 day, revalidate in 12 hours
+          },
+        }
+      );
+    } else if (response.status === 404) {
+      console.error(`File not found on Google Cloud Storage: ${fileUrl}`);
       return NextResponse.json({ error: "File not found" }, { status: 404 });
+    } else {
+      console.error(
+        `Failed to fetch file from Google Cloud Storage: ${fileUrl}`
+      );
+      return NextResponse.json(
+        { error: "Failed to fetch file from Google Cloud Storage" },
+        { status: response.status }
+      );
     }
   } catch (error) {
-    console.error("Error reading CSV file:", error);
+    console.error("Error fetching CSV file:", error);
     return NextResponse.json(
       { error: "Internal server error" },
       { status: 500 }

src/components/common/global-components/filter-component.tsx

@@ -0,0 +1,36 @@
+import * as dropdown from "~/components/ui/dropdown";
+import { MenuIcon } from "lucide-react";
+import * as React from "react";
+
+interface FilterComponentProps {
+  selectedFilter: string;
+  setSelectedFilter: React.Dispatch<React.SetStateAction<string>>;
+  items: string[];
+}
+export const FilterComponent = ({
+  selectedFilter,
+  setSelectedFilter,
+  items,
+}: FilterComponentProps) => {
+  return (
+    <dropdown.DropdownMenu>
+      <dropdown.DropdownMenuTrigger asChild>
+        <button className="flex outline-none items-center gap-1 justify-center w-max px-2 py-1 rounded-md border ">
+          <MenuIcon size={18} />
+          {selectedFilter}
+        </button>
+      </dropdown.DropdownMenuTrigger>
+      <dropdown.DropdownMenuContent>
+        {items.map((item) => (
+          <dropdown.DropdownMenuItem
+            onClick={() => {
+              setSelectedFilter(item);
+            }}
+          >
+            {item}
+          </dropdown.DropdownMenuItem>
+        ))}
+      </dropdown.DropdownMenuContent>
+    </dropdown.DropdownMenu>
+  );
+};

src/components/common/global-components/index.ts

@@ -0,0 +1,2 @@
+export * from "./search-component";
+export * from "./filter-component";

src/components/common/global-components/search-component.tsx

@@ -0,0 +1,24 @@
+import { Input } from "~/components/ui/input";
+
+interface SearchComponentProps {
+  value?: string;
+  setValue: React.Dispatch<React.SetStateAction<string | undefined>>;
+  placeHolder?: string;
+  className?: string;
+}
+
+export const SearchComponent = ({
+  value,
+  setValue,
+  placeHolder,
+  className,
+}: SearchComponentProps) => {
+  return (
+    <Input
+      placeholder={placeHolder}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      className={`sm:max-w-sm max-w-56 ${className}`}
+    />
+  );
+};

src/components/common/risk-model/components/index.ts

@@ -1,3 +1 @@
-export * from "./filter-component";
-export * from "./search-component";
 export * from "./table-component";