Merge branch 'master' into 3-category-crud

Reviewed-on: #5

.github/skills/tailwindcss-development/SKILL.md

@@ -10,7 +10,7 @@ metadata:
 
 ## Documentation
 
-Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
+Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
 
 ## Basic Usage
 
@@ -18,55 +18,22 @@ Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
 - Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
 - Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
 
-## Tailwind CSS v4 Specifics
+## Tailwind CSS v3 Specifics
 
-- Always use Tailwind CSS v4 and avoid deprecated utilities.
-- `corePlugins` is not supported in Tailwind v4.
+- Always use Tailwind CSS v3 and verify you're using only classes it supports.
+- Configuration is done in the `tailwind.config.js` file.
+- Import using `@tailwind` directives:
 
-### CSS-First Configuration
-
-In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:
-
-<!-- CSS-First Config -->
+<!-- v3 Import Syntax -->
 ```css
-@theme {
-  --color-brand: oklch(0.72 0.11 178);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 ```
 
-### Import Syntax
-
-In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:
-
-<!-- v4 Import Syntax -->
-```diff
-- @tailwind base;
-- @tailwind components;
-- @tailwind utilities;
-+ @import "tailwindcss";
-```
-
-### Replaced Utilities
-
-Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.
-
-| Deprecated | Replacement |
-|------------|-------------|
-| bg-opacity-* | bg-black/* |
-| text-opacity-* | text-black/* |
-| border-opacity-* | border-black/* |
-| divide-opacity-* | divide-black/* |
-| ring-opacity-* | ring-black/* |
-| placeholder-opacity-* | placeholder-black/* |
-| flex-shrink-* | shrink-* |
-| flex-grow-* | grow-* |
-| overflow-ellipsis | text-ellipsis |
-| decoration-slice | box-decoration-slice |
-| decoration-clone | box-decoration-clone |
-
 ## Spacing
 
-Use `gap` utilities instead of margins for spacing between siblings:
+When listing items, use gap utilities for spacing; don't use margins.
 
 <!-- Gap Utilities -->
 ```html
@@ -110,10 +77,15 @@ If existing pages and components support dark mode, new pages and components mus
 </div>
 ```
 
+## Verification
+
+1. Check browser for visual rendering
+2. Test responsive breakpoints
+3. Verify dark mode if project uses it
+
 ## Common Pitfalls
 
-- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)
-- Using `@tailwind` directives instead of `@import "tailwindcss"`
-- Trying to use `tailwind.config.js` instead of CSS `@theme` directive
 - Using margins for spacing between siblings instead of gap utilities
-- Forgetting to add dark mode variants when the project uses dark mode
+- Forgetting to add dark mode variants when the project uses dark mode
+- Not checking existing project conventions before adding new utilities
+- Overusing inline styles when Tailwind classes would suffice

AGENTS.md

@@ -19,7 +19,8 @@ This application is a Laravel application and its main Laravel ecosystems packag
 - laravel/pint (PINT) - v1
 - pestphp/pest (PEST) - v4
 - phpunit/phpunit (PHPUNIT) - v12
-- tailwindcss (TAILWINDCSS) - v4
+- alpinejs (ALPINEJS) - v3
+- tailwindcss (TAILWINDCSS) - v3
 
 ## Skills Activation
 
@@ -108,6 +109,20 @@ This project has domain-specific skills available in `**/skills/**`. You MUST ac
 
 - Laravel can be deployed using [Laravel Cloud](https://cloud.laravel.com/), which is the fastest way to deploy and scale production Laravel applications.
 
+=== herd rules ===
+
+# Laravel Herd
+
+- The application is served by Laravel Herd at `https?://[kebab-case-project-dir].test`. Use the `get-absolute-url` tool to generate valid URLs. Never run commands to serve the site. It is always available.
+- Use the `herd` CLI to manage services, PHP versions, and sites (e.g. `herd sites`, `herd services:start <service>`, `herd php:list`). Run `herd list` to discover all available commands.
+
+=== tests rules ===
+
+# Test Enforcement
+
+- Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass.
+- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter.
+
 === laravel/core rules ===
 
 # Do Things the Laravel Way

app/Http/Controllers/CategoryController.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\StoreCategoryRequest;
+use App\Http\Requests\UpdateCategoryRequest;
+use App\Models\Category;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\View\View;
+
+class CategoryController extends Controller
+{
+    /**
+     * Display a listing of categories.
+     */
+    public function index(): View
+    {
+        $categories = Category::query()
+            ->latest()
+            ->paginate(10, ['id', 'name', 'slug', 'description', 'color', 'created_at']);
+
+        return view('category.index', [
+            'categories' => $categories,
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new category.
+     */
+    public function create(): View
+    {
+        return view('category.create');
+    }
+
+    /**
+     * Store a newly created category.
+     */
+    public function store(StoreCategoryRequest $request): RedirectResponse
+    {
+        Category::query()->create($request->validated());
+
+        return redirect()
+            ->route('category.index')
+            ->with('status', 'category-created');
+    }
+
+    /**
+     * Show the form for editing the specified category.
+     */
+    public function edit(Category $category): View
+    {
+        return view('category.edit', [
+            'category' => $category,
+        ]);
+    }
+
+    /**
+     * Update the specified category.
+     */
+    public function update(UpdateCategoryRequest $request, Category $category): RedirectResponse
+    {
+        $category->update($request->validated());
+
+        return redirect()
+            ->route('category.edit', $category)
+            ->with('status', 'category-updated');
+    }
+
+    /**
+     * Remove the specified category.
+     */
+    public function destroy(Category $category): RedirectResponse
+    {
+        $category->delete();
+
+        return redirect()
+            ->route('category.index')
+            ->with('status', 'category-deleted');
+    }
+}

app/Http/Controllers/UserController.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\UpdateUserRequest;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\View\View;
+
+class UserController extends Controller
+{
+    /**
+     * Display a listing of users.
+     */
+    public function index(): View
+    {
+        $users = User::query()
+            ->orderBy('name')
+            ->paginate(10, ['id', 'name', 'email', 'created_at']);
+
+        return view('user.index', [
+            'users' => $users,
+        ]);
+    }
+
+    /**
+     * Show the form for editing the specified user.
+     */
+    public function edit(User $user): View
+    {
+        $user->load('roles:id');
+        $roles = Role::query()
+            ->orderBy('name')
+            ->get(['id', 'name']);
+
+        return view('user.edit', [
+            'user' => $user,
+            'roles' => $roles,
+        ]);
+    }
+
+    /**
+     * Update the specified user.
+     */
+    public function update(UpdateUserRequest $request, User $user): RedirectResponse
+    {
+        $validated = $request->validated();
+        $roleIds = $validated['roles'] ?? [];
+
+        unset($validated['roles']);
+
+        $user->fill($validated);
+
+        if ($user->isDirty('email')) {
+            $user->email_verified_at = null;
+        }
+
+        $user->save();
+        $user->roles()->sync($roleIds);
+
+        return redirect()
+            ->route('user.edit', $user)
+            ->with('status', 'user-updated');
+    }
+}

app/Http/Requests/StoreCategoryRequest.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Str;
+
+class StoreCategoryRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Prepare the data for validation.
+     */
+    protected function prepareForValidation(): void
+    {
+        $this->merge([
+            'slug' => Str::slug((string) ($this->filled('slug') ? $this->input('slug') : $this->input('name'))),
+        ]);
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:255', 'unique:categories,name'],
+            'slug' => ['required', 'string', 'max:255', 'alpha_dash:ascii', 'unique:categories,slug'],
+            'description' => ['nullable', 'string', 'max:1000'],
+            'color' => ['required', 'string', 'regex:/^#[0-9A-Fa-f]{6}$/'],
+        ];
+    }
+}

