added VersionTableRow component

dashboard/src/views/Projects/Versions/components/index.tsx

@@ -1,5 +1,49 @@
-const AddNewVersionModal = () => {
-  return <div>AddNewVersion</div>;
-};
+import { Delete } from "@mui/icons-material";
+import { Button, Typography } from "@mui/joy";
+import { FC } from "react";
+import { useParams } from "react-router-dom";
+import { useDeleteVersion } from "../../../../api/hooks/useDeleteVersion";
+
+
+interface VersionTableRowProps {
+  versionId: number;
+  versionName: string;
+  createdAt: string;
+}
+
+export const VersionTableRow: FC<VersionTableRowProps> = ({
+  versionId,
+  versionName,
+  createdAt,
+}) => {
+  const formatIsoDateToLocaleString = (isoDate: string) => {
+    return new Date(isoDate).toLocaleString();
+  };
+
+  const { projectId } = useParams();
+  const { mutate: deleteVersion } = useDeleteVersion(projectId, versionId);
 
-export default AddNewVersionModal;
+  const createdAtDate = formatIsoDateToLocaleString(createdAt);
+
+  return (
+    <tr>
+      <td style={{ paddingLeft: "1.5rem" }}>
+        <Typography level="body-xs">{versionName}</Typography>
+      </td>
+
+      <td style={{ paddingLeft: "0.5rem" }}>
+        <Typography level="body-xs">{createdAtDate}</Typography>
+      </td>
+
+      <td
+        style={{
+          textAlign: "end",
+          padding: "0.5rem 5rem",
+          verticalAlign: "center",
+        }}
+      >
+        <Button sx={{ mb: "0.5rem", backgroundColor: '#0078ff' }} onClick={() => deleteVersion()}>Delete <Delete /></Button>
+      </td>
+    </tr>
+  );
+};

dashboard/src/views/Projects/Versions/index.tsx

@@ -15,7 +15,8 @@ import { useGetProject } from "../../../api/hooks/useGetProject";
 import { useGetVersions } from "../../../api/hooks/useGetVersions";
 import { PaginationSection } from "../../../components/TablePaginationSection";
 import { GetVersionsResponse } from "../../../interfaces/versions";
-import { ProjectTableRow } from "../components";
+import { VersionTableRow } from "./components";
+
 
 export const VersionsOverview = () => {
   const [searchBar, setSearchBar] = useState("");
@@ -133,10 +134,10 @@ export const VersionsOverview = () => {
           {versionsList && (
             <tbody>
               {versionsList.versions.map((version) => (
-                <ProjectTableRow
+                <VersionTableRow
                   key={version.id}
-                  id={version.id}
-                  name={version.name}
+                  versionId={version.id}
+                  versionName={version.name}
                   createdAt={version.createdAt}
                 />
               ))}