Erstatte mock-data med database-data på Tactics og TacticsDetailed page

backend/src/index.ts

@@ -16,6 +16,7 @@ const server = new ApolloServer({
 
 const { url } = await startStandaloneServer(server, {
   listen: {
+    host: process.env.HOST ?? "0.0.0.0",
     port: Number(process.env.PORT ?? 3001),
   },
 });

frontend/src/components/tactic/TacticDetailed/RelatedTechniques/RelatedTechniques.css

@@ -119,9 +119,58 @@
 /* ===== List ===== */
 
 .related-techniques-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.related-techniques-pagination {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
+  margin-top: 14px;
+}
+
+.related-techniques-pagination span {
+  color: var(--text);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.related-techniques-pagination button {
+  width: 34px;
+  height: 34px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0;
+
+  background: var(--bg);
+  color: var(--accent);
+
+  border: 1px solid var(--border);
+  border-radius: 6px;
+
+  cursor: pointer;
+}
+
+.related-techniques-pagination button:hover:not(:disabled) {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+.related-techniques-pagination button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.related-techniques-pagination button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 
@@ -131,13 +180,14 @@
   min-width: 0;
 
   display: grid;
-  grid-template-columns: 38px 70px minmax(0, 1fr) 18px;
+  grid-template-columns: 50px minmax(0, 1fr) 18px;
+  grid-template-rows: auto 1fr;
   align-items: center;
   gap: 10px;
 
-  min-height: 48px;
+  min-height: 82px;
 
-  padding: 6px 10px;
+  padding: 12px;
 
   background: var(--bg);
 
@@ -153,8 +203,8 @@
 /* ===== Icon ===== */
 
 .related-technique-icon {
-  width: 34px;
-  height: 34px;
+  width: 50px;
+  height: 50px;
 
   display: flex;
   align-items: center;
@@ -164,6 +214,9 @@
   color: var(--accent);
 
   border-radius: 6px;
+
+  grid-column: 1;
+  grid-row: 1 / 3;
 }
 
 .related-technique-icon svg {
@@ -175,31 +228,38 @@
 /* ===== MITRE ID ===== */
 
 .related-technique-id {
-  color: var(--text);
+  min-width: 64px;
+
+  padding: 6px 8px;
+
+  background: var(--accent-soft);
+  color: var(--accent);
+
+  border-radius: 6px;
 
   font-size: 13px;
   font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+
+  grid-column: 2;
+  grid-row: 1;
 }
 
 
 /* ===== Technique text ===== */
 
 .related-technique-content {
   min-width: 0;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 .related-technique-content h3 {
-  margin-bottom: 2px;
-
+  overflow-wrap: anywhere;
   font-size: 13px;
-  font-weight: 600;
-}
-
-.related-technique-content p {
-  color: var(--text-muted);
-
-  font-size: 11px;
-  line-height: 1.3;
+  font-weight: 500;
+  text-align: center;
 }
 
 
@@ -210,6 +270,9 @@
   height: 16px;
 
   color: var(--text-muted);
+
+  grid-column: 3;
+  grid-row: 1 / 3;
 }
 
 .related-technique-row:hover .related-technique-arrow {
@@ -220,21 +283,12 @@
 /* ===== Tablet / mobile ===== */
 
 @media (max-width: 700px) {
-  .related-technique-row {
-    grid-template-columns: 36px minmax(0, 1fr) 18px;
+  .related-techniques-list {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  .related-technique-id {
-    grid-column: 2;
-  }
-
-  .related-technique-content {
-    grid-column: 2;
-  }
-
-  .related-technique-arrow {
-    grid-column: 3;
-    grid-row: 1 / 3;
+  .related-technique-row {
+    min-height: 76px;
   }
 }
 
@@ -251,7 +305,9 @@
     padding: 10px;
   }
 
-  .related-technique-content p {
-    font-size: 10px;
+  .related-technique-id {
+    min-width: 64px;
+    padding: 4px 6px;
+    font-size: 12px;
   }
 }

frontend/src/components/tactic/TacticDetailed/RelatedTechniques/RelatedTechniques.tsx

@@ -1,4 +1,5 @@
 import {
+  ChevronLeft,
   ChevronRight,
   Search,
   Shield,
@@ -16,19 +17,29 @@ type Technique = {
 type RelatedTechniquesProps = {
   tacticName: string;
   techniques: Technique[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
 };
 
 function RelatedTechniques({
   tacticName,
   techniques,
+  totalCount,
+  page,
+  pageSize,
+  onPageChange,
 }: RelatedTechniquesProps) {
+  const totalPages = Math.ceil(totalCount / pageSize);
+
   return (
     <section className="related-techniques">
       <div className="related-techniques-header">
         <div className="related-techniques-title">
           <FileText />
           <h2>
-            Related Techniques ({techniques.length})
+            Related Techniques ({totalCount})
           </h2>
         </div>
 
@@ -68,13 +79,38 @@ function RelatedTechniques({
 
             <div className="related-technique-content">
               <h3>{technique.name}</h3>
-              <p>{technique.description}</p>
             </div>
 
             <ChevronRight className="related-technique-arrow" />
           </div>
         ))}
       </div>
+
+      {totalPages > 1 && (
+        <div className="related-techniques-pagination">
+          <button
+            type="button"
+            disabled={page === 0}
+            onClick={() => onPageChange(page - 1)}
+            aria-label="Previous page"
+          >
+            <ChevronLeft size={18} />
+          </button>
+
+          <span>
+            Page {page + 1} of {totalPages}
+          </span>
+
+          <button
+            type="button"
+            disabled={page >= totalPages - 1}
+            onClick={() => onPageChange(page + 1)}
+            aria-label="Next page"
+          >
+            <ChevronRight size={18} />
+          </button>
+        </div>
+      )}
     </section>
   );
 }

frontend/src/components/tactic/TacticMain/TacticCard/TacticCard.tsx

@@ -42,7 +42,7 @@ function TacticCard({
       </div>
 
       <Link
-        to="/tactics/details"
+        to={`/tactics/${mitreId}`}
         className="tactic-card-footer"
       >
         <span>{techniqueCount} techniques</span>

frontend/src/graphql/queries/tacticQueries.ts

@@ -0,0 +1,67 @@
+import { gql, type TypedDocumentNode } from "@apollo/client";
+
+type Tactic = {
+  mitreId: string;
+  name: string;
+  description: string;
+  techniqueCount: number;
+};
+
+type TacticTechnique = {
+  mitreId: string;
+  name: string;
+  description: string;
+};
+
+type TacticDetails = {
+  mitreId: string;
+  name: string;
+  description: string;
+};
+
+type TacticsGridData = {
+  allTactics: Tactic[];
+};
+
+type TacticDetailsData = {
+  getTacticByMitreId: TacticDetails | null;
+  getTacticTechniques: {
+    items: TacticTechnique[];
+    totalCount: number;
+  };
+};
+
+type TacticDetailsVariables = {
+  mitreId: string;
+  limit: number;
+  offset: number;
+};
+
+export const GET_ALL_TACTICS: TypedDocumentNode<TacticsGridData> = gql`
+  query GetAllTactics {
+    allTactics {
+      mitreId
+      name
+      description
+      techniqueCount
+    }
+  }
+`;
+
+export const GET_TACTIC_DETAILS: TypedDocumentNode<TacticDetailsData, TacticDetailsVariables> = gql`
+  query GetTacticDetails($mitreId: String!, $limit: Int!, $offset: Int!) {
+    getTacticByMitreId(mitreId: $mitreId) {
+      mitreId
+      name
+      description
+    }
+    getTacticTechniques(mitreId: $mitreId, limit: $limit, offset: $offset) {
+      totalCount
+      items {
+        mitreId
+        name
+        description
+      }
+    }
+  }
+`;