app/Http/Requests/UpdateCategoryRequest.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Str;
+use Illuminate\Validation\Rule;
+
+class UpdateCategoryRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Prepare the data for validation.
+     */
+    protected function prepareForValidation(): void
+    {
+        $this->merge([
+            'slug' => Str::slug((string) ($this->filled('slug') ? $this->input('slug') : $this->input('name'))),
+        ]);
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        $categoryId = $this->route('category')?->id;
+
+        return [
+            'name' => ['required', 'string', 'max:255', Rule::unique('categories', 'name')->ignore($categoryId)],
+            'slug' => ['required', 'string', 'max:255', 'alpha_dash:ascii', Rule::unique('categories', 'slug')->ignore($categoryId)],
+            'description' => ['nullable', 'string', 'max:1000'],
+            'color' => ['required', 'string', 'regex:/^#[0-9A-Fa-f]{6}$/'],
+        ];
+    }
+}

app/Http/Requests/UpdateUserRequest.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class UpdateUserRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:255'],
+            'email' => [
+                'required',
+                'string',
+                'email',
+                'max:255',
+                Rule::unique('users', 'email')->ignore($this->route('user')),
+            ],
+            'roles' => ['nullable', 'array'],
+            'roles.*' => ['integer', 'exists:roles,id'],
+        ];
+    }
+}

app/Models/Category.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Models;
+
+use Database\Factories\CategoryFactory;
+use Illuminate\Database\Eloquent\Attributes\Fillable;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+#[Fillable(['name', 'slug', 'description', 'color'])]
+class Category extends Model
+{
+    /** @use HasFactory<CategoryFactory> */
+    use HasFactory;
+}

app/Models/Role.php

@@ -4,6 +4,16 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 #[Fillable(['name'])]
-class Role extends Model {}
+class Role extends Model
+{
+    /**
+     * The users that belong to the role.
+     */
+    public function users(): BelongsToMany
+    {
+        return $this->belongsToMany(User::class);
+    }
+}

app/Models/User.php

@@ -7,6 +7,7 @@ use Database\Factories\UserFactory;
 use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Attributes\Hidden;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 
@@ -29,4 +30,12 @@ class User extends Authenticatable
             'password' => 'hashed',
         ];
     }
+
+    /**
+     * The roles that belong to the user.
+     */
+    public function roles(): BelongsToMany
+    {
+        return $this->belongsToMany(Role::class);
+    }
 }

database/factories/CategoryFactory.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Category;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Str;
+
+/**
+ * @extends Factory<Category>
+ */
+class CategoryFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        $name = fake()->unique()->words(2, true);
+
+        return [
+            'name' => Str::title($name),
+            'slug' => Str::slug($name),
+            'description' => fake()->sentence(),
+            'color' => fake()->hexColor(),
+        ];
+    }
+}

