akaunting 3.0 (the last dance)

resources/views/widgets/account_balance.blade.php

@@ -1,24 +1,12 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
+<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+    @include($class->views['header'], ['header_class' => ''])
 
-        <div class="table-responsive">
-            <table class="table align-items-center table-flush">
-                <thead class="thead-light">
-                    <tr class="row table-head-line">
-                        <th class="col-xs-6 col-md-6 text-left">{{ trans('general.name') }}</th>
-                        <th class="col-xs-6 col-md-6 text-right">{{ trans('general.balance') }}</th>
-                    </tr>
-                </thead>
-                <tbody class="thead-light">
-                    @foreach($accounts as $item)
-                        <tr class="row border-top-1 tr-py">
-                            <td class="col-xs-6 col-md-6 text-left long-texts">{{ $item->name }}</td>
-                            <td class="col-xs-6 col-md-6 text-right">@money($item->balance, $item->currency_code, true)</td>
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-    </div>
+    <ul class="text-sm space-y-3 my-3">
+        @foreach($accounts as $item)
+            <li class="flex justify-between">
+                {{ $item->name }}
+                <span class="font-medium">{{ $item->balance_formatted }}</span>
+            </li>
+        @endforeach
+    </ul>
 </div>

resources/views/widgets/bank_feeds.blade.php

@@ -0,0 +1,23 @@
+@if (! empty($module))
+    {!! $module !!}
+@else
+    <div class="relative w-full lg:w-1/2 my-8 px-12">
+        <div class="relative pb-2 my-4 lg:my-0 z-10">
+            <div class="flex justify-between font-medium mb-2">
+                <h2 class="text-black">
+                    {{ trans('widgets.bank_feeds') }}
+                </h2>
+            </div>
+
+            <span class="w-64 block mb-3 text-black-400 text-xs">{!! trans('widgets.description.bank_feeds') !!}</span>
+
+            <a href="{{ $learn_more_url }}" target="_blank" class="font-light text-xs border-b transition-all hover:font-medium">
+                {{ trans('modules.learn_more') }}
+            </a>
+        </div>
+
+        <div class="relative flex justify-end -mt-28">
+            <img src="https://assets.akaunting.com/software/admin/bank-feeds.png" alt="Bank Feeds" />
+        </div>
+    </div>
+@endif

resources/views/widgets/bar_chart.blade.php

@@ -0,0 +1,13 @@
+<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+    @include($class->views['header'], ['header_class' => ''])
+
+    <div class="flex flex-col lg:flex-row mt-3" id="widget-bar-{{ $class->model->id }}">
+        <div class="w-full">
+            {!! $chart->container() !!}
+        </div>
+    </div>
+</div>
+
+@push('body_scripts')
+    {!! $chart->script() !!}
+@endpush

resources/views/widgets/cash_flow.blade.php

@@ -0,0 +1,43 @@
+<div id="widget-{{ $class->model->id }}" class="w-full my-8 px-12">
+    @include($class->views['header'], ['header_class' => ''])
+
+    <div class="flex flex-col lg:flex-row mt-3">
+        <div class="w-full lg:w-11/12">
+            {!! $chart->container() !!}
+        </div>
+
+        <div class="w-full lg:w-1/12 mt-11 space-y-2">
+            <div class="flex flex-col items-center justify-between text-center">
+                <div class="flex justify-end lg:block text-lg">
+                    {{ $totals['incoming'] }}
+                </div>
+
+                <span class="text-green text-xs">{{ trans('general.incoming') }}</span>
+
+                <span class="material-icons mt-2">remove</span>
+            </div>
+
+            <div class="flex flex-col items-center justify-between">
+                <div class="flex justify-end lg:block text-lg">
+                    {{ $totals['outgoing'] }}
+                </div>
+
+                <span class="text-rose text-xs">{{ trans('general.outgoing') }}</span>
+
+                <span class="material-icons mt-2">drag_handle</span>
+            </div>
+
+            <div class="flex flex-col items-center justify-between">
+                <div class="flex justify-end lg:block text-lg">
+                    {{ $totals['profit'] }}
+                </div>
+
+                <span class="text-purple text-xs">{{ trans_choice('general.profits', 1) }}</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('body_scripts')
+    {!! $chart->script() !!}
+@endpush

resources/views/widgets/currencies.blade.php

@@ -1,24 +1,12 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
+<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+    @include($class->views['header'], ['header_class' => ''])
 
-        <div class="table-responsive">
-            <table class="table align-items-center table-flush">
-                <thead class="thead-light">
-                    <tr class="row table-head-line">
-                        <th class="col-xs-6 col-md-6 text-left">{{ trans('general.name') }}</th>
-                        <th class="col-xs-6 col-md-6 text-right">{{ trans('currencies.rate') }}</th>
-                    </tr>
-                </thead>
-                <tbody class="thead-light">
-                    @foreach($currencies as $item)
-                        <tr class="row border-top-1 tr-py">
-                            <td class="col-xs-6 col-md-6 text-left long-texts">{{ $item->name }}</td>
-                            <td class="col-xs-6 col-md-6 text-right">{{ $item->rate }}</td>
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-    </div>
+    <ul class="text-sm space-y-3 my-3">
+        @foreach($currencies as $item)
+            <li class="flex justify-between">
+                {{ $item->name }}
+                <span class="font-medium">{{ $item->rate }}</span>
+            </li>
+        @endforeach
+    </ul>
 </div>

