diff --git a/app/Exports/PeriodeStatementExport.php b/app/Exports/PeriodeStatementExport.php
new file mode 100644
index 0000000..29234fb
--- /dev/null
+++ b/app/Exports/PeriodeStatementExport.php
@@ -0,0 +1,77 @@
+<?php
+
+    namespace Modules\Webstatement\Exports;
+
+    use Maatwebsite\Excel\Concerns\FromCollection;
+    use Maatwebsite\Excel\Concerns\WithHeadings;
+    use Maatwebsite\Excel\Concerns\WithMapping;
+    use Maatwebsite\Excel\Concerns\WithStyles;
+    use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;
+    use Modules\Webstatement\Models\PeriodeStatement;
+    use Carbon\Carbon;
+
+    class PeriodeStatementExport implements FromCollection, WithHeadings, WithMapping, WithStyles
+    {
+        /**
+         * @return \Illuminate\Support\Collection
+         */
+        public function collection()
+        {
+            return PeriodeStatement::with('authorizer')->get();
+        }
+
+        /**
+         * @return array
+         */
+        public function headings(): array
+        {
+            return [
+                'ID',
+                'Periode',
+                'Authorization Status',
+                'Notes',
+                'Processed At',
+                'Created By',
+                'Created At',
+                'Updated By',
+                'Updated At',
+                'Authorized By',
+                'Authorized At'
+            ];
+        }
+
+        /**
+         * @param mixed $row
+         *
+         * @return array
+         */
+        public function map($row): array
+        {
+            return [
+                $row->id,
+                $row->periode,
+                $row->authorized_status,
+                $row->notes,
+                $row->processed_at ? Carbon::parse($row->processed_at)->format('Y-m-d H:i:s') : null,
+                $row->created_by,
+                $row->created_at ? Carbon::parse($row->created_at)->format('Y-m-d H:i:s') : null,
+                $row->updated_by,
+                $row->updated_at ? Carbon::parse($row->updated_at)->format('Y-m-d H:i:s') : null,
+                $row->authorized_by ? ($row->authorizer ? $row->authorizer->name : $row->authorized_by) : null,
+                $row->authorized_at ? Carbon::parse($row->authorized_at)->format('Y-m-d H:i:s') : null,
+            ];
+        }
+
+        /**
+         * @param Worksheet $sheet
+         *
+         * @return array
+         */
+        public function styles(Worksheet $sheet)
+        {
+            return [
+                // Style the first row as bold text
+                1 => ['font' => ['bold' => true]],
+            ];
+        }
+    }
diff --git a/app/Http/Controllers/PeriodeStatementController.php b/app/Http/Controllers/PeriodeStatementController.php
new file mode 100644
index 0000000..c86650e
--- /dev/null
+++ b/app/Http/Controllers/PeriodeStatementController.php
@@ -0,0 +1,362 @@
+<?php
+
+    namespace Modules\Webstatement\Http\Controllers;
+
+    use Carbon\Carbon;
+    use Exception;
+    use Illuminate\Http\Request;
+    use Illuminate\Routing\Controller;
+    use Maatwebsite\Excel\Facades\Excel;
+    use Modules\Webstatement\Exports\PeriodeStatementExport;
+    use Modules\Webstatement\Http\Requests\PeriodeStatementRequest;
+    use Modules\Webstatement\Models\PeriodeStatement;
+
+    class PeriodeStatementController extends Controller
+    {
+        public $user;
+
+        /**
+         * Display a listing of the resource.
+         */
+        public function index()
+        {
+            return view('webstatement::periode-statement.index');
+        }
+
+        /**
+         * Store a newly created resource in storage.
+         */
+        public function store(PeriodeStatementRequest $request)
+        {
+            $validate = $request->validated();
+
+            if ($validate) {
+                try {
+                    // Add created_by field and default values
+                    $validate['created_by']        = auth()->id();
+                    $validate['status']            = 'pending';
+                    $validate['authorized_status'] = 'pending';
+
+                    // Save to database
+                    PeriodeStatement::create($validate);
+
+                    return redirect()
+                        ->route('periode-statements.index')
+                        ->with('success', 'Periode Statement created successfully');
+                } catch (Exception $e) {
+                    return redirect()
+                        ->route('periode-statements.create')
+                        ->with('error', 'Failed to create Periode Statement: ' . $e->getMessage());
+                }
+            }
+        }
+
+        /**
+         * Show the form for creating a new resource.
+         */
+        public function create()
+        {
+            return view('webstatement::periode-statement.create');
+        }
+
+        /**
+         * Show the specified resource.
+         */
+        public function show($id)
+        {
+            $periodeStatement = PeriodeStatement::find($id);
+            return view('webstatement::periode-statement.show', compact('periodeStatement'));
+        }
+
+        /**
+         * Show the form for editing the specified resource.
+         */
+        public function edit($id)
+        {
+            $periodeStatement = PeriodeStatement::find($id);
+            return view('webstatement::periode-statement.create', compact('periodeStatement'));
+        }
+
+        /**
+         * Remove the specified resource from storage.
+         */
+        public function destroy($id)
+        {
+            try {
+                // Add deleted_by field
+                $periodeStatement             = PeriodeStatement::find($id);
+                $periodeStatement->deleted_by = auth()->id();
+                $periodeStatement->save();
+
+                // Delete from database
+                $periodeStatement->delete();
+
+                echo json_encode(['success' => true, 'message' => 'Periode Statement deleted successfully']);
+            } catch (Exception $e) {
+                echo json_encode([
+                    'success' => false,
+                    'message' => 'Failed to delete Periode Statement: ' . $e->getMessage()
+                ]);
+            }
+        }
+
+        /**
+         * Provide data for datatables.
+         */
+        public function dataForDatatables(Request $request)
+        {
+            if (is_null($this->user) || !$this->user->can('periode-statements.view')) {
+                //abort(403, 'Sorry! You are not allowed to view periode statement.');
+            }
+
+            // Retrieve data from the database
+            $query = PeriodeStatement::query();
+
+            // Apply search filter if provided
+            if ($request->has('search') && !empty($request->get('search'))) {
+                $search = $request->get('search');
+                $query->where(function ($q) use ($search) {
+                    $q->where('periode', 'LIKE', "%$search%");
+                    $q->orWhere('status', 'LIKE', "%$search%");
+                    $q->orWhere('authorized_status', 'LIKE', "%$search%");
+                    $q->orWhere('notes', 'LIKE', "%$search%");
+                });
+            }
+
+            // Apply sorting if provided
+            if ($request->has('sortOrder') && !empty($request->get('sortOrder'))) {
+                $order  = $request->get('sortOrder');
+                $column = $request->get('sortField');
+                $query->orderBy($column, $order);
+            }
+
+            // Get the total count of records
+            $totalRecords = $query->count();
+
+            // Apply pagination if provided
+            if ($request->has('page') && $request->has('size')) {
+                $page   = $request->get('page');
+                $size   = $request->get('size');
+                $offset = ($page - 1) * $size; // Calculate the offset
+
+                $query->skip($offset)->take($size);
+            }
+
+            // Get the filtered count of records
+            $filteredRecords = $query->count();
+
+            // Get the data for the current page
+            $data = $query->get();
+
+            // Calculate the page count
+            $pageCount = ceil($filteredRecords / ($request->get('size') ?: 1));
+
+            // Calculate the current page number
+            $currentPage = $request->get('page') ?: 1;
+
+            // Return the response data as a JSON object
+            return response()->json([
+                'draw'            => $request->get('draw'),
+                'recordsTotal'    => $totalRecords,
+                'recordsFiltered' => $filteredRecords,
+                'pageCount'       => $pageCount,
+                'page'            => $currentPage,
+                'totalCount'      => $totalRecords,
+                'data'            => $data,
+            ]);
+        }
+
+        /**
+         * Delete multiple records.
+         */
+        public function deleteMultiple(Request $request)
+        {
+            $ids = $request->input('ids');
+
+            // Add deleted_by to each record
+            $periodeStatements = PeriodeStatement::whereIn('id', $ids)->get();
+            foreach ($periodeStatements as $periodeStatement) {
+                $periodeStatement->deleted_by = auth()->id();
+                $periodeStatement->save();
+            }
+
+            PeriodeStatement::whereIn('id', $ids)->delete();
+            return response()->json(['message' => 'Periode Statements deleted successfully']);
+        }
+
+        /**
+         * Export data to Excel.
+         */
+        public function export()
+        {
+            return Excel::download(new PeriodeStatementExport, 'periode-statements.xlsx');
+        }
+
+        /**
+         * Process the specified periode statement.
+         */
+        public function process($id)
+        {
+            try {
+                $periodeStatement = PeriodeStatement::find($id);
+
+                // Update status to processing
+                $periodeStatement->update([
+                    'status'       => 'processing',
+                    'notes'        => ($periodeStatement->notes ? $periodeStatement->notes . "\n" : '') . 'Processing started at ' . Carbon::now()
+                                                                                                                                           ->format('Y-m-d H:i:s'),
+                    'updated_by'   => auth()->id(),
+                    'processed_at' => Carbon::now(),
+                ]);
+
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('success', 'Periode statement processing has been initiated.');
+            } catch (Exception $e) {
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('error', 'Failed to process Periode Statement: ' . $e->getMessage());
+            }
+        }
+
+        /**
+         * Update the specified resource in storage.
+         */
+        public function update(PeriodeStatementRequest $request, $id)
+        {
+            $validate = $request->validated();
+
+            if ($validate) {
+                try {
+                    // Add updated_by field
+                    $validate['updated_by'] = auth()->id();
+                    if (request()->get('status') == 'approved') {
+                        $validate['status']            = 'completed';
+                        $validate['authorized_status'] = 'approved';
+                        $validate['processed_at']      = Carbon::now();
+                    } else if (request()->get('status') == 'rejected') {
+                        $validate['status']            = 'failed';
+                        $validate['authorized_status'] = 'rejected';
+                    }
+
+                    $periodeStatement = PeriodeStatement::find($id);
+
+                    $validate['notes']         = ($periodeStatement->notes ? $periodeStatement->notes . "\n" : '') . request()->get('notes');
+                    $validate['authorized_by'] = auth()->id();
+                    $validate['authorized_at'] = Carbon::now();
+
+                    // Update in database
+
+                    $periodeStatement->update($validate);
+
+                    return redirect()
+                        ->route('periode-statements.index')
+                        ->with('success', 'Periode Statement updated successfully');
+                } catch (Exception $e) {
+                    return redirect()
+                        ->route('periode-statements.edit', $id)
+                        ->with('error', 'Failed to update Periode Statement: ' . $e->getMessage());
+                }
+            }
+        }
+
+        /**
+         * Show the form for authorizing the specified resource.
+         */
+        public function showAuthorize($id)
+        {
+            $periodeStatement = PeriodeStatement::find($id);
+            return view('webstatement::periode-statement.authorize', compact('periodeStatement'));
+        }
+
+        /**
+         * Authorize the specified resource in storage.
+         */
+        public function authorize(Request $request, $id)
+        {
+            try {
+                $periodeStatement = PeriodeStatement::find($id);
+
+                $notes = $periodeStatement->notes ?? '';
+                if ($request->authorization_notes) {
+                    $notes .= ($notes ? "\n" : '') . 'Authorization note: ' . $request->authorization_notes;
+                }
+
+                $periodeStatement->update([
+                    'authorized_status' => $request->authorized_status,
+                    'authorized_by'     => auth()->id(),
+                    'authorized_at'     => Carbon::now(),
+                    'notes'             => $notes,
+                    'updated_by'        => auth()->id(),
+                ]);
+
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('success', 'Periode statement has been ' . $request->authorized_status . '.');
+            } catch (Exception $e) {
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('error', 'Failed to authorize Periode Statement: ' . $e->getMessage());
+            }
+        }
+
+        /**
+         * Display a listing of the resources pending authorization.
+         */
+        public function pendingAuthorization()
+        {
+            return view('webstatement::periode-statement.pending_authorization');
+        }
+
+        /**
+         * Complete the specified periode statement.
+         */
+        public function complete($id)
+        {
+            try {
+                $periodeStatement = PeriodeStatement::find($id);
+
+                // Update status to completed
+                $periodeStatement->update([
+                    'status'     => 'completed',
+                    'notes'      => ($periodeStatement->notes ? $periodeStatement->notes . "\n" : '') . 'Completed at ' . Carbon::now()
+                                                                                                                                ->format('Y-m-d H:i:s'),
+                    'updated_by' => auth()->id(),
+                ]);
+
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('success', 'Periode statement has been marked as completed.');
+            } catch (Exception $e) {
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('error', 'Failed to complete Periode Statement: ' . $e->getMessage());
+            }
+        }
+
+        /**
+         * Mark the specified periode statement as failed.
+         */
+        public function fail(Request $request, $id)
+        {
+            try {
+                $periodeStatement = PeriodeStatement::find($id);
+
+                // Update status to failed
+                $periodeStatement->update([
+                    'status'     => 'failed',
+                    'notes'      => ($periodeStatement->notes ? $periodeStatement->notes . "\n" : '') . 'Failed at ' . Carbon::now()
+                                                                                                                             ->format('Y-m-d H:i:s') . '. Reason: ' . $request->failure_reason,
+                    'updated_by' => auth()->id(),
+                ]);
+
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('success', 'Periode statement has been marked as failed.');
+            } catch (Exception $e) {
+                return redirect()
+                    ->route('periode-statements.index')
+                    ->with('error', 'Failed to mark Periode Statement as failed: ' . $e->getMessage());
+            }
+        }
+    }
diff --git a/app/Http/Requests/PeriodeStatementRequest.php b/app/Http/Requests/PeriodeStatementRequest.php
new file mode 100644
index 0000000..7a6008d
--- /dev/null
+++ b/app/Http/Requests/PeriodeStatementRequest.php
@@ -0,0 +1,74 @@
+<?php
+
+    namespace Modules\Webstatement\Http\Requests;
+
+    use Illuminate\Foundation\Http\FormRequest;
+    use Illuminate\Validation\Rule;
+
+    class PeriodeStatementRequest 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.
+         */
+        public function rules()
+        : array
+        {
+            $rules = [
+                'periode' => [
+                    'required',
+                    'string',
+                    'max:255',
+                    'regex:/^\d{4}-\d{2}$/', // Format YYYY-MM
+                ],
+                'notes'   => [
+                    'nullable',
+                    'string',
+                ],
+            ];
+
+            // If we're updating an existing record, add a unique constraint that ignores the current record
+            if ($this->isMethod('PUT') || $this->isMethod('PATCH')) {
+                $rules['periode'][] = Rule::unique('periode_statements', 'periode')
+                                          ->ignore($this->route('periode_statement'));
+            } else {
+                // For new records, just check uniqueness
+                $rules['periode'][] = 'unique:periode_statements,periode';
+            }
+
+            return $rules;
+        }
+
+        /**
+         * Get custom attributes for validator errors.
+         */
+        public function attributes()
+        : array
+        {
+            return [
+                'periode' => 'Periode',
+                'notes'   => 'Notes',
+            ];
+        }
+
+        /**
+         * Get the error messages for the defined validation rules.
+         */
+        public function messages()
+        : array
+        {
+            return [
+                'periode.required' => 'The periode field is required.',
+                'periode.unique'   => 'This periode already exists.',
+                'periode.regex'    => 'The periode must be in the format YYYY-MM (e.g., 2023-01).',
+            ];
+        }
+    }
diff --git a/app/Models/PeriodeStatement.php b/app/Models/PeriodeStatement.php
new file mode 100644
index 0000000..0834946
--- /dev/null
+++ b/app/Models/PeriodeStatement.php
@@ -0,0 +1,140 @@
+<?php
+
+    namespace Modules\Webstatement\Models;
+
+    use Modules\Usermanagement\Models\User;
+
+    // use Modules\Webstatement\Database\Factories\PeriodeStatementFactory;
+
+    class PeriodeStatement extends Base
+    {
+        /**
+         * The attributes that are mass assignable.
+         *
+         * @var array
+         */
+        protected $fillable = [
+            'periode',
+            'status',
+            'authorized_status',
+            'notes',
+            'processed_at',
+            'created_by',
+            'updated_by',
+            'deleted_by',
+            'authorized_by',
+            'authorized_at'
+        ];
+
+        /**
+         * The attributes that should be cast.
+         *
+         * @var array
+         */
+        protected $casts = [
+            'processed_at'  => 'datetime',
+            'authorized_at' => 'datetime',
+        ];
+
+        /**
+         * Get the user who authorized this record.
+         */
+        public function authorizer()
+        {
+            return $this->belongsTo(User::class, 'authorized_by');
+        }
+
+        /**
+         * Get the formatted periode (YYYY-MM)
+         *
+         * @return string
+         */
+        public function getFormattedPeriodeAttribute()
+        {
+            return $this->periode;
+        }
+
+        /**
+         * Scope a query to only include pending statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopePending($query)
+        {
+            return $query->where('status', 'pending');
+        }
+
+        /**
+         * Scope a query to only include processing statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopeProcessing($query)
+        {
+            return $query->where('status', 'processing');
+        }
+
+        /**
+         * Scope a query to only include completed statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopeCompleted($query)
+        {
+            return $query->where('status', 'completed');
+        }
+
+        /**
+         * Scope a query to only include failed statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopeFailed($query)
+        {
+            return $query->where('status', 'failed');
+        }
+
+        /**
+         * Scope a query to only include pending authorization statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopePendingAuthorization($query)
+        {
+            return $query->where('authorized_status', 'pending');
+        }
+
+        /**
+         * Scope a query to only include approved statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopeApproved($query)
+        {
+            return $query->where('authorized_status', 'approved');
+        }
+
+        /**
+         * Scope a query to only include rejected statements.
+         *
+         * @param \Illuminate\Database\Eloquent\Builder $query
+         *
+         * @return \Illuminate\Database\Eloquent\Builder
+         */
+        public function scopeRejected($query)
+        {
+            return $query->where('authorized_status', 'rejected');
+        }
+    }
diff --git a/database/migrations/2025_05_11_145009_create_periode_statements_table.php b/database/migrations/2025_05_11_145009_create_periode_statements_table.php
new file mode 100644
index 0000000..b3f4348
--- /dev/null
+++ b/database/migrations/2025_05_11_145009_create_periode_statements_table.php
@@ -0,0 +1,48 @@
+<?php
+
+    use Illuminate\Database\Migrations\Migration;
+    use Illuminate\Database\Schema\Blueprint;
+    use Illuminate\Support\Facades\Schema;
+
+    class CreatePeriodeStatementsTable extends Migration
+    {
+        /**
+         * Run the migrations.
+         *
+         * @return void
+         */
+        public function up()
+        {
+            Schema::create('periode_statements', function (Blueprint $table) {
+                $table->id();
+                $table->string('periode'); // Format YYYY-MM
+                $table->enum('status', ['pending', 'processing', 'completed', 'failed'])->default('pending');
+                $table->enum('authorized_status', ['pending', 'approved', 'rejected'])->default('pending');
+                $table->text('notes')->nullable();
+                $table->timestamp('processed_at')->nullable();
+
+                // User tracking fields
+                $table->unsignedBigInteger('created_by')->nullable();
+                $table->unsignedBigInteger('updated_by')->nullable();
+                $table->unsignedBigInteger('deleted_by')->nullable();
+                $table->unsignedBigInteger('authorized_by')->nullable();
+                $table->timestamp('authorized_at')->nullable();
+
+                $table->timestamps();
+                $table->softDeletes();
+
+                // Add unique constraint to prevent duplicate periods
+                $table->unique('periode');
+            });
+        }
+
+        /**
+         * Reverse the migrations.
+         *
+         * @return void
+         */
+        public function down()
+        {
+            Schema::dropIfExists('periode_statements');
+        }
+    }
diff --git a/module.json b/module.json
index 02fc16a..25ee3c1 100644
--- a/module.json
+++ b/module.json
@@ -11,10 +11,21 @@
     "files": [],
     "menu": {
         "main": [
+            {
+                "title": "Periode Statement",
+                "path": "periode-statements",
+                "icon": "ki-filled ki-calendar text-lg text-primary",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": [
+                    "administrator"
+                ]
+            },
             {
                 "title": "Kartu ATM",
                 "path": "kartu-atm",
-                "icon": "ki-filled ki-credit-cart text-lg",
+                "icon": "ki-filled ki-credit-cart text-lg text-primary",
                 "classes": "",
                 "attributes": [],
                 "permission": "",
diff --git a/resources/views/periode-statement/create.blade.php b/resources/views/periode-statement/create.blade.php
new file mode 100644
index 0000000..c69363d
--- /dev/null
+++ b/resources/views/periode-statement/create.blade.php
@@ -0,0 +1,82 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    @if(isset($periodeStatement->id))
+        {{ Breadcrumbs::render(request()->route()->getName(), $periodeStatement) }}
+    @else
+        {{ Breadcrumbs::render(request()->route()->getName()) }}
+    @endif
+@endsection
+
+@section('content')
+    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+        @if(isset($periodeStatement->id))
+            <form action="{{ route('periode-statements.update', $periodeStatement->id) }}" method="POST">
+                <input type="hidden" name="id" value="{{ $periodeStatement->id }}">
+                @method('PUT')
+                @else
+                    <form method="POST" action="{{ route('periode-statements.store') }}">
+                        @endif
+                        @csrf
+                        <div class="card pb-2.5">
+                            <div class="card-header" id="basic_settings">
+                                <h3 class="card-title">
+                                    {{ isset($periodeStatement->id) ? 'Edit' : 'Tambah' }} Periode Statement
+                                </h3>
+                                <div class="flex items-center gap-2">
+                                    <a href="{{ route('periode-statements.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
+                                </div>
+                            </div>
+                            <div class="card-body grid gap-5">
+                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                                    <label class="form-label max-w-56">
+                                        Periode
+                                    </label>
+                                    <div class="flex flex-wrap items-baseline w-full">
+                                        <input class="input @error('periode') border-danger bg-danger-light @enderror"
+                                               type="month"
+                                               name="periode"
+                                               value="{{ $periodeStatement->periode ?? old('periode') }}"
+                                               max="{{ date('Y-m', strtotime('-1 month')) }}">
+                                        @error('periode')
+                                        <em class="alert text-danger text-sm">{{ $message }}</em>
+                                        @enderror
+                                    </div>
+                                </div>
+
+                                @if(isset($periodeStatement->id))
+                                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                                        <label class="form-label max-w-56">
+                                            Notes
+                                        </label>
+                                        <div class="flex flex-wrap items-baseline w-full">
+                                            <textarea class="textarea @error('notes') border-danger bg-danger-light @enderror"
+                                                      name="notes"
+                                                      rows="3"
+                                                      placeholder="Enter notes here...">{{ $periodeStatement->notes ?? old('notes') }}</textarea>
+                                            @error('notes')
+                                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                            @enderror
+                                        </div>
+                                    </div>
+                                @endif
+
+                                <div class="flex justify-end gap-2">
+                                    @if(isset($periodeStatement->id))
+                                        <button type="submit" class="btn btn-success" name="status" value="approved">
+                                            Approve
+                                        </button>
+                                        <button type="submit" class="btn btn-danger" name="status" value="rejected">
+                                            Reject
+                                        </button>
+                                    @else
+                                        <button type="submit" class="btn btn-primary">
+                                            Simpan
+                                        </button>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+    </div>
+@endsection
diff --git a/resources/views/periode-statement/index.blade.php b/resources/views/periode-statement/index.blade.php
new file mode 100644
index 0000000..e35662e
--- /dev/null
+++ b/resources/views/periode-statement/index.blade.php
@@ -0,0 +1,202 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
+@endsection
+
+@section('content')
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="periode-statement-table" data-api-url="{{ route('periode-statements.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    Daftar Periode Statement
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex">
+                        <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search Periode" id="search" type="text" value="">
+                        </label>
+                    </div>
+                    <div class="flex flex-wrap gap-2.5">
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('periode-statements.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('periode-statements.create') }}"> Tambah Periode </a>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="periode">
+                                <span class="sort"> <span class="sort-label"> Periode </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="authorized_status">
+                                <span class="sort"> <span class="sort-label"> Authorization Status </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[180px]" data-datatable-column="notes">
+                                <span class="sort"> <span class="sort-label"> Notes </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[180px]" data-datatable-column="processed_at">
+                                <span class="sort"> <span class="sort-label"> Processed At </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        function deleteData(data) {
+            Swal.fire({
+                title: 'Are you sure?',
+                text: "You won't be able to revert this!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, delete it!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajaxSetup({
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                        }
+                    });
+
+                    $.ajax(`webstatement/periode-statement/${data}`, {
+                        type: 'DELETE'
+                    }).then((response) => {
+                        swal.fire('Deleted!', 'Periode Statement has been deleted.', 'success').then(() => {
+                            window.location.reload();
+                        });
+                    }).catch((error) => {
+                        console.error('Error:', error);
+                        Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
+                    });
+                }
+            })
+        }
+    </script>
+
+    <script type="module">
+        const element = document.querySelector('#periode-statement-table');
+        const searchInput = document.getElementById('search');
+
+        const apiUrl = element.getAttribute('data-api-url');
+        const dataTableOptions = {
+            apiEndpoint: apiUrl,
+            pageSize: 10,
+            columns: {
+                select: {
+                    render: (item, data, context) => {
+                        const checkbox = document.createElement('input');
+                        checkbox.className = 'checkbox checkbox-sm';
+                        checkbox.type = 'checkbox';
+                        checkbox.value = data.id.toString();
+                        checkbox.setAttribute('data-datatable-row-check', 'true');
+                        return checkbox.outerHTML.trim();
+                    },
+                },
+                periode: {
+                    title: 'Periode',
+                },
+                authorized_status: {
+                    title: 'Authorization Status',
+                    render: (item, data) => {
+                        let statusClass = 'badge badge-light-primary';
+
+                        if (data.authorized_status === 'approved') {
+                            statusClass = 'badge badge-light-success';
+                        } else if (data.authorized_status === 'rejected') {
+                            statusClass = 'badge badge-light-danger';
+                        } else if (data.authorized_status === 'pending') {
+                            statusClass = 'badge badge-light-warning';
+                        }
+
+                        return `<span class="${statusClass}">${data.authorized_status}</span>`;
+                    },
+                },
+                notes: {
+                    title: 'Notes'
+                },
+                processed_at: {
+                    title: 'Processed At',
+                    render: (item, data) => {
+                        return data.processed_at ? new Date(data.processed_at).toLocaleString() : 'Not processed';
+                    },
+                },
+                actions: {
+                    title: 'Actions',
+                    render: (item, data) => {
+                        let buttons = `<div class="flex flex-nowrap justify-center">
+                            <a class="btn btn-sm btn-icon btn-clear btn-info" href="periode-statements/${data.id}">
+                                <i class="ki-outline ki-eye"></i>
+                            </a>`;
+
+                        // Only show edit button if status is not completed or approved
+                        if (data.status !== 'completed' && data.authorized_status !== 'approved' && data.authorized_status !== 'rejected') {
+                            buttons += `<a class="btn btn-sm btn-icon btn-clear btn-primary" href="periode-statements/${data.id}/edit">
+                                <i class="ki-outline ki-notepad-edit"></i>
+                            </a>`;
+                        }
+
+                        // Only show delete button if status is not completed or approved
+                        if (data.status !== 'completed' && data.authorized_status !== 'approved' && data.authorized_status !== 'rejected') {
+                            buttons += `<a onclick="deleteData(${data.id})" class="delete btn btn-sm btn-icon btn-clear btn-danger">
+                                <i class="ki-outline ki-trash"></i>
+                            </a>`;
+                        }
+
+                        buttons += `</div>`;
+                        return buttons;
+                    },
+                }
+            },
+        };
+
+        let dataTable = new KTDataTable(element, dataTableOptions);
+        // Custom search functionality
+        searchInput.addEventListener('input', function () {
+            const searchValue = this.value.trim();
+            dataTable.search(searchValue, true);
+        });
+
+        // Handle the "select all" checkbox
+        const selectAllCheckbox = document.querySelector('input[data-datatable-check="true"]');
+        if (selectAllCheckbox) {
+            selectAllCheckbox.addEventListener('change', function() {
+                const isChecked = this.checked;
+                const rowCheckboxes = document.querySelectorAll('input[data-datatable-row-check="true"]');
+
+                rowCheckboxes.forEach(checkbox => {
+                    checkbox.checked = isChecked;
+                });
+            });
+        }
+    </script>
+@endpush
diff --git a/resources/views/periode-statement/show.blade.php b/resources/views/periode-statement/show.blade.php
new file mode 100644
index 0000000..0ec6673
--- /dev/null
+++ b/resources/views/periode-statement/show.blade.php
@@ -0,0 +1,113 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render(request()->route()->getName(), $periodeStatement) }}
+@endsection
+
+@section('content')
+    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+        <div class="card pb-2.5">
+            <div class="card-header" id="basic_settings">
+                <h3 class="card-title">
+                    Detail Periode Statement
+                </h3>
+                <div class="flex items-center gap-2">
+                    <a href="{{ route('periode-statements.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
+                </div>
+            </div>
+            <div class="card-body grid gap-5">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    <div class="flex flex-col">
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                            <label class="form-label max-w-56 font-bold">
+                                Periode:
+                            </label>
+                            <div class="flex flex-wrap items-baseline">
+                                {{ \Carbon\Carbon::parse($periodeStatement->periode . '-01')->format('F Y') }}
+                            </div>
+                        </div>
+
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                            <label class="form-label max-w-56 font-bold">
+                                Created By:
+                            </label>
+                            <div class="flex flex-wrap items-baseline">
+                                {{ $periodeStatement->creator->name ?? 'N/A' }}
+                            </div>
+                        </div>
+
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                            <label class="form-label max-w-56 font-bold">
+                                Created At:
+                            </label>
+                            <div class="flex flex-wrap items-baseline">
+                                {{ $periodeStatement->created_at ? $periodeStatement->created_at->format('d M Y H:i:s') : 'N/A' }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-col">
+                        @if($periodeStatement->authorized_by)
+                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                                <label class="form-label max-w-56 font-bold">
+                                    Authorized By:
+                                </label>
+                                <div class="flex flex-wrap items-baseline">
+                                    {{ $periodeStatement->authorizer->name ?? 'N/A' }}
+                                </div>
+                            </div>
+
+                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                                <label class="form-label max-w-56 font-bold">
+                                    Authorized At:
+                                </label>
+                                <div class="flex flex-wrap items-baseline">
+                                    {{ $periodeStatement->authorized_at ? \Carbon\Carbon::parse($periodeStatement->authorized_at)->format('d M Y H:i:s') : 'N/A' }}
+                                </div>
+                            </div>
+                        @endif
+
+                        @if($periodeStatement->processed_at)
+                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                                <label class="form-label max-w-56 font-bold">
+                                    Processed At:
+                                </label>
+                                <div class="flex flex-wrap items-baseline">
+                                    {{ \Carbon\Carbon::parse($periodeStatement->processed_at)->format('d M Y H:i:s') }}
+                                </div>
+                            </div>
+                        @endif
+
+
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-4">
+                            <label class="form-label max-w-56 font-bold">
+                                Authorization Status:
+                            </label>
+                            <div class="flex flex-wrap items-baseline">
+                                @php
+                                    $authStatusClass = [
+                                        'pending' => 'badge-light-warning',
+                                        'approved' => 'badge-light-success',
+                                        'rejected' => 'badge-light-danger'
+                                    ][$periodeStatement->authorized_status] ?? 'badge-light-primary';
+                                @endphp
+                                <span class="badge {{ $authStatusClass }}">{{ ucfirst($periodeStatement->authorized_status) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                @if($periodeStatement->notes)
+                    <div class="flex flex-col mt-4">
+                        <label class="form-label font-bold mb-2">
+                            Notes:
+                        </label>
+                        <div class="bg-gray-100 dark:bg-coal-300 p-4 rounded-lg whitespace-pre-line">
+                            {{ $periodeStatement->notes }}
+                        </div>
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index 9c88b88..3d1cbe3 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -88,3 +88,24 @@
         $trail->parent('home');
         $trail->push('Sync Logs Biaya Kartu', route('sync-logs.index'));
     });
+
+
+    Breadcrumbs::for('periode-statements.index', function (BreadcrumbTrail $trail) {
+        $trail->parent('home');
+        $trail->push('Periode Statement', route('periode-statements.index'));
+    });
+
+    Breadcrumbs::for('periode-statements.create', function (BreadcrumbTrail $trail) {
+        $trail->parent('periode-statements.index');
+        $trail->push('Create Periode Statement', route('periode-statements.create'));
+    });
+
+    Breadcrumbs::for('periode-statements.edit', function (BreadcrumbTrail $trail, $data) {
+        $trail->parent('periode-statements.index');
+        $trail->push('Create Periode Statement', route('periode-statements.edit', $data));
+    });
+
+    Breadcrumbs::for('periode-statements.show', function (BreadcrumbTrail $trail, $data) {
+        $trail->parent('periode-statements.index');
+        $trail->push('View Periode Statement', route('periode-statements.show', $data));
+    });
diff --git a/routes/web.php b/routes/web.php
index b87843b..fa01270 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+    use Modules\Webstatement\Http\Controllers\PeriodeStatementController;
     use Modules\Webstatement\Http\Controllers\SyncLogsController;
     use Modules\Webstatement\Http\Controllers\JenisKartuController;
     use Modules\Webstatement\Http\Controllers\KartuAtmController;
@@ -58,6 +59,26 @@ Route::middleware(['auth'])->group(function () {
         Route::get('/{id}/view', [EmailBlastController::class, 'view'])->name('emailblast.view');
         Route::get('/datatables', [EmailBlastController::class, 'datatables'])->name('emailblast.datatables');
     });
+
+    // Periode Statement Routes
+    Route::group(['prefix' => 'periode-statements', 'as' => 'periode-statements.', 'middleware' => ['auth']], function () {
+        Route::get('/datatables', [PeriodeStatementController::class, 'dataForDatatables'])->name('datatables');
+        Route::get('/export', [PeriodeStatementController::class, 'export'])->name('export');
+
+        // Process, complete, and fail routes
+        Route::get('/{periodeStatement}/process', 'PeriodeStatementController@process')->name('process');
+        Route::get('/{periodeStatement}/complete', 'PeriodeStatementController@complete')->name('complete');
+        Route::post('/{periodeStatement}/fail', 'PeriodeStatementController@fail')->name('fail');
+
+        // Authorization routes
+        Route::get('/pending-authorization', 'PeriodeStatementController@pendingAuthorization')->name('pending-authorization');
+        Route::get('/{periodeStatement}/authorize', 'PeriodeStatementController@showAuthorize')->name('show-authorize');
+        Route::post('/{periodeStatement}/authorize', 'PeriodeStatementController@authorize')->name('authorize');
+    });
+
+    Route::resource('periode-statements', PeriodeStatementController::class);
+
+
 });
 
 Route::get('migrasi', [MigrasiController::class, 'index'])->name('migrasi.index');