zyket 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zyket",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -31,8 +31,10 @@
     "node-dependency-injection": "^3.2.6",
     "pg": "^8.20.0",
     "prompts": "^2.4.2",
+    "prop-types": "^15.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-router-dom": "^7.14.0",
     "redis": "^5.11.0",
     "sequelize": "^6.37.8",
     "socket.io": "^4.8.3",
@@ -41,6 +43,7 @@
     "swagger-ui-express": "^5.0.1",
     "tailwindcss": "^4.2.2",
     "umzug": "^3.8.2",
-    "vite": "^8.0.2"
+    "vite": "^8.0.2",
+    "zustand": "^5.0.12"
   }
 }

package/src/extensions/bullboard/index.js

@@ -7,16 +7,17 @@ const basicAuth = require('express-basic-auth')
 module.exports = class BullBoardExtension  extends Extension {
   path;
 
-  constructor({ path = '/bullboard' } = {}) {
+  constructor({ path = '/bullboard', basePath = '' } = {}) {
     super("BullBoardExtension");
     this.path = path || '/bullboard';
+    this.basePath = basePath;
   }
 
   load(container) {
     if (!container.get('bullmq')) return container.get('logger').warn('BullBoardExtension: bullmq service not found, skipping BullBoard setup');
     const bull = container.get('bullmq')
     const serverAdapter = new ExpressAdapter()
-    serverAdapter.setBasePath(this.path)
+    serverAdapter.setBasePath(this.basePath + this.path)
 
     createBullBoard({
       queues: Object.values(bull.queues).map(queue => new BullMQAdapter(queue)),

package/src/services/vite/index.js

@@ -1,6 +1,7 @@
 const Service = require("../Service");
 const path = require("path");
 const fs = require("fs");
+const EnvManager = require("../../utils/EnvManager");
 
 module.exports = class Vite extends Service {
   #container;
@@ -68,6 +69,47 @@ module.exports = class Vite extends Service {
     if (!fs.existsSync(path.join(viteRoot, "styles.css"))) {
       this.#container.get('template-manager').installFile('default/frontend/styles', path.join(process.cwd(), process.env.VITE_ROOT || "frontend", "styles.css"));
     }
+
+    // Install src directory if it doesn't exist
+    if (!fs.existsSync(path.join(viteRoot, "src"))) {
+      this.#installSrcFiles(viteRoot);
+    }
+  }
+
+  #installSrcFiles(viteRoot) {
+    const templateManager = this.#container.get('template-manager');
+    const srcFiles = Object.keys(templateManager.templates).filter(key => 
+      key.startsWith('default/frontend/src/')
+    );
+
+    for (const fileKey of srcFiles) {
+      const template = templateManager.templates[fileKey];
+      // Extract the path after 'default/frontend/'
+      const relativePath = template.route.replace(/^default\/frontend\//, '');
+      const targetPath = path.join(viteRoot, relativePath);
+      
+      // Create directory if it doesn't exist
+      const targetDir = path.dirname(targetPath);
+      if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+      }
+      
+      // Write the file
+      fs.writeFileSync(targetPath, template.content);
+      this.#container.get('logger').info(`Installed template file: ${relativePath}`);
+    }
+
+    // Add VITE_API_BASE to .env file
+    this.#addViteApiBaseToEnv();
+  }
+
+  #addViteApiBaseToEnv() {
+    const envPath = path.join(process.cwd(), '.env');
+    const added = EnvManager.addEnvVariable(envPath, 'VITE_API_BASE', 'http://localhost:3000');
+    
+    if (added) {
+      this.#container.get('logger').info('Added VITE_API_BASE to .env file');
+    }
   }
 
   server() {

package/src/templates/default/frontend/main.jsx

@@ -1,6 +1,15 @@
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import AuthLayout from './src/layouts/auth'
+import LandingLayout from './src/layouts/landing'
 import './styles.css'
+import PanelLayout from './src/layouts/panel'
 
-createRoot(document.getElementById('root')).render(<div>
-  <p className='underline text-red-500 text-3xl m-4'>Test</p>
-</div>)
+createRoot(document.getElementById('root')).render(<BrowserRouter>
+  <Routes>
+    <Route path="/" element={<LandingLayout />} />
+    <Route path="/auth/*" element={<AuthLayout />} />
+    <Route path="/panel/*" element={<PanelLayout />} />
+    <Route path="*" element={<Navigate to="/" replace />} />
+  </Routes>
+</BrowserRouter>)

package/src/templates/default/frontend/src/hooks/useAuth.jsx

@@ -0,0 +1,51 @@
+import { useStoreAuth } from "../store";
+
+export default function useAuth() {
+  const context = useStoreAuth();
+  const sessionContext = context?.client?.useSession();
+
+  const { error: sessionError, isPending, isRefetching, refetch } = sessionContext || {};
+  const { user, session } = sessionContext?.data || {};
+
+  const login = async (email, password) => {
+    const { data, error } = await context.client.signIn.email({ email, password });
+    if (error) throw error;
+
+    return data;
+  };
+
+  const register = async ({ email, password, name, image }) => {
+    const payload = { email, password, name, isPublic: true };
+    if (typeof image === "string" && image.trim() !== "") payload.image = image;
+
+    const { data, error } = await context.client.signUp.email(payload);
+    if (error) throw error;
+
+    return data;
+  };
+
+  const logout = async () => {
+    await context.client.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          localStorage.removeItem('pn');
+          window.location.href = "/auth/login"
+        }
+      },
+    });
+  };
+  
+
+  return {
+    ...context,
+    login,
+    register,
+    logout,
+    error: sessionError,
+    isPending,
+    isRefetching,
+    refetch,
+    user,
+    session,
+  };
+}

package/src/templates/default/frontend/src/hooks/useLayout.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+export default function useLayout(routeList) {
+  
+  const routes = routesJSON.map((route, index) => {
+    const middlewares = route.middlewares ? [...route.middlewares].reverse() : [];
+    let element = <route.component />;
+    middlewares.forEach((middleware) => {
+        element = React.createElement(middleware, {}, element);
+    });
+    return <Route key={index} path={route.path} element={element} />;
+  });
+
+  return {
+    routes,
+  };
+}

package/src/templates/default/frontend/src/layouts/auth/index.jsx

@@ -0,0 +1,45 @@
+import { Navigate, Routes, Route } from "react-router-dom";
+import useLayout from "../../hooks/useLayout";
+import layoutRoutes from "./routes";
+
+export default function AuthLayout() {
+  const { routes } = useLayout(layoutRoutes)
+
+  return (
+    <div className="min-h-screen bg-[#080808] text-white flex items-center justify-center relative overflow-hidden">
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `
+            linear-gradient(rgba(255,107,0,0.04) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,107,0,0.04) 1px, transparent 1px)
+          `,
+          backgroundSize: "48px 48px",
+        }}
+      />
+
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_50%,rgba(255,107,0,0.08),transparent_65%)]" />
+      </div>
+
+      <div className="relative z-10 w-full max-w-sm px-8 py-10 space-y-8">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-11 h-11 bg-orange-500 rounded-md flex items-center justify-center">
+            <span className="text-black font-black text-base tracking-tighter">PY</span>
+          </div>
+          <span className="text-white font-black text-2xl tracking-widest uppercase">Pnyise</span>
+        </div>
+
+        <Routes>
+          {routes}
+          <Route path="*" element={<Navigate to="/auth" replace />} />
+        </Routes>
+      </div>
+
+      <div className="absolute bottom-6 text-xs text-zinc-700">
+        © {new Date().getFullYear()} Zyket
+      </div>
+
+    </div>
+  );
+}

