@meshxdata/fops 0.1.54 → 0.1.57

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Resources.jsx

@@ -1,229 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import Sidebar from "../partials/Sidebar";
-import Header from "../partials/Header";
-import LogPanel from "../components/LogPanel";
-import { useResources, useResourceAction, useDeleteResource } from "../api/queries";
-import { useAuthContext } from "../utils/AuthContext";
-
-function Resources() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [actionLogs, setActionLogs] = useState([]);
-  const navigate = useNavigate();
-  const { data, isLoading } = useResources();
-  const action = useResourceAction();
-  const deleteRes = useDeleteResource();
-  const [deleteTarget, setDeleteTarget] = useState(null);
-  const { canWrite } = useAuthContext();
-  const onActionLine = useCallback((text, type) => setActionLogs((p) => [...p, { text, type }]), []);
-
-  const vms = data?.vms || [];
-  const clusters = data?.clusters || [];
-
-  const thClass = "px-5 py-3 font-semibold text-left whitespace-nowrap";
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main className="grow">
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            {/* Page header */}
-            <div className="sm:flex sm:justify-between sm:items-center mb-8">
-              <div className="mb-4 sm:mb-0">
-                <h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Registry</h1>
-              </div>
-              {canWrite && (
-                <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
-                  <button className="btn bg-gray-900 text-gray-100 hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white" onClick={() => navigate("/resources/new")}>
-                    <span>New Resource</span>
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {isLoading ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">Loading resources...</div>
-            ) : (
-              <div className="space-y-6">
-                {/* Virtual Machines */}
-                <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                  <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                    <h2 className="font-semibold text-gray-800 dark:text-gray-100">Virtual Machines <span className="text-gray-400 dark:text-gray-500 font-normal text-sm ml-1">({vms.length})</span></h2>
-                  </header>
-                  <div className="overflow-x-auto">
-                    <table className="table-auto w-full dark:text-gray-300">
-                      <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                        <tr>
-                          <th className={thClass}>Name</th>
-                          <th className={thClass}>Location</th>
-                          <th className={thClass}>Resource Group</th>
-                          <th className={thClass}>IP</th>
-                          <th className={thClass}>Status</th>
-                          <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                        {vms.length === 0 ? (
-                          <tr><td colSpan="6" className="px-5 py-8 text-center text-gray-400 dark:text-gray-500">No VMs found</td></tr>
-                        ) : vms.map((vm) => (
-                          <tr key={vm.name}>
-                            <td className="px-5 py-3 whitespace-nowrap">
-                              <div className="font-medium text-gray-800 dark:text-gray-100">{vm.name}</div>
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap">{vm.location || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{vm.resourceGroup || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{vm.publicIp || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap">
-                              <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${vm.publicIp ? "bg-green-500/20 text-green-700 dark:text-green-400" : "bg-red-500/20 text-red-700 dark:text-red-400"}`}>
-                                {vm.publicIp ? "running" : "stopped"}
-                              </span>
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-right">
-                              <div className="flex items-center justify-end gap-1">
-                                {vm.publicUrl && (
-                                  <a href={vm.publicUrl} target="_blank" rel="noreferrer" className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-violet-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600">Open</a>
-                                )}
-                                {canWrite && (
-                                  <>
-                                    <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setActionLogs([]); action.mutate({ type: "vm", name: vm.name, action: "start", onLine: onActionLine }); }} disabled={action.isPending}>Start</button>
-                                    <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setActionLogs([]); action.mutate({ type: "vm", name: vm.name, action: "stop", onLine: onActionLine }); }} disabled={action.isPending}>Stop</button>
-                                    <button className="btn-xs bg-red-500/10 border-transparent text-red-500 rounded-lg shadow-xs hover:bg-red-500/20" onClick={() => setDeleteTarget({ type: "vm", name: vm.name })}>Delete</button>
-                                  </>
-                                )}
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-
-                {/* AKS Clusters */}
-                <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                  <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                    <h2 className="font-semibold text-gray-800 dark:text-gray-100">AKS Clusters <span className="text-gray-400 dark:text-gray-500 font-normal text-sm ml-1">({clusters.length})</span></h2>
-                  </header>
-                  <div className="overflow-x-auto">
-                    <table className="table-auto w-full dark:text-gray-300">
-                      <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                        <tr>
-                          <th className={thClass}>Name</th>
-                          <th className={thClass}>Location</th>
-                          <th className={thClass}>K8s</th>
-                          <th className={thClass}>HA Pairing</th>
-                          <th className={thClass}>Storage</th>
-                          <th className={thClass}>Key Vault</th>
-                          <th className={thClass}>Postgres</th>
-                          <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                        {clusters.length === 0 ? (
-                          <tr><td colSpan="8" className="px-5 py-8 text-center text-gray-400 dark:text-gray-500">No clusters found</td></tr>
-                        ) : clusters.map((c) => {
-                          const standbyName = c.ha?.standbyCluster;
-                          const primaryName = c.isStandby ? c.primaryCluster : null;
-                          return (
-                          <tr key={c.name}>
-                            <td className="px-5 py-3 whitespace-nowrap">
-                              <div className="flex items-center gap-2">
-                                <span className="font-medium text-gray-800 dark:text-gray-100">{c.name}</span>
-                                {c.active && <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-600 dark:text-violet-400">active</span>}
-                                {c.isStandby && <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-yellow-500/20 text-yellow-600 dark:text-yellow-400">standby</span>}
-                              </div>
-                              {c.domain && <div className="text-xs text-gray-400 dark:text-gray-500">{c.domain}</div>}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap">{c.location || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{c.kubernetesVersion || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {standbyName ? (
-                                <div>
-                                  <span className="text-green-600 dark:text-green-400">HA enabled</span>
-                                  <div className="text-gray-400 dark:text-gray-500 mt-0.5">standby: {standbyName}</div>
-                                  {c.ha?.standbyRegion && <div className="text-gray-400 dark:text-gray-500">{c.ha.standbyRegion}</div>}
-                                </div>
-                              ) : primaryName ? (
-                                <div>
-                                  <span className="text-yellow-600 dark:text-yellow-400">Standby of</span>
-                                  <div className="text-gray-400 dark:text-gray-500 mt-0.5">{primaryName}</div>
-                                </div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {c.storageHA ? (
-                                <div>
-                                  <div className="font-mono">{c.storageHA.sourceAccount}</div>
-                                  {c.storageHA.destAccount && (
-                                    <div className="text-gray-400 dark:text-gray-500 mt-0.5">replica: {c.storageHA.destAccount} ({c.storageHA.destRegion})</div>
-                                  )}
-                                </div>
-                              ) : c.storageAccount ? (
-                                <div className="font-mono">{c.storageAccount}</div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {c.vault ? (
-                                <div>
-                                  <div className="font-mono">{c.vault.keyVaultName}</div>
-                                  <div className="text-gray-400 dark:text-gray-500 mt-0.5">
-                                    {c.vault.autoUnseal ? "auto-unseal" : "manual"} · {c.vault.initialized ? "initialized" : "pending"}
-                                  </div>
-                                </div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {c.postgres ? (
-                                <div className="font-mono">{c.postgres.serverName}</div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-right">
-                              {canWrite && <button className="btn-xs bg-red-500/10 border-transparent text-red-500 rounded-lg shadow-xs hover:bg-red-500/20" onClick={() => setDeleteTarget({ type: "cluster", name: c.name })}>Delete</button>}
-                            </td>
-                          </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <LogPanel lines={actionLogs} title="Action Output" />
-
-            {/* Delete modal */}
-            {deleteTarget && (
-              <div className="fixed inset-0 bg-gray-900/70 z-50 flex items-center justify-center p-4">
-                <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">
-                  <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Delete {deleteTarget.type === "vm" ? "VM" : "Cluster"}</h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
-                    Are you sure you want to delete <strong className="text-gray-800 dark:text-gray-100">{deleteTarget.name}</strong>? This action cannot be undone.
-                  </p>
-                  <div className="flex justify-end gap-2">
-                    <button className="btn border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600" onClick={() => setDeleteTarget(null)}>Cancel</button>
-                    <button className="btn bg-red-500 text-white hover:bg-red-600" disabled={deleteRes.isPending} onClick={() => { setActionLogs([]); deleteRes.mutate({ type: deleteTarget.type, name: deleteTarget.name, onLine: onActionLine }, { onSuccess: () => setDeleteTarget(null) }); }}>
-                      {deleteRes.isPending ? "Deleting..." : "Delete"}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export default Resources;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/Header.jsx

@@ -1,132 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { useAuth0 } from "@auth0/auth0-react";
-import ThemeToggle from "../components/ThemeToggle";
-import { useAuthContext } from "../utils/AuthContext";
-
-function UserMenu() {
-  const { logout } = useAuth0();
-  const { user, roles, isAdmin, canWrite } = useAuthContext();
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
-
-  const initials = (user?.name || user?.email || "?")
-    .split(/[\s@]+/)
-    .slice(0, 2)
-    .map((s) => s[0]?.toUpperCase())
-    .join("");
-
-  const roleBadge = isAdmin ? "Admin" : canWrite ? "Operator" : "Viewer";
-  const badgeColor = isAdmin
-    ? "bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300"
-    : canWrite
-      ? "bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-300"
-      : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300";
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center space-x-2 text-sm focus:outline-none"
-      >
-        {user?.picture ? (
-          <img src={user.picture} alt="" className="w-8 h-8 rounded-full" />
-        ) : (
-          <div className="w-8 h-8 rounded-full bg-violet-500 text-white flex items-center justify-center text-xs font-bold">
-            {initials}
-          </div>
-        )}
-        <span className="hidden sm:block text-gray-700 dark:text-gray-200 font-medium truncate max-w-[120px]">
-          {user?.name || user?.email}
-        </span>
-        <svg className="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-
-      {open && (
-        <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
-          <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-700">
-            <p className="text-sm font-medium text-gray-800 dark:text-gray-100 truncate">
-              {user?.name || user?.email}
-            </p>
-            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{user?.email}</p>
-            <div className="mt-1.5 flex flex-wrap gap-1">
-              <span className={`inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded ${badgeColor}`}>
-                {roleBadge}
-              </span>
-              {roles.filter((r) => r !== "admin").map((r) => (
-                <span key={r} className="inline-block text-[10px] font-medium px-1.5 py-0.5 rounded bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
-                  {r}
-                </span>
-              ))}
-            </div>
-          </div>
-          <button
-            onClick={() => logout({ logoutParams: { returnTo: window.location.origin + "/cloud" } })}
-            className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50"
-          >
-            Sign out
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function Header({ sidebarOpen, setSidebarOpen, variant = "default" }) {
-  const { user } = useAuthContext();
-  return (
-    <header
-      className={`sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30 ${variant === "v2" ? "before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10 dark:before:bg-gray-800" : "max-lg:shadow-xs lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90"}`}
-    >
-      <div className="px-4 sm:px-6 lg:px-8">
-        <div className={`flex items-center justify-between h-16 ${variant !== "v2" ? "lg:border-b border-gray-200 dark:border-gray-700/60" : ""}`}>
-          {/* Left side */}
-          <div className="flex">
-            <button
-              className="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 lg:hidden"
-              aria-controls="sidebar"
-              aria-expanded={sidebarOpen}
-              onClick={(e) => {
-                e.stopPropagation();
-                setSidebarOpen(!sidebarOpen);
-              }}
-            >
-              <span className="sr-only">Open sidebar</span>
-              <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <rect x="4" y="5" width="16" height="2" />
-                <rect x="4" y="11" width="16" height="2" />
-                <rect x="4" y="17" width="16" height="2" />
-              </svg>
-            </button>
-          </div>
-
-          {/* Right side */}
-          <div className="flex items-center space-x-3">
-            <ThemeToggle />
-            <hr className="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none" />
-            {user?.sub !== "local" && (
-              <>
-                <UserMenu />
-                <hr className="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none" />
-              </>
-            )}
-            <a href="/" className="text-xs text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 font-medium">
-              &larr; fops
-            </a>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-export default Header;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/Sidebar.jsx

@@ -1,174 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { NavLink, useLocation } from "react-router-dom";
-
-function Sidebar({ sidebarOpen, setSidebarOpen }) {
-  const location = useLocation();
-  const { pathname } = location;
-
-  const trigger = useRef(null);
-  const sidebar = useRef(null);
-
-  const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
-  const [sidebarExpanded, setSidebarExpanded] = useState(
-    storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
-  );
-
-  useEffect(() => {
-    const clickHandler = ({ target }) => {
-      if (!sidebar.current || !trigger.current) return;
-      if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) return;
-      setSidebarOpen(false);
-    };
-    document.addEventListener("click", clickHandler);
-    return () => document.removeEventListener("click", clickHandler);
-  });
-
-  useEffect(() => {
-    const keyHandler = ({ keyCode }) => {
-      if (!sidebarOpen || keyCode !== 27) return;
-      setSidebarOpen(false);
-    };
-    document.addEventListener("keydown", keyHandler);
-    return () => document.removeEventListener("keydown", keyHandler);
-  });
-
-  useEffect(() => {
-    localStorage.setItem("sidebar-expanded", sidebarExpanded);
-    if (sidebarExpanded) {
-      document.querySelector("body").classList.add("sidebar-expanded");
-    } else {
-      document.querySelector("body").classList.remove("sidebar-expanded");
-    }
-  }, [sidebarExpanded]);
-
-  const navItems = [
-    {
-      to: "/",
-      label: "Registry",
-      icon: (
-        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 2v10h10V3H3Zm2 2h6v2H5V5Zm0 4h6v2H5V9Z" />
-        </svg>
-      ),
-    },
-    {
-      to: "/fleet",
-      label: "Fleet",
-      icon: (
-        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M8 0a1 1 0 0 1 1 1v2.1A5.002 5.002 0 0 1 13 8a5 5 0 0 1-5 5 5 5 0 0 1-5-5 5.002 5.002 0 0 1 4-4.9V1a1 1 0 0 1 1-1ZM6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z" />
-        </svg>
-      ),
-    },
-    {
-      to: "/costs",
-      label: "Costs",
-      icon: (
-        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6Z" />
-          <path d="M9 4H7v4.4l3.2 2.4.8-1.2L9 8V4Z" />
-        </svg>
-      ),
-    },
-    {
-      to: "/audit",
-      label: "Audit",
-      icon: (
-        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M8 0L1 3v5c0 4.1 3 7.4 7 8 4-0.6 7-3.9 7-8V3L8 0Zm0 2.2l5 2.1v4.2c0 3-2.2 5.6-5 6.2-2.8-0.6-5-3.2-5-6.2V4.3l5-2.1Zm2.3 4L7 9.5 5.7 8.2l-1 1L7 11.5l4.3-4.3-1-1Z" />
-        </svg>
-      ),
-    },
-  ];
-
-  return (
-    <div className="min-w-fit">
-      {/* Sidebar backdrop (mobile only) */}
-      <div
-        className={`fixed inset-0 bg-gray-900/30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${sidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`}
-        aria-hidden="true"
-      />
-
-      {/* Sidebar */}
-      <div
-        id="sidebar"
-        ref={sidebar}
-        className={`flex lg:flex! flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:w-64! shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-64"} border-r border-gray-200 dark:border-gray-700/60`}
-      >
-        {/* Sidebar header */}
-        <div className="flex justify-between mb-10 pr-3 sm:px-2">
-          <button
-            ref={trigger}
-            className="lg:hidden text-gray-500 hover:text-gray-400"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            aria-controls="sidebar"
-            aria-expanded={sidebarOpen}
-          >
-            <span className="sr-only">Close sidebar</span>
-            <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
-            </svg>
-          </button>
-          {/* Logo */}
-          <NavLink end to="/" className="block">
-            <svg className="fill-violet-500" xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32">
-              <path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z" />
-              <path d="M16 8a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm0 14a6 6 0 1 1 6-6 6 6 0 0 1-6 6Z" />
-              <circle cx="16" cy="16" r="3" />
-            </svg>
-          </NavLink>
-        </div>
-
-        {/* Links */}
-        <div className="space-y-8">
-          <div>
-            <h3 className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
-              <span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
-                &bull;&bull;&bull;
-              </span>
-              <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">Cloud</span>
-            </h3>
-            <ul className="mt-3">
-              {navItems.map((item) => (
-                <li key={item.to} className="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0">
-                  <NavLink
-                    end={item.to === "/"}
-                    to={item.to}
-                    className={({ isActive }) =>
-                      `block text-gray-800 dark:text-gray-100 truncate transition ${isActive ? "" : "hover:text-gray-900 dark:hover:text-white"}`
-                    }
-                  >
-                    {({ isActive }) => (
-                      <div className="flex items-center">
-                        <div className={isActive ? "text-violet-500" : "text-gray-400 dark:text-gray-500"}>
-                          {item.icon}
-                        </div>
-                        <span className={`text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200 ${isActive ? "text-violet-500" : ""}`}>
-                          {item.label}
-                        </span>
-                      </div>
-                    )}
-                  </NavLink>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        {/* Expand / collapse button */}
-        <div className="pt-3 hidden lg:inline-flex 2xl:hidden justify-end mt-auto">
-          <div className="w-12 pl-4 pr-3 py-2">
-            <button className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400" onClick={() => setSidebarExpanded(!sidebarExpanded)}>
-              <span className="sr-only">Expand / collapse sidebar</span>
-              <svg className={`shrink-0 fill-current text-gray-400 dark:text-gray-600 sidebar-expanded:rotate-180`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-                <path d="M6.7 14.7l1.4-1.4L3.8 9H16V7H3.8l4.3-4.3-1.4-1.4L0 8z" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Sidebar;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/SidebarLinkGroup.jsx

@@ -1,21 +0,0 @@
-import React, { useState } from 'react';
-
-function SidebarLinkGroup({
-  children,
-  activecondition,
-}) {
-
-  const [open, setOpen] = useState(activecondition);
-
-  const handleClick = () => {
-    setOpen(!open);
-  }
-
-  return (
-    <li className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${activecondition && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'}`}>
-      {children(handleClick, open)}
-    </li>
-  );
-}
-
-export default SidebarLinkGroup;