Skip to content

Commit 0740c4e

Browse files
tlshifattlshifat
committed
Add income modal and show list data
1 parent 355bc90 commit 0740c4e

File tree

6 files changed

+163
-7
lines changed

6 files changed

+163
-7
lines changed

‎app/Http/Controllers/DashboardController.php

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22

33
namespace App\Http\Controllers;
44

5+
use App\Models\Transaction;
56
use Illuminate\View\View;
67

78
class DashboardController extends Controller
89
{
910
public function index(): View
1011
{
11-
return view('app');
12+
$transactionList = Transaction::all(); // Fetch all income records from the database
13+
14+
return view('app', compact('transactionList'));
1215
}
1316
}

‎app/Http/Controllers/TransactionController.php

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
use App\Models\Transaction;
6+
use Illuminate\Http\Request;
7+
8+
class TransactionController extends Controller
9+
{
10+
11+
public function store(Request $request)
12+
{
13+
Transaction::create($request->all());
14+
return view('app');
15+
}
16+
}

‎database/migrations/2023_08_07_140120_alter_transactions_table.php

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<?php
2+
3+
use Illuminate\Database\Migrations\Migration;
4+
use Illuminate\Database\Schema\Blueprint;
5+
use Illuminate\Support\Facades\Schema;
6+
7+
return new class extends Migration
8+
{
9+
/**
10+
* Run the migrations.
11+
*/
12+
public function up(): void
13+
{
14+
Schema::table('transactions', function (Blueprint $table) {
15+
$table->double('credit', 10, 2)->default(0)->nullable()->change();
16+
$table->double('debit', 10, 2)->default(0)->nullable()->change();
17+
$table->string('description')->nullable()->change();
18+
});
19+
}
20+
21+
/**
22+
* Reverse the migrations.
23+
*/
24+
public function down(): void
25+
{
26+
Schema::table('transactions', function (Blueprint $table) {
27+
$table->double('credit', 10, 2)->change();
28+
$table->double('debit', 10, 2)->change();
29+
$table->string('description')->change();
30+
});
31+
}
32+
};

‎database/seeders/TransactionSeeder.php

+10-4
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,21 @@ class TransactionSeeder extends Seeder
1515
*/
1616
public function run()
1717
{
18-
for ($i=0; $i <5 ; $i++) {
18+
for ($i=0; $i <2; $i++) {
1919
Transaction::create([
2020
'title' => Factory::create()->name(),
2121
'description' => Factory::create()->text(),
22-
'credit' => rand(0,1),
23-
'debit' => rand(0,1),
22+
'credit' => rand(100,10000),
23+
'status' => Factory::create()->randomElement(['Success', 'Failed', 'Pending'])
24+
]);
25+
}
26+
for ($i=0; $i <3; $i++) {
27+
Transaction::create([
28+
'title' => Factory::create()->name(),
29+
'description' => Factory::create()->text(),
30+
'debit' => rand(100,10000),
2431
'status' => Factory::create()->randomElement(['Success', 'Failed', 'Pending'])
2532
]);
26-
2733
}
2834
}
2935
}

‎resources/views/app.blade.php

