Estoy haciendo un programa en electron con vite.
y todo tiene que ser local nada de internet.
y tengo una base de datos que guarda las cosas como insumos recetas productos reportes.
Pero ahora necesito crear como para que hayan usuarios, nobles y plebeyos xD
los que tienen mayor rango pueden editar las recetas los productos los precios y demas...
los plebeyos q son los cajeros en este restaurante solo pueden hacer el ticket de lo que se vende o sea cobrar lo que se diga.

Y necesito hacer que al inicio del programa me muestre esto del login, de crear nuevos usuarios.

obvio que la primera vez el primero sera un noble xD
este noble tambien le podra dar privilegios a otros.
const path = require('path');
const { app } = require('electron');
const Database = require('better-sqlite3');

const dbPath = path.join(app.getPath('userData'), 'data.db');
const db = new Database(dbPath);

// Crear tabla ingredientes
db.prepare(`
  CREATE TABLE IF NOT EXISTS ingredientes (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    nombre TEXT NOT NULL,
    cantidad REAL NOT NULL,
    unidad TEXT NOT NULL,
    precio REAL DEFAULT 0
  )
`).run();

db.prepare(`
  CREATE TABLE IF NOT EXISTS productos (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    nombre TEXT NOT NULL,
    precio REAL DEFAULT 0
  )
`).run();

db.prepare(`
  CREATE TABLE IF NOT EXISTS producto_insumo (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    producto_id INTEGER NOT NULL,
    ingrediente_id INTEGER NOT NULL,
    cantidad REAL NOT NULL,
    FOREIGN KEY(producto_id) REFERENCES productos(id),
    FOREIGN KEY(ingrediente_id) REFERENCES ingredientes(id)
  )
`).run();

module.exports = db;


// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  ping: () => ipcRenderer.invoke('ping'),

  getIngredientes: () => ipcRenderer.invoke('get-ingredientes'),
  addIngrediente: (ingrediente) => ipcRenderer.invoke('add-ingrediente', ingrediente),

  getProductos: () => ipcRenderer.invoke('get-productos'),
  addProducto: (producto) => ipcRenderer.invoke('add-producto', producto),
  eliminarProducto: (id) => ipcRenderer.invoke('eliminar-producto', id),

  addProductoInsumo: (data) => ipcRenderer.invoke('add-producto-insumo', data),
  getRecetaProducto: (productoId) => ipcRenderer.invoke('get-receta-producto', productoId),

  onExportInsumos: (callback) => ipcRenderer.on('menu-exportar-insumos', callback),
  onExportProductos: (callback) => ipcRenderer.on('menu-exportar-productos', callback),
  onExportVentas: (callback) => ipcRenderer.on('menu-exportar-ventas', callback),
});



const { app, BrowserWindow, ipcMain, Menu } = require('electron');
const path = require('path');
const db = require('./db/database');

function createMenu() {
  const isMac = process.platform === 'darwin';

  const template = [
    ...(isMac
      ? [{
          label: app.name,
          submenu: [{ role: 'quit', label: 'Salir' }],
        }]
      : [{
          label: 'Archivo',
          submenu: [{ role: 'quit', label: 'Salir' }],
        }]
    ),
    {
      label: 'Exportar',
      submenu: [
        {
          label: 'Exportar Insumos',
          click: () => {
            const focusedWindow = BrowserWindow.getFocusedWindow();
            if (focusedWindow) focusedWindow.webContents.send('menu-exportar-insumos');
          }
        },
        {
          label: 'Exportar Productos',
          click: () => {
            const focusedWindow = BrowserWindow.getFocusedWindow();
            if (focusedWindow) focusedWindow.webContents.send('menu-exportar-productos');
          }
        },
        {
          label: 'Exportar Ventas',
          enabled: false,
          click: () => {
            const focusedWindow = BrowserWindow.getFocusedWindow();
            if (focusedWindow) focusedWindow.webContents.send('menu-exportar-ventas');
          }
        }
      ]
    },
    {
      label: 'Vista',
      submenu: [
        {
          label: 'Recargar',
          accelerator: 'CmdOrCtrl+R',
          click: (_, focusedWindow) => {
            if (focusedWindow) focusedWindow.reload();
          }
        }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
}

function createWindow() {
  const win = new BrowserWindow({
    width: 1024,
    height: 768,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    }
  });

  if (app.isPackaged) {
    win.loadFile(path.join(__dirname, '../../dist/index.html'));
  } else {
    win.loadURL('http://localhost:5173');
    win.webContents.openDevTools();
  }

  createMenu();
}

app.whenReady().then(() => {
  createWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

// IPC handlers
ipcMain.handle('ping', () => 'pong');

ipcMain.handle('get-ingredientes', () => {
  return db.prepare('SELECT * FROM ingredientes').all();
});

ipcMain.handle('add-ingrediente', (_, ingrediente) => {
  const stmt = db.prepare(
    'INSERT INTO ingredientes (nombre, cantidad, unidad, precio) VALUES (?, ?, ?, ?)'
  );
  const info = stmt.run(ingrediente.nombre, ingrediente.cantidad, ingrediente.unidad, ingrediente.precio);
  return { id: info.lastInsertRowid, ...ingrediente };
});

ipcMain.handle('get-productos', () => {
  return db.prepare('SELECT * FROM productos').all();
});

ipcMain.handle('add-producto', (_, producto) => {
  const stmt = db.prepare('INSERT INTO productos (nombre, precio) VALUES (?, ?)');
  const info = stmt.run(producto.nombre, producto.precio);
  return { id: info.lastInsertRowid, ...producto };
});

ipcMain.handle('add-producto-insumo', (_, data) => {
  const { producto_id, ingrediente_id, cantidad } = data;
  const stmt = db.prepare('INSERT INTO producto_insumo (producto_id, ingrediente_id, cantidad) VALUES (?, ?, ?)');
  const info = stmt.run(producto_id, ingrediente_id, cantidad);
  return { id: info.lastInsertRowid, producto_id, ingrediente_id, cantidad };
});

ipcMain.handle('get-receta-producto', (_, producto_id) => {
  const stmt = db.prepare(`
    SELECT i.*, pi.cantidad FROM producto_insumo pi
    JOIN ingredientes i ON i.id = pi.ingrediente_id
    WHERE pi.producto_id = ?
  `);
  return stmt.all(producto_id);
});

ipcMain.handle('eliminar-producto', (_, id) => {
  const stmt = db.prepare('DELETE FROM productos WHERE id = ?');
  const info = stmt.run(id);
  return info.changes > 0;
});


supongo que debo crear una pagina login que muestre todo en el inciio pero no se como.