# Event Management Frontend

The Event Management Frontend is a native Android application developed in
Kotlin. This app provides a comprehensive calendar-based event management
system designed for seamless user interaction.

This project was created as the final assignment for **AP7PD** and **AP7MP** subjects.

It integrates with a custom backend REST API to manage users, events,
attendees, and categories effectively.

## Overview / Key Features

- **Monthly Calendar View**: View events in a grid layout by weeks and days.
- **Daily View**: Easily browse and manage daily events.
- **Event Management**: Create, edit, and delete events with support for categories and attendees.
- **User Authentication**: Register and log in with robust access and refresh
  token support, ensuring secure and seamless user sessions.
- **Error Handling**: Gracefully handles API errors, including scenarios where
  the backend is unreachable.

## Backend requirements

The application requires a running backend API for full functionality. The
backend is implemented using FastAPI in Python.

You can find the source code and detailed deployment instructions for the
backend API at: [Event Management Backend
Repository](https://git.itsdrike.com/ap7pd/event-management-backend).

> [!TIP]
> The app supports dynamic configuration of the API base URL, allowing you to
> deploy the backend on any server or cloud provider of your choice. If you
> wish to test the app from android studio, you can deploy the backend locally
> (<http://localhost:8000>) and set the base URL to `http://10.0.2.2:8000`.
> This will allow the Android emulator to access the local backend server. Note
> that this is also the default value.

## Showcase

Below is a showcase of key features and screens in the application:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin: auto;
    table-layout: fixed; /* Forces equal column widths */
  }

  th, td {
    width: 33.33%; /* Explicitly set equal widths for all columns */
    word-wrap: break-word; /* Ensures long text doesn't break layout */
    padding: 10px;
  }

  img {
    max-width: 100%; /* Scale images to fit within their container */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center images horizontally */
  }

  th {
    font-weight: bold;
    text-align: center;
  }
</style>

<table>
  <!-- First Image Row -->
  <tr>
    <th>📶 API Unreachable</th>
    <th>🔒 Login Screen</th>
    <th>🔧 Base URL Change</th>
  </tr>
  <tr>
    <td>
      <img src="showcase/01_api_unreachable.png" alt="API Unreachable" />
    </td>
    <td>
      <img src="showcase/02_login.png" alt="Login Screen" />
    </td>
    <td>
      <img src="showcase/02_login_base_url_change.png" alt="Base URL Change" />
    </td>
  </tr>
  <tr>
    <td>Error screen, shown whenever the API becomes unreachable.</td>
    <td>Login screen for user authentication.</td>
    <td>Screen to update the API base URL.</td>
  </tr>

  <!-- Second Image Row -->
  <tr>
    <th>📝 Register Screen</th>
    <th>📆 Month View</th>
    <th>📅 Day View</th>
  </tr>
  <tr>
    <td>
      <img src="showcase/03_register.png" alt="Register Screen" />
    </td>
    <td>
      <img src="showcase/04_month_view.png" alt="Month View" />
    </td>
    <td>
      <img src="showcase/05_day_view.png" alt="Day View" />
    </td>
  </tr>
  <tr>
    <td>User registration screen.</td>
    <td>Monthly calendar view to browse events.</td>
    <td>Daily event view with event details.</td>
  </tr>

  <!-- Additional Rows... -->

  <!-- Final Row -->
  <tr>
    <th colspan="3">🗑️ Notifications Cleared</th>
  </tr>
  <tr>
    <td colspan="3">
      <img src="showcase/21_notifications_cleared.png" alt="Notifications Cleared" />
    </td>
  </tr>
  <tr>
    <td colspan="3">Screen showing cleared notifications.</td>
  </tr>
</table>