package/src/templates/default/frontend/src/layouts/auth/routes.js

@@ -0,0 +1,18 @@
+import AuthView from "../../views/auth";
+import AuthRegisterView from "../../views/auth/register";
+import NotLoggedMiddleware from "../../middlewares/NotLoggedMiddleware";
+
+module.exports = [
+  {
+    name: "Auth",
+    path: "/auth",
+    component: AuthView,
+    middlewares: [NotLoggedMiddleware],
+  },
+  {
+    name: "Auth Register",
+    path: "/auth/register",
+    component: AuthRegisterView,
+    middlewares: [NotLoggedMiddleware],
+  }
+]

package/src/templates/default/frontend/src/layouts/landing/index.jsx

@@ -0,0 +1,60 @@
+import { Navigate, Routes, Route, Link } from "react-router-dom";
+import useLayout from "../../hooks/useLayout";
+
+export default function LandingLayout() {
+  const { routes } = useLayout(layoutRoutes)
+  
+
+  return (
+    <div className="min-h-screen bg-[#080808] text-white relative overflow-hidden">
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `
+            linear-gradient(rgba(255,107,0,0.04) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,107,0,0.04) 1px, transparent 1px)
+          `,
+          backgroundSize: "48px 48px",
+        }}
+      />
+
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_50%,rgba(255,107,0,0.08),transparent_65%)]" />
+      </div>
+
+      <div className="relative z-10">
+        <nav className="flex items-center justify-between px-8 py-6 max-w-7xl mx-auto">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-orange-500 rounded-md flex items-center justify-center">
+              <span className="text-black font-black text-sm tracking-tighter">PY</span>
+            </div>
+            <span className="text-white font-black text-xl tracking-widest uppercase">Pnyise</span>
+          </div>
+          
+          <div className="flex items-center gap-6">
+            <Link to="/auth" className="text-sm text-zinc-400 hover:text-white transition-colors">
+              Sign In
+            </Link>
+            <Link 
+              to="/auth" 
+              className="text-sm bg-orange-500 hover:bg-orange-600 text-black font-semibold px-4 py-2 rounded-md transition-colors"
+            >
+              Get Started
+            </Link>
+          </div>
+        </nav>
+
+        <main className="px-8 py-12">
+          <Routes>
+            {routes}
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </main>
+
+        <footer className="absolute bottom-0 w-full py-6 text-center text-xs text-zinc-700 border-t border-zinc-900">
+          © {new Date().getFullYear()} Zyket. All rights reserved.
+        </footer>
+      </div>
+    </div>
+  );
+}

