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

```bash
# 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

```javascript
// 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

```bash
# 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