Add group icons

app/Activity.php

@@ -2,13 +2,15 @@
 
 namespace App;
 
+use App\Nami\HasNamiField;
 use Illuminate\Database\Eloquent\Model;
-use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Activity extends Model
 {
 
+    use HasNamiField;
+
     public $fillable = ['name', 'nami_id'];
     public $timestamps = false;
 
@@ -20,7 +22,4 @@ class Activity extends Model
         return $this->belongsToMany(Subactivity::class);
     }
 
-    public static function nami(int $id): ?self {
-        return static::firstWhere('nami_id', $id);
-    }
 }

app/Http/Views/MemberView.php

@@ -13,7 +13,13 @@ use Illuminate\Http\Request;
 class MemberView {
     public function index(Request $request, array $filter) {
         return [
-            'data' => MemberResource::collection(Member::select('*')->filter($filter)->search($request->query('search', null))->with('billKind')->with('payments')->withSubscriptionName()->withIsConfirmed()->withPendingPayment()->orderByRaw('lastname, firstname')->paginate(15)),
+            'data' => MemberResource::collection(Member::select('*')
+                ->filter($filter)->search($request->query('search', null))
+                ->with('billKind')->with('payments')
+                ->withSubscriptionName()->withIsConfirmed()->withPendingPayment()->withAgeGroup()
+                ->orderByRaw('lastname, firstname')
+                ->paginate(15)
+            ),
             'toolbar' => [ ['href' => route('member.index'), 'label' => 'Zurück', 'color' => 'primary', 'icon' => 'plus'] ],
             'paymentDefaults' => ['nr' => date('Y')],
             'subscriptions' => Subscription::get()->pluck('name', 'id'),

app/Member/Member.php

@@ -160,6 +160,16 @@ class Member extends Model
         ]);
     }
 
+    public function scopeWithAgeGroup(Builder $q): Builder {
+        return $q->addSelect([
+            'age_group_icon' => Subactivity::select('slug')
+                ->join('memberships', 'memberships.subactivity_id', 'subactivities.id')
+                ->where('subactivities.is_age_group', true)
+                ->whereColumn('memberships.member_id', 'members.id')
+                ->limit(1)
+        ]);
+    }
+
     public function scopeWhereHasPendingPayment(Builder $q): Builder {
         return $q->whereHas('payments', function(Builder $q): void {
             $q->whereNeedsPayment();

app/Member/MemberResource.php

@@ -52,6 +52,7 @@ class MemberResource extends JsonResource
             'pending_payment' => $this->pending_payment ? number_format($this->pending_payment / 100, 2, ',', '.').' €' : null,
             'first_activity_id' => $this->first_activity_id,
             'first_subactivity_id' => $this->first_subactivity_id,
+            'age_group_icon' => $this->age_group_icon,
         ];
     }
 }

app/Member/Membership.php

@@ -9,5 +9,5 @@ class Membership extends Model
 {
     use HasFactory;
 
-    public $fillable = ['activity_id', 'group_id', 'member_id', 'nami_id', 'created_at'];
+    public $fillable = ['subactivity_id', 'activity_id', 'group_id', 'member_id', 'nami_id', 'created_at'];
 }

app/Nami/HasNamiField.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Nami;
+
+use Exception;
+
+trait HasNamiField
+{
+
+    public static function nami(int $id): ?self
+    {
+        $model = static::firstWhere('nami_id', $id);
+
+        if (is_null($model)) {
+            throw new Exception('Nami search on '.static::class.' with ID '.$id.' failed.');
+        }
+
+        return $model;
+    }
+
+}

app/Subactivity.php

@@ -2,18 +2,39 @@
 
 namespace App;
 
-use Illuminate\Database\Eloquent\Model;
+use App\Nami\HasNamiField;
+use Cviebrock\EloquentSluggable\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Subactivity extends Model
 {
-    use HasFactory;
 
-    public $fillable = ['name', 'nami_id'];
+    use HasFactory;
+    use HasNamiField;
+    use Sluggable;
+
+    public $fillable = ['is_age_group', 'slug', 'name', 'nami_id'];
 
     public $timestamps = false;
 
-    public function activities() {
+    public $casts = [
+        'is_age_group' => 'boolean',
+    ];
+
+    public function sluggable(): array
+    {
+        return [
+            'slug' => [
+                'source' => 'name',
+            ],
+        ];
+    }
+
+    public function activities(): BelongsToMany
+    {
         return $this->belongsToMany(Activity::class);
     }
+
 }

composer.json

@@ -14,6 +14,7 @@
     "require": {
         "php": "^7.2.5",
         "aweos/agnoster-installer": "1.0",
+        "cviebrock/eloquent-sluggable": "^8.0",
         "doctrine/dbal": "^3.1",
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^1.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "308f33b72c09fca3d6d3153bfb3cab1e",
+    "content-hash": "edaca62d8f09ce92797f46e31f41b45a",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -147,6 +147,80 @@
             ],
             "time": "2021-01-20T22:51:39+00:00"
         },
