Adds Income modal

Author: tlshifat

README.md

@@ -6,6 +6,20 @@ MoneyMint is a simple app for tracking expenses, budgeting, and getting an overv
   <img alt="MoneyMint" src="https://github.com/phpfour/moneymint/assets/171715/e91cb8ef-507a-4b34-9e7e-ad42fa25fad4" style="max-width: 100%;">
 </p>
 
+## Installation
+- Clone the repository
+- cd moneymint
+- composer install or composer update
+- cp .env.example .env
+- Set up .env file
+- php artisan key:generate
+- php artisan migrate:fresh --seed
+- php artisan serve
+
+In new terminal
+- npm i
+- npm run dev
+
 ## Contributing
 
 Thank you for considering contributing to the project! Please fork this project and open a pull request against the `main` branch.

app/Http/Controllers/DashboardController.php

@@ -2,10 +2,15 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Transaction;
+use Illuminate\View\View;
+
 class DashboardController extends Controller
 {
-    public function index()
+    public function index(): View
     {
-        return view('app');
+        $transactionList = Transaction::all(); // Fetch all income records from the database
+
+        return view('app', compact('transactionList'));
     }
 }

app/Http/Controllers/TransactionController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Transaction;
+use Illuminate\Http\Request;
+
+class TransactionController extends Controller
+{
+
+    public function store(Request $request)
+    {
+        Transaction::create($request->all());
+        return view('app');
+    }
+}

app/Models/Transaction.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Models;
+
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Transaction extends Model
+{
+    use HasFactory,SoftDeletes;
+
+    protected $guarded =[];
+}

database/migrations/2023_08_06_114510_create_transaction_table.php

@@ -0,0 +1,33 @@
+<?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('transactions', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->string('description');
+            $table->double('credit', 10, 2);
+            $table->double('debit', 10, 2);
+            $table->string('status');
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('transaction');
+    }
+};

database/migrations/2023_08_07_140120_alter_transactions_table.php

@@ -0,0 +1,32 @@
+<?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::table('transactions', function (Blueprint $table) {
+            $table->double('credit', 10, 2)->default(0)->nullable()->change();
+            $table->double('debit', 10, 2)->default(0)->nullable()->change();
+            $table->string('description')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('transactions', function (Blueprint $table) {
+            $table->double('credit', 10, 2)->change();
+            $table->double('debit', 10, 2)->change();
+            $table->string('description')->change();
+        });
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -18,5 +18,9 @@ public function run(): void
         //     'name' => 'Test User',
         //     'email' => '[email protected]',
         // ]);
+
+        $this->call([
+            TransactionSeeder::class,
+        ]);
     }
 }

database/seeders/TransactionSeeder.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Transaction;
+use Faker\Factory;
+use Illuminate\Database\Seeder;
+
+class TransactionSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        for ($i=0; $i <2; $i++) {
+            Transaction::create([
+                'title'   => Factory::create()->name(),
+                'description' => Factory::create()->text(),
+                'credit'   => rand(100,10000),
+                'status'  => Factory::create()->randomElement(['Success', 'Failed', 'Pending'])
+            ]);
+        }
+        for ($i=0; $i <3; $i++) {
+            Transaction::create([
+                'title'   => Factory::create()->name(),
+                'description' => Factory::create()->text(),
+                'debit'   => rand(100,10000),
+                'status'  => Factory::create()->randomElement(['Success', 'Failed', 'Pending'])
+            ]);
+        }
+    }
+}

resources/views/app.blade.php

@@ -51,7 +51,7 @@
                             </div>
                         </div>
                         <div class="mt-6 flex space-x-3 md:ml-4 md:mt-0">
-                            <button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Add Income</button>
+                            <button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" onclick="openIncomeModal()">Add Income</button>
                             <button type="button" class="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600">Add Expense</button>
                         </div>
                     </div>
@@ -143,6 +143,43 @@
                                     </tr>
                                     </thead>
                                     <tbody class="divide-y divide-gray-200 bg-white">
