All designs android-starter / designs
Mosque admin console

The mosque's back office, in your pocket

Majlis is the phone counterpart of IAKZ Majlis — Admin, the dashboard the volunteers of the Islamic community centre in Düsseldorf use to keep prayer times, announcements, activities, projects, members, the gallery, the Qur'an library and the donations ledger correct. It is a genuine admin console — every list searches, filters and sorts, every status is a badge, every destructive action is fenced — and because every editable string exists in Albanian, German, English and Arabic, every content editor is really four editors sharing one form. The desktop ships an in-app customizer with three looks; all three are real here, radii and typefaces included.

44 screens × 3 variations × 2 modes 264 renders at 2× 412 × 915 dp 10 desktop routes → 5 destinations
44screens, in six looks
264rendered PNGs at 2×
36contrast ratios measured
412 × 915canvas, dp
How this was drawn The three variations are the product's own customizer entries, transcribed value for value from its stylesheet — Dusk's #E31E24 →…

The three variations are the product's own customizer entries, transcribed value for value from its stylesheet — Dusk's #E31E24 → #FF6B4A gradient at 135deg with its #D4AF37 gold, Cocoa's brass on roasted brown, Mono's yellow on true black — and each carries its own radii (16/10, 12/8, 4/3) and its own typefaces (Sora·Inter, Fraunces·Inter, Space Grotesk), because in this product those are as much of a look's identity as its hue. The prayer table is the mymosq.com feed for MosqueID 1234: the 30.07.2026 row is fajr 04:08, sabah 05:02, sunrise 05:47, dhuhr 13:44 astronomical / 14:00 jamaat, asr 17:54, maghrib 21:31, isha 23:01, against Hijri 16.02.1448. The project figures are the ledger's: €86,400 of €250,000 from 214 donors, €2,150 of €5,000 from 96, €1,050 of €3,000 from 41 — €89,600 across 351 donors, and every bar is drawn at the quotient. The four activity groups and their twenty activities, the four member roles, the four albums, the eight recitations and the three PDFs are the real catalogue. Only three groups of values are derived rather than copied: the phone chrome (app bar, bottom nav, sheet, scrim, skeleton) from each look's own surfaces; the light-mode status hues, since the product ships one dark-tuned set; and the twenty-five text inks that lift a role to 4.5:1 at badge size — README.md reports all 36 measured ratios, before and after. There are no photographs in this kit and none are faked: every album cover, every avatar and the brand mark itself are drawn from CSS geometry and inline SVG.

Getting in

4

One account, one org. The brand panel is the only place the gradient carries text, and it carries a per-look veil underneath so the ink is measurable at the pale end of every gradient.

Splash
001

Splash

The one moment the app is pure gradient — the mihrab mark over the arch lattice, with the org name and the build number.

Sign in
002

Sign in

Email and password for admin@iakz-moschee.de, with the org already chosen because a volunteer only ever administers one mosque.

Sign in — rejected
003

Sign in — rejected

The fourth wrong password: the field goes red, the banner names the two attempts left, and the reset link moves up next to it.

Two-factor code
004

Two-factor code

Six digits from the authenticator app, four entered, with the 27-second resend timer that stops people hammering it.

The desk

4

The Overview destination and the two surfaces that hang off it. All twelve desktop sidebar items live in the drawer, which is why the bottom bar can carry five.

Overview
005

Overview

Today's prayer row, four numbers a board member asks about, and the three things nobody else will fix — three empty August days, a half-translated announcement, 27 unreviewed photos.

Navigation drawer
006

Navigation drawer

The desktop rail, dark in both modes: all ten routes plus users and the audit log, with the counts that make an item worth tapping.

Search
007

Search

One field across every record type: “mekteb” returns the announcement, the activity, the project and the PDF, and every result says which store it came from.

Notifications
008

Notifications

What happened while you were not looking, grouped into today and earlier, with the sync failure that caused the three empty days at the top.

Prayer times

3

A 365-day table for 2026 that admins edit per day. This is the data the whole product exists to keep correct, so it gets its own destination rather than a row in a settings page.

Prayer times
009

Prayer times

August 2026 as a month strip over the day list — the three days with no times are red, and today, 30 July, is still the selected row.

Edit a day
010

Edit a day

The seven fields for 30.07.2026, with the astronomical dhuhr shown locked at 13:44 beside the jamaat time of 14:00 the mosque actually calls.

Prayer source
011

Prayer source

mymosq.com MosqueID 1234: what the last sync brought in, what it overwrites, and the manual-override switch that protects hand-edited days.

Content

11

Announcements, activities, gallery, media and downloads share one destination and a five-tab strip, because on a phone they are one job: publish a thing in four languages. Every editor here opens on the language strip.

Announcements
012

Announcements

Nine announcements filtered to published, each row showing which of the four languages it actually has and who last touched it.

Filter and sort
013

Filter and sort

The bottom sheet the list header opens: status, language completeness, author and four sort orders, with the two active filters already counted.

Announcement editor
014

Announcement editor

The mekteb registration notice on the German tab, with the strip saying two of four languages are done and the English and Arabic bodies still empty.

Activities
015

Activities

Twenty activities across Worship, Education, Community and Dialogue, grouped as the desktop groups them, with the next occurrence on each row.

Activity editor
016

Activity editor

Mektebi për fëmijë: group, weekly recurrence, room and capacity, on the same four-language strip as every other editor.

Gallery
017

Gallery

