Tennis Friends Admin Panel Guide

Overview

Welcome to the Tennis Friends website admin panel. This guide will help you manage your tennis school website content, events, reservations, and more.

Accessing the Admin Panel

1. Navigate to /sign-in on your website
2. Enter your admin credentials
3. You will be redirected to the admin dashboard

Language Support

The admin panel supports two languages:

• German (DE) - Default language
• English (EN) - Secondary language

Switch languages using the language toggle at the bottom of the sidebar.

---

Dashboard

The dashboard provides a quick overview of your website content:

Statistics Cards

• Pages - Total number of pages created
• Sections - Total number of content sections
• Programs - Total number of tennis programs
• Coaches - Total number of trainers
• Locations - Total number of tennis locations
• Contacts - Total contact form submissions

Quick Info

Displays your current role and email address.

Recent Contacts

Shows the latest contact form submissions with:

• Contact name and email
• Message preview
• Submission date
• Status indicator (new/read)

---

Programs

Manage your tennis programs (e.g., Kids Tennis, Adult Tennis, Camps).

Program List

View all programs with:

• Name and URL slug
• Age range
• Display order
• Published status (Published/Draft)

Creating a New Program

1. Click "+ New Program" button
2. Fill in the required fields:
   • Name - Program name (e.g., "Kids Tennis")
   • Slug - URL-friendly identifier (e.g., "kids-tennis")
   • Short Description - Brief overview for cards/listings
   • Long Description - Detailed program information
   • Age Range - Target age group (e.g., "4-14 Jahre")
   • Icon - Emoji icon for visual identification (e.g., 🎾)
   • Image URL - Path to program image
   • Order - Display position (lower numbers appear first)
   • Published - Toggle to make program visible on website

Editing a Program

• Click the Edit icon on any program row
• Modify fields as needed
• Click Save to update

Toggle Published Status

• Click the status badge to quickly toggle between Published/Draft

Deleting a Program

• Click the Delete icon
• Confirm the deletion in the dialog

---

Coaches (Trainers)

Manage your tennis coaches and trainers.

Coach List

View all coaches with:

• Name
• Title/Position
• Display order
• Active status

Creating a New Coach

1. Click "+ New Trainer" button
2. Fill in the required fields:
   • Name - Coach's full name
   • Title - Job title (e.g., "Head Coach")
   • Bio - Detailed biography
   • Image URL - Path to coach photo
   • Certifications - List of qualifications
   • Specialties - Areas of expertise
   • Order - Display position
   • Active - Toggle to show/hide on website

Managing Coach Status

• Toggle Active status to control visibility
• Inactive coaches won't appear on the public website

---

Locations

Manage your tennis court locations.

Location List

View all locations with:

• Name and URL slug
• District
• Number of courts
• Display order
• Active status

Creating a New Location

1. Click "+ New Location" button
2. Fill in the required fields:
   • Name - Full location name (e.g., "Europahalle")
   • Slug - URL identifier (e.g., "europahalle")
   • Short Name - Abbreviated name for display
   • Address - Full street address
   • District - Vienna district number
   • Description - Location details
   • Features - Amenities (e.g., "Indoor courts", "Parking")
   • Courts - Number and type of courts
   • Image URL - Path to location photo
   • Color - Calendar color code (hex format, e.g., "#3b82f6")
   • Order - Display position
   • Active - Toggle visibility

Color Coding

• Each location has a unique color
• This color appears in the calendar for events at that location
• Use distinct colors for easy identification

---

Calendar

Manage events, camps, tournaments, and training sessions.

Calendar Views

Grid View - Monthly calendar showing events by day

• Today is highlighted
• Events are color-coded by location
• Click any event to edit

List View - Chronological list of events

• Shows event details with time and location
• Easy to scan and manage

Navigation

• ‹ Back - Go to previous month
• Today - Jump to current month
• Next › - Go to next month

Creating a New Event

1. Click "+ New Event" button
2. Fill in the required fields:
   • Title - Event name
   • Description - Event details
   • Location - Select from dropdown (required)
   • Start Date/Time - When the event begins
   • End Date/Time - When the event ends
   • Reservable - Toggle to allow bookings
   • Max Participants - If reservable, set capacity
   • Price - Event cost (optional)

Event Colors

• Events automatically inherit the location's color
• This helps users identify where events take place

Editing an Event

• Click on any event in the calendar or list
• Modify the details
• Save your changes

Deleting an Event

• Click the delete icon on the event
• Confirm deletion
• Warning: This will also remove any associated reservations

---

Reservations (Bookings)

View and manage event reservations.

Statistics

• Total - All reservations
• Confirmed - Active bookings
• Cancelled - Cancelled bookings

Filtering

Filter reservations by status:

• All - Show all reservations
• Confirmed - Only active bookings
• Cancelled - Only cancelled bookings

Reservation Details

Each reservation shows:

• Event title and location
• Date and time
• Participant name
• Email address
• Phone number
• Booking date

Managing Reservations

• Click email to contact the participant
• Click phone to call directly
• Reservations are automatically confirmed when submitted

---

Contacts (Applications)

Manage contact form submissions from the website.

Statistics

