# ANED Admin Panel Setup Guide

## 📋 Prerequisites

You need to set up accounts for:
1. **Neon Database** (PostgreSQL): https://neon.tech
2. **Cloudinary** (Image hosting): https://cloudinary.com

## 🔧 Setup Steps

### 1. Configure Environment Variables

Edit `.env.local` and fill in your credentials:

```bash
# Get this from Neon dashboard → Connection Details
DATABASE_URL="postgresql://user:password@ep-xxx.neon.tech/aned?sslmode=require"

# Get these from Cloudinary dashboard → Settings → Access Keys
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your_cloud_name"
CLOUDINARY_API_KEY="123456789012345"
CLOUDINARY_API_SECRET="your_secret"

# Generate a random secret:
# Run: openssl rand -base64 32
NEXTAUTH_SECRET="your_generated_secret_here"

# Set your admin credentials
ADMIN_EMAIL="admin@aned.org"
ADMIN_PASSWORD="YourSecurePassword123!"
```

### 2. Initialize Database

```bash
# Generate Prisma Client
npx prisma generate

# Push schema to Neon database
npx prisma db push

# Open Prisma Studio to view database
npx prisma studio
```

### 3. Create Admin User

Run this script to create your first admin user:

```bash
npm run create-admin
```

Or manually via Prisma Studio or SQL:
```sql
INSERT INTO "User" (id, email, password, name, "createdAt", "updatedAt")
VALUES (
  gen_random_uuid()::text,
  'admin@aned.org',
  '$2a$10$...',  -- Hash your password with bcrypt
  'Admin',
  NOW(),
  NOW()
);
```

## 📁 Admin Panel Structure

```
/admin
├── /login          - Admin login page
├── /dashboard      - Main dashboard with stats
├── /actualites     - News management
│   ├── /new        - Create new article
│   └── /[id]       - Edit article
├── /projets        - Projects management
│   ├── /new        - Create new project
│   └── /[id]       - Edit project
├── /partenaires    - Partners management
└── /messages       - Contact messages
```

## 🔑 Admin Panel Features

### Dashboard
- Total stats (articles, projects, partners, messages)
- Recent activity
- Quick actions

### News Management (Actualités)
- ✅ List all articles
- ✅ Create new article
- ✅ Edit existing article
- ✅ Delete article
- ✅ Rich text editor (TipTap)
- ✅ Image upload (Cloudinary)
- ✅ Categories management
- ✅ Publish/Draft toggle
- ✅ Featured article

### Projects Management
- ✅ CRUD operations
- ✅ Reorder projects
- ✅ Outcomes as array
- ✅ Image upload

### Partners Management
- ✅ CRUD operations
- ✅ Reorder partners
- ✅ Active/Inactive toggle
- ✅ Logo upload

### Contact Messages
- ✅ View all messages
- ✅ Mark as read/unread
- ✅ Delete messages

## 🛠️ Tech Stack

- **Database**: Neon (PostgreSQL) + Prisma ORM
- **Auth**: NextAuth.js
- **Images**: Cloudinary
- **Rich Text**: TipTap
- **Tables**: TanStack Table
- **Styling**: Tailwind CSS

## 🚀 Development Commands

```bash
# Run development server
npm run dev

# Generate Prisma client after schema changes
npx prisma generate

# Push schema changes to database
npx prisma db push

# Open database GUI
npx prisma studio

# Build for production
npm run build
```

## 🔐 Security Notes

1. **NEVER** commit `.env.local` to Git (already in .gitignore)
2. Use strong passwords for admin accounts
3. In production, use HTTPS only
4. Rotate NEXTAUTH_SECRET regularly
5. Limit admin access to trusted IPs if possible

## 📝 Next Steps

After completing setup:
1. Access admin at: http://localhost:3000/admin/login
2. Login with your admin credentials
3. Start managing content!

## 🐛 Troubleshooting

**Database connection issues:**
- Check your Neon connection string is correct
- Ensure database is active (Neon pauses inactive databases)

**Authentication not working:**
- Verify NEXTAUTH_SECRET is set
- Clear cookies and try again
- Check password is hashed correctly

**Image upload fails:**
- Verify Cloudinary credentials
- Check file size limits
- Ensure CORS is configured

## 📞 Need Help?

Check the Prisma docs: https://prisma.io/docs
Check NextAuth docs: https://next-auth.js.org
Check Cloudinary docs: https://cloudinary.com/documentation