+        {
+            "name": "cocur/slugify",
+            "version": "v4.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/cocur/slugify.git",
+                "reference": "3f1ffc300f164f23abe8b64ffb3f92d35cec8307"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/cocur/slugify/zipball/3f1ffc300f164f23abe8b64ffb3f92d35cec8307",
+                "reference": "3f1ffc300f164f23abe8b64ffb3f92d35cec8307",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": ">=7.0"
+            },
+            "conflict": {
+                "symfony/config": "<3.4 || >=4,<4.3",
+                "symfony/dependency-injection": "<3.4 || >=4,<4.3",
+                "symfony/http-kernel": "<3.4 || >=4,<4.3",
+                "twig/twig": "<2.12.1"
+            },
+            "require-dev": {
+                "laravel/framework": "~5.1",
+                "latte/latte": "~2.2",
+                "league/container": "^2.2.0",
+                "mikey179/vfsstream": "~1.6.8",
+                "mockery/mockery": "^1.3",
+                "nette/di": "~2.4",
+                "phpunit/phpunit": "^5.7.27",
+                "pimple/pimple": "~1.1",
+                "plumphp/plum": "~0.1",
+                "symfony/config": "^3.4 || ^4.3 || ^5.0",
+                "symfony/dependency-injection": "^3.4 || ^4.3 || ^5.0",
+                "symfony/http-kernel": "^3.4 || ^4.3 || ^5.0",
+                "twig/twig": "^2.12.1 || ~3.0",
+                "zendframework/zend-modulemanager": "~2.2",
+                "zendframework/zend-servicemanager": "~2.2",
+                "zendframework/zend-view": "~2.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Cocur\\Slugify\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florian Eckerstorfer",
+                    "email": "florian@eckerstorfer.co",
+                    "homepage": "https://florian.ec"
+                },
+                {
+                    "name": "Ivo Bathke",
+                    "email": "ivo.bathke@gmail.com"
+                }
+            ],
+            "description": "Converts a string into a slug.",
+            "keywords": [
+                "slug",
+                "slugify"
+            ],
+            "support": {
+                "issues": "https://github.com/cocur/slugify/issues",
+                "source": "https://github.com/cocur/slugify/tree/master"
+            },
+            "time": "2019-12-14T13:04:14+00:00"
+        },
         {
             "name": "composer/package-versions-deprecated",
             "version": "1.11.99.2",
@@ -220,6 +294,79 @@
             ],
             "time": "2021-05-24T07:46:03+00:00"
         },