database/migrations/2026_05_11_040743_create_role_user_table.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('role_user', function (Blueprint $table) {
+            $table->foreignId('role_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+
+            $table->primary(['role_id', 'user_id']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('role_user');
+    }
+};

database/migrations/2026_05_12_022545_create_categories_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('categories', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->unique();
+            $table->string('slug')->unique();
+            $table->text('description')->nullable();
+            $table->string('color', 7)->default('#4f46e5');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('categories');
+    }
+};

database/seeders/CategorySeeder.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Category;
+use Illuminate\Database\Seeder;
+
+class CategorySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $categories = [
+            ['name' => 'Product Updates', 'slug' => 'product-updates', 'description' => 'Announcements and release notes.', 'color' => '#4f46e5'],
+            ['name' => 'Operations', 'slug' => 'operations', 'description' => 'Internal workflow and process items.', 'color' => '#10b981'],
+            ['name' => 'Marketing', 'slug' => 'marketing', 'description' => 'Campaigns, content, and promotions.', 'color' => '#f59e0b'],
+            ['name' => 'Support', 'slug' => 'support', 'description' => 'Customer support and service categories.', 'color' => '#ec4899'],
+        ];
+
+        foreach ($categories as $category) {
+            Category::query()->updateOrCreate(
+                ['slug' => $category['slug']],
+                $category,
+            );
+        }
+    }
+}

database/seeders/DatabaseSeeder.php

@@ -17,6 +17,8 @@ class DatabaseSeeder extends Seeder
     {
         // User::factory(10)->create();
 
+        $this->call(CategorySeeder::class);
+
         User::factory()->create([
             'name' => 'Test User',
             'email' => 'test@example.com',

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "git-course",
+    "name": "git-iszuddin",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -32,29 +32,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/@emnapi/core": {
-            "version": "1.10.0",
-            "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-            "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "@emnapi/wasi-threads": "1.2.1",
-                "tslib": "^2.4.0"
-            }
-        },
-        "node_modules/@emnapi/runtime": {
-            "version": "1.10.0",
-            "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-            "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "tslib": "^2.4.0"
-            }
-        },
         "node_modules/@emnapi/wasi-threads": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -964,6 +941,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.10.12",
                 "caniuse-lite": "^1.0.30001782",
@@ -2153,6 +2131,7 @@
             "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -2200,6 +2179,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -2629,6 +2609,7 @@
             "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -2806,6 +2787,7 @@
             "integrity": "sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "lightningcss": "^1.32.0",
                 "picomatch": "^4.0.4",

public/mbip.txt

@@ -0,0 +1 @@
+test file

resources/views/category/create.blade.php

@@ -0,0 +1,63 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div>
+            <p class="text-sm font-medium uppercase tracking-wider text-indigo-600">{{ __('Categories') }}</p>
+            <h2 class="text-2xl font-semibold leading-tight text-gray-900">
+                {{ __('Create Category') }}
+            </h2>
+        </div>
+    </x-slot>
+
+    <div class="py-10">
+        <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+            <section class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                <div class="border-b border-gray-100 bg-gradient-to-r from-indigo-50 via-fuchsia-50 to-amber-50 px-6 py-5">
+                    <h3 class="text-lg font-semibold text-gray-900">{{ __('Category Details') }}</h3>
+                    <p class="mt-1 text-sm text-gray-600">{{ __('Choose a clear name and a color that stands out in lists.') }}</p>
+                </div>
+
+                <form method="POST" action="{{ route('category.store') }}" class="space-y-6 p-6">
+                    @csrf
+
+                    <div class="grid gap-6 md:grid-cols-2">
+                        <div>
+                            <x-input-label for="name" :value="__('Name')" />
+                            <x-text-input id="name" class="mt-2 block w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="off" />
+                            <x-input-error class="mt-2" :messages="$errors->get('name')" />
+                        </div>
+
+                        <div>
+                            <x-input-label for="slug" :value="__('Slug')" />
+                            <x-text-input id="slug" class="mt-2 block w-full" type="text" name="slug" :value="old('slug')" autocomplete="off" placeholder="auto-generated-from-name" />
+                            <x-input-error class="mt-2" :messages="$errors->get('slug')" />
+                        </div>
+                    </div>
+
+                    <div>
+                        <x-input-label for="description" :value="__('Description')" />
+                        <textarea id="description" name="description" rows="4" class="mt-2 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description') }}</textarea>
+                        <x-input-error class="mt-2" :messages="$errors->get('description')" />
+                    </div>
+
+                    <div>
+                        <x-input-label for="color" :value="__('Color')" />
+                        <div class="mt-2 flex items-center gap-3">
+                            <input id="color" type="color" name="color" value="{{ old('color', '#4f46e5') }}" class="h-11 w-16 cursor-pointer rounded-lg border border-gray-300 bg-white p-1 shadow-sm">
+                            <span class="text-sm text-gray-500">{{ __('Select a category accent color.') }}</span>
+                        </div>
+                        <x-input-error class="mt-2" :messages="$errors->get('color')" />
+                    </div>
+
+                    <div class="flex flex-col-reverse gap-3 border-t border-gray-100 pt-6 sm:flex-row sm:items-center sm:justify-end">
+                        <a href="{{ route('category.index') }}" class="inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
+                            {{ __('Cancel') }}
+                        </a>
+                        <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                            {{ __('Save Category') }}
+                        </button>
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+</x-app-layout>

resources/views/category/edit.blade.php