• Total - All submissions
• New - Unread messages
• Read - Messages you've viewed
• Replied - Messages you've responded to

Filtering

Filter contacts by status:

• All - Show all contacts
• New - Unread messages (green)
• Read - Viewed messages (blue)
• Replied - Responded messages (purple)

Managing Contacts

• Change Status - Use dropdown to update status
• Reply - Click button to open email client
• Delete - Remove the contact submission

Best Practices

1. Check contacts regularly
2. Update status after reading
3. Mark as "Replied" after responding
4. Delete spam or irrelevant messages

---

Pages

Manage website pages and their content structure.

Page List

View all pages with:

• Title
• URL slug
• SEO title
• Display order
• Published status

Creating a New Page

1. Click "+ New Page" button
2. Fill in the required fields:
   • Title - Page title
   • Slug - URL path (e.g., "about", "contact")
   • Order - Navigation position
   • Published - Toggle visibility

Page Structure

Pages contain Sections that make up the content:

• Hero sections
• Content blocks
• Feature lists
• Call-to-action areas

Managing Pages

• Edit page details and SEO settings
• Toggle published status
• Delete pages (sections will remain but become unassigned)

---

Sections

Manage reusable content sections for pages.

Section List

View all sections with:

• Type (e.g., hero, features, cta)
• Associated page ID
• Display order
• Visibility status

Section Types

Common section types include:

• Hero - Large banner with title and CTA
• Features - Grid of feature items
• Content - Text and image blocks
• CTA - Call-to-action sections
• Gallery - Image galleries
• Testimonials - Customer reviews

Creating a New Section

1. Click "+ New Section" button
2. Select section type
3. Choose the page to assign it to
4. Add content (stored as JSON)
5. Set display order
6. Toggle visibility

Section Management

• Sections can be reused across pages
• Order determines vertical position
• Visibility controls if section appears on live site

---

Gallery

Manage images for your website.

Features

• Upload multiple images at once
• Add tags for organization
• Search and filter images
• Copy image URLs for use in content

Uploading Images

1. Click "+ Upload Images" button
2. Drag & drop files or click to browse
3. Add default tags (comma-separated)
4. Click Upload to process

Image Management

• Search - Find images by filename
• Tags - Filter by assigned tags
• Select - Click checkbox to select multiple
• Copy URL - Get image URL for use in content
• Edit - Modify alt text, tags, description
• Delete - Remove from gallery

Best Practices

1. Use descriptive filenames
2. Add relevant tags
3. Include alt text for accessibility
4. Optimize images before uploading (max 2MB recommended)

Bulk Actions

• Select multiple images
• Delete selected images at once

---

SEO

Manage search engine optimization for your pages.

SEO Score

Each page receives an SEO score (0-100%):

• 80%+ (Green) - Well optimized
• 50-79% (Amber) - Needs improvement
• Below 50% (Red) - Poor optimization

Score Factors

Points are awarded for:

1. SEO title (≤60 characters)
2. Meta description (≤160 characters)
3. Open Graph title
4. Open Graph description
5. Open Graph image
6. Structured data

SEO Fields

Basic SEO

• SEO Title - Page title for search engines (max 60 chars)
• Meta Description - Brief page description (max 160 chars)

Open Graph (Social Sharing)

• OG Title - Title shown when shared on social media
• OG Description - Description for social shares
• OG Image - Image for social previews

Advanced

• Canonical URL - Preferred URL for duplicate content
• No-Index - Prevent search engines from indexing
• Structured Data Type - Schema.org type (Organization, LocalBusiness, etc.)

SERP Preview

Use the preview tool to see how your page appears in Google search results.

Tips for Better SEO

1. Write unique titles for each page
2. Include relevant keywords naturally
3. Keep descriptions compelling and concise
4. Add Open Graph images for social sharing
5. Use structured data for rich snippets

---

Quick Reference

Common Tasks

Add a new program → Programs → + New Program

Update coach information → Coaches → Edit (pencil icon)

Create an event → Calendar → + New Event → Fill details → Save

Check reservations → Reservations → Review list

Reply to contact → Contacts → Find message → Click "Reply"

Upload photos → Gallery → + Upload Images → Select files → Upload

Improve SEO → SEO → Find page → Edit → Update meta tags

Status Indicators

Badge	Meaning
Green "Published" / "Active"	Visible on website
Gray "Draft" / "Inactive"	Hidden from public
Green dot (contacts)	New message
Blue dot (contacts)	Read message
Purple dot (contacts)	Replied

User Roles

Role	Access
Super Admin	Full access to all features
Admin	Access to all content management
Editor	Pages and sections only

---

Troubleshooting

Can't log in?

• Check your email and password
• Clear browser cookies
• Contact the super admin for password reset

Changes not appearing?

• Check if the item is published/active
• Clear your browser cache
• Wait a few minutes for CDN refresh

Images not uploading?

• Check file size (keep under 5MB)
• Ensure file is an image format (JPG, PNG, WebP)
• Try a different browser

Event not showing in calendar?

• Verify the event date is correct
• Check if the event is published
• Ensure the location is active

---

Support

For technical support or questions about the admin panel, contact your website developer or administrator.