+                                     @foreach($transactionList as $transaction)
+                                         <tr class="bg-white">
+                                             <td class="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+                                                 <div class="flex">
+                                                     <a href="#" class="group inline-flex space-x-2 truncate text-sm">
+                                                         <svg class="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                             <path fill-rule="evenodd" d="M1 4a1 1 0 011-1h16a1 1 0 011 1v8a1 1 0 01-1 1H2a1 1 0 01-1-1V4zm12 4a3 3 0 11-6 0 3 3 0 016 0zM4 9a1 1 0 100-2 1 1 0 000 2zm13-1a1 1 0 11-2 0 1 1 0 012 0zM1.75 14.5a.75.75 0 000 1.5c4.417 0 8.693.603 12.749 1.73 1.111.309 2.251-.512 2.251-1.696v-.784a.75.75 0 00-1.5 0v.784a.272.272 0 01-.35.25A49.043 49.043 0 001.75 14.5z" clip-rule="evenodd" />
+                                                         </svg>
+                                                         <p class="truncate text-gray-500 group-hover:text-gray-900">{{ $transaction->title }}</p>
+                                                     </a>
+                                                 </div>
+                                             </td>
+                                             <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                                 <span class="font-medium text-gray-900">${{ number_format($transaction->credit > 0 ? $transaction->credit : $transaction->debit, 0, '.', ',') }}</span>
+                                                 USD
+                                             </td>
+                                             <td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
+                                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
+                                                    @if($transaction->status === 'Success')
+                                                        bg-green-100 text-green-800
+                                                    @elseif($transaction->status === 'Failed')
+                                                        bg-red-100 text-red-800
+                                                    @elseif($transaction->status === 'Pending')
+                                                        bg-yellow-100 text-yellow-800
+                                                    @else
+                                                        bg-gray-100 text-gray-800
+                                                    @endif
+                                                    capitalize">
+                                                    {{ $transaction->status }}
+                                                </span>
+                                             </td>
+
+                                             <td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                                 <time datetime="2020-07-11">{{$transaction->created_at->format('F j, Y')}}</time>
+                                             </td>
+                                         </tr>
+                                     @endforeach
                                     <tr class="bg-white">
                                         <td class="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                                             <div class="flex">
@@ -195,5 +232,62 @@
         </main>
     </div>
 </div>
+
+<!-- Add Income Modal -->
+<div id="incomeModal" class="fixed inset-0 z-10 flex items-center justify-center bg-black bg-opacity-50 hidden">
+    <div class="bg-white p-6 rounded-md shadow-md" style="width: 30%;">
+        <h2 class="text-lg font-semibold mb-4">Add Income</h2>
+        <form action="{{ route('transaction.store') }}" method="POST">
+            @csrf
+            <div class="mb-4">
+                <label for="title" class="block font-semibold">Title <span class="text-red-500">*</span></label>
+                <input type="text" name="title" id="title" required class="w-full border rounded-md px-3 py-2">
+            </div>
+            <div class="mb-4">
+                <label for="description" class="block font-semibold">Description</label>
+                <textarea name="description" id="description" class="w-full border rounded-md px-3 py-2"></textarea>
+            </div>
+            <div class="mb-4" style="width: 25%">
+                <label for="credit" class="block font-semibold">Credit</label>
+                <input type="number" name="credit" id="credit" class="w-full border rounded-md px-3 py-2">
+            </div>
+            <div class="mb-4" style="width: 25%">
+                <label for="status" class="block font-semibold">Status</label>
+                <select name="status" id="status" class="w-full border rounded-md px-3 py-2">
+                    <option value="Success">Success</option>
+                    <option value="Failed">Failed</option>
+                    <option value="Pending">Pending</option>
+                </select>
+            </div>
+            <div class="flex justify-end">
+                <button type="submit" class="px-4 py-2 bg-cyan-600 text-white font-semibold rounded-md hover:bg-cyan-500 mr-2" onclick="closeIncomeModal()">Submit</button>
+                <button type="button" class="px-4 py-2 bg-gray-300 text-gray-900 font-semibold rounded-md hover:bg-gray-400" onclick="closeIncomeModal()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+
 </body>
 </html>
+<script>
+    function openIncomeModal() {
+        document.getElementById('incomeModal').classList.remove('hidden');
+    }
+
+    function closeIncomeModal() {
+        document.getElementById('incomeModal').classList.add('hidden');
+    }
+</script>
+<style>
+    /* Add custom styles for the modal */
+    /*#incomeModal {*/
+    /*    width: 30%; !* Set the modal width to cover 30% of the window *!*/
+    /*    max-width: 400px; !* Limit the maximum width to 400px to ensure it's not too large *!*/
+    /*}*/
+
+    /* Center the modal horizontally and vertically */
+    /*#incomeModal .modal-content {*/
+    /*    margin: 0 auto;*/
+    /*    margin-top: 15vh;*/
+    /*}*/
+</style>

routes/web.php

@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\TransactionController;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -13,5 +15,8 @@
 |
 */
 
-Route::get('/', [\App\Http\Controllers\DashboardController::class, 'index'])
+Route::get('/', [DashboardController::class, 'index'])
     ->name('dashboard');
+
+Route::post('/transaction', [TransactionController::class, 'store'])
+    ->name('transaction.store');