SkyArtShop/docs/ADMIN_QUICK_REFERENCE.md

Quick Reference - Admin Panel Usage Guide

🚀 Getting Started

Login to Admin Panel

URL: http://localhost:5000/admin/login.html

📊 Admin Sections Overview

1. Dashboard (/admin/dashboard.html)

• View statistics (products, projects, blog posts, pages count)
• Quick access tiles to all sections
• Features: Live stats, quick navigation

2. Homepage Editor (/admin/homepage.html)

• Configure homepage sections
• Enable/disable hero, promotion, portfolio sections
• Set titles, descriptions, CTAs
• Publishes to: /api/homepage/settings

3. Products (/admin/products.html)

• ✅ Create new products
• ✅ Edit existing products
• ✅ Delete products
• ✅ Set active/inactive status
• ✅ Mark as bestseller
• Publishes to: /api/products (only active products)

4. Portfolio (/admin/portfolio.html)

• ✅ Add portfolio projects
• ✅ Edit projects
• ✅ Delete projects
• ✅ Set active/inactive status
• ✅ Categorize projects
• Publishes to: /api/portfolio/projects (only active projects)

5. Blog (/admin/blog.html)

• ✅ Create blog posts
• ✅ Edit posts
• ✅ Delete posts
• ✅ Publish/unpublish
• ✅ Auto-generate slugs
• ✅ SEO meta fields
• Publishes to: /api/blog/posts (only published posts)

6. Custom Pages (/admin/pages.html)

• ✅ Create custom pages
• ✅ Edit page content
• ✅ Delete pages
• ✅ Set active/inactive
• ✅ Custom slugs
• ✅ SEO optimization
• Publishes to: /api/pages (only active pages)

7. Menu (/admin/menu.html)

• ✅ Add menu items
• ✅ Edit menu items
• ✅ Reorder via drag-and-drop
• ✅ Show/hide items
• ✅ Set custom icons
• Publishes to: /api/menu (only visible items)

8. Settings (/admin/settings.html)

• Configure site name, tagline
• Set contact information
• Timezone settings
• Homepage display options
• Publishes to: /api/settings

9. Users (/admin/users.html)

• ✅ Create admin users
• ✅ Edit user accounts
• ✅ Change passwords
• ✅ Activate/deactivate users
• ✅ Assign roles (Cashier, Accountant, Admin, MasterAdmin)
• View user permissions

🔄 Content Publishing Workflow

Step-by-Step: Publishing a Product

1. Login → Dashboard → Products
2. Click "Add New Product"
3. Fill in details:
   • Name (required)
   • Description
   • Price (required)
   • Stock quantity
   • Category
   • Toggle "Active" = ON ✅
   • Toggle "Best Seller" (optional)
4. Click "Save & Publish"
5. ✅ Product is now live on frontend at /api/products

Step-by-Step: Publishing a Blog Post

1. Login → Dashboard → Blog
2. Click "Create Blog Post"
3. Fill in:
   • Title (auto-generates slug)
   • Slug (customizable)
   • Excerpt
   • Content
   • Meta title & description (SEO)
   • Toggle "Published" = ON ✅
4. Click "Save & Publish"
5. ✅ Post appears at /api/blog/posts and /api/blog/posts/:slug

Step-by-Step: Creating a Custom Page

1. Login → Dashboard → Custom Pages
2. Click "Create Custom Page"
3. Enter:
   • Title
   • Slug (URL-friendly name)
   • Content (full HTML supported)
   • Meta title & description
   • Toggle "Active" = ON ✅
4. Click "Save & Publish"
5. ✅ Page accessible at /api/pages/:slug

🔐 Authentication & Session

Session Details

• Duration: 24 hours
• Storage: PostgreSQL database
• Cookie Name: skyartshop.sid
• Auto-logout: After 24 hours of inactivity

Troubleshooting Login Issues

# Clear session data
DELETE FROM session WHERE expire < NOW();

# Restart backend
pm2 restart skyartshop

# Clear browser cookies
# In browser: DevTools → Application → Cookies → Clear

📡 API Endpoints Reference

Admin API (Requires Authentication)

POST   /api/admin/login
GET    /api/admin/session
POST   /api/admin/logout