package/src/templates/default/frontend/src/layouts/landing/routes.js

@@ -0,0 +1,10 @@
+import LandingView from "../../views/landing";
+
+module.exports = [
+  {
+    name: "Landing",
+    path: "/",
+    component: LandingView,
+    middlewares: [],
+  },
+];

package/src/templates/default/frontend/src/layouts/panel/index.jsx

@@ -0,0 +1,116 @@
+import { Navigate, Routes, Route, Link, useLocation } from "react-router-dom";
+import useLayout from "../../hooks/useLayout";
+import PanelDashboardView from "../../views/panel/dashboard";
+import layoutRoutes from "./routes";
+
+export default function PanelLayout() {
+  const location = useLocation();
+  const { routes } = useLayout();
+
+  const navItems = [
+    { name: "Dashboard", path: "/panel/dashboard", icon: "📊" },
+    { name: "Settings", path: "/panel/settings", icon: "⚙️" },
+  ];
+
+  const isActive = (path) => location.pathname === path;
+
+  return (
+    <div className="min-h-screen bg-[#080808] text-white flex">
+      {/* Sidebar */}
+      <aside className="w-64 bg-[#0a0a0a] border-r border-zinc-900 flex flex-col">
+        {/* Logo */}
+        <div className="px-6 py-6 border-b border-zinc-900">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-orange-500 rounded-md flex items-center justify-center">
+              <span className="text-black font-black text-sm tracking-tighter">PY</span>
+            </div>
+            <span className="text-white font-black text-lg tracking-widest uppercase">Pnyise</span>
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 px-4 py-6 space-y-2">
+          {navItems.map((item) => (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                isActive(item.path)
+                  ? "bg-orange-500 text-black font-semibold"
+                  : "text-zinc-400 hover:text-white hover:bg-zinc-900"
+              }`}
+            >
+              <span className="text-lg">{item.icon}</span>
+              <span className="text-sm">{item.name}</span>
+            </Link>
+          ))}
+        </nav>
+
+        {/* User Menu */}
+        <div className="px-4 py-4 border-t border-zinc-900">
+          <div className="flex items-center gap-3 px-4 py-3">
+            <div className="w-9 h-9 bg-zinc-800 rounded-full flex items-center justify-center">
+              <span className="text-xs font-semibold">U</span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">User</p>
+              <p className="text-xs text-zinc-500 truncate">user@example.com</p>
+            </div>
+          </div>
+          <Link
+            to="/auth"
+            className="w-full mt-2 px-4 py-2 text-sm text-zinc-400 hover:text-white hover:bg-zinc-900 rounded-lg transition-colors flex items-center justify-center"
+          >
+            Logout
+          </Link>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0 relative overflow-hidden">
+        {/* Background Grid */}
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            backgroundImage: `
+              linear-gradient(rgba(255,107,0,0.04) 1px, transparent 1px),
+              linear-gradient(90deg, rgba(255,107,0,0.04) 1px, transparent 1px)
+            `,
+            backgroundSize: "48px 48px",
+          }}
+        />
+
+        <div className="absolute inset-0 pointer-events-none">
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_50%,rgba(255,107,0,0.08),transparent_65%)]" />
+        </div>
+
+        {/* Header */}
+        <header className="relative z-10 px-8 py-6 border-b border-zinc-900 bg-[#080808]/80 backdrop-blur-sm">
+          <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold">Dashboard</h1>
+            <div className="flex items-center gap-4">
+              <button className="p-2 text-zinc-400 hover:text-white transition-colors">
+                🔔
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* Main Content Area */}
+        <main className="relative z-10 flex-1 overflow-auto">
+          <div className="p-8">
+            <Routes>
+              {routes}
+              <Route path="*" element={<Navigate to="/panel/dashboard" replace />} />
+            </Routes>
+          </div>
+        </main>
+
+        {/* Footer */}
+        <footer className="relative z-10 py-4 text-center text-xs text-zinc-700 border-t border-zinc-900">
+          © {new Date().getFullYear()} Zyket. All rights reserved.
+        </footer>
+      </div>
+    </div>
+  );
+}

package/src/templates/default/frontend/src/layouts/panel/routes.js

@@ -0,0 +1,11 @@
+import PanelDashboardView from "../../views/panel/dashboard";
+import LoggedMiddleware from "../../middlewares/LoggedMiddleware";
+
+module.exports = [
+  {
+    name: "Panel Dashboard",
+    path: "/panel/dashboard",
+    component: PanelDashboardView,
+    middlewares: [LoggedMiddleware],
+  }
+]

package/src/templates/default/frontend/src/middlewares/AdminMiddleware.jsx

@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+import { Navigate } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+
+export default function AdminMiddleware({ children }) {
+  const { user, isPending } = useAuth();
+
+  if (isPending) return null;
+  if (!user) return <Navigate to="/auth/login" />; // Change this to your desired login route
+  if (user.role !== "admin") return <Navigate to="/" />; // Change this to your desired forbidden route
+
+  return children;
+}
+
+AdminMiddleware.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/src/templates/default/frontend/src/middlewares/LoggedMiddleware.jsx

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import { Navigate } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+
+export default function LoggedMiddleware({
+  children
+}) {
+  const { user, isPending } = useAuth();
+
+  if (isPending) return null;
+  if (!user) return <Navigate to={`/auth/login`} />; // Change this to your desired login route
+
+  return children;
+}
+
+LoggedMiddleware.propTypes = {
+  children: PropTypes.node.isRequired,
+  roles: PropTypes.arrayOf(PropTypes.string),
+  loginRoute: PropTypes.string,
+  forbiddenRoute: PropTypes.string,
+};

package/src/templates/default/frontend/src/middlewares/NotLoggedMiddleware.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
+import useAuth from '../hooks/useAuth';
+
+export default function NotLoggedMiddleware ({ children }) {
+  const { user, isPending } = useAuth();
+
+  if(isPending) return null;
+  if(user) return <Navigate to={`/panel`} />; // Change this to your desired home route for logged in users
+  return children;
+}
+
+NotLoggedMiddleware.propTypes = {
+  children: PropTypes.node.isRequired
+};

package/src/templates/default/frontend/src/store/index.jsx

@@ -0,0 +1,5 @@
+import { useStoreAuth } from './storeAuth';
+
+export { useStoreAuth };
+
+

package/src/templates/default/frontend/src/store/storeAuth.jsx

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+import { createAuthClient } from "better-auth/react";
+import { adminClient } from "better-auth/client/plugins"
+
+export const useStoreAuth = create((set) => ({
+  client: createAuthClient({
+    plugins: [
+        adminClient()
+    ],
+    baseURL: `${import.meta.env.VITE_API_BASE}/api/auth/`,
+  }),
+
+  setClient: (client) => set({ client }),
+}));

package/src/templates/default/frontend/src/views/auth/index.jsx

@@ -0,0 +1,5 @@
+export default function AuthView() {
+  return (<div>
+    Auth View
+  </div>);
+}

package/src/templates/default/frontend/src/views/auth/register/index.jsx

@@ -0,0 +1,5 @@
+export default function AuthRegisterView() {
+  return (<div>
+    Auth Register View
+  </div>);
+}

package/src/templates/default/frontend/src/views/landing/index.jsx

@@ -0,0 +1,5 @@
+export default function LandingView() {
+  return (<div>
+    Landing View
+  </div>);
+}

package/src/templates/default/frontend/src/views/panel/dashboard/index.jsx

@@ -0,0 +1,5 @@
+export default function PanelDashboardView() {
+  return (<div>
+    Panel dashboard View
+  </div>);
+}

package/src/utils/EnvManager.js

@@ -39,4 +39,25 @@ module.exports = class EnvManager {
       return `${acc}${key}=${value}\n`;
     }, "");
   }
+
+  static addEnvVariable(secretsPath, key, value) {
+    // Create env file if it doesn't exist
+    if (!fs.existsSync(secretsPath)) {
+      this.createEnvFile(secretsPath);
+    }
+
+    // Read existing content
+    let envContent = fs.readFileSync(secretsPath, 'utf-8');
+
+    // Check if the key already exists
+    const keyRegex = new RegExp(`^${key}=.*$`, 'm');
+    if (keyRegex.test(envContent)) {
+      return false; // Key already exists
+    }
+
+    // Add the new environment variable
+    envContent += `${key}=${value}\n`;
+    fs.writeFileSync(secretsPath, envContent);
+    return true; // Key added successfully
+  }
 }