resources/views/widgets/donut_chart.blade.php

@@ -1,11 +1,9 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card">
-        @include($class->views['header'])
+<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+    @include($class->views['header'], ['header_class' => ''])
 
-        <div class="card-body" id="widget-donut-{{ $class->model->id }}">
-            <div class="chart-donut">
-                {!! $chart->container() !!}
-            </div>
+    <div class="flex flex-col lg:flex-row mt-3" id="widget-donut-{{ $class->model->id }}">
+        <div class="w-full">
+            {!! $chart->container() !!}
         </div>
     </div>
 </div>

resources/views/widgets/latest_expenses.blade.php

@@ -1,37 +0,0 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
-
-        <div class="table-responsive">
-            <table class="table align-items-center table-flush">
-                <thead class="thead-light">
-                    <tr class="row table-head-line">
-                        <th class="col-xs-4 col-md-4 text-left">{{ trans('general.date') }}</th>
-                        <th class="col-xs-4 col-md-4 text-left">{{ trans_choice('general.categories', 1) }}</th>
-                        <th class="col-xs-4 col-md-4 text-right">{{ trans('general.amount') }}</th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    @if ($transactions->count())
-                        @foreach($transactions as $item)
-                            <tr class="row border-top-1 tr-py">
-                                <td class="col-xs-4 col-md-4 text-left">@date($item->paid_at)</td>
-                                <td class="col-xs-4 col-md-4 text-left long-texts" title="{{ $item->category->name }}">{{ $item->category->name }}</td>
-                                <td class="col-xs-4 col-md-4 text-right">@money($item->amount, $item->currency_code, true)</td>
-                            </tr>
-                        @endforeach
-                    @else
-                        <tr class="border-top-1">
-                            <td colspan="3">
-                                <div class="text-muted nr-py" id="datatable-basic_info" role="status" aria-live="polite">
-                                    {{ trans('general.no_records') }}
-                                </div>
-                            </td>
-                        </tr>
-                    @endif
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>

resources/views/widgets/latest_income.blade.php

@@ -1,37 +0,0 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
-
-        <div class="table-responsive">
-            <table class="table align-items-center table-flush">
-                <thead class="thead-light">
-                    <tr class="row table-head-line">
-                        <th class="col-xs-4 col-md-4 text-left">{{ trans('general.date') }}</th>
-                        <th class="col-xs-4 col-md-4 text-left">{{ trans_choice('general.categories', 1) }}</th>
-                        <th class="col-xs-4 col-md-4 text-right">{{ trans('general.amount') }}</th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    @if ($transactions->count())
-                        @foreach($transactions as $item)
-                            <tr class="row border-top-1 tr-py">
-                                <td class="col-xs-4 col-md-4 text-left">@date($item->paid_at)</td>
-                                <td class="col-xs-4 col-md-4 text-left long-texts" title="{{ $item->category->name }}">{{ $item->category->name }}</td>
-                                <td class="col-xs-4 col-md-4 text-right">@money($item->amount, $item->currency_code, true)</td>
-                            </tr>
-                        @endforeach
-                    @else
-                        <tr class="border-top-1">
-                            <td colspan="3">
-                                <div class="text-muted nr-py" id="datatable-basic_info" role="status" aria-live="polite">
-                                    {{ trans('general.no_records') }}
-                                </div>
-                            </td>
-                        </tr>
-                    @endif
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>

resources/views/widgets/line_chart.blade.php

@@ -1,11 +1,9 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card">
-        @include($class->views['header'])
+<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+    @include($class->views['header'])
 
-        <div class="card-body" id="widget-line-{{ $class->model->id }}">
-            <div class="chart">
-                {!! $chart->container() !!}
-            </div>
+    <div class="card-body" id="widget-line-{{ $class->model->id }}">
+        <div class="chart">
+            {!! $chart->container() !!}
         </div>
     </div>
 </div>

resources/views/widgets/receivables_payables.blade.php