GET    /api/admin/dashboard/stats
GET    /api/admin/products
POST   /api/admin/products
PUT    /api/admin/products/:id
DELETE /api/admin/products/:id

GET    /api/admin/portfolio/projects
POST   /api/admin/portfolio/projects
PUT    /api/admin/portfolio/projects/:id
DELETE /api/admin/portfolio/projects/:id

GET    /api/admin/blog
POST   /api/admin/blog
PUT    /api/admin/blog/:id
DELETE /api/admin/blog/:id

GET    /api/admin/pages
POST   /api/admin/pages
PUT    /api/admin/pages/:id
DELETE /api/admin/pages/:id

GET    /api/admin/menu
POST   /api/admin/menu

GET    /api/admin/settings
POST   /api/admin/settings

GET    /api/admin/homepage/settings
POST   /api/admin/homepage/settings

Public API (No Authentication)

GET /api/products              - Active products
GET /api/products/featured     - Featured products
GET /api/products/:id          - Single product

GET /api/portfolio/projects    - Active portfolio projects

GET /api/blog/posts            - Published blog posts
GET /api/blog/posts/:slug      - Single blog post

GET /api/pages                 - Active custom pages
GET /api/pages/:slug           - Single custom page

GET /api/menu                  - Visible menu items
GET /api/homepage/settings     - Homepage configuration
GET /api/settings              - Public site settings

🎨 Publishing to Frontend

How Content Flows

Admin Panel → Database (with status flag) → Public API → Frontend Display

Status Flags

• Products: isactive = true
• Portfolio: isactive = true
• Blog: ispublished = true
• Pages: isactive = true
• Menu: visible = true

Frontend Integration Example

// Fetch products on shop page
fetch('/api/products')
  .then(res => res.json())
  .then(data => {
    // data.products contains all active products
    renderProducts(data.products);
  });

// Fetch blog posts
fetch('/api/blog/posts')
  .then(res => res.json())
  .then(data => {
    // data.posts contains all published posts
    renderBlogPosts(data.posts);
  });

🛠️ Common Tasks

Adding a New Product

1. Products → Add New Product
2. Fill: Name, Description, Price, Stock
3. Toggle Active = ON
4. Save & Publish
✅ Appears on /api/products

Creating Blog Content

1. Blog → Create Blog Post
2. Enter: Title, Content, Excerpt
3. Toggle Published = ON
4. Save & Publish
✅ Appears on /api/blog/posts

Building Navigation Menu

1. Menu → Add Menu Item
2. Enter: Label, URL, Icon (optional)
3. Toggle Visible = ON
4. Drag to reorder
5. Save Order
✅ Appears on /api/menu

Configuring Homepage

1. Homepage Editor
2. Enable/disable sections
3. Set titles, descriptions, CTAs
4. Upload images (if applicable)
5. Save Changes
✅ Updates /api/homepage/settings

📋 Testing Checklist

After making changes, verify:

• Content appears in admin panel list
• Content is marked as active/published
• Public API returns the content (curl http://localhost:5000/api/...)
• Frontend displays the new content
• Session persists when navigating between sections
• No console errors in browser DevTools

🚨 Troubleshooting

"Getting Logged Out When Clicking Navigation"

✅ Fixed! All pages now use shared authentication (auth.js)

"Content Not Appearing on Frontend"

Check:

1. Is content marked as Active/Published in admin?
2. Test public API: curl http://localhost:5000/api/products
3. Check browser console for errors
4. Verify database record has isactive=true or ispublished=true

"Changes Not Saving"

1. Check browser console for errors
2. Verify session is active (look for 401 errors)
3. Try logging out and back in
4. Check backend logs: pm2 logs skyartshop

"API Returns Empty Array"

Normal if no content has been created yet. Add content via admin panel.

📞 Support Commands

# Restart backend
pm2 restart skyartshop

# View backend logs
pm2 logs skyartshop

# Check backend status
pm2 status

# Test all endpoints
cd /media/pts/Website/SkyArtShop/backend
./test-navigation.sh

# Clear sessions
psql -d skyartshop -c "DELETE FROM session WHERE expire < NOW();"

---

Last Updated: December 13, 2025
Version: 1.0.0
Status: ✅ Fully Operational