Lovable Prompts for Building Admin panel

 
Project Initialization & Dependencies
 

• Create a main application file named admin\_panel.lov which will host all routes and core admin logic.
• Include dependency installation snippets directly in the code since Lovable.dev does not support a terminal. Make sure to add the following module imports:

// Import necessary modules for Admin Panel functionality

import "lovable-db"         // For database operations and persistent storage
import "lovable-auth"       // For secure user authentication and session management
import "lovable-ui"         // For consistent UI components and layout rendering
import "lovable-notify"     // For system notifications and alerts

• Make sure these dependencies are registered in your project’s configuration section as applicable.

 
Admin Authentication & Secure Login Flow
 

• Create an authentication route /admin/login to allow admin users to securely sign in.
• Ensure the login form includes inputs for username/email and password, along with a “Remember me” feature.
• After successful authentication, redirect the user to the secured admin dashboard at /admin/dashboard.

// Define admin login route and session logic

route("/admin/login")
{
  // Render login form with username and password fields
  renderForm({
    title: "Admin Login",
    fields: [
      { name: "username", type: "text", placeholder: "Enter admin username" },
      { name: "password", type: "password", placeholder: "Enter password" },
      { name: "rememberMe", type: "checkbox", label: "Remember me" }
    ],
    onSubmit: (formData) => {
      // Validate credentials against the admin database records using lovable-auth
      if(auth.login(formData.username, formData.password, { admin: true })) {
        session.set("admin", true)
        redirect("/admin/dashboard")
      } else {
        notify.error("Invalid credentials. Please try again.")
      }
    }
  })
}

 
Admin Dashboard Design & Navigation
 

• Create a central dashboard for admin functionalities accessible at /admin/dashboard.
• Include navigation links to various modules like Users Management, Products Management, and Orders Management.
• Display concise statistics like total users, pending orders, and notifications.

// Define the admin dashboard route

route("/admin/dashboard", { auth: true })
{
  // Render a unified dashboard interface with navigation and widgets
  renderDashboard({
    header: "Admin Panel Dashboard",
    navigation: [
      { label: "Users", url: "/admin/users" },
      { label: "Products", url: "/admin/products" },
      { label: "Orders", url: "/admin/orders" },
      { label: "Reports", url: "/admin/reports" }
    ],
    widgets: [
      { type: "stat", title: "Total Users", dataKey: "userCount" },
      { type: "stat", title: "Pending Orders", dataKey: "pendingOrders" }
    ]
  })
}

 
Users Management Module
 

• Create a user management route at /admin/users to list, add, edit, and delete user accounts.
• Implement a CRUD interface for managing user details, including role assignment and account status.
• Add filtering and sorting capabilities to quickly navigate through user records.

// Define users management route with CRUD operations

route("/admin/users", { auth: true })
{
  // Fetch user list from the database
  let users = db.fetch("users")
  
  // Render a table view with user details and action buttons
  renderTable({
    title: "Manage Users",
    data: users,
    columns: [
      { header: "Username", field: "username" },
      { header: "Email", field: "email" },
      { header: "Role", field: "role" },
      { header: "Status", field: "status" }
    ],
    actions: {
      edit: (userId) => redirect("/admin/users/edit?id=" + userId),
      delete: (userId) => {
        db.remove("users", userId)
        notify.success("User deleted successfully.")
        reload()
      }
    },
    filters: [
      { field: "role", type: "dropdown", options: ["admin", "user", "editor"] },
      { field: "status", type: "dropdown", options: ["active", "suspended"] }
    ]
  })
}

 
Products Management Module
 

• Create a products management route at /admin/products to handle product inventory, pricing, and details.
• Include a form for adding new products with fields like product name, description, price, and stock.
• Integrate functionality for editing and deleting products with confirmation prompts.

// Define products management route with listing and CRUD functionality

route("/admin/products", { auth: true })
{
  // Retrieve product list from the database
  let products = db.fetch("products")
  
  // Render products management interface
  renderTable({
    title: "Manage Products",
    data: products,
    columns: [
      { header: "Product Name", field: "name" },
      { header: "Price", field: "price" },
      { header: "Stock", field: "stock" },
      { header: "Category", field: "category" }
    ],
    actions: {
      edit: (productId) => redirect("/admin/products/edit?id=" + productId),
      delete: (productId) => {
        db.remove("products", productId)
        notify.success("Product removed successfully.")
        reload()
      }
    }
  })
  
  // Provide a button to open a modal form for adding new products
  renderFormModal({
    buttonLabel: "Add New Product",
    formFields: [
      { name: "name", type: "text", placeholder: "Enter product name" },
      { name: "description", type: "textarea", placeholder: "Enter product description" },
      { name: "price", type: "number", placeholder: "Enter price" },
      { name: "stock", type: "number", placeholder: "Enter stock quantity" },
      { name: "category", type: "text", placeholder: "Enter category" }
    ],
    onSubmit: (productData) => {
      db.insert("products", productData)
      notify.success("Product added successfully.")
      reload()
    }
  })
}

 
Orders Management Module
 

• Create an order management route at /admin/orders to view, update, and manage customer orders.
• Display order details such as order ID, customer name, order status, and total amount.
• Provide action buttons for updating order status and generating invoices.

// Define orders management route with order tracking and status updates

route("/admin/orders", { auth: true })
{
  // Retrieve orders from the database
  let orders = db.fetch("orders")
  
  // Render orders list with detailed information
  renderTable({
    title: "Manage Orders",
    data: orders,
    columns: [
      { header: "Order ID", field: "orderId" },
      { header: "Customer", field: "customerName" },
      { header: "Status", field: "status" },
      { header: "Total", field: "totalAmount" }
    ],
    actions: {
      updateStatus: (orderId) => {
        // Display status update options in a modal
        renderFormModal({
          title: "Update Order Status",
          formFields: [
            { name: "status", type: "dropdown", options: ["Pending", "Shipped", "Completed", "Cancelled"] }
          ],
          onSubmit: (updateData) => {
            db.update("orders", orderId, updateData)
            notify.success("Order status updated.")
            reload()
          }
        })
      },
      generateInvoice: (orderId) => {
        // Function to generate and display invoice for the order
        let invoice = generateInvoice(orderId)
        renderModal({ title: "Invoice", content: invoice })
      }
    }
  })
}

 
Final Touches & Error Handling
 

• Implement global error handling to catch and display any runtime errors in the admin panel.
• Integrate user notifications for successful operations and error alerts using the lovable-notify module.
• Ensure session timeouts and secure logout functionality are added for enhanced security.

// Global error handling and session management

onError((err) => {
  // Log error and show notification
  console.error(err)
  notify.error("An unexpected error occurred. Please try again later.")
})

route("/admin/logout", { auth: true })
{
  // Clear the admin session and redirect to the login page
  session.clear()
  redirect("/admin/login")
}