+95-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</div>
5252
</div>
5353
<div class="mt-6 flex space-x-3 md:ml-4 md:mt-0">
54-
<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>
54+
<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>
5555
<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>
5656
</div>
5757
</div>
@@ -143,6 +143,43 @@
143143
</tr>
144144
</thead>
145145
<tbody class="divide-y divide-gray-200 bg-white">
146+
@foreach($transactionList as $transaction)
147+
<tr class="bg-white">
148+
<td class="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
149+
<div class="flex">
150+
<a href="#" class="group inline-flex space-x-2 truncate text-sm">
151+
<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">
152+
<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" />
153+
</svg>
154+
<p class="truncate text-gray-500 group-hover:text-gray-900">{{ $transaction->title }}</p>
155+
</a>
156+
</div>
157+
</td>
158+
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
159+
<span class="font-medium text-gray-900">${{ number_format($transaction->credit > 0 ? $transaction->credit : $transaction->debit, 0, '.', ',') }}</span>
160+
USD
161+
</td>
162+
<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
163+
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
164+
@if($transaction->status === 'Success')
165+
bg-green-100 text-green-800
166+
@elseif($transaction->status === 'Failed')
167+
bg-red-100 text-red-800
168+
@elseif($transaction->status === 'Pending')
169+
bg-yellow-100 text-yellow-800
170+
@else
171+
bg-gray-100 text-gray-800
172+
@endif
173+
capitalize">
174+
{{ $transaction->status }}
175+
</span>
176+
</td>
177+
178+
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
179+
<time datetime="2020-07-11">{{$transaction->created_at->format('F j, Y')}}</time>
180+
</td>
181+
</tr>
182+
@endforeach
146183
<tr class="bg-white">
147184
<td class="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
148185
<div class="flex">
@@ -195,5 +232,62 @@
195232
</main>
196233
</div>
197234
</div>
235+
236+
<!-- Add Income Modal -->
237+
<div id="incomeModal" class="fixed inset-0 z-10 flex items-center justify-center bg-black bg-opacity-50 hidden">
238+
<div class="bg-white p-6 rounded-md shadow-md" style="width: 30%;">
239+
<h2 class="text-lg font-semibold mb-4">Add Income</h2>
240+
<form action="{{ route('transaction.store') }}" method="POST">
241+
@csrf
242+
<div class="mb-4">
243+
<label for="title" class="block font-semibold">Title <span class="text-red-500">*</span></label>
244+
<input type="text" name="title" id="title" required class="w-full border rounded-md px-3 py-2">
245+
</div>
246+
<div class="mb-4">
247+
<label for="description" class="block font-semibold">Description</label>
248+
<textarea name="description" id="description" class="w-full border rounded-md px-3 py-2"></textarea>
249+
</div>
250+
<div class="mb-4" style="width: 25%">
251+
<label for="credit" class="block font-semibold">Credit</label>
252+
<input type="number" name="credit" id="credit" class="w-full border rounded-md px-3 py-2">
253+
</div>
254+
<div class="mb-4" style="width: 25%">
255+
<label for="status" class="block font-semibold">Status</label>
256+
<select name="status" id="status" class="w-full border rounded-md px-3 py-2">
257+
<option value="Success">Success</option>
258+
<option value="Failed">Failed</option>
259+
<option value="Pending">Pending</option>
260+
</select>
261+
</div>
262+
<div class="flex justify-end">
263+
<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>
264+
<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>
265+
</div>
266+
</form>
267+
</div>
268+
</div>
269+
198270
</body>
199271
</html>
272+
<script>
273+
function openIncomeModal() {
274+
document.getElementById('incomeModal').classList.remove('hidden');
275+
}
276+
277+
function closeIncomeModal() {
278+
document.getElementById('incomeModal').classList.add('hidden');
279+
}
280+
</script>
281+
<style>
282+
/* Add custom styles for the modal */
283+
/*#incomeModal {*/
284+
/* width: 30%; !* Set the modal width to cover 30% of the window *!*/
285+
/* max-width: 400px; !* Limit the maximum width to 400px to ensure it's not too large *!*/
286+
/*}*/
287+
288+
/* Center the modal horizontally and vertically */
289+
/*#incomeModal .modal-content {*/
290+
/* margin: 0 auto;*/
291+
/* margin-top: 15vh;*/
292+
/*}*/
293+
</style>

‎routes/web.php

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<?php
22

3+
use App\Http\Controllers\DashboardController;
4+
use App\Http\Controllers\TransactionController;
35
use Illuminate\Support\Facades\Route;
46

57
/*
@@ -13,5 +15,8 @@
1315
|
1416
*/
1517

16-
Route::get('/', [\App\Http\Controllers\DashboardController::class, 'index'])
18+
Route::get('/', [DashboardController::class, 'index'])
1719
->name('dashboard');
20+
21+
Route::post('/transaction', [TransactionController::class, 'store'])
22+
->name('transaction.store');

0 commit comments

Comments
 (0)