Four albums totalling 168 photos, with covers drawn from the arch lattice rather than faked with a photograph, and Iftari 2026 still awaiting review.

Album editor
018

Album editor

Iftari 2026 in reorder mode: 27 tiles, the cover pinned first, and the caption field that also wants four languages.

Qur'an audio
019

Qur'an audio

Eight recitations with their Arabic titles set in Amiri, one hour ten minutes in total, recorded by Imam Mensur Halili.

Recitation editor
020

Recitation editor

Sūrat Yā-Sīn: the Arabic title beside its transliteration, the 14:36 file, and the publish window shared with every other content type.

Downloads
021

Downloads

The three PDFs the site offers — the statute, the membership form and the 2025 annual report — with size, download count and the German-only warning on two of them.

Selection mode
022

Selection mode

Three announcements picked: the app bar becomes a count, the bottom nav becomes publish, translate, archive and delete, and delete is the only red one.

Giving

8

Projects and donations are one destination because in this ledger a project is a fundraising purpose: every donation names one. Figures are the real ones and every bar is drawn at the quotient.

Projects
023

Projects

Three campaigns with their exact totals — €86,400 of €250,000, €2,150 of €5,000, €1,050 of €3,000 — and the donor count behind each bar.

Project editor
024

Project editor

Xhamia e re: target, currency, visibility and five milestones, two of them already passed, on the four-language strip.

Donations
025

Donations

July 2026's 37 gifts totalling €4,280, filtered by purpose, with monthly standing orders marked apart from one-off gifts.

Donation
026

Donation

Agron Musliu's €250 monthly gift to Xhamia e re, with the German Spendenquittung already issued as SP-2026-0184.

Record a donation
027

Record a donation

The form for a gift that arrived by bank transfer: amount, purpose, once or monthly, donor lookup, and the receipt toggle that defaults on above €200.

Export
028

Export

The bottom sheet that builds the CSV: date range, which columns, and the warning that donor names leave the building with it.

Purposes
029

Purposes

The five things money can be given for — sadaqah, zakat and the three projects — with the two that cannot be deleted because gifts already reference them.

Donors
030

Donors

351 donors sorted by lifetime total, with the 96 who give monthly marked, and the receipt address flagged missing on four of them.

People and the org

10

More is the fifth destination and the home of everything the bottom bar could not carry: members, users, settings and its sub-pages, the audit log and the legal corner.

More
031

More

The hub: the signed-in admin at the top, then the six routes the bottom bar has no room for, each with the count that says whether it needs you.

Members
032

Members

148 members filtered by role, with Imam Mensur Halili, the chairman and the secretary pinned above the board and the ordinary members.

Member editor
033

Member editor

Mensur Halili: role, since 2023, contact, the bio that needs all four languages, and the photo slot that is a drawn monogram because there is no photograph.

Delete — confirm
034

Delete — confirm

The dialog that will not let you remove a board member without typing nothing but reading everything: what is deleted, what is kept, and which is irreversible.

Users and roles
035

Users and roles

Five accounts against four permission sets, showing exactly which of the ten routes each set can write to, and the one account that has not signed in since March.

Settings
036

Settings

The hub: appearance, organisation profile, prayer source, users, notifications and the danger zone, in the order the desktop lists them.

Organisation
037

Organisation

IAKZ Düsseldorf's public identity — the address, the contact address, the four site languages and which one a visitor gets by default.

Appearance
038

Appearance

The customizer, and the one screen whose state is read from the html element rather than hard-coded, so a Cocoa screenshot can never claim Dusk is selected.

Audit log
039

Audit log

Who changed what, on a timeline: the prayer sync failure at 03:12, the announcement Arben saved at 21:40, and the export that left the building.

About and legal
040

About and legal

The corner German law requires — Impressum, Datenschutz, the registered association number — plus the build, the licence list and the support address.

When there is nothing, or it breaks

4

Four states drawn as carefully as the happy path, because an admin console spends real time in them: an empty group, a list still loading, a failed fetch, and a phone with no signal in a basement prayer hall.

Empty group
041

Empty group

The Dialogue group has no activities yet: the empty state names the group, says what an activity is for, and offers the one action that fixes it.

Loading
042

Loading

The donations list mid-fetch — skeleton rows that match the real row's geometry exactly, so nothing jumps when the data lands.

Could not load
043

Could not load

A 502 from the donations API: what failed, when it was last good, and a retry that does not lose the filter you had set.

Offline
044

Offline

No signal in the prayer hall: the desk still renders from cache, the two queued edits are named, and the snackbar says when they will go.

No screen matches that.

How this folder is built

Three variations, one markup

Dusk, Cocoa and Mono differ in palette and radius and typeface — 16/10 Sora, 12/8 Fraunces, 4/3 Space Grotesk with no pills at all. Not one screen file knows which is active: theme.css is the only place a variation exists.

The language strip

Every editable title and body exists in sq / de / en / ar, so every content editor opens on a four-tab strip whose dots say which translations are still missing. It is the most characteristic thing about this admin and it appears on all six editors.

Measured, not eyeballed

A badge is 11.5px bold — small text, so 4.5:1, not 3:1. Twenty-five of the thirty-six role × look combinations needed a lifted ink; README.md lists every one with the ratio before and after.

Nothing is photographed

There are no image assets in this kit. Album covers, the brand mark and the audio waveforms are CSS geometry and inline SVG on one 24px stroked grid, so the design never has a hole where a picture should be.