@@ -0,0 +1,92 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm font-medium uppercase tracking-wider text-indigo-600">{{ __('Categories') }}</p>
+                <h2 class="text-2xl font-semibold leading-tight text-gray-900">
+                    {{ __('Edit Category') }}
+                </h2>
+            </div>
+
+            <a href="{{ route('category.index') }}" class="inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-white">
+                {{ __('Back to Categories') }}
+            </a>
+        </div>
+    </x-slot>
+
+    <div class="py-10">
+        <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+            @if (session('status') === 'category-updated')
+                <div class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800">
+                    {{ __('Category updated successfully.') }}
+                </div>
+            @endif
+
+            <section class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                <div class="border-b border-gray-100 px-6 py-5" style="background: linear-gradient(90deg, {{ $category->color }}20, #ffffff)">
+                    <div class="flex items-center gap-4">
+                        <span class="h-12 w-12 rounded-xl shadow-sm ring-1 ring-black/5" style="background-color: {{ $category->color }}"></span>
+                        <div>
+                            <h3 class="text-lg font-semibold text-gray-900">{{ $category->name }}</h3>
+                            <p class="mt-1 font-mono text-sm text-gray-600">{{ $category->slug }}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <form id="delete-category-form" method="POST" action="{{ route('category.destroy', $category) }}" onsubmit="return confirm('{{ __('Delete this category?') }}')">
+                    @csrf
+                    @method('DELETE')
+                </form>
+
+                <form method="POST" action="{{ route('category.update', $category) }}" class="space-y-6 p-6">
+                    @csrf
+                    @method('PATCH')
+
+                    <div class="grid gap-6 md:grid-cols-2">
+                        <div>
+                            <x-input-label for="name" :value="__('Name')" />
+                            <x-text-input id="name" class="mt-2 block w-full" type="text" name="name" :value="old('name', $category->name)" required autofocus autocomplete="off" />
+                            <x-input-error class="mt-2" :messages="$errors->get('name')" />
+                        </div>
+
+                        <div>
+                            <x-input-label for="slug" :value="__('Slug')" />
+                            <x-text-input id="slug" class="mt-2 block w-full" type="text" name="slug" :value="old('slug', $category->slug)" required autocomplete="off" />
+                            <x-input-error class="mt-2" :messages="$errors->get('slug')" />
+                        </div>
+                    </div>
+
+                    <div>
+                        <x-input-label for="description" :value="__('Description')" />
+                        <textarea id="description" name="description" rows="4" class="mt-2 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description', $category->description) }}</textarea>
+                        <x-input-error class="mt-2" :messages="$errors->get('description')" />
+                    </div>
+
+                    <div>
+                        <x-input-label for="color" :value="__('Color')" />
+                        <div class="mt-2 flex items-center gap-3">
+                            <input id="color" type="color" name="color" value="{{ old('color', $category->color) }}" class="h-11 w-16 cursor-pointer rounded-lg border border-gray-300 bg-white p-1 shadow-sm">
+                            <span class="text-sm text-gray-500">{{ __('Adjust the accent used across category lists.') }}</span>
+                        </div>
+                        <x-input-error class="mt-2" :messages="$errors->get('color')" />
+                    </div>
+
+                    <div class="flex flex-col gap-3 border-t border-gray-100 pt-6 sm:flex-row sm:items-center sm:justify-between">
+                        <button type="submit" form="delete-category-form" class="inline-flex items-center justify-center rounded-lg border border-rose-200 px-4 py-2 text-sm font-semibold text-rose-700 transition hover:bg-rose-50">
+                            {{ __('Delete Category') }}
+                        </button>
+
+                        <div class="flex flex-col-reverse gap-3 sm:flex-row sm:items-center">
+                            <a href="{{ route('category.index') }}" class="inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
+                                {{ __('Cancel') }}
+                            </a>
+                            <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                                {{ __('Update Category') }}
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+</x-app-layout>

resources/views/category/index.blade.php