@@ -0,0 +1,50 @@
+<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+    @include($class->views['header'], ['header_class' => 'border-b-0'])
+
+    <div class="my-3 text-black-400 text-sm">
+        {{ $grand_total_text }}: <span class="font-bold">{{ $totals['grand'] }}</span>
+    </div>
+
+    <div class="my-3" aria-hidden="true">
+        <div @class(['h-3', 'rounded-md', 'bg-red-300' => $has_progress, 'bg-gray-300' => ! $has_progress])>
+            <div @class(['h-3', 'rounded-md', 'bg-orange-300' => $has_progress, 'bg-gray-300' => ! $has_progress]) style="width: {{ $progress }}%;"></div>
+        </div>
+    </div>
+
+    <div class="flex">
+        <div class="ltr:mr-4 rtl:ml-4">
+            <span @class(['flex', 'text-sm', 'text-orange' => $has_progress, 'text-black' => ! $has_progress])>
+                {{ trans('general.open') }}
+            </span>
+
+            <div class="flex items-center text-black-400 font-medium">
+                {{ $totals['open'] }}
+            </div>
+        </div>
+
+        <div class="ml-4">
+            <span @class(['flex', 'text-sm', 'text-red' => $has_progress, 'text-black' => ! $has_progress])>
+                {{ trans('general.overdue') }}
+            </span>
+
+            <button id="dashboard-widget-{{ strtolower(class_basename($class)) }}-overdue" type="button" class="flex items-center text-black-400 font-medium group" data-dropdown-toggle="widgets-list-{{ $class->model->id }}">
+                <span class="border-b border-transparent transition-all group-hover:border-black-400"> {{ $totals['overdue'] }} </span>
+
+                <div class="relative flex">
+                    <span class="material-icons-round cursor-pointer">arrow_drop_down</span>
+
+                    <div id="widgets-list-{{ $class->model->id }}" class="absolute right-0 mt-3 py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 hidden" style="left: auto; min-width: 10rem;">
+                        @foreach($periods as $name => $amount)
+                            <div id="dashboard-widget-{{ strtolower(class_basename($class)) }}-{{ str_replace('_', '-', $name) }}" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap cursor-auto">
+                                <div class="w-full h-full flex items-center justify-between rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <div class="font-normal text-sm">{{ trans('widgets.periods.' . $name) }}</div>
+                                    <div class="pl-12 text-sm">{{ $amount }}</div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </button>
+        </div>
+    </div>
+</div>

resources/views/widgets/total_expenses.blade.php

@@ -1,31 +0,0 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card bg-gradient-danger card-stats">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
-
-        <div class="card-body">
-            <div class="row">
-                <div class="col">
-                    <h5 class="text-uppercase text-white mb-0">{{ $class->model->name }}</h5>
-                    <span class="font-weight-bold text-white mb-0">{{ $totals['grand'] }}</span>
-                </div>
-
-                <div class="col-auto">
-                    <div class="icon icon-shape bg-white text-danger rounded-circle shadow">
-                        <i class="fa fa-shopping-cart"></i>
-                    </div>
-                </div>
-            </div>
-
-            <p class="mt-3 mb-0 text-sm cursor-default">
-                <span class="text-white">{{ trans('widgets.payables') }}</span>
-                <el-tooltip
-                content="{{ trans('widgets.open_bills') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_bills') }}: {{ $totals['overdue'] }}"
-                effect="dark"
-                :open-delay="100"
-                placement="top">
-                    <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
-                </el-tooltip>
-            </p>
-        </div>
-    </div>
-</div>

resources/views/widgets/total_income.blade.php

@@ -1,31 +0,0 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card bg-gradient-info card-stats">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
-
-        <div class="card-body">
-            <div class="row">
-                <div class="col">
-                    <h5 class="text-uppercase text-white mb-0">{{ $class->model->name }}</h5>
-                    <span class="font-weight-bold text-white mb-0">{{ $totals['grand'] }}</span>
-                </div>
-
-                <div class="col-auto">
-                    <div class="icon icon-shape bg-white text-info rounded-circle shadow">
-                        <i class="fa fa-money-bill"></i>
-                    </div>
-                </div>
-            </div>
-
-            <p class="mt-3 mb-0 text-sm cursor-default">
-                <span class="text-white">{{ trans('widgets.receivables') }}</span>
-                <el-tooltip
-                content="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}"
-                effect="dark"
-                :open-delay="100"
-                placement="top">
-                    <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
-                </el-tooltip>
-            </p>
-        </div>
-    </div>
-</div>

resources/views/widgets/total_profit.blade.php

@@ -1,31 +0,0 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }}">
-    <div class="card bg-gradient-success card-stats">
-        @include($class->views['header'], ['header_class' => 'border-bottom-0'])
-
-        <div class="card-body">
-            <div class="row">
-                <div class="col">
-                    <h5 class="text-uppercase text-white mb-0">{{ $class->model->name }}</h5>
-                    <span class="font-weight-bold text-white mb-0">{{ $totals['grand'] }}</span>
-                </div>
-
-                <div class="col-auto">
-                    <div class="icon icon-shape bg-white text-success rounded-circle shadow">
-                        <i class="fa fa-heart"></i>
-                    </div>
-                </div>
-            </div>
-
-            <p class="mt-3 mb-0 text-sm cursor-default">
-                <span class="text-white">{{ trans('general.upcoming') }}</span>
-                <el-tooltip
-                content="{{ trans('widgets.open_profit') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_profit') }}: {{ $totals['overdue'] }}"
-                effect="dark"
-                :open-delay="100"
-                placement="top">
-                    <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
-                </el-tooltip>
-            </p>
-        </div>
-    </div>
-</div>