+        {
+            "name": "cviebrock/eloquent-sluggable",
+            "version": "8.0.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/cviebrock/eloquent-sluggable.git",
+                "reference": "16e21db24d80180f870c3c7c4faf3d3af23f4117"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/cviebrock/eloquent-sluggable/zipball/16e21db24d80180f870c3c7c4faf3d3af23f4117",
+                "reference": "16e21db24d80180f870c3c7c4faf3d3af23f4117",
+                "shasum": ""
+            },
+            "require": {
+                "cocur/slugify": "^4.0",
+                "illuminate/config": "^8.0",
+                "illuminate/database": "^8.0",
+                "illuminate/support": "^8.0",
+                "php": "^7.3|^8.0"
+            },
+            "require-dev": {
+                "limedeck/phpunit-detailed-printer": "^6.0",
+                "mockery/mockery": "^1.4.2",
+                "orchestra/database": "^6.0",
+                "orchestra/testbench": "^6.0",
+                "phpunit/phpunit": "^9.4"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Cviebrock\\EloquentSluggable\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Cviebrock\\EloquentSluggable\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Colin Viebrock",
+                    "email": "colin@viebrock.ca"
+                }
+            ],
+            "description": "Easy creation of slugs for your Eloquent models in Laravel",
+            "homepage": "https://github.com/cviebrock/eloquent-sluggable",
+            "keywords": [
+                "eloquent",
+                "eloquent-sluggable",
+                "laravel",
+                "lumen",
+                "slug",
+                "sluggable"
+            ],
+            "support": {
+                "issues": "https://github.com/cviebrock/eloquent-sluggable/issues",
+                "source": "https://github.com/cviebrock/eloquent-sluggable/tree/8.0.8"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/cviebrock",
+                    "type": "github"
+                }
+            ],
+            "time": "2021-06-12T01:05:33+00:00"
+        },
         {
             "name": "doctrine/cache",
             "version": "2.0.3",

database/migrations/2021_08_22_151457_create_memberships_subactivity_id_column.php

@@ -0,0 +1,59 @@
+<?php
+
+use App\Activity;
+use App\Group;
+use App\Member\Member;
+use App\Subactivity;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Zoomyboy\LaravelNami\Nami;
+
+class CreateMembershipsSubactivityIdColumn extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('memberships', function (Blueprint $table) {
+            $table->foreignId('subactivity_id')->nullable()->constrained();
+            $table->unsignedBigInteger('activity_id')->change();
+            $table->foreign('activity_id')->references('id')->on('activities');
+        });
+
+        Member::whereNotNull('nami_id')->get()->each(function($member): void {
+            collect($member->getNamiMemberships(Nami::login(env('NAMI_ADMIN_USER'), env('NAMI_ADMIN_PW'))))->filter(
+                fn ($membership): bool => dump($membership) && $membership['ends_at'] === null,
+            )->each(function($membership) use ($member): void {
+                if ($member->memberships()->where('nami_id', $membership['id'])->exists()) {
+                    return;
+                }
+
+                $member->memberships()->create([
+                    'nami_id' => $membership['id'],
+                    'activity_id' => Activity::nami($membership['activity_id'])->id, 
+                    'subactivity_id' => $membership['subactivity_id']
+                        ? Subactivity::nami($membership['subactivity_id'])->id
+                        : null, 
+                    'group_id' => Group::nami($membership['group_id'])->id,
+                    'created_at' => $membership['starts_at'],
+                ]);
+            });
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('memberships', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2021_08_22_165326_create_activities_slug_column.php

@@ -0,0 +1,36 @@
+<?php
+
+use App\Subactivity;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateActivitiesSlugColumn extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('subactivities', function (Blueprint $table) {
+            $table->boolean('is_age_group')->default(false)->after('name');
+            $table->string('slug')->after('name');
+        });
+        Subactivity::get()->each(fn ($subactivity) => $subactivity->update([]));
+        Subactivity::whereIn('nami_id', [1,2,3,4,49])->get()->each(fn ($subactivity) => $subactivity->update(['is_age_group' => true]));
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('activities', function (Blueprint $table) {
+            $table->dropColumn('slug');
+        });
+    }
+}

resources/css/table.css

@@ -1,33 +1,32 @@
 .custom-table {
-    display: table;
     width: 100%;
-    & > header > div {
+    & > thead > th {
-        @apply px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
+        @apply text-left px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
     }
 
-    & > div {
+    & > tr {
         @apply text-gray-200 transition-all duration-300 rounded hover:bg-gray-800;
-        & > div {
+        & > td {
             @apply py-1 px-6;
         }
     }
 
     &.custom-table-sm {
-        & > header > div {
+        & > thead > th {
             @apply px-3 py-2;
         }
-        & > div {
+        & > tr {
-            & > div {
+            & > td {
                 @apply py-1 px-3;
             }
         }
     }
 
     &.custom-table-light {
-        & > header > div {
+        & > thead > th {
             @apply border-gray-500;
         }
-        & > div {
+        & > td {
             &:hover {
                 @apply bg-gray-700;
             }

resources/img/svg/lilie.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="687.866" height="704.496" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 182.004 186.404"><defs><style>.fil0{fill:#000}</style></defs><g id="Ebene_x0020_1"><path class="fil0" d="m72.601.2-.6.2-.8.4-1 .6-1 1-.6 1-.6 1.6 1.2 18-39.4.4L10.6 43.2l61.001 4.601 2.6 28-2.4-1.6a12.425 12.425 0 0 1-2.2-1.4c-.916-.523-2.05-1.05-2.8-1.8l-1.8-1.2-1.6-1-1.6-1-2-1.2-1.4-.8-1.6-1-4.2-2.4-1.8-1-3-1.4-2.8-1.4-1.6-.8-2.2-1-2.4-1-2.8-1-3.2-1-4.4-1-2.8-.4h-5.4l-1 .2-2 .4-1.6.4-1 .4-1.401.6-.6.4-1 .6-1.4 1-2 2c-.262.524-.672.745-1 1.2l-.6.8c-.1.138-.3.662-.4.8l-1.2 2-.8 1.6-.6 1.4-.8 2.6-.6 1.6-.4 1.8-.4 1.8-.4 2-.4 2.4-.4 3.4-.2 3.4v10.401l.2 3.4.4 3.8.4 2.6.2 1.6.4 2.2.6 3 .4 1.6.6 2.4.4 1.4.4 1.4.2.6.4 1.2c.292.585.353 1.203.6 1.8l.4 1.2.4 1 .2.601.4 1 .6 1.6.4.8.6 1.4.4.8.4.8.6 1.2.4.8.6 1.2.6 1.2 1 1.8.4.6.6 1 .4.6 1 1.6.8 1.2.8 1.2 1 1.4 1 1.4.8 1 1 1.2.6.8 1 1.2 3 3 1 .8 1 .6 1.2.6.8.4 1 .4 2.8.6H38l3.2-.6 1.2-.4 3-1.4 1.4-.8 1-.6 2.001-1.2 1.6-1.2 1.4-1 1.6-1.2 2.6-2.2 1-.8 2.4-2 2-1.8 2.2-2 2.2-1.8c.704-.703 1.89-1.955 2.2-2.2.1-.053.874-.82 1.4-1.2l1.2-1 .2-.2.2-.4v-.6l-.2-.2-5.8-.2-2.2-.4-1.8-.6-1-.6-1-.8-1-1-.8-1-1.2-2.2-1.2-3.4-.8-2.6-.6-3.2-.6-3.4-.6-2.6-.6-3.4-.6-3.2-.8-4v-2l.8-.8h2.6l2 .4 2.4.6c1.357.542 2.688.943 4 1.6l2.2 1 1.4.6.8.4c.807.58 2.086.885 2.8 1.6l2 1.2 2.2 1.6 2.4 2.4.8 1.6 1.4 13.6h23.401l1-10.4.6-2.6 1.2-2.2 2.4-2.4.8-.6c.69-.346 1.377-.933 2-1.4.81-.54 1.721-1.25 2.6-1.6 1.04-.52 1.991-1.096 3-1.6l1.8-.8c.757-.33 1.629-.718 2.4-1l1.8-.6 1-.4 2.4-.6 2-.4h2.601l.8.8v2c-.015.296-1.42 6.984-1.6 8l-.4 2.6-.4 2-.6 3.4-.4 1.8-.4 2-.6 2.2-.6 2-.8 1.8-.6 1.2-.6 1-.8 1-1 1-2 1.4-1.8.6-2.2.4-5.8.2-.2.2v.6l.2.4c.16.222 1.13.954 1.4 1.2l1 1 2 1.8 1 1 1.4 1.2 2.6 2.2 1.6 1.6 4.8 4 1.6 1.2 8.4 5.6s2.962 1.606 3.6 1.8l2 .6 2.4.4h5.6l2.8-.6c.245-.074 2.257-.918 2.4-1l2.2-1.6 3.6-3.6c1.182-1.18 2.016-2.615 3.2-3.8l1.4-2.2 3.4-5 2.4-4.2 1.4-2.6 1-2 1.2-2.8 1-2.4 1.4-3.8.801-2.4 1-3.4.8-3.6 1.2-5.6.2-1.6.4-2.6.2-2.2.4-5V85.201l-.2-3.4-.4-3.4-.4-2.4-.2-1.4-.4-1.8-.4-1.6-.2-.8-.4-1.2-.4-1.4c-.165-.484-.78-1.904-1-2.4l-1-2.2-1-1.8-1.2-1.8-2.2-2.4c-.22-.2-3.7-2.745-3.8-2.8l-2-.8-2-.6-3-.6h-5.4l-2.8.4-3.4.8-3 .8-3 1-2.397.978-2.404 1.021-3 1.4-4 2-4.8 2.6-1.4.8-7 4.2-1.8 1.2-3.2 2-4 2.6-3.2 2.2 2.6-28.8 61.6-4.6-19.2-19.6-40.019-.2 1.418-17.8-.6-1.8-.8-1.2-1.2-1.2-1.4-.8-.6-.2-1.4-.2h-33.6l-1.2.2z"/><path class="fil0" d="m51.201 175.604-.6 1v.6l.2.4.4.4.4.2.8.4.8.4 1.6.6 1 .4 2.4.6 1.8.2h1.6l1-.2.6-.4.8-.6 1.8-1.6c3.438-3.437 7.332-6.59 11-9.8l-.8 14v2.4l.2 1 .2.4.2.2.8.2h27.201l.8-.2.2-.2.2-.4.2-1v-2.4l-.8-14 12 10.6.8.8.8.6.6.4 1 .2h1.6l1.8-.2 1.601-.4 1.8-.6 1-.4.6-.2.8-.4.8-.4.4-.2.4-.4.2-.4v-.6c0 .3-29.401-43.8-29.4-43.8H80.001l-28.8 42.8z"/></g></svg>

resources/js/views/member/Index.vue

@@ -3,57 +3,61 @@
 
         <filt v-model="query.filter" :bill-kinds="billKinds"></filt>
 
-        <div class="custom-table">
+        <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
-            <header>
+            <thead>
-                <div>Nachname</div>
+                <th></th>
-                <div>Vorname</div>
+                <th>Nachname</th>
-                <div>Straße</div>
+                <th>Vorname</th>
-                <div>PLZ</div>
+                <th>Straße</th>
-                <div>Ort</div>
+                <th>PLZ</th>
-                <div>Tags</div>
+                <th>Ort</th>
-                <div>Beitrag</div>
+                <th>Tags</th>
-                <div>Geburtstag</div>
+                <th>Beitrag</th>
-                <div>Rechnung</div>
+                <th>Geburtstag</th>
-                <div>Ausstand</div>
+                <th>Rechnung</th>
-                <div>Eintritt</div>
+                <th>Ausstand</th>
-                <div></div>
+                <th>Eintritt</th>
-            </header>
+                <th></th>
+            </thead>
 
-            <div v-for="member, index in data.data">
+            <tr v-for="member, index in data.data">
-                <div v-text="member.lastname"></div>
+                <td class="w-3">
-                <div v-text="member.firstname"></div>
+                    <sprite class="w-3 h-3" v-if="member.age_group_icon" :class="`text-${member.age_group_icon}`" src="lilie"></sprite>
-                <div v-text="`${member.address}`"></div>
+                </td>
-                <div v-text="`${member.zip}`"></div>
+                <td v-text="member.lastname"></td>
-                <div v-text="`${member.location}`"></div>
+                <td v-text="member.firstname"></td>
-                <div>
+                <td v-text="`${member.address}`"></td>
+                <td v-text="`${member.zip}`"></td>
+                <td v-text="`${member.location}`"></td>
+                <td>
                     <div class="bool-row">
                         <v-bool v-model="member.send_newspaper">M</v-bool>
                         <v-bool v-model="member.has_nami">N</v-bool>
                         <v-bool v-model="member.is_confirmed">C</v-bool>
                     </div>
-                </div>
+                </td>
-                <div v-text="member.subscription_name"></div>
+                <td v-text="member.subscription_name"></td>
-                <div v-text="`${member.birthday_human}`"></div>
+                <td v-text="`${member.birthday_human}`"></td>
-                <div>
+                <td>
                     <div class="flex justify-center">
                         <div class="btn btn-sm label primary" v-text="member.bill_kind_name" v-if="member.bill_kind_name"></div>
                         <div class="text-xs" v-else>Kein</div>
                     </div>
-                </div>
+                </td>
-                <div>
+                <td>
                     <div class="flex justify-center">
                         <div class="btn btn-sm label primary" v-show="member.pending_payment" v-text="member.pending_payment"></div>
                     </div>
-                </div>
+                </td>
-                <div v-text="`${member.joined_at_human}`"></div>
+                <td v-text="`${member.joined_at_human}`"></td>
-                <div class="flex">
+                <td class="flex">
                     <inertia-link :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></inertia-link>
                     <a href="#" @click.prevent="openSidebar(index, 'payment.index')" class="inline-flex btn btn-info btn-sm"><sprite src="money"></sprite></a>
                     <inertia-link href="#" @click.prevent="remove(member)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></inertia-link>
-                </div>
+                </td>
-            </div>
+            </tr>
 
-        </div>
+        </table>
 
         <div class="px-6">
             <pages class="mt-4" :value="data.meta" :only="['data']"></pages>

tailwind.config.js

@@ -13,6 +13,12 @@ module.exports = {
         extend: {
         },
         colors: {
+            woelfling: '#ff6400',
+            jungpfadfinder: '#2f53a7',
+            pfadfinder: '#00823c',
+            rover: '#cc1f2f',
+            biber: '#ffed00',
+            leiter: '#9d9d9c',
             teal: [],
             primary: {
                 100: 'hsl(181, 98%, 93%)',