+ Loading...
+
+ );
+ }
+
+ const correspondingLabelNames: string[] = matchLabelNames(
+ labels,
+ attribute.data.labelIds
+ );
+
+ return (
+
+
+
+ {attribute?.data.name}
+
+ {formatDateString(attribute.data.createdAt)}
+
+
+
+ {correspondingLabelNames.map((name) => {
+ return [{name}] ;
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/AttributesWPagination.tsx b/frontend/src/pages/AttributesWPagination.tsx
new file mode 100644
index 0000000..821e4e7
--- /dev/null
+++ b/frontend/src/pages/AttributesWPagination.tsx
@@ -0,0 +1,69 @@
+import {
+ DataResponse,
+ FilterQueryParamsPagination,
+ getAllAttributesPagination,
+} from "@/services/attributesService";
+import { DataTable } from "@/ui/components/custom/DataTable/DataTable";
+import { columns } from "@/ui/components/custom/DataTable/columns";
+import FilterPanel from "@/ui/components/custom/FilterPanel/FilterPanel";
+import Pagination from "@/ui/components/custom/Pagination/Pagination";
+import { Card, CardContent } from "@/ui/components/shadcn/ui/card";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+export default function AttributesWPagination() {
+ const [filterObject, setFilterObject] = useState
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
new file mode 100644
index 0000000..e9faac9
--- /dev/null
+++ b/frontend/src/pages/Home.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Home() {
+ return
+
+
+
+ {isLoading || !attributes ? (
+
+
+ Loading...
+ ) : ( +
+
+
+ HomePage
;
+}
diff --git a/frontend/src/services/attributesService.ts b/frontend/src/services/attributesService.ts
new file mode 100644
index 0000000..f11e408
--- /dev/null
+++ b/frontend/src/services/attributesService.ts
@@ -0,0 +1,80 @@
+const BASE_URL = "http://127.0.0.1:3000";
+
+export type DataResponse = {
+ data: Array
+
+
+
+ );
+}
diff --git a/frontend/src/ui/components/custom/DataTable/columns.tsx b/frontend/src/ui/components/custom/DataTable/columns.tsx
new file mode 100644
index 0000000..a50876f
--- /dev/null
+++ b/frontend/src/ui/components/custom/DataTable/columns.tsx
@@ -0,0 +1,104 @@
+import { Attribute, deleteAttribute } from "@/services/attributesService";
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "../../shadcn/ui/button";
+import {
+ AlertDialog,
+ AlertDialogTrigger,
+ AlertDialogContent,
+ AlertDialogTitle,
+ AlertDialogDescription,
+ AlertDialogCancel,
+ AlertDialogAction,
+ AlertDialogHeader,
+ AlertDialogFooter,
+} from "../../shadcn/ui/alert-dialog";
+import { TrashIcon } from "@radix-ui/react-icons";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatDateString } from "@/helpers/dateFormatter";
+import { Link } from "react-router-dom";
+import { matchLabelNames } from "@/helpers/matchLabelNames";
+import { labels } from "../../../../../../backend/src/labels/data";
+
+export const columns: ColumnDef
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/ui/components/custom/Header/Header.tsx b/frontend/src/ui/components/custom/Header/Header.tsx
new file mode 100644
index 0000000..2c653cb
--- /dev/null
+++ b/frontend/src/ui/components/custom/Header/Header.tsx
@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import Logo from "./../../../../assets/meiro_logo.jpeg";
+
+function Header() {
+ return (
+
+
+
+
;
+}
diff --git a/frontend/src/ui/components/shadcn/ui/alert-dialog.tsx b/frontend/src/ui/components/shadcn/ui/alert-dialog.tsx
new file mode 100644
index 0000000..29b025a
--- /dev/null
+++ b/frontend/src/ui/components/shadcn/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/ui/components/shadcn/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+ React.ElementRef
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes