Common patterns

CampOne uses the same handful of building blocks across nearly every screen. Once you know how a table behaves on the Bookings page, you know how it behaves on the Invoices page and the Transactions page too. This reference page walks through those shared patterns so the per-page guides don’t have to repeat them.

Tables

Most list pages — Bookings, Guests, Invoices, Transactions, Sites — present their data as a table.

• Sorting. Click any column header that has an arrow icon next to its label. The arrow shows the current direction (up for ascending, down for descending). Click again to reverse the order.
• Tabs and filters. Many tables have tabs above the header that act as quick filters: for example the Bookings page has tabs for All, Check-in today, Staying, Check-out today, Cancelled, and Waiting list. Picking a tab narrows the rows; the page title row tells you how many rows you are looking at.
• Search. The search input lives just above the table on most list pages. CampOne waits about a third of a second after you stop typing before running the search, so the table stays responsive while you type.
• Pagination. Long lists are paged. When more rows are available, paging controls appear under the table. The page size is fixed by the screen — there is no per-row page-size selector.
• Row actions. Click anywhere on a row to open the detail page or modal for that record. Action buttons inline in the row (for example Stornieren or Mahnung senden) act on that one record without opening the detail.

Search bars

Two kinds of search exist:

• Per-page search sits inside the page, just above the table. It only searches that screen’s data — bookings on Bookings, guests on Guests, invoices on Invoices.
• Global search lives in the header bar at the top. It searches bookings across the whole tenant by guest name, email, booking number, or pitch. Use it when you don’t know which screen the record is on.

Date pickers

Date fields use the browser’s native date picker. Click the field and pick a day from the popup, or type the date directly in the format the browser expects (DD.MM.YYYY in German locales). Date-range filters always have a from and a to field — leave one blank for an open-ended range.

Modals

Modals are the floating dialog boxes that open on top of the current screen for actions like create a booking, take a payment, issue a voucher, or send an email. They have:

• a title bar that names the action,
• the form or content body,
• and footer buttons — usually a primary action on the right and a Cancel / Schliessen button.

Click outside the modal or press the close icon (x) in the corner to dismiss it without saving. Pressing Escape on the keyboard does the same.

Toast notifications

When an action finishes — saving, sending, deleting, exporting — a small toast appears at the bottom-right of the screen for a few seconds.

• Green toast confirms success.
• Red toast signals an error and stays on screen until you dismiss it with the x.

Up to five toasts can stack at once; older ones drop off as new ones arrive. Toasts are status messages, not blocking dialogs — you can keep working while they are visible.

Loading states

While CampOne fetches data, you will see one of three things:

• The text Lade… or a small spinner inside the area that is loading.
• A faded version of the previous data (so you can keep reading while a refresh runs in the background).
• A loading row at the top of a table.

If a load takes more than a few seconds, your network or the CampOne server is slow — try refreshing the page.

Empty states

When a table has no rows that match your filters, the table area shows a short German message such as Keine Buchungen gefunden or Keine Plätze diesem Typ zugeordnet. Adjust your filter, clear the search, or switch tabs to see other rows.

Action buttons

Buttons follow a consistent visual hierarchy across the app:

• Primary action (filled, dark green or blue) — the main thing this screen lets you do, for example Buchung anlegen or Speichern. There is usually only one primary button per screen or modal.
• Outline / secondary action (white background with a border) — supporting actions like CSV Export, Mahnung senden, or Abbrechen.
• Destructive action (red text or red background) — irreversible actions like Stornieren or Löschen. CampOne always asks for confirmation before running these.
• Icon-only buttons in tables and headers — hover over them to see the tooltip if you are not sure what they do.

Form validation

Forms validate as you submit them. If something is wrong, the offending field is highlighted and a short German message appears next to it (for example Pflichtfeld or Ungültige E-Mail-Adresse). The form does not save until you fix every flagged field. A red toast at the bottom-right may also appear with a summary of what went wrong.

Language switcher

At the bottom of the sidebar there is a small EN / DE / FR switcher. Click a code to switch the entire admin interface to that language. The setting is per browser — guests still see your campsite’s configured guest-portal language regardless of what you pick here.

Hide-cancelled toggle

In the top header there is a circular eye icon. Click it to hide cancelled bookings across the dashboard, calendar, and lists; click it again to show them. The toggle turns green when cancelled bookings are hidden. Use it to keep your view clean during high-cancellation periods.

Tour button

The small ? button next to the eye icon starts the in-app guided tour. The tour highlights the most important parts of the interface in sequence. You can run it as many times as you like — it does not change anything in your data.

Notification bell

The bell icon at the top right of the header shows new in-app notifications: support replies, system messages, and (if push is enabled) reminders. A red dot indicates unread notifications.

User menu and logout

At the bottom of the sidebar your name is shown above a Abmelden (logout) link. Logging out signs you out of CampOne in this browser only — other devices stay signed in.

Refresh and live updates

Most pages refresh themselves automatically when you return to them after a short break. Lists and counters that depend on live data (open tasks, support inbox, self-check-in queue) update on a regular schedule of about half a minute. If you want to force an immediate refresh, switch tabs and switch back, or reload the browser tab.