@@ -0,0 +1,126 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm font-medium uppercase tracking-wider text-indigo-600">{{ __('Content Library') }}</p>
+                <h2 class="text-2xl font-semibold leading-tight text-gray-900">
+                    {{ __('Categories') }}
+                </h2>
+            </div>
+
+            <a href="{{ route('category.create') }}" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                {{ __('New Category') }}
+            </a>
+        </div>
+    </x-slot>
+
+    <div class="py-10">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            @if (session('status'))
+                <div class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800">
+                    @if (session('status') === 'category-created')
+                        {{ __('Category created successfully.') }}
+                    @elseif (session('status') === 'category-updated')
+                        {{ __('Category updated successfully.') }}
+                    @elseif (session('status') === 'category-deleted')
+                        {{ __('Category deleted successfully.') }}
+                    @endif
+                </div>
+            @endif
+
+            <div class="grid gap-6 lg:grid-cols-[1fr_18rem]">
+                <section class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                    <div class="border-b border-gray-100 bg-gradient-to-r from-indigo-50 via-sky-50 to-emerald-50 px-6 py-5">
+                        <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+                            <div>
+                                <h3 class="text-lg font-semibold text-gray-900">{{ __('Manage Categories') }}</h3>
+                                <p class="mt-1 text-sm text-gray-600">{{ __('Organize records with clear names, slugs, and color labels.') }}</p>
+                            </div>
+                            <span class="inline-flex w-fit items-center rounded-full bg-white px-3 py-1 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-200">
+                                {{ trans_choice(':count category|:count categories', $categories->total(), ['count' => $categories->total()]) }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-white">
+                                <tr>
+                                    <th scope="col" class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">{{ __('Category') }}</th>
+                                    <th scope="col" class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">{{ __('Slug') }}</th>
+                                    <th scope="col" class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">{{ __('Created') }}</th>
+                                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-gray-500">{{ __('Actions') }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100 bg-white">
+                                @forelse ($categories as $category)
+                                    <tr class="transition hover:bg-gray-50">
+                                        <td class="px-6 py-4">
+                                            <div class="flex items-center gap-3">
+                                                <span class="h-11 w-11 rounded-xl shadow-sm ring-1 ring-black/5" style="background-color: {{ $category->color }}"></span>
+                                                <div>
+                                                    <p class="font-semibold text-gray-900">{{ $category->name }}</p>
+                                                    <p class="mt-1 max-w-md truncate text-sm text-gray-500">
+                                                        {{ $category->description ?: __('No description added.') }}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4 text-sm text-gray-600">
+                                            <span class="rounded-full bg-gray-100 px-3 py-1 font-mono text-xs text-gray-700">{{ $category->slug }}</span>
+                                        </td>
+                                        <td class="px-6 py-4 text-sm text-gray-600">{{ $category->created_at?->format('Y-m-d H:i') }}</td>
+                                        <td class="px-6 py-4 text-right text-sm">
+                                            <div class="flex justify-end gap-2">
+                                                <a href="{{ route('category.edit', $category) }}" class="rounded-lg border border-indigo-200 px-3 py-2 font-medium text-indigo-700 transition hover:bg-indigo-50">
+                                                    {{ __('Edit') }}
+                                                </a>
+                                                <form method="POST" action="{{ route('category.destroy', $category) }}" onsubmit="return confirm('{{ __('Delete this category?') }}')">
+                                                    @csrf
+                                                    @method('DELETE')
+
+                                                    <button type="submit" class="rounded-lg border border-rose-200 px-3 py-2 font-medium text-rose-700 transition hover:bg-rose-50">
+                                                        {{ __('Delete') }}
+                                                    </button>
+                                                </form>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                @empty
+                                    <tr>
+                                        <td colspan="4" class="px-6 py-12 text-center">
+                                            <div class="mx-auto max-w-sm">
+                                                <div class="mx-auto h-12 w-12 rounded-2xl bg-indigo-100"></div>
+                                                <h3 class="mt-4 text-base font-semibold text-gray-900">{{ __('No categories yet') }}</h3>
+                                                <p class="mt-1 text-sm text-gray-500">{{ __('Create your first category to start organizing the system.') }}</p>
+                                                <a href="{{ route('category.create') }}" class="mt-5 inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500">
+                                                    {{ __('Create Category') }}
+                                                </a>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                @endforelse
+                            </tbody>
+                        </table>
+                    </div>
+
+                    @if ($categories->hasPages())
+                        <div class="border-t border-gray-100 px-6 py-4">
+                            {{ $categories->links() }}
+                        </div>
+                    @endif
+                </section>
+
+                <aside class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+                    <p class="text-sm font-medium uppercase tracking-wider text-gray-500">{{ __('Palette') }}</p>
+                    <div class="mt-4 grid grid-cols-4 gap-3">
+                        @foreach ($categories->take(8) as $category)
+                            <span class="h-12 rounded-xl shadow-sm ring-1 ring-black/5" style="background-color: {{ $category->color }}" title="{{ $category->name }}"></span>
+                        @endforeach
+                    </div>
+                    <p class="mt-5 text-sm leading-6 text-gray-600">{{ __('Use color to make category scanning faster while keeping names and slugs predictable.') }}</p>
+                </aside>
+            </div>
+        </div>
+    </div>
+</x-app-layout>

resources/views/components/application-logo.blade.php

@@ -1,3 +1,5 @@
-<svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
+<!-- <svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
     <path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"/>
-</svg>
+</svg> -->
+
+<img src="/images/kelasprogramming-logo-small.png" {{ $attributes }}>

resources/views/home.blade.php

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Neighborhood News Portal</title>
+
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+    </head>
+    <body class="min-h-screen bg-gradient-to-b from-emerald-50 via-white to-sky-50 text-slate-800 antialiased">
+        <div class="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+            @if (\Illuminate\Support\Facades\Route::has('login'))
+                <div class="mb-4 flex justify-end">
+                    <nav class="flex items-center gap-2 text-sm">
+                        @auth
+                            <a
+                                href="{{ url('/dashboard') }}"
+                                class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 font-medium text-emerald-800 transition hover:bg-emerald-100"
+                            >
+                                Dashboard
+                            </a>
+                        @else
+                            <a
+                                href="{{ route('login') }}"
+                                class="rounded-xl border border-slate-300 bg-white px-4 py-2 font-medium text-slate-700 transition hover:bg-slate-50"
+                            >
+                                Login
+                            </a>
+
+                            @if (\Illuminate\Support\Facades\Route::has('register'))
+                                <a
+                                    href="{{ route('register') }}"
+                                    class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 font-medium text-emerald-800 transition hover:bg-emerald-100"
+                                >
+                                    Register
+                                </a>
+                            @endif
+                        @endauth
+                    </nav>
+                </div>
+            @endif
+
+            <header class="relative overflow-hidden rounded-3xl border border-emerald-100 bg-white/80 p-6 shadow-sm backdrop-blur sm:p-8">
+                <img
+                    src="https://images.pexels.com/photos/10768840/pexels-photo-10768840.jpeg?auto=compress&cs=tinysrgb&w=1600"
+                    alt="Forested hills in the distance"
+                    class="absolute inset-0 h-full w-full object-cover"
+                >
+                <div class="absolute inset-0 bg-gradient-to-r from-white via-white/88 to-emerald-100/55"></div>
+                <div class="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-white/90 to-transparent"></div>
+                <div class="relative">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-emerald-700">Local Neighborhood Portal</p>
+                    <div class="mt-3 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                    <div>
+                        <h1 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Taman Melawati News</h1>
+                        <p class="mt-2 max-w-2xl text-sm text-slate-700 sm:text-base">
+                            Friendly updates from around the block. Stories are placeholders for now, but the spirit is real.
+                        </p>
+                        <p class="mt-4 text-xs uppercase tracking-[0.24em] text-slate-500">Inspired by the hills and forest edges around our neighborhood</p>
+                    </div>
+                    <div class="rounded-2xl border border-white/70 bg-white/75 px-4 py-3 text-sm text-emerald-950 shadow-sm backdrop-blur">
+                        <p class="font-semibold">Good morning, Neighbor</p>
+                        <p class="text-emerald-800">Tuesday community digest</p>
+                    </div>
+                </div>
+                </div>
+            </header>
+
+            <main class="mt-8 grid gap-6 lg:grid-cols-3">
+                <section class="space-y-6 lg:col-span-2">
+                    <article class="relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 shadow-sm sm:p-7">
+                        <img
+                            src="https://images.pexels.com/photos/9651398/pexels-photo-9651398.jpeg?auto=compress&cs=tinysrgb&w=1200"
+                            alt="Misty forested mountain backdrop"
+                            class="absolute inset-x-0 top-0 h-40 w-full object-cover"
+                        >
+                        <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-emerald-950/35 via-emerald-900/25 to-white"></div>
+                        <div class="relative pt-24">
+                        <p class="text-xs font-semibold uppercase tracking-wide text-amber-700">Top Story</p>
+                        <h2 class="mt-2 text-2xl font-semibold text-slate-900">Community Garden Harvest Day Set for Saturday</h2>
+                        <p class="mt-3 text-sm leading-6 text-slate-600">
+                            Volunteers from Cedar Lane and Oak Street are gathering at 8:00 AM to pick tomatoes, herbs, and okra.
+                            Bring a reusable bag and a smile. Extra produce will be shared with nearby families.
+                        </p>
+                        <div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-slate-500">
+                            <span class="rounded-full bg-emerald-50 px-3 py-1 font-medium text-emerald-700">By Hana, local editor</span>
+                            <span>2 hours ago</span>
+                        </div>
+                        </div>
+                    </article>
+
+                    <div class="grid gap-4 sm:grid-cols-2">
+                        <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                            <p class="text-xs font-semibold uppercase tracking-wide text-sky-700">Street Update</p>
+                            <h3 class="mt-2 text-lg font-semibold text-slate-900">Pine Street Lighting Repaired</h3>
+                            <p class="mt-2 text-sm text-slate-600">Evening walks are brighter again after three new lamps were installed this week.</p>
+                        </article>
+                        <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                            <p class="text-xs font-semibold uppercase tracking-wide text-rose-700">School Corner</p>
+                            <h3 class="mt-2 text-lg font-semibold text-slate-900">Book Drive Reaches 500 Donations</h3>
+                            <p class="mt-2 text-sm text-slate-600">Taman Melawati Elementary thanks neighbors for donating books to the weekend reading club.</p>
+                        </article>
+                    </div>
+                </section>
+
+                <aside class="space-y-6">
+                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                        <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-700">Community Board</h3>
+                        <ul class="mt-4 space-y-3 text-sm text-slate-600">
+                            <li class="rounded-xl bg-slate-50 px-3 py-2">Thursday 7 PM: Town Hall mini-meet at River Cafe.</li>
+                            <li class="rounded-xl bg-slate-50 px-3 py-2">Friday 5 PM: Youth futsal practice at West Court.</li>
+                            <li class="rounded-xl bg-slate-50 px-3 py-2">Sunday 9 AM: Riverside clean-up, all ages welcome.</li>
+                        </ul>
+                    </section>
+
+                    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                        <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-700">Weather Snapshot</h3>
+                        <p class="mt-3 text-3xl font-bold text-slate-900">29°C</p>
+                        <p class="text-sm text-slate-600">Warm with light breeze. Great evening for a neighborhood stroll.</p>
+                    </section>
+                </aside>
+            </main>
+        </div>
+    </body>
+</html>

resources/views/layouts/navigation.blade.php

@@ -15,9 +15,15 @@
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                         {{ __('Dashboard') }}
                     </x-nav-link>
+                    <x-nav-link :href="route('user.index')" :active="request()->routeIs('user.index')">
+                        {{ __('Users') }}
+                    </x-nav-link>
                     <x-nav-link :href="route('role.index')" :active="request()->routeIs('role.index')">
                         {{ __('Roles') }}
                     </x-nav-link>
+                    <x-nav-link :href="route('category.index')" :active="request()->routeIs('category.*')">
+                        {{ __('Categories') }}
+                    </x-nav-link>
                 </div>
             </div>
 
@@ -73,9 +79,15 @@
             <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                 {{ __('Dashboard') }}
             </x-responsive-nav-link>
+            <x-responsive-nav-link :href="route('user.index')" :active="request()->routeIs('user.index')">
+                {{ __('Users') }}
+            </x-responsive-nav-link>
             <x-responsive-nav-link :href="route('role.index')" :active="request()->routeIs('role.index')">
                 {{ __('Roles') }}
             </x-responsive-nav-link>
+            <x-responsive-nav-link :href="route('category.index')" :active="request()->routeIs('category.*')">
+                {{ __('Categories') }}
+            </x-responsive-nav-link>
         </div>
 
         <!-- Responsive Settings Options -->

resources/views/user/edit.blade.php

@@ -0,0 +1,70 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            {{ __('Edit User') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900">
+                    @if (session('status') === 'user-updated')
+                        <div class="mb-4 rounded-md bg-green-50 px-4 py-3 text-sm text-green-700">
+                            {{ __('User updated successfully.') }}
+                        </div>
+                    @endif
+
+                    <form method="POST" action="{{ route('user.update', $user) }}" class="space-y-6 max-w-xl">
+                        @csrf
+                        @method('patch')
+
+                        <div>
+                            <x-input-label for="name" :value="__('Name')" />
+                            <x-text-input id="name" class="mt-1 block w-full" type="text" name="name" :value="old('name', $user->name)" required autofocus autocomplete="name" />
+                            <x-input-error class="mt-2" :messages="$errors->get('name')" />
+                        </div>
+
+                        <div>
+                            <x-input-label for="email" :value="__('Email')" />
+                            <x-text-input id="email" class="mt-1 block w-full" type="email" name="email" :value="old('email', $user->email)" required autocomplete="username" />
+                            <x-input-error class="mt-2" :messages="$errors->get('email')" />
+                        </div>
+
+                        <div>
+                            <x-input-label :value="__('Roles')" />
+
+                            <div class="mt-2 space-y-2 rounded-md border border-gray-200 p-4">
+                                @forelse ($roles as $role)
+                                    <label class="flex items-center gap-2">
+                                        <input
+                                            type="checkbox"
+                                            name="roles[]"
+                                            value="{{ $role->id }}"
+                                            @checked(in_array($role->id, old('roles', $user->roles->pluck('id')->all()), true))
+                                            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+                                        >
+                                        <span class="text-sm text-gray-700">{{ $role->name }}</span>
+                                    </label>
+                                @empty
+                                    <p class="text-sm text-gray-500">{{ __('No roles available.') }}</p>
+                                @endforelse
+                            </div>
+
+                            <x-input-error class="mt-2" :messages="$errors->get('roles')" />
+                            <x-input-error class="mt-2" :messages="$errors->get('roles.*')" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <x-primary-button>{{ __('Save') }}</x-primary-button>
+
+                            <a href="{{ route('user.index') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
+                                {{ __('Back') }}
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>

resources/views/user/index.blade.php

@@ -0,0 +1,54 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            {{ __('Users') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900">
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50">
+                                <tr>
+                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
+                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
+                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200">
+                                @forelse ($users as $user)
+                                    <tr class="odd:bg-white even:bg-gray-50">
+                                        <td class="px-4 py-3 text-sm text-gray-700">{{ $user->id }}</td>
+                                        <td class="px-4 py-3 text-sm text-gray-900">{{ $user->name }}</td>
+                                        <td class="px-4 py-3 text-sm text-gray-700">{{ $user->email }}</td>
+                                        <td class="px-4 py-3 text-sm text-gray-700">{{ $user->created_at?->format('Y-m-d H:i') }}</td>
+                                        <td class="px-4 py-3 text-sm text-gray-700">
+                                            <a href="{{ route('user.edit', $user) }}" class="font-medium text-indigo-600 hover:text-indigo-500">
+                                                {{ __('Edit') }}
+                                            </a>
+                                        </td>
+                                    </tr>
+                                @empty
+                                    <tr>
+                                        <td colspan="5" class="px-4 py-6 text-sm text-center text-gray-500">
+                                            No users found.
+                                        </td>
+                                    </tr>
+                                @endforelse
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div class="mt-6">
+                        {{ $users->links() }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>

resources/views/welcome.blade.php

@@ -48,7 +48,8 @@
             @endif
         </header>
 
-            <h1 class="text-5xl text-center">GIT COURSE</h1>
+            <h1 class="text-5xl text-center">COMPANY SYSTEM</h1>
+            <h2>Mempelajari Git & Gitea</h2>
 
         <div class="flex items-center justify-center w-full transition-opacity opacity-100 duration-750 lg:grow starting:opacity-0">
             <main class="flex max-w-[335px] w-full flex-col-reverse lg:max-w-4xl lg:flex-row">

routes/web.php

@@ -1,11 +1,13 @@
 <?php
 
+use App\Http\Controllers\CategoryController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\RoleController;
+use App\Http\Controllers\UserController;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
-    return view('welcome');
+    return view('home');
 });
 
 Route::get('/dashboard', function () {
@@ -13,9 +15,13 @@ Route::get('/dashboard', function () {
 })->middleware(['auth', 'verified'])->name('dashboard');
 
 Route::middleware('auth')->group(function () {
+    Route::get('/user', [UserController::class, 'index'])->name('user.index');
+    Route::get('/user/{user}/edit', [UserController::class, 'edit'])->name('user.edit');
+    Route::patch('/user/{user}', [UserController::class, 'update'])->name('user.update');
     Route::get('/role', [RoleController::class, 'index'])->name('role.index');
     Route::get('/role/create', [RoleController::class, 'create'])->name('role.create');
     Route::post('/role', [RoleController::class, 'store'])->name('role.store');
+    Route::resource('category', CategoryController::class)->except('show');
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');

tests/Feature/CategoryCrudTest.php

@@ -0,0 +1,96 @@
+<?php
+
+use App\Models\Category;
+use App\Models\User;
+
+test('category pages require authentication', function () {
+    $category = Category::factory()->create();
+
+    $this->get('/category')->assertRedirect('/login');
+    $this->get("/category/{$category->id}/edit")->assertRedirect('/login');
+});
+
+test('authenticated users can view categories', function () {
+    Category::factory()->create([
+        'name' => 'Design',
+        'slug' => 'design',
+        'description' => 'Visual work',
+        'color' => '#ec4899',
+    ]);
+
+    $response = $this
+        ->actingAs(User::factory()->create())
+        ->get('/category');
+
+    $response
+        ->assertSuccessful()
+        ->assertSee('Categories')
+        ->assertSee('Design')
+        ->assertSee('design')
+        ->assertSee('Visual work');
+});
+
+test('authenticated users can create a category', function () {
+    $response = $this
+        ->actingAs(User::factory()->create())
+        ->post('/category', [
+            'name' => 'Operations',
+            'slug' => '',
+            'description' => 'Internal workflows',
+            'color' => '#10b981',
+        ]);
+
+    $response->assertRedirect('/category');
+
+    $this->assertDatabaseHas('categories', [
+        'name' => 'Operations',
+        'slug' => 'operations',
+        'description' => 'Internal workflows',
+        'color' => '#10b981',
+    ]);
+});
+
+test('authenticated users can update a category', function () {
+    $category = Category::factory()->create([
+        'name' => 'Legacy',
+        'slug' => 'legacy',
+        'color' => '#4f46e5',
+    ]);
+
+    $response = $this
+        ->actingAs(User::factory()->create())
+        ->patch("/category/{$category->id}", [
+            'name' => 'Marketing',
+            'slug' => 'marketing',
+            'description' => 'Campaign planning',
+            'color' => '#f59e0b',
+        ]);
+
+    $response->assertRedirect("/category/{$category->id}/edit");
+
+    $this->assertDatabaseHas('categories', [
+        'id' => $category->id,
+        'name' => 'Marketing',
+        'slug' => 'marketing',
+        'description' => 'Campaign planning',
+        'color' => '#f59e0b',
+    ]);
+});
+
+test('authenticated users can delete a category', function () {
+    $category = Category::factory()->create([
+        'name' => 'Archive',
+        'slug' => 'archive',
+        'color' => '#64748b',
+    ]);
+
+    $response = $this
+        ->actingAs(User::factory()->create())
+        ->delete("/category/{$category->id}");
+
+    $response->assertRedirect('/category');
+
+    $this->assertDatabaseMissing('categories', [
+        'id' => $category->id,
+    ]);
+});

tests/Feature/ExampleTest.php

@@ -3,5 +3,10 @@
 it('returns a successful response', function () {
     $response = $this->get('/');
 
-    $response->assertStatus(200);
+    $response
+        ->assertSuccessful()
+        ->assertSee('Taman Melawati News')
+        ->assertSee('Community Garden Harvest Day Set for Saturday')
+        ->assertSee('Login')
+        ->assertSee('Register');
 });

tests/Feature/UserTest.php

@@ -0,0 +1,74 @@
+<?php
+
+use App\Models\Role;
+use App\Models\User;
+
+test('user edit page requires authentication', function () {
+    $user = User::factory()->create();
+
+    $this->get("/user/{$user->id}/edit")->assertRedirect('/login');
+});
+
+test('authenticated users can view the user edit page', function () {
+    $actingUser = User::factory()->create();
+    $user = User::factory()->create();
+    $role = Role::query()->create(['name' => 'Admin']);
+    $user->roles()->attach($role->id);
+
+    $response = $this
+        ->actingAs($actingUser)
+        ->get("/user/{$user->id}/edit");
+
+    $response
+        ->assertSuccessful()
+        ->assertSee('Edit User')
+        ->assertSee($user->name)
+        ->assertSee($user->email)
+        ->assertSee('Roles')
+        ->assertSee('Admin')
+        ->assertSee('checked', false);
+});
+
+test('authenticated users can update a user', function () {
+    $actingUser = User::factory()->create();
+    $user = User::factory()->create();
+    $adminRole = Role::query()->create(['name' => 'Admin']);
+    $editorRole = Role::query()->create(['name' => 'Editor']);
+
+    $response = $this
+        ->actingAs($actingUser)
+        ->patch("/user/{$user->id}", [
+            'name' => 'Updated User',
+            'email' => 'updated@example.com',
+            'roles' => [$adminRole->id, $editorRole->id],
+        ]);
+
+    $response
+        ->assertRedirect("/user/{$user->id}/edit");
+
+    $user->refresh();
+
+    $this->assertSame('Updated User', $user->name);
+    $this->assertSame('updated@example.com', $user->email);
+    expect($user->roles()->pluck('roles.id')->all())
+        ->toMatchArray([$adminRole->id, $editorRole->id]);
+});
+
+test('user roles can be cleared by submitting no roles', function () {
+    $actingUser = User::factory()->create();
+    $user = User::factory()->create();
+    $role = Role::query()->create(['name' => 'Admin']);
+
+    $user->roles()->attach($role->id);
+
+    $response = $this
+        ->actingAs($actingUser)
+        ->patch("/user/{$user->id}", [
+            'name' => $user->name,
+            'email' => $user->email,
+        ]);
+
+    $response->assertRedirect("/user/{$user->id}/edit");
+
+    expect($user->refresh()->roles()->count())->toBe(0);
+});