Commit 97c3f4ba authored by Panagiotis Chnarakis's avatar Panagiotis Chnarakis
Browse files

My Applications page creation

parent 85b914c4

portal-gui/src/app/api/apis/route.ts

+3 −95
Original line number Diff line number Diff line 
import { NextResponse } from "next/server";

import { cookies } from "next/headers";

import { IApi } from "@/app/utils/interfaces";

import { apiData } from "@/app/utils/tableHelpers";



export async function GET() {

  try {

    const apiData: IApi[] = [

      {

        id: "a1f9c7e0-2a18-4ea1-9cd1-7c82f43a1e10",

        title: "Edge Cloud Zones Discovery",

        category: "Edge Compute Resources",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 42,

        description:

          "Retrieve available edge cloud zones and their capabilities.",

      },

      {

        id: "e71c64de-4cc3-4de9-9bde-2f92e8f44129",

        title: "Quality on Demand Functions",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Registration", "Verification", "Retrieval"],

        size: 57,

        description: "Manage QoD sessions.",

      },

      {

        id: "5bcd4b95-76c7-4ad0-8aad-59c0e38dfb77",

        title: "Traffic Influence Functions",

        category: "Network QoS",

        provider: "ISI",

        functionalities: ["Verification", "Retrieval", "Removal"],

        size: 63,

        description: "Manage Traffic Influence sessions.",

      },

      {

        id: "d8a2d8fd-907a-4981-bc34-b3e22c940f13",

        title: "Quality on Demand",

        category: "Network QoS",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 51,

        description: "Manage QoD sessions.",

      },

      {

        id: "f3f2e198-0cc0-43f3-9331-6fd75b0e56a1",

        title: "Traffic Influence",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Verification", "Removal"],

        size: 48,

        description: "Manage Traffic Influence sessions.",

      },

      {

        id: "a1f9c7e0-2a18-4ea1-9cd1-7c82f4",

        title: "Zones Discovery",

        category: "Edge Compute Resources",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 28,

        description:

          "Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities.",

      },

      {

        id: "e71c64de-2f92e8f44129",

        title: "Quality Functions",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Registration", "Verification", "Retrieval"],

        size: 12,

        description: "Manage QoD sessions.",

      },

      {

        id: "5bcd4b95-76c7-4aad-59c0e38dfb77",

        title: "Influence Functions",

        category: "Network QoS",

        provider: "ISI",

        functionalities: ["Verification", "Retrieval", "Removal"],

        size: 92,

        description: "Manage Traffic Influence sessions.",

      },

      {

        id: "d8a2d8fd-907a-4981-bc322c940f13",

        title: "Demand Functions",

        category: "Network QoS",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 86,

        description: "Manage QoD sessions.",

      },

      {

        id: "f3f2e198-0cc0-43f3-9331-6fd75b0e5",

        title: "Traffic Influence",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Verification", "Removal"],

        size: 32,

        description: "Manage Traffic Influence sessions.",

      },

    ];

    const data: IApi[] = apiData;



    return NextResponse.json(apiData);

    return NextResponse.json(data);

  } catch (error) {

    return NextResponse.json(

      { error: "Internal Server Error" },

portal-gui/src/app/apis/[id]/page.tsx

+21 −15
Original line number Diff line number Diff line 
"use client";

import { IApi } from "@/app/utils/interfaces";

import Link from "next/link";

import styles from "./apiPage.module.scss";

import { backArrowIcon } from "@/app/utils/icons";

import buttons from "@/app/styles/buttons.module.scss";

import { Button } from "rsuite";

import { useRouter } from "next/navigation";



interface ApiPageProps {

  params: { id: string };

}





export default async function ApiPage({ params }: ApiPageProps) {

  const api = {

    id: "a1f9c7e0-2a18-4ea1-9cd1-7c82f4",
@@ -20,6 +22,7 @@ export default async function ApiPage({ params }: ApiPageProps) { 
    description:

      "Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities.",

  };

  const router = useRouter();



  if (!api) {

    return (
@@ -33,10 +36,13 @@ export default async function ApiPage({ params }: ApiPageProps) { 
  return (

    <div className={styles.container}>

      <div className={styles.btnBox}>



      <Link href="/" className={buttons.iconSubtle}>

         <Button

        type="button"

        className={buttons.iconSubtle}

        onClick={() => router.back()}

      >

        {backArrowIcon}

      </Link>

      </Button>

      </div>



      <h1 className={styles.title}>{api.title}</h1>
@@ -57,7 +63,7 @@ export default async function ApiPage({ params }: ApiPageProps) { 
      <p className={styles.meta}>

        <strong>Size:</strong> {api.size} <small>MB</small>

      </p>



      <Button className={buttons.primary}>Activate</Button>

      <div className={styles.descriptionBox}>

        <h3>Description</h3>

        <p>{api.description}</p>

portal-gui/src/app/components/Card/card.module.scss

+0 −26
Original line number Diff line number Diff line 
// .card {

//       background: linear-gradient(314deg, #ffffff 0%, #f4f4f4 100%);

//       padding: 1.5rem;

//       border-radius: 8px;

//       box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05);

//       height: 14rem;

//       cursor: pointer;

//       transition: all 0.2s ease;



//       &:hover {

//         box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1);

//         transform: translateY(-2px);

//       }





//       h2 {

//         color: var(--blue-color);

//         margin-bottom: 0.25rem;

//         font-size: 1.5rem;

//       }



//       .category {

//         color: var(--orange-color);

//         font-weight: bold;

//         margin-bottom: 0.5rem;

//       }

//     }

.card {

    background: linear-gradient(314deg, #ffffff 0%, #f4f4f4 100%);

    padding: 1.5rem;

portal-gui/src/app/components/Chip/StatusChip.tsx

0 → 100644
+37 −0
Original line number Diff line number Diff line 
"use client";



import React from "react";

import styles from "./chip.module.scss";



export const StatusChip = ({ status }: { status: string }) => {

  const normalized = status.toLowerCase();



   const colorClass = (() => {

    switch (normalized) {

      // API statuses

      case "active":

        return styles.active;

      case "inactive":

        return styles.inactive;

      case "maintenance":

        return styles.maintenance;

      case "deprecated":

        return styles.deprecated;



      // Deployment statuses

      case "running":

        return styles.running;

      case "deploying":

        return styles.deploying;

      case "error":

        return styles.error;

      case "stopped":

        return styles.stopped;



      default:

        return styles.defaultChip;

    }

  })();



  return <span className={`${styles.chip} ${colorClass}`}>{status.toLocaleUpperCase()}</span>;

};

portal-gui/src/app/components/Chip/chip.module.scss

0 → 100644
+49 −0
Original line number Diff line number Diff line 


.chip {

  display: inline-block;

  padding: 4px 10px;

  border-radius: 20px;

  font-size: 0.6rem;

  font-weight: 500;

  color: #fff;

}



.active {

  background-color: #7dcd7ddf;

}



.inactive {

  background-color: #6c757db9; 

}



.maintenance {

  background-color: #fdbb13a5; 

  color: #333;

}



.deprecated {

  background-color: #dd4a59d7; 

}

.running {

  background-color: #7dcd7ddf;

}



.deploying {

   background-color: #fdbb13a5; 



}



.error {

   background-color: #dd4a59d7; 



}



.stopped {

  background-color: #EDEDED;

  color: #333;

}



/* fallback */

.defaultChip {

  background-color:  #6c757db9; 

}
 
 No newline at end of file