feat: add Deployment Jobs, Template Categories, Virtual Machine details and management pages

- Implemented DeploymentJobsPage for managing deployment jobs with filtering and retry functionality.
- Created TemplateCategoriesPage for managing template categories with add, edit, and delete capabilities.
- Developed VirtualMachineDetailsPage to display detailed information about a specific virtual machine.
- Added VirtualMachinesPage for listing, adding, editing, and deleting virtual machines, including linking and unlinking to domains.

src/pages/EnvironmentDetailsPage.tsx

@@ -15,8 +15,9 @@ import {
   Text,
   Title3,
   tokens,
+  Tooltip,
 } from "@fluentui/react-components";
-import { ArrowLeftRegular } from "@fluentui/react-icons";
+import { ArrowLeftRegular, OpenRegular } from "@fluentui/react-icons";
 import { Link, useParams } from "react-router-dom";
 import { portalApi } from "../api/portalApi";
 import { DataState } from "../components/DataState";
@@ -49,6 +50,11 @@ const useStyles = makeStyles({
   sectionTitle: {
     marginBottom: "12px",
   },
+  actions: {
+    display: "flex",
+    gap: "4px",
+    ...shorthands.padding("2px", "0"),
+  },
 });
 
 export function EnvironmentDetailsPage() {
@@ -85,6 +91,40 @@ export function EnvironmentDetailsPage() {
                 {data.id}
               </Text>
             </div>
+            <div className={styles.field}>
+              <Text size={200}>Environment Type</Text>
+              <Text className={styles.value} weight="semibold">
+                {data.environmentType}
+              </Text>
+            </div>
+            <div className={styles.field}>
+              <Text size={200}>Cloud Enabled</Text>
+              <Text className={styles.value} weight="semibold">
+                {data.environmentType === "OnPrem" ? "Nein" : "Ja"}
+              </Text>
+            </div>
+            <div className={styles.field}>
+              <Text size={200}>Provider Type</Text>
+              <Text className={styles.value} weight="semibold">
+                {data.environmentType === "OnPrem" ? data.providerType : ""}
+              </Text>
+            </div>
+            {data.environmentType !== "OnPrem" && (
+              <div className={styles.field}>
+                <Text size={200}>Tenant Id</Text>
+                <Text className={styles.value} weight="semibold">
+                  {data.tenantId}
+                </Text>
+              </div>
+            )}
+            {data.environmentType === "AzureTenant" && (
+              <div className={styles.field}>
+                <Text size={200}>Subscription Id</Text>
+                <Text className={styles.value} weight="semibold">
+                  {data.subscriptionId}
+                </Text>
+              </div>
+            )}
           </section>
 
           <Title3 className={styles.sectionTitle}>Linked Domains</Title3>
@@ -115,7 +155,13 @@ export function EnvironmentDetailsPage() {
                       </Badge>
                     </TableCell>
                     <TableCell>
-                      <Link to={`/domains/${link.domain!.id}`}>Oeffnen</Link>
+                      <div className={styles.actions}>
+                        <Tooltip content="Details" relationship="label">
+                          <Link to={`/domains/${link.domain!.id}`}>
+                            <Button appearance="subtle" aria-label="Details" icon={<OpenRegular />} />
+                          </Link>
+                        </Tooltip>
+                      </div>
                     </TableCell>
                   </TableRow>
                 ))}