new build 310

Add Resend Email Option

See merge request mohit.panjvani/crater-web!236

app/Console/Commands/UpdateCommand.php

@@ -0,0 +1,189 @@
+<?php
+
+namespace Crater\Console\Commands;
+
+use Illuminate\Console\Command;
+use Crater\Space\Updater;
+use Crater\Setting;
+
+class UpdateCommand extends Command
+{
+    public $installed;
+
+    public $version;
+
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'crater:update';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Automatically update your crater app';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        set_time_limit(3600); // 1 hour
+
+        $this->installed = $this->getInstalledVersion();
+        $this->version = $this->getLatestVersion();
+
+        if (!$this->version) {
+            $this->info('No Update Available! You are already on the latest version.');
+            return;
+        }
+
+        if (!$this->confirm("Do you wish to update to {$this->version}?")) {
+            return;
+        }
+
+        if (!$path = $this->download()) {
+            return;
+        }
+
+        if (!$path = $this->unzip($path)) {
+            return;
+        }
+
+        if (!$this->copyFiles($path)) {
+            return;
+        }
+
+        if (!$this->migrateUpdate()) {
+            return;
+        }
+
+        if (!$this->finish()) {
+            return;
+        }
+
+        $this->info('Successfully updated to ' . $this->version);
+    }
+
+    public function getInstalledVersion()
+    {
+        return Setting::getSetting('version');
+    }
+
+    public function getLatestVersion()
+    {
+        $this->info('Your currently installed version is ' . $this->installed);
+        $this->line('');
+        $this->info('Checking for update...');
+
+        try {
+            $response = Updater::checkForUpdate($this->installed);
+
+            if ($response->success) {
+                return $response->version->version;
+            }
+
+            return false;
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+
+            return false;
+        }
+    }
+
+    public function download()
+    {
+        $this->info('Downloading update...');
+
+        try {
+            $path = Updater::download($this->version);
+            if (!is_string($path)) {
+                $this->error('Download exception');
+                return false;
+            }
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+
+            return false;
+        }
+
+        return $path;
+    }
+
+    public function unzip($path)
+    {
+        $this->info('Unzipping update package...');
+
+        try {
+            $path = Updater::unzip($path);
+            if (!is_string($path)) {
+                $this->error('Unzipping exception');
+                return false;
+            }
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+
+            return false;
+        }
+
+        return $path;
+    }
+
+    public function copyFiles($path)
+    {
+        $this->info('Copying update files...');
+
+        try {
+            Updater::copyFiles($path);
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+
+            return false;
+        }
+
+        return true;
+    }
+
+    public function migrateUpdate()
+    {
+        $this->info('Running Migrations...');
+
+        try {
+            Updater::migrateUpdate();
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+
+            return false;
+        }
+
+        return true;
+    }
+
+    public function finish()
+    {
+        $this->info('Finishing update...');
+
+        try {
+            Updater::finishUpdate($this->installed, $this->version);
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+
+            return false;
+        }
+
+        return true;
+    }
+}

app/Console/Kernel.php

@@ -12,7 +12,8 @@ class Kernel extends ConsoleKernel
      * @var array
      */
     protected $commands = [
-        Commands\ResetApp::class
+        Commands\ResetApp::class,
+        Commands\UpdateCommand::class
     ];
 
     /**

app/Http/Controllers/EstimatesController.php

@@ -385,12 +385,12 @@ class EstimatesController extends Controller
     public function estimateToInvoice(Request $request, $id)
     {
         $estimate = Estimate::with(['items', 'items.taxes', 'user', 'estimateTemplate', 'taxes'])->find($id);
-        $invoice_date = Carbon::parse($estimate->estimate_date);
+        $invoice_date = Carbon::now();
         $invoice_prefix = CompanySetting::getSetting(
             'invoice_prefix',
             $request->header('company')
         );
-        $due_date = Carbon::parse($estimate->estimate_date)->addDays(7);
+        $due_date = Carbon::now()->addDays(7);
         $tax_per_item = CompanySetting::getSetting(
                 'tax_per_item',
                 $request->header('company')

app/Http/Controllers/ExpensesController.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace Crater\Http\Controllers;
 
 use Crater\Expense;
@@ -268,13 +269,6 @@ class ExpensesController extends Controller
             $media = $expense->getFirstMedia('receipts');
             if ($media) {
                 $imagePath = $media->getPath();
-                $filename = $media->getPath();
-                $type = \File::mimeType($imagePath);
-
-                $headers = array(
-                    'Content-Type' => $type,
-                );
-
                 $response = \Response::download($imagePath, $media->file_name);
                 ob_end_clean();
                 return $response;
@@ -286,4 +280,3 @@ class ExpensesController extends Controller
         ]);
     }
 }
-

app/Http/Controllers/UpdateController.php

@@ -2,23 +2,81 @@
 
 namespace Crater\Http\Controllers;
 
+use Crater\Setting;
 use Illuminate\Http\Request;
 use Crater\Space\Updater;
 use Crater\Space\SiteApi;
+use Illuminate\Support\Facades\Artisan;
 
 class UpdateController extends Controller
 {
-    public function update(Request $request)
+
+    public function download(Request $request)
     {
-        set_time_limit(600); // 10 minutes
+        $request->validate([
+            'version' => 'required',
+        ]);
 
-        $json = Updater::update($request->installed, $request->version);
+        $path = Updater::download($request->version);
 
-        return response()->json($json);
+        return response()->json([
+            'success' => true,
+            'path' => $path
+        ]);
+    }
+
+    public function unzip(Request $request)
+    {
+        $request->validate([
+            'path' => 'required',
+        ]);
+
+        try {
+            $path = Updater::unzip($request->path);
+
+            return response()->json([
+                'success' => true,
+                'path' => $path
+            ]);
+
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'error' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    public function copyFiles(Request $request)
+    {
+        $request->validate([
+            'path' => 'required',
+        ]);
+
+        $path = Updater::copyFiles($request->path);
+
+        return response()->json([
+            'success' => true,
+            'path' => $path
+        ]);
+    }
+
+    public function migrate(Request $request)
+    {
+        Updater::migrateUpdate();
+
+        return response()->json([
+            'success' => true
+        ]);
     }
 
     public function finishUpdate(Request $request)
     {
+        $request->validate([
+            'installed' => 'required',
+            'version' => 'required',
+        ]);
+
         $json = Updater::finishUpdate($request->installed, $request->version);
 
         return response()->json($json);
@@ -28,7 +86,7 @@ class UpdateController extends Controller
     {
         set_time_limit(600); // 10 minutes
 
-        $json = Updater::checkForUpdate();
+        $json = Updater::checkForUpdate(Setting::getSetting('version'));
 
         return response()->json($json);
     }

app/Listeners/Updates/v3/Version301.php

@@ -1,51 +0,0 @@
-<?php
-
-namespace Crater\Listeners\Updates\v3;
-
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Queue\InteractsWithQueue;
-use Illuminate\Database\Schema\Blueprint;
-use Crater\Events\UpdateFinished;
-use Crater\Listeners\Updates\Listener;
-use Crater\Setting;
-use Crater\Currency;
-
-class Version301 extends Listener
-{
-    const VERSION = '3.0.1';
-
-    /**
-     * Create the event listener.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        //
-    }
-
-    /**
-     * Handle the event.
-     *
-     * @param  object  $event
-     * @return void
-     */
-    public function handle(UpdateFinished $event)
-    {
-        if ($this->isListenerFired($event)) {
-            return;
-        }
-
-        Currency::create([
-            'name' => 'Kyrgyzstani som',
-            'code' => 'KGS',
-            'symbol' => 'С̲ ',
-            'precision' => '2',
-            'thousand_separator' => '.',
-            'decimal_separator' => ','
-        ]);
-
-        // Update Crater app version
-        Setting::setSetting('version', static::VERSION);
-    }
-}

app/Listeners/Updates/v3/Version310.php

@@ -7,30 +7,46 @@ use Illuminate\Queue\InteractsWithQueue;
 use Crater\Listeners\Updates\Listener;
 use Illuminate\Database\Schema\Blueprint;
 use Crater\Events\UpdateFinished;
+use Crater\Setting;
+use Crater\Currency;
+use Schema;
+use Artisan;
 
-class Version310
+class Version310 extends Listener
 {
-    /**
+    const VERSION = '3.1.0';
-     * Create the event listener.
+
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        //
-    }
 
     /**
      * Handle the event.
      *
-     * @param  object  $event
+     * @param UpdateFinished $event
      * @return void
      */
     public function handle(UpdateFinished $event)
     {
-        \Schema::table('expenses', function (Blueprint $table) {
+        if ($this->isListenerFired($event)) {
-            $table->integer('user_id')->unsigned()->nullable();
+            return;
-            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+        }
-        });
+
+        Currency::firstOrCreate(
+            [
+                'name' => 'Kyrgyzstani som',
+                'code' => 'KGS'
+            ],
+            [
+                'name' => 'Kyrgyzstani som',
+                'code' => 'KGS',
+                'symbol' => 'С̲ ',
+                'precision' => '2',
+                'thousand_separator' => '.',
+                'decimal_separator' => ','
+            ]
+        );
+
+        Artisan::call('migrate', ['--force' => true]);
+
+        // Update Crater app version
+        Setting::setSetting('version', static::VERSION);
     }
 }

app/Providers/EventServiceProvider.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace Crater\Providers;
 
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
@@ -11,7 +12,6 @@ use Crater\Listeners\Updates\v2\Version201;
 use Crater\Listeners\Updates\v2\Version202;
 use Crater\Listeners\Updates\v2\Version210;
 use Crater\Listeners\Updates\v3\Version300;
-use Crater\Listeners\Updates\v3\Version301;
 use Crater\Listeners\Updates\v3\Version310;
 
 class EventServiceProvider extends ServiceProvider
@@ -29,7 +29,6 @@ class EventServiceProvider extends ServiceProvider
             Version202::class,
             Version210::class,
             Version300::class,
-            Version301::class,
             Version310::class,
         ],
         Registered::class => [

app/Space/Updater.php

@@ -2,31 +2,45 @@
 namespace Crater\Space;
 
 use File;
-use ZipArchive;
 use Artisan;
 use GuzzleHttp\Exception\RequestException;
-use Crater\Space\SiteApi;
 use Crater\Events\UpdateFinished;
-use Crater\Setting;
+use ZipArchive;
-use Illuminate\Http\Request;
 
 class Updater
 {
     use SiteApi;
 
-    public static function update($installed, $version)
+    public static function checkForUpdate($installed_version)
+    {
+        $data = null;
+        if(env('APP_ENV') === 'development')
+        {
+            $url = 'https://craterapp.com/downloads/check/latest/'. $installed_version . '?type=update&is_dev=1';
+        } else {
+            $url = 'https://craterapp.com/downloads/check/latest/'. $installed_version . '?type=update';
+        }
+
+        $response = static::getRemote($url, ['timeout' => 100, 'track_redirects' => true]);
+
+        if ($response && ($response->getStatusCode() == 200)) {
+            $data = $response->getBody()->getContents();
+        }
+
+        return json_decode($data);
+    }
+
+    public static function download($new_version)
     {
         $data = null;
         $path = null;
 
-        if(env('APP_ENV') === 'development')
+        if (env('APP_ENV') === 'development') {
-        {
+            $url = 'https://craterapp.com/downloads/file/' . $new_version . '?type=update&is_dev=1';
-            $url = 'https://craterapp.com/downloads/file/'.$version.'?type=update&is_dev=1';
         } else {
-            $url = 'https://craterapp.com/downloads/file/'.$version.'?type=update';
+            $url = 'https://craterapp.com/downloads/file/' . $new_version . '?type=update';
         }
 
-
         $response = static::getRemote($url, ['timeout' => 100, 'track_redirects' => true]);
 
         // Exception
@@ -45,66 +59,68 @@ class Updater
         }
 
         // Create temp directory
-        $path = 'temp-' . md5(mt_rand());
+        $temp_dir = storage_path('app/temp-' . md5(mt_rand()));
-        $path2 = 'temp2-' . md5(mt_rand());
-        $temp_path = storage_path('app') . '/' . $path;
-        $temp_path2 = storage_path('app') . '/' . $path2;
 
-        if (!File::isDirectory($temp_path)) {
+        if (!File::isDirectory($temp_dir)) {
-            File::makeDirectory($temp_path);
+            File::makeDirectory($temp_dir);
-            File::makeDirectory($temp_path2);
         }
 
-        try {
+        $zip_file_path = $temp_dir . '/upload.zip';
-
-            $file = $temp_path . '/upload.zip';
 
         // Add content to the Zip file
-            $uploaded = is_int(file_put_contents($file, $data)) ? true : false;
+        $uploaded = is_int(file_put_contents($zip_file_path, $data)) ? true : false;
 
         if (!$uploaded) {
             return false;
         }
 
+        return $zip_file_path;
+    }
+
+    public static function unzip($zip_file_path)
+    {
+        if(!file_exists($zip_file_path)) {
+            throw new \Exception('Zip file not found');
+        }
+
+        $temp_extract_dir = storage_path('app/temp2-' . md5(mt_rand()));
+
+        if (!File::isDirectory($temp_extract_dir)) {
+            File::makeDirectory($temp_extract_dir);
+        }
         // Unzip the file
         $zip = new ZipArchive();
 
-            if ($zip->open($file)) {
+        if ($zip->open($zip_file_path)) {
-                $zip->extractTo($temp_path2);
+            $zip->extractTo($temp_extract_dir);
         }
 
         $zip->close();
 
         // Delete zip file
-            File::delete($file);
+        File::delete($zip_file_path);
 
-            if (!File::copyDirectory($temp_path2.'/Crater', base_path())) {
+        return $temp_extract_dir;
+    }
+
+    public static function copyFiles($temp_extract_dir)
+    {
+
+        if (!File::copyDirectory($temp_extract_dir . '/Crater', base_path())) {
             return false;
         }
 
         // Delete temp directory
-            File::deleteDirectory($temp_path);
+        File::deleteDirectory($temp_extract_dir);
-            File::deleteDirectory($temp_path2);
 
-            return [
+        return true;
-                'success' => true,
-                'error' => false,
-                'data' => []
-            ];
-        } catch (\Exception $e) {
-
-            if (File::isDirectory($temp_path)) {
-                // Delete temp directory
-                File::deleteDirectory($temp_path);
-                File::deleteDirectory($temp_path2);
     }
 
-            return [
+    public static function migrateUpdate()
-                'success' => false,
+    {
-                'error' => 'Update error',
+        Artisan::call('migrate --force');
-                'data' => []
+
-            ];
+        return true;
-        }
     }
 
     public static function finishUpdate($installed, $version)
@@ -118,22 +134,4 @@ class Updater
         ];
     }
 
-    public static function checkForUpdate()
-    {
-        $data = null;
-        if(env('APP_ENV') === 'development')
-        {
-            $url = 'https://craterapp.com/downloads/check/latest/'. Setting::getSetting('version') . '?type=update&is_dev=1';
-        } else {
-            $url = 'https://craterapp.com/downloads/check/latest/'. Setting::getSetting('version') . '?type=update';
-        }
-
-        $response = static::getRemote($url, ['timeout' => 100, 'track_redirects' => true]);
-
-        if ($response && ($response->getStatusCode() == 200)) {
-            $data = $response->getBody()->getContents();
-        }
-
-        return json_decode($data);
-    }
 }

composer.json

@@ -9,6 +9,7 @@
     "type": "project",
     "require": {
         "php": "^7.2",
+        "aws/aws-sdk-php": "^3.137",
         "barryvdh/laravel-dompdf": "^0.8.1",
         "doctrine/dbal": "^2.10",
         "fideloper/proxy": "^4.0",

config/crater.php

@@ -9,6 +9,6 @@ return [
     |
     */
 
-    'version' => '3.0.0',
+    'version' => '3.1.0',
 
 ];

database/migrations/2017_04_11_064308_create_units_table.php

@@ -13,6 +13,7 @@ class CreateUnitsTable extends Migration
      */
     public function up()
     {
+        if (!Schema::hasTable('units')) {
             Schema::create('units', function (Blueprint $table) {
                 $table->increments('id');
                 $table->string('name');
@@ -21,6 +22,7 @@ class CreateUnitsTable extends Migration
                 $table->timestamps();
             });
         }
+    }
 
     /**
      * Reverse the migrations.

database/migrations/2018_11_02_133956_create_expenses_table.php

@@ -23,8 +23,6 @@ class CreateExpensesTable extends Migration
             $table->foreign('expense_category_id')->references('id')->on('expense_categories')->onDelete('cascade');
             $table->integer('company_id')->unsigned()->nullable();
             $table->foreign('company_id')->references('id')->on('companies')->onDelete('cascade');
-            $table->integer('user_id')->unsigned()->nullable();
-            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
             $table->timestamps();
         });
     }

database/migrations/2019_09_02_053155_create_payment_methods_table.php

@@ -13,6 +13,7 @@ class CreatePaymentMethodsTable extends Migration
      */
     public function up()
     {
+        if (!Schema::hasTable('payment_methods')) {
             Schema::create('payment_methods', function (Blueprint $table) {
                 $table->increments('id');
                 $table->string('name');
@@ -21,6 +22,7 @@ class CreatePaymentMethodsTable extends Migration
                 $table->timestamps();
             });
         }
+    }
 
     /**
      * Reverse the migrations.

database/migrations/2020_05_12_154129_add_user_id_to_expenses_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddUserIdToExpensesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('expenses', function (Blueprint $table) {
+            $table->integer('user_id')->unsigned()->nullable();
+            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('expenses', function (Blueprint $table) {
+            $table->dropColumn('paid');
+        });
+    }
+}

package-lock.json

@@ -2332,11 +2332,6 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
-    "@types/color-name": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
-    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -2661,28 +2656,6 @@
         }
       }
     },
-    "acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "requires": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg=="
-        }
-      }
-    },
-    "acorn-walk": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.1.1.tgz",
-      "integrity": "sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ=="
-    },
     "adjust-sourcemap-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz",
@@ -2792,6 +2765,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       },
@@ -2800,6 +2774,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -2807,7 +2782,8 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
         }
       }
     },
@@ -3102,7 +3078,8 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
     },
     "base": {
       "version": "0.11.2",
@@ -3287,10 +3264,16 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3458,7 +3441,8 @@
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "dev": true
     },
     "cacache": {
       "version": "12.0.3",
@@ -3571,11 +3555,6 @@
         "upper-case": "^1.1.1"
       }
     },
-    "camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
-    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
@@ -3604,6 +3583,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3979,7 +3959,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -4369,7 +4350,8 @@
     "css-unit-converter": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
-      "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
+      "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
+      "dev": true
     },
     "css-what": {
       "version": "2.1.3",
@@ -5112,7 +5094,8 @@
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
     },
     "del": {
       "version": "4.1.1",
@@ -5192,23 +5175,6 @@
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
-    "detective": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
-      "requires": {
-        "acorn-node": "^1.6.1",
-        "defined": "^1.0.0",
-        "minimist": "^1.1.1"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-        }
-      }
-    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -5554,7 +5520,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "eslint": {
       "version": "4.19.1",
@@ -6584,7 +6551,8 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
     },
     "fsevents": {
       "version": "1.2.9",
@@ -7243,6 +7211,7 @@
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
       "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -7355,7 +7324,8 @@
     "graceful-fs": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
-      "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q=="
+      "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==",
+      "dev": true
     },
     "growly": {
       "version": "1.3.0",
@@ -7395,7 +7365,8 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
     },
     "has-symbols": {
       "version": "1.0.0",
@@ -7882,7 +7853,8 @@
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
     },
     "infer-owner": {
       "version": "1.0.4",
@@ -7894,6 +7866,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -7902,7 +7875,8 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "ini": {
       "version": "1.3.5",
@@ -8824,11 +8798,6 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
-    "lodash.toarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
-      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -9094,6 +9063,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -9263,14 +9233,6 @@
         "lower-case": "^1.1.1"
       }
     },
-    "node-emoji": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
-      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
-      "requires": {
-        "lodash.toarray": "^4.4.0"
-      }
-    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -9355,7 +9317,8 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
     },
     "normalize-url": {
       "version": "1.9.1",
@@ -9369,11 +9332,6 @@
         "sort-keys": "^1.0.0"
       }
     },
-    "normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
-    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9395,7 +9353,8 @@
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
     },
     "number-is-nan": {
       "version": "1.0.1",
@@ -9406,7 +9365,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -9566,6 +9526,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -9785,7 +9746,8 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -9802,7 +9764,8 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -9838,59 +9801,6 @@
         "pinkie": "^2.0.0"
       }
     },
-    "pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "requires": {
-        "find-up": "^3.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
-          "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
-        }
-      }
-    },
     "pluralize": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
@@ -10073,68 +9983,6 @@
         "postcss": "^5.0.4"
       }
     },
-    "postcss-functions": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
-      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
-      "requires": {
-        "glob": "^7.1.2",
-        "object-assign": "^4.1.1",
-        "postcss": "^6.0.9",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "6.0.23",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "requires": {
-            "chalk": "^2.4.1",
-            "source-map": "^0.6.1",
-            "supports-color": "^5.4.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "postcss-js": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
-      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
-      "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^7.0.18"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "postcss-load-config": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
@@ -10425,55 +10273,6 @@
         }
       }
     },
-    "postcss-nested": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.1.tgz",
-      "integrity": "sha512-AMayXX8tS0HCp4O4lolp4ygj9wBn32DJWXvG6gCv+ZvJrEa00GUxJcJEEzMh87BIe6FrWdYkpR2cuyqHKrxmXw==",
-      "requires": {
-        "postcss": "^7.0.21",
-        "postcss-selector-parser": "^6.0.2"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-        },
-        "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
-          "requires": {
-            "cssesc": "^3.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "postcss-normalize-charset": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
@@ -10857,7 +10656,8 @@
     "postcss-value-parser": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
     },
     "postcss-zindex": {
       "version": "2.2.0",
@@ -10897,11 +10697,6 @@
         "fast-diff": "^1.1.2"
       }
     },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
-    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -12432,6 +12227,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -12512,231 +12308,6 @@
         }
       }
     },
-    "tailwindcss": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.2.0.tgz",
-      "integrity": "sha512-CKvY0ytB3ze5qvynG7qv4XSpQtFNGPbu9pUn8qFdkqgD8Yo/vGss8mhzbqls44YCXTl4G62p3qVZBj45qrd6FQ==",
-      "requires": {
-        "autoprefixer": "^9.4.5",
-        "bytes": "^3.0.0",
-        "chalk": "^3.0.0",
-        "detective": "^5.2.0",
-        "fs-extra": "^8.0.0",
-        "lodash": "^4.17.15",
-        "node-emoji": "^1.8.1",
-        "normalize.css": "^8.0.1",
-        "postcss": "^7.0.11",
-        "postcss-functions": "^3.0.0",
-        "postcss-js": "^2.0.0",
-        "postcss-nested": "^4.1.1",
-        "postcss-selector-parser": "^6.0.0",
-        "pretty-hrtime": "^1.0.3",
-        "reduce-css-calc": "^2.1.6",
-        "resolve": "^1.14.2"
-      },
-      "dependencies": {
-        "autoprefixer": {
-          "version": "9.7.5",
-          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.5.tgz",
-          "integrity": "sha512-URo6Zvt7VYifomeAfJlMFnYDhow1rk2bufwkbamPEAtQFcL11moLk4PnR7n9vlu7M+BkXAZkHFA0mIcY7tjQFg==",
-          "requires": {
-            "browserslist": "^4.11.0",
-            "caniuse-lite": "^1.0.30001036",
-            "chalk": "^2.4.2",
-            "normalize-range": "^0.1.2",
-            "num2fraction": "^1.2.2",
-            "postcss": "^7.0.27",
-            "postcss-value-parser": "^4.0.3"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              }
-            }
-          }
-        },
-        "browserslist": {
-          "version": "4.11.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.11.0.tgz",
-          "integrity": "sha512-WqEC7Yr5wUH5sg6ruR++v2SGOQYpyUdYYd4tZoAq1F7y+QXoLoYGXVbxhtaIqWmAJjtNTRjVD3HuJc1OXTel2A==",
-          "requires": {
-            "caniuse-lite": "^1.0.30001035",
-            "electron-to-chromium": "^1.3.380",
-            "node-releases": "^1.1.52",
-            "pkg-up": "^3.1.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001038",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
-          "integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "4.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-              "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-              "requires": {
-                "@types/color-name": "^1.1.1",
-                "color-convert": "^2.0.1"
-              }
-            },
-            "has-flag": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-            },
-            "supports-color": {
-              "version": "7.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-              "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-              "requires": {
-                "has-flag": "^4.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "cssesc": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-        },
-        "electron-to-chromium": {
-          "version": "1.3.390",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.390.tgz",
-          "integrity": "sha512-4RvbM5x+002gKI8sltkqWEk5pptn0UnzekUx8RTThAMPDSb8jjpm6SwGiSnEve7f85biyZl8DMXaipaCxDjXag=="
-        },
-        "fs-extra": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-          "requires": {
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
-        "node-releases": {
-          "version": "1.1.53",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
-          "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ=="
-        },
-        "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              },
-              "dependencies": {
-                "supports-color": {
-                  "version": "5.5.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-                  "requires": {
-                    "has-flag": "^3.0.0"
-                  }
-                }
-              }
-            },
-            "supports-color": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
-          "requires": {
-            "cssesc": "^3.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
-          "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg=="
-        },
-        "reduce-css-calc": {
-          "version": "2.1.7",
-          "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
-          "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
-          "requires": {
-            "css-unit-converter": "^1.1.1",
-            "postcss-value-parser": "^3.3.0"
-          },
-          "dependencies": {
-            "postcss-value-parser": {
-              "version": "3.3.1",
-              "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-              "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-            }
-          }
-        },
-        "resolve": {
-          "version": "1.15.1",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
-          "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -13081,7 +12652,8 @@
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
     },
     "uniqs": {
       "version": "2.0.0",
@@ -13110,7 +12682,8 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
     },
     "unpipe": {
       "version": "1.0.0",
@@ -14218,7 +13791,8 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     },
     "write": {
       "version": "0.2.1",
@@ -14232,7 +13806,8 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
     },
     "y18n": {
       "version": "3.2.1",

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/assets/js/app.js": "/assets/js/app.js?id=08d4f6357dbe7738effa",
+    "/assets/js/app.js": "/assets/js/app.js?id=2521d0dcc4cb4e4975a5",
-    "/assets/css/crater.css": "/assets/css/crater.css?id=a00ceebbb86dd82a024b"
+    "/assets/css/crater.css": "/assets/css/crater.css?id=84a4eeb53b0e6a937e44"
 }

resources/assets/js/helpers/utilities.js

@@ -39,7 +39,12 @@ export default {
 
   formatMoney(amount, currency = 0) {
     if (!currency) {
-      currency = {precision: 2, thousand_separator: ',', decimal_separator: '.', symbol: '$'}
+      currency = {
+        precision: 2,
+        thousand_separator: ',',
+        decimal_separator: '.',
+        symbol: '$',
+      }
     }
 
     amount = amount / 100
@@ -52,12 +57,26 @@ export default {
 
       const negativeSign = amount < 0 ? '-' : ''
 
-      let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(precision)).toString()
+      let i = parseInt(
-      let j = (i.length > 3) ? i.length % 3 : 0
+        (amount = Math.abs(Number(amount) || 0).toFixed(precision))
+      ).toString()
+      let j = i.length > 3 ? i.length % 3 : 0
 
       let moneySymbol = `<span style="font-family: sans-serif">${symbol}</span>`
 
-      return moneySymbol + ' ' + negativeSign + (j ? i.substr(0, j) + thousand_separator : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousand_separator) + (precision ? decimal_separator + Math.abs(amount - i).toFixed(precision).slice(2) : '')
+      return (
+        moneySymbol +
+        ' ' +
+        negativeSign +
+        (j ? i.substr(0, j) + thousand_separator : '') +
+        i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousand_separator) +
+        (precision
+          ? decimal_separator +
+            Math.abs(amount - i)
+              .toFixed(precision)
+              .slice(2)
+          : '')
+      )
     } catch (e) {
       console.log(e)
     }
@@ -65,7 +84,12 @@ export default {
 
   formatGraphMoney(amount, currency = 0) {
     if (!currency) {
-      currency = {precision: 2, thousand_separator: ',', decimal_separator: '.', symbol: '$'}
+      currency = {
+        precision: 2,
+        thousand_separator: ',',
+        decimal_separator: '.',
+        symbol: '$',
+      }
     }
 
     amount = amount / 100
@@ -78,25 +102,76 @@ export default {
 
       const negativeSign = amount < 0 ? '-' : ''
 
-      let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(precision)).toString()
+      let i = parseInt(
-      let j = (i.length > 3) ? i.length % 3 : 0
+        (amount = Math.abs(Number(amount) || 0).toFixed(precision))
+      ).toString()
+      let j = i.length > 3 ? i.length % 3 : 0
 
       let moneySymbol = `${symbol}`
 
-      return moneySymbol + ' ' + negativeSign + (j ? i.substr(0, j) + thousand_separator : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousand_separator) + (precision ? decimal_separator + Math.abs(amount - i).toFixed(precision).slice(2) : '')
+      return (
+        moneySymbol +
+        ' ' +
+        negativeSign +
+        (j ? i.substr(0, j) + thousand_separator : '') +
+        i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousand_separator) +
+        (precision
+          ? decimal_separator +
+            Math.abs(amount - i)
+              .toFixed(precision)
+              .slice(2)
+          : '')
+      )
     } catch (e) {
       console.log(e)
     }
   },
 
   checkValidUrl(url) {
-    let pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+    let pattern = new RegExp(
+      '^(https?:\\/\\/)?' + // protocol
       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
       '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
       '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-      '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
+        '(\\#[-a-z\\d_]*)?$',
+      'i'
+    ) // fragment locator
 
     return !!pattern.test(url)
+  },
+
+  fallbackCopyTextToClipboard(text) {
+    var textArea = document.createElement('textarea')
+    textArea.value = text
+    // Avoid scrolling to bottom
+    textArea.style.top = '0'
+    textArea.style.left = '0'
+    textArea.style.position = 'fixed'
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    try {
+      var successful = document.execCommand('copy')
+      var msg = successful ? 'successful' : 'unsuccessful'
+      console.log('Fallback: Copying text command was ' + msg)
+    } catch (err) {
+      console.error('Fallback: Oops, unable to copy', err)
     }
+    document.body.removeChild(textArea)
+  },
+  copyTextToClipboard(text) {
+    if (!navigator.clipboard) {
+      this.fallbackCopyTextToClipboard(text)
+      return
+    }
+    navigator.clipboard.writeText(text).then(
+      function () {
+        return true
+      },
+      function (err) {
+        return false
+      }
+    )
+  },
 }

resources/assets/js/plugins/ar.json

@@ -62,14 +62,14 @@
     "four_zero_four": "404",
     "you_got_lost": "عفواً! يبدو أنك قد تهت!",
     "go_home": "عودة إلى الرئيسية",
-
     "setting_updated": "تم تحديث الإعدادات بنجاح",
     "select_state": "اختر الولاية/المنطقة",
     "select_country": "اختر الدولة",
     "select_city": "اختر المدينة",
     "street_1": "عنوان الشارع 1",
     "street_2": "عنوان الشارع 2",
-    "action_failed": "فشلت العملية"
+    "action_failed": "فشلت العملية",
+    "retry": "أعد المحاولة"
   },
   "dashboard": {
     "select_year": "اختر السنة",
@@ -155,7 +155,7 @@
     "select_a_customer": "اختر العميل",
     "type_or_click": "اكتب أو اضغط للاختيار",
 
-    "confirm_delete": "لن تكون قادراً على استرجاع هذا العميل | لن تكون قادراً على استرجاع هؤلاء العملاء",
+    "confirm_delete": "لن تتمكن من استرداد هذا العميل وجميع الفواتير والتقديرات والمدفوعات ذات الصلة. | لن تتمكن من استرداد هؤلاء العملاء وجميع الفواتير والتقديرات والمدفوعات ذات الصلة.",
     "created_message": "تم إنشاء العملاء بنجاح",
     "updated_message": "تم تحديث العملاء بنجاح",
     "deleted_message": "تم حذف العملاء بنجاح | تم حذف العميل بنجاح"
@@ -752,7 +752,14 @@
       "progress_text": "سوف يستغرق التحديث بضع دقائق. يرجى عدم تحديث الشاشة أو إغلاق النافذة قبل انتهاء التحديث",
       "update_success": "تم تحديث النظام! يرجى الانتظار حتى يتم إعادة تحميل نافذة المتصفح تلقائيًا.",
       "latest_message": "لا يوجد تحديثات متوفرة! لديك حالياً أحدث نسخة.",
-      "current_version": "النسخة الحالية"
+      "current_version": "النسخة الحالية",
+      "download_zip_file": "تنزيل ملف ZIP",
+      "unzipping_package": "حزمة فك الضغط",
+      "copying_files": "نسخ الملفات",
+      "running_migrations": "إدارة عمليات الترحيل",
+      "finishing_update": "تحديث التشطيب",
+      "update_failed": "فشل التحديث",
+      "update_failed_text": "آسف! فشل التحديث الخاص بك في: {step} خطوة"     
     }
   },
   "wizard": {

resources/assets/js/plugins/en.json

@@ -13,6 +13,7 @@
   },
   "general": {
     "view_pdf": "View PDF",
+    "copy_pdf_url": "Copy PDF Url",
     "download_pdf": "Download PDF",
     "save": "Save",
     "cancel": "Cancel",
@@ -70,14 +71,14 @@
     "go_home": "Go Home",
     "test_mail_conf": "Test Mail Configuration",
     "send_mail_successfully": "Mail sent successfully",
-
     "setting_updated": "Setting updated successfully",
     "select_state": "Select state",
     "select_country": "Select Country",
     "select_city": "Select City",
     "street_1": "Street 1",
     "street_2": "Street 2",
-    "action_failed": "Action Failed"
+    "action_failed": "Action Failed",
+    "retry": "Retry"
   },
   "dashboard": {
     "select_year": "Select year",
@@ -163,7 +164,7 @@
     "select_a_customer": "Select a customer",
     "type_or_click": "Type or click to select",
 
-    "confirm_delete": "You will not be able to recover this Customer | You will not be able to recover these Customers",
+    "confirm_delete": "You will not be able to recover this customer and all the related Invoices, Estimates and Payments. | You will not be able to recover these customers and all the related Invoices, Estimates and Payments.",
     "created_message": "Customer created successfully",
     "updated_message": "Customer updated successfully",
     "deleted_message": "Customer deleted successfully | Customers deleted successfully"
@@ -230,6 +231,7 @@
     "convert_to_invoice": "Convert to Invoice",
     "mark_as_sent": "Mark as Sent",
     "send_estimate": "Send Estimate",
+    "resend_estimate": "Resend Estimate",
     "record_payment": "Record Payment",
     "add_estimate": "Add Estimate",
     "save_estimate": "Save Estimate",
@@ -316,6 +318,7 @@
     "notes": "Notes",
     "view": "View",
     "send_invoice": "Send Invoice",
+    "resend_invoice": "Resend Invoice",
     "invoice_template": "Invoice Template",
     "template": "Template",
     "mark_as_sent": "Mark as sent",
@@ -787,7 +790,14 @@
       "progress_text": "It will just take a few minutes. Please do not refresh the screen or close the window before the update finishes",
       "update_success": "App has been updated! Please wait while your browser window gets reloaded automatically.",
       "latest_message": "No update available! You are on the latest version.",
-      "current_version": "Current Version"
+      "current_version": "Current Version",
+      "download_zip_file": "Download ZIP file",
+      "unzipping_package": "Unzipping Package",
+      "copying_files": "Copying Files",
+      "running_migrations": "Running Migrations",
+      "finishing_update": "Finishing Update",
+      "update_failed": "Update Failed",
+      "update_failed_text": "Sorry! Your update failed on : {step} step"   
     }
   },
   "wizard": {

resources/assets/js/plugins/es.json

@@ -62,14 +62,14 @@
     "four_zero_four": "404",
     "you_got_lost": "Whoops! ¡Te perdiste!",
     "go_home": "Volver al Inicio",
-
     "setting_updated": "Configuración actualizada con éxito",
     "select_state": "Seleccionar estado",
     "select_country": "Seleccionar país",
     "select_city": "Seleccionar ciudad",
     "street_1": "Calle 1",
     "street_2": "Calle 2",
-    "action_failed": "Accion Fallida"
+    "action_failed": "Accion Fallida",
+    "retry": "Procesar de nuevo"
   },
   "dashboard": {
     "select_year": "Seleccionar año",
@@ -155,7 +155,7 @@
     "select_a_customer": "Selecciona un cliente",
     "type_or_click": "Escriba o haga clic para seleccionar",
 
-    "confirm_delete": "No podrá recuperar este cliente | No podrá recuperar estos clientes",
+    "confirm_delete": "No podrá recuperar este cliente y todas las facturas, estimaciones y pagos relacionados. | No podrá recuperar estos clientes y todas las facturas, estimaciones y pagos relacionados.",
     "created_message": "Cliente creado con éxito",
     "updated_message": "Cliente actualizado con éxito",
     "deleted_message": "Cliente eliminado correctamente | Clientes eliminados exitosamente"
@@ -751,7 +751,14 @@
       "progress_text": "Solo tomará unos minutos. No actualice la pantalla ni cierre la ventana antes de que finalice la actualización.",
       "update_success": "¡La aplicación ha sido actualizada! Espere mientras la ventana de su navegador se vuelve a cargar automáticamente.",
       "latest_message": "¡Actualización no disponible! Estás en la última versión.",
-      "current_version": "Versión actual"
+      "current_version": "Versión actual",
+      "download_zip_file": "Descargar archivo ZIP",
+      "unzipping_package": "Descomprimir paquete",
+      "copying_files": "Copiando documentos",
+      "running_migrations": "Ejecutar migraciones",
+      "finishing_update": "Actualización final",
+      "update_failed": "Actualización fallida",
+      "update_failed_text": "¡Lo siento! Su actualización falló el: {step} paso" 
     }
   },
   "wizard": {

resources/assets/js/plugins/fr.json

@@ -17,6 +17,7 @@
     "save": "Sauvegarder",
     "cancel": "Annuler",
     "update": "Mise à jour",
+    "deselect": "Retirer",
     "download": "Télécharger",
     "from_date": "A partir de la date",
     "to_date": "À ce jour",
@@ -28,7 +29,7 @@
     "filter": "Filtre",
     "delete": "Effacer",
     "edit": "Modifier",
-    "view": "Vue",
+    "view": "Voir",
     "add_new_item": "Ajoute un nouvel objet",
     "clear_all": "Tout effacer",
     "showing": "Montrant",
@@ -62,14 +63,21 @@
     "four_zero_four": "404",
     "you_got_lost": "Oups! Vous vous êtes perdus!",
     "go_home": "Rentrer chez soi",
-
+    "test_mail_conf": "Tester la configuration",
+    "send_mail_successfully": "Mail envoyé avec succès",
     "setting_updated": "Réglage mis à jour avec succès",
     "select_state": "Sélectionnez l'état",
     "select_country": "Choisissez le pays",
     "select_city": "Sélectionnez une ville",
     "street_1": "Rue 1",
     "street_2": "Rue # 2",
-    "action_failed": "Action : échoué"
+    "action_failed": "Action : échoué",
+    "sort_by": "Trier par",
+    "ascending": "Ascendant",
+    "descending": "Descendant",
+    "subject": "matière",
+    "message": "Message",
+    "retry": "Réessayez"
   },
   "dashboard": {
     "select_year": "Sélectionnez l'année",
@@ -160,7 +168,7 @@
     "select_a_customer": "Sélectionnez un client",
     "type_or_click": "Tapez ou cliquez pour sélectionner",
 
-    "confirm_delete": "Vous ne pourrez pas récupérer ce client | Vous ne pourrez pas récupérer ces clients",
+    "confirm_delete": "Vous ne pourrez pas récupérer ce client et toutes les factures, devis et paiements associés. | Vous ne serez pas en mesure de récupérer ces clients et toutes les factures, devis et paiements associés.",
     "created_message": "Client créé avec succès",
     "updated_message": "Client mis à jour avec succès",
     "deleted_message": "Client supprimé avec succès | Les clients supprimés avec succès"
@@ -202,24 +210,24 @@
     "all": "Tout",
     "paid": "Payé",
     "unpaid": "Non payé",
-    "customer": "CLIENT CLIENT",
+    "customer": "Client",
-    "ref_no": "REF NO.",
+    "ref_no": "Réf.",
-    "number": "NOMBRE",
+    "number": "N°",
     "amount_due": "MONTANT DÛ",
     "partially_paid": "Partiellement payé",
-    "total": "Totale",
+    "total": "Total",
     "discount": "Remise",
     "sub_total": "Total partiel",
-    "estimate_number": "Numéro destimation",
+    "estimate_number": "N°",
     "ref_number": "Numéro de ref",
     "contact": "Contact",
     "add_item": "Ajouter un article",
     "date": "Date",
-    "due_date": "Date déchéance",
+    "due_date": "Date d'échéance",
     "expiry_date": "Date dexpiration",
     "status": "Statut",
     "add_tax": "Ajouter une taxe",
-    "amount": "Montante",
+    "amount": "Montant",
     "action": "action",
     "notes": "Remarques",
     "tax": "Impôt",
@@ -227,7 +235,7 @@
     "convert_to_invoice": "Convertir en facture",
     "mark_as_sent": "Marquer comme envoyé",
     "send_estimate": "Envoyer un devis",
-    "record_payment": "Record de paiement",
+    "record_payment": "Enregistrer un paiement",
     "add_estimate": "Ajouter un devis",
     "save_estimate": "Sauvegarder le devis",
     "confirm_conversion": "Vous souhaitez convertir ce devis en facture?",
@@ -269,14 +277,17 @@
       "quantity": "Quantité",
       "price": "Prix",
       "discount": "Remise",
-      "total": "Totale",
+      "total": "Total",
       "total_discount": "Remise totale",
       "sub_total": "Total partiel",
       "tax": "Impôt",
-      "amount": "Montante",
+      "amount": "Montant",
       "select_an_item": "Tapez ou cliquez pour sélectionner un élément",
       "type_item_description": "Type Item Description (optionnel)"
-    }
+    },
+    "no_matching_estimates": "Aucune estimation correspondante!",
+    "user_email_does_not_exist": "L'e-mail de l'utilisateur n'existe pas",
+    "something_went_wrong": "quelque chose a mal tourné"
   },
   "invoices": {
     "title": "Factures",
@@ -287,13 +298,13 @@
     "all": "Toute",
     "paid": "Payé",
     "unpaid": "Non payé",
-    "customer": "CLIENTE CLIENT",
+    "customer": "CLIENT",
-    "paid_status": "Statut payé",
+    "paid_status": "Paiement",
     "ref_no": "REF NO.",
-    "number": "NOMBRE",
+    "number": "N°",
     "amount_due": "MONTANT DÛ",
     "partially_paid": "Partiellement payé",
-    "total": "Totale Total",
+    "total": "Total",
     "discount": "Remise",
     "sub_total": "Total partiel",
     "invoice": "Facture | Factures",
@@ -302,21 +313,23 @@
     "contact": "Contact",
     "add_item": "Ajouter un article",
     "date": "Date",
-    "due_date": "Date déchéance",
+    "due_date": "Date d'échéance",
     "status": "Statut",
     "add_tax": "Ajouter une taxe",
-    "amount": "Montante Montant",
+    "amount": "Montant",
     "action": "action",
     "notes": "Remarques",
-    "view": "Vue",
+    "view": "Voir",
     "send_invoice": "Envoyer une facture",
+    "cloned_successfully": "Facture clonée avec succès",
+    "clone_invoice": "Cloner",
     "invoice_template": "Modèle de facture",
     "template": "Modèle",
     "mark_as_sent": "Marquer comme envoyé",
     "invoice_mark_as_sent": "Cette facture sera marquée comme envoyé",
     "confirm_send": "Cette facture sera envoyée par courrier électronique au client.",
     "invoice_date": "Date de facturation",
-    "record_payment": "Record de paiement",
+    "record_payment": "Enregister un paiement",
     "add_new_invoice": "Ajouter une nouvelle facture",
     "update_expense": "Frais de mise à jour",
     "edit_invoice": "Modifier la facture",
@@ -335,11 +348,11 @@
       "quantity": "Quantité",
       "price": "Prix",
       "discount": "Remise",
-      "total": "Totale Total",
+      "total": "Total",
       "total_discount": "Remise totale",
       "sub_total": "Total partiel",
       "tax": "Impôt",
-      "amount": "Montante Montant",
+      "amount": "Montant",
       "select_an_item": "Tapez ou cliquez pour sélectionner un élément",
       "type_item_description": "Type Item Description (optionnel)"
     },
@@ -349,7 +362,12 @@
     "updated_message": "Facture mise à jour avec succès",
     "deleted_message": "La Facture a été supprimée ! | Les Factures ont été supprimées !",
     "marked_as_sent_message": "Facture supprimée avec succès | Factures supprimées avec succès",
-    "invalid_due_amount_message": "Le paiement entré est supérieur au montant total dû pour cette facture. Veuillez vérifier et réessayer"
+    "invalid_due_amount_message": "Le paiement entré est supérieur au montant total dû pour cette facture. Veuillez vérifier et réessayer",
+    "confirm_send_invoice": "Cette facture sera envoyée par email au client",
+    "no_matching_invoices": "Aucune facture correspondante!",
+    "confirm_clone": "Cette facture sera clonée dans une nouvelle facture",
+    "user_email_does_not_exist": "L'e-mail de l'utilisateur n'existe pas",
+    "something_went_wrong": "quelque chose a mal tourné"
   },
   "credit_notes": {
     "title": "Notes de crédit",
@@ -357,7 +375,7 @@
     "credit_notes": "Notes de crédit",
     "contact": "Contact",
     "date": "Date",
-    "amount": "Montante Montant",
+    "amount": "Montant Montant",
     "action": "action",
     "credit_number": "Numéro de crédit",
     "notes": "Remarques",
@@ -368,7 +386,7 @@
       "quantity": "Quantité",
       "price": "Prix",
       "discount": "Remise",
-      "total": "Totale Total",
+      "total": "Total",
       "total_discount": "Remise totale",
       "sub_total": "Total partiel",
       "tax": "Impôt"
@@ -377,12 +395,12 @@
   "payments": {
     "title": "Paiements",
     "payments_list": "Liste de paiements",
-    "record_payment": "Record de paiement",
+    "record_payment": "Enregistrer un paiement",
-    "customer": "Client Client",
+    "customer": "Client",
     "date": "Date",
-    "amount": "Montant Montant",
+    "amount": "Montant",
     "action": "action",
-    "payment_number": "Numéro de paiement",
+    "payment_number": "N°",
     "payment_mode": "Mode de paiement",
     "invoice": "Facture dachat",
     "note": "Remarque",
@@ -391,6 +409,7 @@
     "edit_payment": "Modifier le paiement",
     "view_payment": "Voir le paiement",
     "add_new_payment": "Ajouter un nouveau paiement",
+    "send_payment_receipt": "Envoyer le reçu",
     "save_payment": "Enregistrer le paiement",
     "update_payment": "Mettre à jour le paiement",
     "payment": "Paiement | Paiements",
@@ -403,7 +422,11 @@
     "created_message": "Paiement créé avec succès",
     "updated_message": "Paiement mis à jour avec succès",
     "deleted_message": "Paiement supprimé avec succès | Paiements supprimés avec succès",
-    "invalid_amount_message": "Le montant du paiement est invalide"
+    "invalid_amount_message": "Le montant du paiement est invalide",
+    "confirm_send_payment": "Ce paiement sera envoyé par e-mail au client",
+    "send_payment_successfully": "Paiement envoyé avec succès",
+    "user_email_does_not_exist": "L'e-mail de l'utilisateur n'existe pas",
+    "something_went_wrong": "quelque chose a mal tourné"
   },
   "expenses": {
     "title": "Dépenses",
@@ -425,7 +448,7 @@
     "date": "Date de dépense",
     "add_expense": "Ajouter une dépense",
     "add_new_expense": "Ajouter une nouvelle dépense",
-    "save_expense": "Économiser des dépenses",
+    "save_expense": "Enregistrer la dépense",
     "update_expense": "Frais de mise à jour",
     "download_receipt": "Télécharger le reçu",
     "edit_expense": "Modifier les dépenses",
@@ -449,7 +472,8 @@
       "new_category": "Nouvelle catégorie",
       "category": "Catégorie | Les catégories",
       "select_a_category": "choisissez une catégorie"
-    }
+    },
+    "customer": "Client"
   },
   "login": {
     "email": "Email",
@@ -462,7 +486,8 @@
     "enter_email": "Entrer email",
     "enter_password": "Entrer le mot de passe",
     "retype_password": "Retaper le mot de passe",
-    "login_placeholder": "mail@example.com"
+    "login_placeholder": "mail@example.com",
+    "password_reset_successfully": "Réinitialisation du mot de passe réussie"
   },
   "reports": {
     "title": "rapport",
@@ -501,7 +526,7 @@
       "invoice": "Facture d'achat",
       "invoice_date": "Date de facturation",
       "due_date": "Date déchéance",
-      "amount": "Montante ",
+      "amount": "Montant ",
       "contact_name": "Nom du contact",
       "status": "Statut"
     },
@@ -509,7 +534,7 @@
       "estimate": "Devis",
       "estimate_date": "Date du devis",
       "due_date": "Date d'échéance",
-      "estimate_number": "Numéro d'estimation",
+      "estimate_number": "N°",
       "ref_number": "Numéro de ref",
       "amount": "Montant",
       "contact_name": "Nom du contact",
@@ -529,6 +554,7 @@
     "menu_title": {
       "account_settings": "Paramètres du compte",
       "company_information": "Informations sur la société",
+      "customization": "Personnalisation",
       "preferences": "Préférences",
       "notifications": "Les notifications",
       "tax_types": "Types de taxe",
@@ -593,10 +619,90 @@
       "state": "Etat",
       "city": "Ville",
       "address": "Adresse",
-      "zip": "Zip",
+      "zip": "Code postal",
-      "save": "sauver",
+      "save": "Sauvegarder",
       "updated_message": "Informations sur la société mises à jour avec succès"
     },
+
+    "customization": {
+      "customization": "Personnalisation",
+      "save": "Sauvegarder",
+      "addresses": {
+        "title": "Adresses",
+        "section_description": "You can set Customer Billing Address and Customer Shipping Address Format (Displayed in PDF only). ",
+        "customer_billing_address": "Adresse de paiement",
+        "customer_shipping_address": "Adresse de livraison",
+        "company_address": "Adresse de l'entreprise",
+        "insert_fields": "Ajouter des champs",
+        "contact": "Contact",
+        "address": "Addresse",
+        "display_name": "Nom",
+        "primary_contact_name": "Nom du contact principal",
+        "email": "Email",
+        "website": "Website",
+        "name": "Nom",
+        "country": "Pays",
+        "state": "State",
+        "city": "Ville",
+        "company_name": "Nom de l'entreprise",
+        "address_street_1": "Rue",
+        "address_street_2": "Complément",
+        "phone": "Téléphone",
+        "zip_code": "Code postal",
+        "address_setting_updated": "Adresse mise à jour avec succès"
+      },
+      "updated_message": "Informations de l'entreprise mises à jour",
+
+      "invoices": {
+        "title": "Factures",
+        "notes": "Notes",
+        "invoice_prefix": "Préfixe",
+        "invoice_settings": "Paramètre",
+        "autogenerate_invoice_number": "Générer automatiquement le numéro de facture",
+        "invoice_setting_description": "Désactivez cette option si vous ne souhaitez pas générer automatiquement les numéros de facture à chaque fois que vous en créez une nouvelle.",
+        "enter_invoice_prefix": "Ajouter le préfixe de facture",
+        "terms_and_conditions": "Termes et conditions",
+        "invoice_setting_updated": "Paramètres de facturation mis à jour"
+      },
+
+      "estimates": {
+        "title": "Devis",
+        "estimate_prefix": "Préfixe",
+        "estimate_settings": "Paramètre",
+        "autogenerate_estimate_number": "Générer automatiquement le numéro de devis",
+        "estimate_setting_description": "Désactivez cette option si vous ne souhaitez pas générer automatiquement les numéros de devis à chaque fois que vous en créez un nouveau.",
+        "estimate_setting_updated": "Paramètres de devis mis à jour"
+      },
+
+      "payments": {
+        "title": "Paiements",
+        "payment_prefix": "Préfixe",
+        "payment_settings": "Paramètre",
+        "autogenerate_payment_number": "Générer automatiquement le numéro de paiement",
+        "payment_setting_description": "Désactivez cette option si vous ne souhaitez pas générer automatiquement les numéros de paiement à chaque fois que vous en créez un nouveau.",
+        "payment_setting_updated": "Les paramètres de paiement ont bien été mis à jour",
+        "payment_mode": "Mode de paiement",
+        "add_payment_mode": "Ajouter un mode de paiement",
+        "mode_name": "Nom",
+        "payment_mode_added": "Mode de paiement ajouté",
+        "payment_mode_updated": "Mode de paiement mis à jour",
+        "payment_mode_confirm_delete": "Êtes-vous sur de supprimer ce mode de paiement ?",
+        "already_in_use": "Ce mode de paiement existe déjà.",
+        "deleted_message": "Mode de paiement supprimé avec succès"
+      },
+
+      "items": {
+        "title": "Articles",
+        "units": "Unités",
+        "add_item_unit": "Ajouter une unité",
+        "unit_name": "Nom",
+        "item_unit_added": "Unité ajouté",
+        "item_unit_updated": "Unité mis à jour",
+        "item_unit_confirm_delete": "Êtes-vous sur de supprimer cette unité ?",
+        "already_in_use": "Cette unité existe déjà",
+        "deleted_message": "Unité supprimé avec succès"
+      }
+    },
     "account_settings": {
       "profile_picture": "Image de profil",
       "name": "Nom",
@@ -604,7 +710,7 @@
       "password": "Mot de passe",
       "confirm_password": "Confirmez le mot de passe",
       "account_settings": "Paramètres du compte",
-      "save": "sauver",
+      "save": "Sauvegarder",
       "section_description": "Vous pouvez mettre à jour votre nom, votre email et votre mot de passe en utilisant le formulaire ci-dessous.",
       "updated_message": "Paramètres du compte mis à jour avec succès"
     },
@@ -619,10 +725,10 @@
       "email": "Envoyer des notifications à",
       "description": "Quelles notifications par courrier électronique souhaitez-vous recevoir lorsque quelque chose change?",
       "invoice_viewed": "Facture consultée",
-      "invoice_viewed_desc": "Lorsque votre client visualise la facture envoyée via le tableau de bord du cratère.",
+      "invoice_viewed_desc": "Lorsque le client visualise la facture envoyée via le tableau de bord de Neptune.",
-      "estimate_viewed": "Estimation vue",
+      "estimate_viewed": "Devis consulté",
-      "estimate_viewed_desc": "Lorsque votre client visualise le devis envoyé via le tableau de bord du cratère.",
+      "estimate_viewed_desc": "Lorsque le client visualise le devis envoyé via le tableau de bord de Neptune.",
-      "save": "sauver",
+      "save": "Sauvegarder",
       "email_save_message": "Email enregistré avec succès",
       "invoice_viewed_message": "Facture consultée",
       "estimate_viewed_message": "Estimation vue",
@@ -652,7 +758,7 @@
       "description": "Des catégories sont requises pour ajouter des entrées de dépenses. Vous pouvez ajouter ou supprimer ces catégories selon vos préférences.",
       "add_new_category": "Ajouter une nouvelle catégorie",
       "category_name": "Nom de catégorie",
-      "category_description": "La description",
+      "category_description": "Description",
       "created_message": "Catégorie de dépenses créée avec succès",
       "deleted_message": "La catégorie de dépenses a été supprimée avec succès",
       "updated_message": "Catégorie de dépenses mise à jour avec succès",
@@ -668,7 +774,7 @@
       "discount_setting": "Réglage de remise",
       "discount_per_item": "Remise par article",
       "discount_setting_description": "Activez cette option si vous souhaitez ajouter une remise à des postes de facture individuels. Par défaut, les remises sont ajoutées directement à la facture.",
-      "save": "sauver",
+      "save": "Sauvegarder",
       "preference": "Préférence | Préférences",
       "general_settings": "Préférences par défaut pour le système.",
       "updated_message": "Préférences mises à jour avec succès",
@@ -689,7 +795,14 @@
       "progress_text": "Cela ne prendra que quelques minutes. S'il vous plaît ne pas actualiser l'écran ou fermer la fenêtre avant la fin de la mise à jour",
       "update_success": "App a été mis à jour! Veuillez patienter pendant le rechargement automatique de la fenêtre de votre navigateur.",
       "latest_message": "Pas de mise a jour disponible! Vous êtes sur la dernière version.",
-      "current_version": "Version actuelle"
+      "current_version": "Version actuelle",
+      "download_zip_file": "Télécharger le fichier ZIP",
+      "unzipping_package": "Dézipper le package",
+      "copying_files": "Copie de fichiers",
+      "running_migrations": "Exécution de migrations",
+      "finishing_update": "Mise à jour de finition",
+      "update_failed": "Mise à jour a échoué",
+      "update_failed_text": "Désolé! Votre mise à jour a échoué à: {step} étape"
     }
   },
   "wizard": {
@@ -774,7 +887,8 @@
     "success": {
       "mail_variables_save_successfully": "Email configuré avec succès",
       "database_variables_save_successfully": "Base de données configurée avec succès."
-    }
+    },
+    "skip": "sauter"
   },
   "layout_login": {
     "copyright_crater": "Copyright @ Crater - 2020",
@@ -783,7 +897,6 @@
     "small_businesses": "Petites entreprises ",
     "crater_help": "Crater vous aide à suivre vos dépenses, à enregistrer vos paiements et à générer de belles",
     "invoices_and_estimates": "factures et devis avec possibilité de choisir plusieurs modèles."
-
   },
   "validation": {
     "invalid_url": "URL invalide (ex: http://www.crater.com)",
@@ -814,6 +927,7 @@
     "maximum_options_error": "Maximum de {max} options sélectionnées. Commencez par supprimer une option sélectionnée pour en sélectionner une autre.",
     "notes_maxlength": "Les notes ne doivent pas dépasser 255 caractères.",
     "address_maxlength": "L'adresse ne doit pas dépasser 255 caractères.",
-    "ref_number_maxlength": "Le numéro de référence ne doit pas dépasser 255 caractères."
+    "ref_number_maxlength": "Le numéro de référence ne doit pas dépasser 255 caractères.",
+    "email_already_taken": "Un compte est déjà associé à cette adresse e-mail."
   }
 }

resources/assets/js/plugins/i18n.js

@@ -19,8 +19,8 @@ const i18n = new VueI18n({
     ar,
     de,
     pt_BR,
-    it
+    it,
-  }
+  },
 })
 
 export default i18n

resources/assets/js/plugins/it.json

@@ -71,14 +71,14 @@
     "go_home": "Vai alla Home",
     "test_mail_conf": "Configurazione della mail di test",
     "send_mail_successfully": "Mail inviata con successo",
-
     "setting_updated": "Configurazioni aggiornate con successo",
     "select_state": "Seleziona lo Stato",
     "select_country": "Seleziona Paese",
     "select_city": "Seleziona Città",
     "street_1": "Indirizzo 1",
     "street_2": "Indirizzo 2",
-    "action_failed": "Errore"
+    "action_failed": "Errore",
+    "retry": "Retry"
   },
   "dashboard": {
     "select_year": "Seleziona anno",
@@ -164,7 +164,7 @@
     "select_a_customer": "Seleziona Cliente",
     "type_or_click": "Scrivi o clicca per selezionare",
 
-    "confirm_delete": "Non potrai più recuperare il cliente cancellato | Non potrai più recuperare i clienti cancellati",
+    "confirm_delete": "Non sarai in grado di recuperare questo cliente e tutte le relative fatture, stime e pagamenti. | Non sarai in grado di recuperare questi clienti e tutte le relative fatture, stime e pagamenti.",
     "created_message": "Cliente creato con successo",
     "updated_message": "Cliente aggiornato con successo",
     "deleted_message": "Cliente cancellato con successo | Clienti cancellati con successo"
@@ -786,7 +786,14 @@
       "progress_text": "Sarà necessario qualche minuto. Per favore non aggiornare la pagina e non chiudere la finestra prima che l'aggiornamento sia completato",
       "update_success": "L'App è aggiornata! Attendi che la pagina venga ricaricata automaticamente.",
       "latest_message": "Nessun aggiornamneto disponibile! Sei già alla versione più recente.",
-      "current_version": "Versione corrente"
+      "current_version": "Versione corrente",
+      "download_zip_file": "Scarica il file ZIP",
+      "unzipping_package": "Pacchetto di decompressione",
+      "copying_files": "Copia dei file",
+      "running_migrations": "Esecuzione delle migrazioni",
+      "finishing_update": "Aggiornamento di finitura",
+      "update_failed": "Aggiornamento non riuscito",
+      "update_failed_text": "Scusate! L'aggiornamento non è riuscito il: passaggio {step}"
     }
   },
   "wizard": {

resources/assets/js/plugins/pt-br.json

@@ -62,14 +62,14 @@
     "four_zero_four": "404",
     "you_got_lost": "Ops! Se perdeu!",
     "go_home": "Ir para Home",
-
     "setting_updated": "Configuração atualizada com sucesso",
     "select_state": "Selecione Estado",
     "select_country": "Selecionar pais",
     "select_city": "Selecionar cidade",
     "street_1": "Rua 1",
     "street_2": "Rua # 2",
-    "action_failed": "Ação: Falhou"
+    "action_failed": "Ação: Falhou",
+    "retry": "Atualização falhou"
   },
   "dashboard": {
     "select_year": "Selecione Ano",
@@ -155,7 +155,7 @@
     "select_a_customer": "Selecione um cliente",
     "type_or_click": "Digite ou clique para selecionar",
 
-    "confirm_delete": "Você não poderá recuperar este cliente | Você não poderá recuperar esses clientes",
+    "confirm_delete": "Você não poderá recuperar este cliente e todas as faturas, estimativas e pagamentos relacionados. | Você não poderá recuperar esses clientes e todas as faturas, estimativas e pagamentos relacionados.",
     "created_message": "Cliente criado com sucesso",
     "updated_message": "Cliente atualizado com sucesso",
     "deleted_message": "Cliente excluído com sucesso | Clientes excluídos com sucesso"
@@ -751,7 +751,14 @@
       "progress_text": "Levará apenas alguns minutos. Não atualize a tela ou feche a janela antes que a atualização seja concluída",
       "update_success": "O aplicativo foi atualizado! Aguarde enquanto a janela do navegador é recarregada automaticamente.",
       "latest_message": "Nenhuma atualização disponível! Você está na versão mais recente.",
-        "current_version": "Versão Atual"
+      "current_version": "Versão Atual",
+      "download_zip_file": "Baixar arquivo ZIP",
+      "unzipping_package": "Descompactando o pacote",
+      "copying_files": "Copiando arquivos",
+      "running_migrations": "Executando migrações",
+      "finishing_update": "Atualização de acabamento",
+      "update_failed": "Atualização falhou",
+      "update_failed_text": "Desculpa! Sua atualização falhou em: {step} step"
     }
   },
   "wizard": {

resources/assets/js/store/modules/item/mutations.js

@@ -42,7 +42,6 @@ export default {
   },
 
   [types.ADD_ITEM_UNIT] (state, data) {
-    state.itemUnits.push(data.unit)
     state.itemUnits = [data.unit, ...state.itemUnits]
   },
 

resources/assets/js/store/modules/payment/mutations.js

@@ -40,7 +40,6 @@ export default {
   },
 
   [types.ADD_PAYMENT_MODE] (state, data) {
-    state.paymentModes.push(data.paymentMethod)
     state.paymentModes = [data.paymentMethod, ...state.paymentModes]
   },
 

resources/assets/js/views/estimates/Index.vue

@@ -4,16 +4,12 @@
       <h3 class="page-title">{{ $t('estimates.title') }}</h3>
       <ol class="breadcrumb">
         <li class="breadcrumb-item">
-          <router-link
+          <router-link slot="item-title" to="dashboard">
-            slot="item-title"
-            to="dashboard">
             {{ $t('general.home') }}
           </router-link>
         </li>
         <li class="breadcrumb-item">
-          <router-link
+          <router-link slot="item-title" to="#">
-            slot="item-title"
-            to="#">
             {{ $tc('estimates.estimate', 2) }}
           </router-link>
         </li>
@@ -33,11 +29,9 @@
           </base-button>
         </div>
         <router-link slot="item-title" class="col-xs-2" to="estimates/create">
-          <base-button
+          <base-button size="large" icon="plus" color="theme">
-            size="large"
+            {{ $t('estimates.new_estimate') }}</base-button
-            icon="plus"
+          >
-            color="theme" >
-            {{ $t('estimates.new_estimate') }}</base-button>
         </router-link>
       </div>
     </div>
@@ -85,21 +79,28 @@
           </div>
           <div class="filter-estimate">
             <label>{{ $t('estimates.estimate_number') }}</label>
-            <base-input
+            <base-input v-model="filters.estimate_number" icon="hashtag" />
-              v-model="filters.estimate_number"
-              icon="hashtag"/>
           </div>
         </div>
-        <label class="clear-filter" @click="clearFilter">{{ $t('general.clear_all') }}</label>
+        <label class="clear-filter" @click="clearFilter">{{
+          $t('general.clear_all')
+        }}</label>
       </div>
     </transition>
-    <div v-cloak v-show="showEmptyScreen" class="col-xs-1 no-data-info" align="center">
+    <div
+      v-cloak
+      v-show="showEmptyScreen"
+      class="col-xs-1 no-data-info"
+      align="center"
+    >
       <moon-walker-icon class="mt-5 mb-4" />
       <div class="row" align="center">
         <label class="col title">{{ $t('estimates.no_estimates') }}</label>
       </div>
       <div class="row">
-        <label class="description col mt-1" align="center">{{ $t('estimates.list_of_estimates') }}</label>
+        <label class="description col mt-1" align="center">{{
+          $t('estimates.list_of_estimates')
+        }}</label>
       </div>
       <div class="btn-container">
         <base-button
@@ -116,28 +117,57 @@
 
     <div v-show="!showEmptyScreen" class="table-container">
       <div class="table-actions mt-5">
-        <p class="table-stats">{{ $t('general.showing') }}: <b>{{ estimates.length }}</b> {{ $t('general.of') }} <b>{{ totalEstimates }}</b></p>
+        <p class="table-stats">
+          {{ $t('general.showing') }}: <b>{{ estimates.length }}</b>
+          {{ $t('general.of') }} <b>{{ totalEstimates }}</b>
+        </p>
 
         <!-- Tabs -->
         <ul class="tabs">
           <li class="tab" @click="getStatus('DRAFT')">
-            <a :class="['tab-link', {'a-active': filters.status === 'DRAFT'}]" href="#">{{ $t('general.draft') }}</a>
+            <a
+              :class="['tab-link', { 'a-active': filters.status === 'DRAFT' }]"
+              href="#"
+              >{{ $t('general.draft') }}</a
+            >
           </li>
           <li class="tab" @click="getStatus('SENT')">
-            <a :class="['tab-link', {'a-active': filters.status === 'SENT'}]" href="#" >{{ $t('general.sent') }}</a>
+            <a
+              :class="['tab-link', { 'a-active': filters.status === 'SENT' }]"
+              href="#"
+              >{{ $t('general.sent') }}</a
+            >
           </li>
           <li class="tab" @click="getStatus('')">
-            <a :class="['tab-link', {'a-active': filters.status === '' || filters.status !== 'DRAFT' && filters.status !== 'SENT'}]" href="#">{{ $t('general.all') }}</a>
+            <a
+              :class="[
+                'tab-link',
+                {
+                  'a-active':
+                    filters.status === '' ||
+                    (filters.status !== 'DRAFT' && filters.status !== 'SENT'),
+                },
+              ]"
+              href="#"
+              >{{ $t('general.all') }}</a
+            >
           </li>
         </ul>
         <transition name="fade">
           <v-dropdown v-if="selectedEstimates.length" :show-arrow="false">
-            <span slot="activator" href="#" class="table-actions-button dropdown-toggle">
+            <span
+              slot="activator"
+              href="#"
+              class="table-actions-button dropdown-toggle"
+            >
               {{ $t('general.actions') }}
             </span>
             <v-dropdown-item>
               <div class="dropdown-item" @click="removeMultipleEstimates">
-                <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+                <font-awesome-icon
+                  :icon="['fas', 'trash']"
+                  class="dropdown-item-icon"
+                />
                 {{ $t('general.delete') }}
               </div>
             </v-dropdown-item>
@@ -153,8 +183,12 @@
           type="checkbox"
           class="custom-control-input"
           @change="selectAllEstimates"
+        />
+        <label
+          v-show="!isRequestOngoing"
+          for="select-all"
+          class="custom-control-label selectall"
         >
-        <label v-show="!isRequestOngoing" for="select-all" class="custom-control-label selectall">
           <span class="select-all-label">{{ $t('general.select_all') }} </span>
         </label>
       </div>
@@ -178,7 +212,7 @@
                 :value="row.id"
                 type="checkbox"
                 class="custom-control-input"
-              >
+              />
               <label :for="row.id" class="custom-control-label" />
             </div>
           </template>
@@ -186,30 +220,30 @@
         <table-column
           :label="$t('estimates.date')"
           sort-as="estimate_date"
-          show="formattedEstimateDate" />
+          show="formattedEstimateDate"
+        />
         <table-column
           :label="$t('estimates.customer')"
           sort-as="name"
-          show="name" />
+          show="name"
+        />
         <!-- <table-column
           :label="$t('estimates.expiry_date')"
           sort-as="expiry_date"
           show="formattedExpiryDate" /> -->
-        <table-column
+        <table-column :label="$t('estimates.status')" show="status">
-          :label="$t('estimates.status')"
-          show="status" >
           <template slot-scope="row">
             <span> {{ $t('estimates.status') }}</span>
-            <span :class="'est-status-'+row.status.toLowerCase()">{{ row.status }}</span>
+            <span :class="'est-status-' + row.status.toLowerCase()">{{
+              row.status
+            }}</span>
           </template>
         </table-column>
         <table-column
           :label="$tc('estimates.estimate', 1)"
-          show="estimate_number"/>
+          show="estimate_number"
-        <table-column
+        />
-          :label="$t('invoices.total')"
+        <table-column :label="$t('invoices.total')" sort-as="total">
-          sort-as="total"
-        >
           <template slot-scope="row">
             <span> {{ $t('estimates.total') }}</span>
             <div v-html="$utils.formatMoney(row.total, row.user.currency)" />
@@ -227,50 +261,114 @@
                 <dot-icon />
               </a>
               <v-dropdown-item>
-                <router-link :to="{path: `estimates/${row.id}/edit`}" class="dropdown-item">
+                <router-link
-                  <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon" />
+                  :to="{ path: `estimates/${row.id}/edit` }"
+                  class="dropdown-item"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'pencil-alt']"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('general.edit') }}
                 </router-link>
               </v-dropdown-item>
               <v-dropdown-item>
                 <div class="dropdown-item" @click="removeEstimate(row.id)">
-                  <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+                  <font-awesome-icon
+                    :icon="['fas', 'trash']"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('general.delete') }}
                 </div>
               </v-dropdown-item>
               <v-dropdown-item>
-                <router-link :to="{path: `estimates/${row.id}/view`}" class="dropdown-item">
+                <router-link
+                  :to="{ path: `estimates/${row.id}/view` }"
+                  class="dropdown-item"
+                >
                   <font-awesome-icon icon="eye" class="dropdown-item-icon" />
                   {{ $t('general.view') }}
                 </router-link>
               </v-dropdown-item>
               <v-dropdown-item>
-                <a class="dropdown-item" href="#/" @click="convertInToinvoice(row.id)">
+                <a
-                  <font-awesome-icon icon="file-alt" class="dropdown-item-icon" />
+                  class="dropdown-item"
+                  href="#/"
+                  @click="convertInToinvoice(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="file-alt"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('estimates.convert_to_invoice') }}
                 </a>
               </v-dropdown-item>
               <v-dropdown-item v-if="row.status !== 'SENT'">
-                <a class="dropdown-item" href="#/" @click.self="onMarkAsSent(row.id)">
+                <a
-                  <font-awesome-icon icon="check-circle" class="dropdown-item-icon" />
+                  class="dropdown-item"
+                  href="#/"
+                  @click.self="onMarkAsSent(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="check-circle"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('estimates.mark_as_sent') }}
                 </a>
               </v-dropdown-item>
-              <v-dropdown-item v-if="row.status !== 'SENT'">
+              <v-dropdown-item v-if="row.status === 'DRAFT'">
-                <a class="dropdown-item" href="#/" @click.self="sendEstimate(row.id)">
+                <a
-                  <font-awesome-icon icon="paper-plane" class="dropdown-item-icon" />
+                  class="dropdown-item"
+                  href="#/"
+                  @click.self="sendEstimate(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="paper-plane"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('estimates.send_estimate') }}
                 </a>
               </v-dropdown-item>
+              <!-- resend estimte -->
+              <v-dropdown-item
+                v-if="row.status == 'SENT' || row.status == 'VIEWED'"
+              >
+                <a
+                  class="dropdown-item"
+                  href="#/"
+                  @click.self="sendEstimate(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="paper-plane"
+                    class="dropdown-item-icon"
+                  />
+                  {{ $t('estimates.resend_estimate') }}
+                </a>
+              </v-dropdown-item>
+              <!--  -->
               <v-dropdown-item v-if="row.status !== 'ACCEPTED'">
-                <a class="dropdown-item" href="#/" @click.self="onMarkAsAccepted(row.id)">
+                <a
-                  <font-awesome-icon icon="check-circle" class="dropdown-item-icon" />
+                  class="dropdown-item"
+                  href="#/"
+                  @click.self="onMarkAsAccepted(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="check-circle"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('estimates.mark_as_accepted') }}
                 </a>
               </v-dropdown-item>
               <v-dropdown-item v-if="row.status !== 'REJECTED'">
-                <a class="dropdown-item" href="#/" @click.self="onMarkAsRejected(row.id)">
+                <a
-                  <font-awesome-icon icon="times-circle" class="dropdown-item-icon" />
+                  class="dropdown-item"
+                  href="#/"
+                  @click.self="onMarkAsRejected(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="times-circle"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('estimates.mark_as_rejected') }}
                 </a>
               </v-dropdown-item>

resources/assets/js/views/estimates/ItemSelect.vue

@@ -12,6 +12,7 @@
       ref="baseSelect"
       v-model="itemSelect"
       :options="items"
+      :loading="loading"
       :show-labels="false"
       :preserve-search="true"
       :initial-search="item.name"
@@ -20,7 +21,7 @@
       label="name"
       class="multi-select-item"
       @value="onTextChange"
-      @select="(val) => $emit('select', val)"
+      @select="onSelect"
     >
       <div slot="afterList">
         <button type="button" class="list-add-button" @click="openItemModal">
@@ -142,6 +143,10 @@ export default {
         'data': {taxPerItem: this.taxPerItem, taxes: this.taxes}
       })
     },
+    onSelect(val) {
+      this.$emit('select', val)
+      this.fetchItems()
+    },    
     deselectItem () {
       this.itemSelect = null
       this.$emit('deselect')

resources/assets/js/views/estimates/View.vue

@@ -26,19 +26,42 @@
             {{ $t('estimates.send_estimate') }}
           </base-button>
         </div>
-        <v-dropdown :close-on-select="false" align="left" class="filter-container">
+        <v-dropdown
+          :close-on-select="true"
+          align="left"
+          class="filter-container"
+        >
           <a slot="activator" href="#">
             <base-button color="theme">
               <font-awesome-icon icon="ellipsis-h" />
             </base-button>
           </a>
           <v-dropdown-item>
-            <router-link :to="{path: `/admin/estimates/${$route.params.id}/edit`}" class="dropdown-item">
+            <div class="dropdown-item" @click="copyPdfUrl()">
-              <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon"/>
+              <font-awesome-icon
+                :icon="['fas', 'link']"
+                class="dropdown-item-icon"
+              />
+              {{ $t('general.copy_pdf_url') }}
+            </div>
+            <router-link
+              :to="{ path: `/admin/estimates/${$route.params.id}/edit` }"
+              class="dropdown-item"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'pencil-alt']"
+                class="dropdown-item-icon"
+              />
               {{ $t('general.edit') }}
             </router-link>
-            <div class="dropdown-item" @click="removeEstimate($route.params.id)">
+            <div
-              <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+              class="dropdown-item"
+              @click="removeEstimate($route.params.id)"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'trash']"
+                class="dropdown-item-icon"
+              />
               {{ $t('general.delete') }}
             </div>
           </v-dropdown-item>
@@ -57,14 +80,18 @@
           align-icon="right"
           @input="onSearched()"
         />
-        <div
+        <div class="btn-group ml-3" role="group" aria-label="First group">
-          class="btn-group ml-3"
+          <v-dropdown
-          role="group"
+            :close-on-select="false"
-          aria-label="First group"
+            align="left"
+            class="filter-container"
           >
-          <v-dropdown :close-on-select="false" align="left" class="filter-container">
             <a slot="activator" href="#">
-              <base-button class="inv-button inv-filter-fields-btn" color="default" size="medium">
+              <base-button
+                class="inv-button inv-filter-fields-btn"
+                color="default"
+                size="medium"
+              >
                 <font-awesome-icon icon="filter" />
               </base-button>
             </a>
@@ -80,8 +107,10 @@
                 class="inv-radio"
                 value="estimate_date"
                 @change="onSearched"
-              >
+              />
-              <label class="inv-label" for="filter_estimate_date">{{ $t('reports.estimates.estimate_date') }}</label>
+              <label class="inv-label" for="filter_estimate_date">{{
+                $t('reports.estimates.estimate_date')
+              }}</label>
             </div>
             <div class="filter-items">
               <input
@@ -92,8 +121,10 @@
                 class="inv-radio"
                 value="expiry_date"
                 @change="onSearched"
-              >
+              />
-              <label class="inv-label" for="filter_due_date">{{ $t('estimates.due_date') }}</label>
+              <label class="inv-label" for="filter_due_date">{{
+                $t('estimates.due_date')
+              }}</label>
             </div>
             <div class="filter-items">
               <input
@@ -104,11 +135,19 @@
                 class="inv-radio"
                 value="estimate_number"
                 @change="onSearched"
-              >
+              />
-              <label class="inv-label" for="filter_estimate_number">{{ $t('estimates.estimate_number') }}</label>
+              <label class="inv-label" for="filter_estimate_number">{{
+                $t('estimates.estimate_number')
+              }}</label>
             </div>
           </v-dropdown>
-          <base-button v-tooltip.top-center="{ content: getOrderName }" class="inv-button inv-filter-sorting-btn" color="default" size="medium" @click="sortData">
+          <base-button
+            v-tooltip.top-center="{ content: getOrderName }"
+            class="inv-button inv-filter-sorting-btn"
+            color="default"
+            size="medium"
+            @click="sortData"
+          >
             <font-awesome-icon v-if="getOrderBy" icon="sort-amount-up" />
             <font-awesome-icon v-else icon="sort-amount-down" />
           </base-button>
@@ -124,10 +163,20 @@
           <div class="left">
             <div class="inv-name">{{ estimate.user.name }}</div>
             <div class="inv-number">{{ estimate.estimate_number }}</div>
-            <div :class="'est-status-'+estimate.status.toLowerCase()" class="inv-status">{{ estimate.status }}</div>
+            <div
+              :class="'est-status-' + estimate.status.toLowerCase()"
+              class="inv-status"
+            >
+              {{ estimate.status }}
+            </div>
           </div>
           <div class="right">
-            <div class="inv-amount" v-html="$utils.formatMoney(estimate.total, estimate.user.currency)" />
+            <div
+              class="inv-amount"
+              v-html="
+                $utils.formatMoney(estimate.total, estimate.user.currency)
+              "
+            />
             <div class="inv-date">{{ estimate.formattedEstimateDate }}</div>
           </div>
         </router-link>
@@ -289,6 +338,13 @@ export default {
         }
       })
     },
+    copyPdfUrl () {
+      let pdfUrl = `${window.location.origin}/estimates/pdf/${this.estimate.unique_hash}`
+
+      let response = this.$utils.copyTextToClipboard(pdfUrl)
+
+      window.toastr['success'](this.$tc('Copied PDF url to clipboard!'))
+    },
     async removeEstimate (id) {
       window.swal({
         title: 'Deleted',

resources/assets/js/views/invoices/Index.vue

@@ -4,16 +4,12 @@
       <h3 class="page-title">{{ $t('invoices.title') }}</h3>
       <ol class="breadcrumb">
         <li class="breadcrumb-item">
-          <router-link
+          <router-link slot="item-title" to="dashboard">
-            slot="item-title"
-            to="dashboard">
             {{ $t('general.home') }}
           </router-link>
         </li>
         <li class="breadcrumb-item">
-          <router-link
+          <router-link slot="item-title" to="#">
-            slot="item-title"
-            to="#">
             {{ $tc('invoices.invoice', 2) }}
           </router-link>
         </li>
@@ -32,7 +28,11 @@
             {{ $t('general.filter') }}
           </base-button>
         </div>
-        <router-link slot="item-title" class="col-xs-2" to="/admin/invoices/create">
+        <router-link
+          slot="item-title"
+          class="col-xs-2"
+          to="/admin/invoices/create"
+        >
           <base-button size="large" icon="plus" color="theme">
             {{ $t('invoices.new_invoice') }}
           </base-button>
@@ -88,22 +88,29 @@
           </div>
           <div class="filter-invoice">
             <label>{{ $t('invoices.invoice_number') }}</label>
-            <base-input
+            <base-input v-model="filters.invoice_number" icon="hashtag" />
-              v-model="filters.invoice_number"
-              icon="hashtag"/>
           </div>
         </div>
-        <label class="clear-filter" @click="clearFilter">{{ $t('general.clear_all') }}</label>
+        <label class="clear-filter" @click="clearFilter">{{
+          $t('general.clear_all')
+        }}</label>
       </div>
     </transition>
 
-    <div v-cloak v-show="showEmptyScreen" class="col-xs-1 no-data-info" align="center">
+    <div
+      v-cloak
+      v-show="showEmptyScreen"
+      class="col-xs-1 no-data-info"
+      align="center"
+    >
       <moon-walker-icon class="mt-5 mb-4" />
       <div class="row" align="center">
         <label class="col title">{{ $t('invoices.no_invoices') }}</label>
       </div>
       <div class="row">
-        <label class="description col mt-1" align="center">{{ $t('invoices.list_of_invoices') }}</label>
+        <label class="description col mt-1" align="center">{{
+          $t('invoices.list_of_invoices')
+        }}</label>
       </div>
       <div class="btn-container">
         <base-button
@@ -120,28 +127,65 @@
 
     <div v-show="!showEmptyScreen" class="table-container">
       <div class="table-actions mt-5">
-        <p class="table-stats">{{ $t('general.showing') }}: <b>{{ invoices.length }}</b> {{ $t('general.of') }} <b>{{ totalInvoices }}</b></p>
+        <p class="table-stats">
+          {{ $t('general.showing') }}: <b>{{ invoices.length }}</b>
+          {{ $t('general.of') }} <b>{{ totalInvoices }}</b>
+        </p>
 
         <!-- Tabs -->
         <ul class="tabs">
           <li class="tab" @click="getStatus('UNPAID')">
-            <a :class="['tab-link', {'a-active': filters.status.value === 'UNPAID'}]" href="#" >{{ $t('general.due') }}</a>
+            <a
+              :class="[
+                'tab-link',
+                { 'a-active': filters.status.value === 'UNPAID' },
+              ]"
+              href="#"
+              >{{ $t('general.due') }}</a
+            >
           </li>
           <li class="tab" @click="getStatus('DRAFT')">
-            <a :class="['tab-link', {'a-active': filters.status.value === 'DRAFT'}]" href="#">{{ $t('general.draft') }}</a>
+            <a
+              :class="[
+                'tab-link',
+                { 'a-active': filters.status.value === 'DRAFT' },
+              ]"
+              href="#"
+              >{{ $t('general.draft') }}</a
+            >
           </li>
           <li class="tab" @click="getStatus('')">
-            <a :class="['tab-link', {'a-active': filters.status.value === '' || filters.status.value === null || filters.status.value !== 'DRAFT' && filters.status.value !== 'UNPAID'}]" href="#">{{ $t('general.all') }}</a>
+            <a
+              :class="[
+                'tab-link',
+                {
+                  'a-active':
+                    filters.status.value === '' ||
+                    filters.status.value === null ||
+                    (filters.status.value !== 'DRAFT' &&
+                      filters.status.value !== 'UNPAID'),
+                },
+              ]"
+              href="#"
+              >{{ $t('general.all') }}</a
+            >
           </li>
         </ul>
         <transition name="fade">
           <v-dropdown v-if="selectedInvoices.length" :show-arrow="false">
-            <span slot="activator" href="#" class="table-actions-button dropdown-toggle">
+            <span
+              slot="activator"
+              href="#"
+              class="table-actions-button dropdown-toggle"
+            >
               {{ $t('general.actions') }}
             </span>
             <v-dropdown-item>
               <div class="dropdown-item" @click="removeMultipleInvoices">
-                <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+                <font-awesome-icon
+                  :icon="['fas', 'trash']"
+                  class="dropdown-item-icon"
+                />
                 {{ $t('general.delete') }}
               </div>
             </v-dropdown-item>
@@ -155,8 +199,12 @@
           type="checkbox"
           class="custom-control-input"
           @change="selectAllInvoices"
+        />
+        <label
+          v-show="!isRequestOngoing"
+          for="select-all"
+          class="custom-control-label selectall"
         >
-        <label v-show="!isRequestOngoing" for="select-all" class="custom-control-label selectall">
           <span class="select-all-label">{{ $t('general.select_all') }} </span>
         </label>
       </div>
@@ -180,7 +228,7 @@
                 :value="row.id"
                 type="checkbox"
                 class="custom-control-input"
-              >
+              />
               <label :for="row.id" class="custom-control-label" />
             </div>
           </template>
@@ -195,35 +243,33 @@
           width="20%"
           show="name"
         />
-        <table-column
+        <table-column :label="$t('invoices.status')" sort-as="status">
-          :label="$t('invoices.status')"
-          sort-as="status"
-        >
           <template slot-scope="row">
             <span> {{ $t('invoices.status') }}</span>
-            <span :class="'inv-status-'+row.status.toLowerCase()">{{ (row.status != 'PARTIALLY_PAID')? row.status : row.status.replace('_', ' ') }}</span>
+            <span :class="'inv-status-' + row.status.toLowerCase()">{{
+              row.status != 'PARTIALLY_PAID'
+                ? row.status
+                : row.status.replace('_', ' ')
+            }}</span>
           </template>
         </table-column>
-        <table-column
+        <table-column :label="$t('invoices.paid_status')" sort-as="paid_status">
-          :label="$t('invoices.paid_status')"
-          sort-as="paid_status"
-        >
           <template slot-scope="row">
             <span>{{ $t('invoices.paid_status') }}</span>
-            <span :class="'inv-status-'+row.paid_status.toLowerCase()">{{ (row.paid_status != 'PARTIALLY_PAID')? row.paid_status : row.paid_status.replace('_', ' ') }}</span>
+            <span :class="'inv-status-' + row.paid_status.toLowerCase()">{{
+              row.paid_status != 'PARTIALLY_PAID'
+                ? row.paid_status
+                : row.paid_status.replace('_', ' ')
+            }}</span>
           </template>
         </table-column>
-        <table-column
+        <table-column :label="$t('invoices.number')" show="invoice_number" />
-          :label="$t('invoices.number')"
+        <table-column :label="$t('invoices.amount_due')" sort-as="due_amount">
-          show="invoice_number"
-        />
-        <table-column
-          :label="$t('invoices.amount_due')"
-          sort-as="due_amount"
-        >
           <template slot-scope="row">
             <span>{{ $t('invoices.amount_due') }}</span>
-            <div v-html="$utils.formatMoney(row.due_amount, row.user.currency)"/>
+            <div
+              v-html="$utils.formatMoney(row.due_amount, row.user.currency)"
+            />
           </template>
         </table-column>
         <table-column
@@ -238,42 +284,91 @@
                 <dot-icon />
               </a>
               <v-dropdown-item>
-                <router-link :to="{path: `invoices/${row.id}/edit`}" class="dropdown-item">
+                <router-link
-                  <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon"/>
+                  :to="{ path: `invoices/${row.id}/edit` }"
+                  class="dropdown-item"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'pencil-alt']"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('general.edit') }}
                 </router-link>
-                <router-link :to="{path: `invoices/${row.id}/view`}" class="dropdown-item">
+                <router-link
+                  :to="{ path: `invoices/${row.id}/view` }"
+                  class="dropdown-item"
+                >
                   <font-awesome-icon icon="eye" class="dropdown-item-icon" />
                   {{ $t('invoices.view') }}
                 </router-link>
               </v-dropdown-item>
               <v-dropdown-item v-if="row.status == 'DRAFT'">
                 <a class="dropdown-item" href="#/" @click="sendInvoice(row.id)">
-                  <font-awesome-icon icon="paper-plane" class="dropdown-item-icon" />
+                  <font-awesome-icon
+                    icon="paper-plane"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('invoices.send_invoice') }}
                 </a>
               </v-dropdown-item>
+              <v-dropdown-item
+                v-if="row.status === 'SENT' || row.status === 'VIEWED'"
+              >
+                <a class="dropdown-item" href="#/" @click="sendInvoice(row.id)">
+                  <font-awesome-icon
+                    icon="paper-plane"
+                    class="dropdown-item-icon"
+                  />
+                  {{ $t('invoices.resend_invoice') }}
+                </a>
+              </v-dropdown-item>
               <v-dropdown-item v-if="row.status == 'DRAFT'">
-                <a class="dropdown-item" href="#/" @click="markInvoiceAsSent(row.id)">
+                <a
-                  <font-awesome-icon icon="check-circle" class="dropdown-item-icon" />
+                  class="dropdown-item"
+                  href="#/"
+                  @click="markInvoiceAsSent(row.id)"
+                >
+                  <font-awesome-icon
+                    icon="check-circle"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('invoices.mark_as_sent') }}
                 </a>
               </v-dropdown-item>
-              <v-dropdown-item v-if="row.status === 'SENT' || row.status === 'VIEWED' || row.status === 'OVERDUE'">
+              <v-dropdown-item
-                <router-link :to="`/admin/payments/${row.id}/create`" class="dropdown-item">
+                v-if="
-                  <font-awesome-icon :icon="['fas', 'credit-card']" class="dropdown-item-icon"/>
+                  row.status === 'SENT' ||
+                  row.status === 'VIEWED' ||
+                  row.status === 'OVERDUE'
+                "
+              >
+                <router-link
+                  :to="`/admin/payments/${row.id}/create`"
+                  class="dropdown-item"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'credit-card']"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('payments.record_payment') }}
                 </router-link>
               </v-dropdown-item>
               <v-dropdown-item>
-                <a class="dropdown-item" href="#/" @click="onCloneInvoice(row.id)">
+                <a
+                  class="dropdown-item"
+                  href="#/"
+                  @click="onCloneInvoice(row.id)"
+                >
                   <font-awesome-icon icon="copy" class="dropdown-item-icon" />
                   {{ $t('invoices.clone_invoice') }}
                 </a>
               </v-dropdown-item>
               <v-dropdown-item>
                 <div class="dropdown-item" @click="removeInvoice(row.id)">
-                  <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+                  <font-awesome-icon
+                    :icon="['fas', 'trash']"
+                    class="dropdown-item-icon"
+                  />
                   {{ $t('general.delete') }}
                 </div>
               </v-dropdown-item>

resources/assets/js/views/invoices/ItemSelect.vue

@@ -12,6 +12,7 @@
       ref="baseSelect"
       v-model="itemSelect"
       :options="items"
+      :loading="loading"
       :show-labels="false"
       :preserve-search="true"
       :initial-search="item.name"
@@ -20,7 +21,7 @@
       label="name"
       class="multi-select-item"
       @value="onTextChange"
-      @select="(val) => $emit('select', val)"
+      @select="onSelect"
     >
       <div slot="afterList">
         <button type="button" class="list-add-button" @click="openItemModal">
@@ -131,6 +132,10 @@ export default {
         'data': {taxPerItem: this.taxPerItem, taxes: this.taxes}
       })
     },
+    onSelect(val) {
+      this.$emit('select', val)
+      this.fetchItems()
+    },
     deselectItem () {
       this.itemSelect = null
       this.$emit('deselect')

resources/assets/js/views/invoices/View.vue

@@ -24,26 +24,47 @@
         >
           {{ $t('invoices.send_invoice') }}
         </base-button>
-        <router-link v-if="invoice.status === 'SENT'" :to="`/admin/payments/${$route.params.id}/create`">
+        <router-link
-          <base-button
+          v-if="invoice.status === 'SENT'"
-            color="theme"
+          :to="`/admin/payments/${$route.params.id}/create`"
         >
+          <base-button color="theme">
             {{ $t('payments.record_payment') }}
           </base-button>
         </router-link>
-        <v-dropdown :close-on-select="false" align="left" class="filter-container">
+        <v-dropdown
+          :close-on-select="true"
+          align="left"
+          class="filter-container"
+        >
           <a slot="activator" href="#">
             <base-button color="theme">
               <font-awesome-icon icon="ellipsis-h" />
             </base-button>
           </a>
           <v-dropdown-item>
-            <router-link :to="{path: `/admin/invoices/${$route.params.id}/edit`}" class="dropdown-item">
+            <div class="dropdown-item" @click="copyPdfUrl">
-              <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon"/>
+              <font-awesome-icon
+                :icon="['fas', 'link']"
+                class="dropdown-item-icon"
+              />
+              {{ $t('general.copy_pdf_url') }}
+            </div>
+            <router-link
+              :to="{ path: `/admin/invoices/${$route.params.id}/edit` }"
+              class="dropdown-item"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'pencil-alt']"
+                class="dropdown-item-icon"
+              />
               {{ $t('general.edit') }}
             </router-link>
             <div class="dropdown-item" @click="removeInvoice($route.params.id)">
-              <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+              <font-awesome-icon
+                :icon="['fas', 'trash']"
+                class="dropdown-item-icon"
+              />
               {{ $t('general.delete') }}
             </div>
           </v-dropdown-item>
@@ -61,14 +82,18 @@
           align-icon="right"
           @input="onSearch"
         />
-        <div
+        <div class="btn-group ml-3" role="group" aria-label="First group">
-          class="btn-group ml-3"
+          <v-dropdown
-          role="group"
+            :close-on-select="false"
-          aria-label="First group"
+            align="left"
+            class="filter-container"
           >
-          <v-dropdown :close-on-select="false" align="left" class="filter-container">
             <a slot="activator" href="#">
-              <base-button class="inv-button inv-filter-fields-btn" color="default" size="medium">
+              <base-button
+                class="inv-button inv-filter-fields-btn"
+                color="default"
+                size="medium"
+              >
                 <font-awesome-icon icon="filter" />
               </base-button>
             </a>
@@ -84,8 +109,10 @@
                 class="inv-radio"
                 value="invoice_date"
                 @change="onSearch"
-              >
+              />
-              <label class="inv-label" for="filter_invoice_date">{{ $t('invoices.invoice_date') }}</label>
+              <label class="inv-label" for="filter_invoice_date">{{
+                $t('invoices.invoice_date')
+              }}</label>
             </div>
             <div class="filter-items">
               <input
@@ -96,8 +123,10 @@
                 class="inv-radio"
                 value="due_date"
                 @change="onSearch"
-              >
+              />
-              <label class="inv-label" for="filter_due_date">{{ $t('invoices.due_date') }}</label>
+              <label class="inv-label" for="filter_due_date">{{
+                $t('invoices.due_date')
+              }}</label>
             </div>
             <div class="filter-items">
               <input
@@ -108,11 +137,19 @@
                 class="inv-radio"
                 value="invoice_number"
                 @change="onSearch"
-              >
+              />
-              <label class="inv-label" for="filter_invoice_number">{{ $t('invoices.invoice_number') }}</label>
+              <label class="inv-label" for="filter_invoice_number">{{
+                $t('invoices.invoice_number')
+              }}</label>
             </div>
           </v-dropdown>
-          <base-button v-tooltip.top-center="{ content: getOrderName }" class="inv-button inv-filter-sorting-btn" color="default" size="medium" @click="sortData">
+          <base-button
+            v-tooltip.top-center="{ content: getOrderName }"
+            class="inv-button inv-filter-sorting-btn"
+            color="default"
+            size="medium"
+            @click="sortData"
+          >
             <font-awesome-icon v-if="getOrderBy" icon="sort-amount-up" />
             <font-awesome-icon v-else icon="sort-amount-down" />
           </base-button>
@@ -129,10 +166,20 @@
           <div class="left">
             <div class="inv-name">{{ invoice.user.name }}</div>
             <div class="inv-number">{{ invoice.invoice_number }}</div>
-            <div :class="'inv-status-'+invoice.status.toLowerCase()" class="inv-status">{{ invoice.status }}</div>
+            <div
+              :class="'inv-status-' + invoice.status.toLowerCase()"
+              class="inv-status"
+            >
+              {{ invoice.status }}
+            </div>
           </div>
           <div class="right">
-            <div class="inv-amount" v-html="$utils.formatMoney(invoice.due_amount, invoice.user.currency)" />
+            <div
+              class="inv-amount"
+              v-html="
+                $utils.formatMoney(invoice.due_amount, invoice.user.currency)
+              "
+            />
             <div class="inv-date">{{ invoice.formattedInvoiceDate }}</div>
           </div>
         </router-link>
@@ -291,6 +338,14 @@ export default {
         }
       })
     },
+    copyPdfUrl () {
+      let pdfUrl = `${window.location.origin}/invoices/pdf/${this.invoice.unique_hash}`
+
+      let response = this.$utils.copyTextToClipboard(pdfUrl)
+
+      window.toastr['success'](this.$tc('Copied PDF url to clipboard!'))
+
+    },
     async removeInvoice (id) {
       this.selectInvoice([parseInt(id)])
       this.id = id

resources/assets/js/views/payments/View.vue

@@ -11,19 +11,39 @@
         >
           {{ $t('payments.send_payment_receipt') }}
         </base-button>
-        <v-dropdown :close-on-select="false" align="left" class="filter-container">
+        <v-dropdown
+          :close-on-select="true"
+          align="left"
+          class="filter-container"
+        >
           <a slot="activator" href="#">
             <base-button color="theme">
               <font-awesome-icon icon="ellipsis-h" />
             </base-button>
           </a>
           <v-dropdown-item>
-            <router-link :to="{path: `/admin/payments/${$route.params.id}/edit`}" class="dropdown-item">
+            <div class="dropdown-item" @click="copyPdfUrl">
-              <font-awesome-icon :icon="['fas', 'pencil-alt']" class="dropdown-item-icon"/>
+              <font-awesome-icon
+                :icon="['fas', 'link']"
+                class="dropdown-item-icon"
+              />
+              {{ $t('general.copy_pdf_url') }}
+            </div>
+            <router-link
+              :to="{ path: `/admin/payments/${$route.params.id}/edit` }"
+              class="dropdown-item"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'pencil-alt']"
+                class="dropdown-item-icon"
+              />
               {{ $t('general.edit') }}
             </router-link>
             <div class="dropdown-item" @click="removePayment($route.params.id)">
-              <font-awesome-icon :icon="['fas', 'trash']" class="dropdown-item-icon" />
+              <font-awesome-icon
+                :icon="['fas', 'trash']"
+                class="dropdown-item-icon"
+              />
               {{ $t('general.delete') }}
             </div>
           </v-dropdown-item>
@@ -41,14 +61,18 @@
           align-icon="right"
           @input="onSearch"
         />
-        <div
+        <div class="btn-group ml-3" role="group" aria-label="First group">
-          class="btn-group ml-3"
+          <v-dropdown
-          role="group"
+            :close-on-select="false"
-          aria-label="First group"
+            align="left"
+            class="filter-container"
           >
-          <v-dropdown :close-on-select="false" align="left" class="filter-container">
             <a slot="activator" href="#">
-              <base-button class="inv-button inv-filter-fields-btn" color="default" size="medium">
+              <base-button
+                class="inv-button inv-filter-fields-btn"
+                color="default"
+                size="medium"
+              >
                 <font-awesome-icon icon="filter" />
               </base-button>
             </a>
@@ -64,8 +88,10 @@
                 class="inv-radio"
                 value="invoice_number"
                 @change="onSearch"
-              >
+              />
-              <label class="inv-label" for="filter_invoice_number">{{ $t('invoices.title') }}</label>
+              <label class="inv-label" for="filter_invoice_number">{{
+                $t('invoices.title')
+              }}</label>
             </div>
             <div class="filter-items">
               <input
@@ -76,8 +102,10 @@
                 class="inv-radio"
                 value="payment_date"
                 @change="onSearch"
-              >
+              />
-              <label class="inv-label" for="filter_payment_date">{{ $t('payments.date') }}</label>
+              <label class="inv-label" for="filter_payment_date">{{
+                $t('payments.date')
+              }}</label>
             </div>
             <div class="filter-items">
               <input
@@ -88,11 +116,19 @@
                 class="inv-radio"
                 value="payment_number"
                 @change="onSearch"
-              >
+              />
-              <label class="inv-label" for="filter_payment_number">{{ $t('payments.payment_number') }}</label>
+              <label class="inv-label" for="filter_payment_number">{{
+                $t('payments.payment_number')
+              }}</label>
             </div>
           </v-dropdown>
-          <base-button v-tooltip.top-center="{ content: getOrderName }" class="inv-button inv-filter-sorting-btn" color="default" size="medium" @click="sortData">
+          <base-button
+            v-tooltip.top-center="{ content: getOrderName }"
+            class="inv-button inv-filter-sorting-btn"
+            color="default"
+            size="medium"
+            @click="sortData"
+          >
             <font-awesome-icon v-if="getOrderBy" icon="sort-amount-up" />
             <font-awesome-icon v-else icon="sort-amount-down" />
           </base-button>
@@ -112,7 +148,10 @@
             <div class="inv-number">{{ payment.invoice_number }}</div>
           </div>
           <div class="right">
-            <div class="inv-amount" v-html="$utils.formatMoney(payment.amount, payment.user.currency)" />
+            <div
+              class="inv-amount"
+              v-html="$utils.formatMoney(payment.amount, payment.user.currency)"
+            />
             <div class="inv-date">{{ payment.formattedPaymentDate }}</div>
             <!-- <div class="inv-number">{{ payment.payment_method.name }}</div> -->
           </div>
@@ -260,6 +299,13 @@ export default {
         }
       })
     },
+    copyPdfUrl () {
+      let pdfUrl = `${window.location.origin}/payments/pdf/${this.payment.unique_hash}`
+
+      let response = this.$utils.copyTextToClipboard(pdfUrl)
+
+      window.toastr['success'](this.$tc('Copied PDF url to clipboard!'))
+    },
     async removePayment (id) {
       this.id = id
       window.swal({

resources/assets/js/views/settings/UpdateApp.vue

@@ -1,33 +1,76 @@
 <template>
-  <div class="setting-main-container">
+  <div class="setting-main-container update-container">
     <div class="card setting-card">
       <div class="page-header">
         <h3 class="page-title">{{ $t('settings.update_app.title') }}</h3>
         <p class="page-sub-title">
           {{ $t('settings.update_app.description') }}
         </p>
-        <label class="input-label">{{ $t('settings.update_app.current_version') }}</label><br>
+        <label class="input-label">{{
+          $t('settings.update_app.current_version')
+        }}</label
+        ><br />
         <label class="version mb-4">{{ currentVersion }}</label>
-        <base-button :outline="true" :disabled="isCheckingforUpdate || isUpdating" size="large" color="theme" class="mb-4" @click="checkUpdate">
+        <base-button
-          <font-awesome-icon :class="{'update': isCheckingforUpdate}" style="margin-right: 10px;" icon="sync-alt" />
+          :outline="true"
+          :disabled="isCheckingforUpdate || isUpdating"
+          size="large"
+          color="theme"
+          class="mb-4"
+          @click="checkUpdate"
+        >
+          <font-awesome-icon
+            :class="{ update: isCheckingforUpdate }"
+            style="margin-right: 10px;"
+            icon="sync-alt"
+          />
           {{ $t('settings.update_app.check_update') }}
         </base-button>
-        <hr>
+        <hr />
         <div v-show="!isUpdating" v-if="isUpdateAvailable" class="mt-4 content">
-          <h3 class="page-title mb-3">{{ $t('settings.update_app.avail_update') }}</h3>
+          <h3 class="page-title mb-3">
-          <label class="input-label">{{ $t('settings.update_app.next_version') }}</label><br>
+            {{ $t('settings.update_app.avail_update') }}
+          </h3>
+          <label class="input-label">{{
+            $t('settings.update_app.next_version')
+          }}</label
+          ><br />
           <label class="version">{{ updateData.version }}</label>
           <p class="page-sub-title" style="white-space: pre-wrap;">{{ description }}</p>
-          <base-button size="large" icon="rocket" color="theme" @click="onUpdateApp">
+          <base-button
+            size="large"
+            icon="rocket"
+            color="theme"
+            @click="onUpdateApp"
+          >
             {{ $t('settings.update_app.update') }}
           </base-button>
         </div>
         <div v-if="isUpdating" class="mt-4 content">
-          <h3 class="page-title">{{ $t('settings.update_app.update_progress') }}</h3>
+          <div class="d-flex flex-row justify-content-between">
+            <div>
+              <h3 class="page-title">
+                {{ $t('settings.update_app.update_progress') }}
+              </h3>
               <p class="page-sub-title">
                 {{ $t('settings.update_app.progress_text') }}
               </p>
-          <font-awesome-icon icon="spinner" class="fa-spin"/>
+            </div>
+            <font-awesome-icon icon="spinner" class="update-spinner fa-spin" />
+          </div>
+          <ul class="update-steps-container">
+            <li class="update-step" v-for="step in updateSteps">
+              <p class="update-step-text">{{ $t(step.translationKey) }}</p>
+              <div class="update-status-container">
+                <span v-if="step.time" class="update-time">{{
+                  step.time
+                }}</span>
+                <span :class="'update-status status-' + getStatus(step)">{{
+                  getStatus(step)
+                }}</span>
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -46,11 +89,48 @@ export default {
       interval: null,
       description: '',
       currentVersion: '',
+      updateSteps: [
+        {
+          translationKey: 'settings.update_app.download_zip_file',
+          stepUrl: '/api/update/download',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.unzipping_package',
+          stepUrl: '/api/update/unzip',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.copying_files',
+          stepUrl: '/api/update/copy',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.running_migrations',
+          stepUrl: '/api/update/migrate',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.finishing_update',
+          stepUrl: '/api/update/finish',
+          time: null,
+          started: false,
+          completed: false,
+        },
+      ],
       updateData: {
         isMinor: Boolean,
         installed: '',
-        version: ''
+        version: '',
-      }
+      },
     }
   },
   created() {
@@ -69,36 +149,17 @@ export default {
     closeHandler() {
       console.log('closing')
     },
-    async onUpdateApp () {
+    getStatus(step) {
-      try {
+      if (step.started && step.completed) {
-        this.isUpdating = true
+        return 'finished'
-        this.updateData.installed = this.currentVersion
+      } else if (step.started && !step.completed) {
-        let res = await window.axios.post('/api/update', this.updateData)
+        return 'running'
-
+      } else if (!step.started && !step.completed) {
-        if (res.data.success) {
+        return 'pending'
-          setTimeout(async () => {
-            await window.axios.post('/api/update/finish', this.updateData)
-
-            window.toastr['success'](this.$t('settings.update_app.update_success'))
-            this.currentVersion = this.updateData.version
-            this.isUpdateAvailable = false
-
-            setTimeout(() => {
-              location.reload()
-            }, 2000)
-          }, 1000)
       } else {
-          console.log(res.data)
+        return 'error'
-          window.toastr['error'](res.data.error)
       }
-      } catch (e) {
-        console.log(e)
-        window.toastr['error']('Something went wrong')
-      }
-
-      this.isUpdating = false
     },
-
     async checkUpdate() {
       try {
         this.isCheckingforUpdate = true
@@ -122,8 +183,67 @@ export default {
         this.isCheckingforUpdate = false
         window.toastr['error']('Something went wrong')
       }
+    },
+    async onUpdateApp() {
+      let path = null
+
+      for (let index = 0; index < this.updateSteps.length; index++) {
+        let currentStep = this.updateSteps[index]
+        try {
+          this.isUpdating = true
+          currentStep.started = true
+          let updateParams = {
+            version: this.updateData.version,
+            installed: this.currentVersion,
+            path: path || null,
+          }
+
+          let requestResponse = await window.axios.post(
+            currentStep.stepUrl,
+            updateParams
+          )
+          currentStep.completed = true
+          if (requestResponse.data && requestResponse.data.path) {
+            path = requestResponse.data.path
+          }
+
+          // on finish
+          if (
+            currentStep.translationKey == 'settings.update_app.finishing_update'
+          ) {
+            this.isUpdating = false
+            window.toastr['success'](
+              this.$t('settings.update_app.update_success')
+            )
+
+            setTimeout(() => {
+              location.reload()
+            }, 3000)
+          }
+        } catch (error) {
+          currentStep.started = false
+          currentStep.completed = true
+          window.toastr['error'](this.$t('validation.something_went_wrong'))
+          this.onUpdateFailed(currentStep.translationKey)
+          return false
         }
       }
+    },
+    onUpdateFailed(translationKey) {
+      let stepName = this.$t(translationKey) 
+      swal({
+        title: this.$t('settings.update_app.update_failed'),
+        text: this.$tc('settings.update_app.update_failed_text', stepName, {step: stepName}),
+        buttons: [this.$t('general.cancel'), this.$t('general.retry')],
+      }).then(async (value) => {
+        if (value) {
+          this.onUpdateApp()
+          return 
+        }
+        this.isUpdating = false
+      })
+    },
+  },
 }
 </script>
 

resources/assets/plugins/vue-font-awesome/index.js

@@ -54,7 +54,8 @@ import {
   faEyeSlash,
   faSyncAlt,
   faRocket,
-  faCamera
+  faCamera,
+  faLink,
 } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -119,7 +120,8 @@ library.add(
   faPaperPlane,
   faSyncAlt,
   faRocket,
-  faCamera
+  faCamera,
+  faLink
 )
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)

resources/assets/sass/components/vue-multi-select.scss

@@ -27,6 +27,7 @@ fieldset[disabled] .multiselect {
     top: 50%;
     left: 50%;
     margin: -8px 0 0 -8px;
+    z-index: 5;
     width: 16px;
     height: 16px;
     border-radius: 100%;

resources/assets/sass/pages/settings.scss

@@ -122,6 +122,84 @@
 
     }
 
+    .update-container {
+
+        .update-spinner {
+            font-size: 30px;
+            color: $ls-color-gray--dark;
+        }
+
+        .update-steps-container {
+            list-style-type: none;
+            width: 100%;
+            padding: 0px;
+
+            .update-step {
+                display: flex;
+                width: 100%;
+                justify-content: space-between;
+                padding: 10px 0px;
+                border-bottom: 1px solid $ls-color-gray--light;
+
+                &:last-child {
+                    border-bottom: 0px solid;
+                }
+
+            }
+
+        }
+
+        .update-step-text {
+            font-size: $font-size-base;
+            margin: 0px;
+            line-height: 2rem;
+        }
+
+        .update-status-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .update-time {
+                font-size: 10px;
+                color: $ls-color-gray--dark;
+                margin-right: 10px;
+            }
+    
+            .update-status {
+                font-size: 13px;
+                width: 88px;
+                height: 28px;
+                display: block;
+                text-align: center;
+                border-radius: 30px;
+                text-transform: uppercase;
+                line-height: 2rem;
+            }
+    
+            .status-pending {
+                background-color: #EAF1FB;
+                color: $ls-color-secondary;
+            }
+    
+            .status-running {
+                background-color: rgba(21, 178, 236, 0.15);
+                color: $ls-color-light-blue;
+            }
+    
+            .status-finished {
+                background-color: #D4F6EE;
+                color: $ls-color-green;
+            }
+    
+            .status-error {
+                background-color: rgba(251, 113, 120, 0.22);
+                color: $ls-color-red;
+            }
+        }
+
+    }
+
     .add-new-tax {
         height: 45px;
         white-space: nowrap;

resources/views/app/pdf/estimate/estimate1.blade.php

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Estimate</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <style type="text/css">
+        /* -- Base -- */
         body {
             font-family: "DejaVu Sans";
         }
@@ -12,31 +14,22 @@
         html {
             margin: 0px;
             padding: 0px;
+            margin-top: 50px;
         }
 
         table {
             border-collapse: collapse;
         }
 
-        .header-line {
-            color:rgba(0, 0, 0, 0.2);
-            position: absolute;
-            top: 90px;
-            left: 0px;
-            width: 100%;
-        }
-
         hr {
             margin: 0 30px 0 30px;
             color: rgba(0, 0, 0, 0.2);
             border: 0.5px solid #EAF1FB;
         }
 
-        .header-center {
+        /* -- Header -- */
-            text-align: center
-        }
 
-        .header-table {
+        .header-container {
             position: absolute;
             width: 100%;
             height: 90px;
@@ -44,6 +37,14 @@
             top: -50px;
         }
 
+        .header-bottom-divider {
+            color: rgba(0, 0, 0, 0.2);
+            position: absolute;
+            top: 90px;
+            left: 0px;
+            width: 100%;
+        }
+
         .header-logo {
             height: 50px;
             margin-top: 20px;
@@ -51,32 +52,11 @@
             color: #817AE3;
         }
 
-        .inv-flex{
-            display:flex;
-        }
-
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .TextColor1 {
-            font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
-        }
-
-        @page {
-            margin-top: 60px !important;
-        }
-
         .wrapper {
             display: block;
             margin-top: 0px;
@@ -84,89 +64,83 @@
             padding-bottom: 20px;
         }
 
-        .address {
+        /* -- Company Details -- */
-            /* display: inline-block; */
+
-            padding-top: 30px
+        .company-details-container {
+            padding-top: 30px;
         }
 
-        .company {
+        .company-address-container {
             float: left;
             padding-left: 30px;
-            font-weight: normal;
+            width: 30%;
-            display: inline;
+            text-transform: capitalize;
+            margin-bottom: 2px;
+        }
+
+        .company-address-container {
+            padding-left: 30px;
             float: left;
             width: 30%;
             text-transform: capitalize;
             margin-bottom: 2px;
         }
 
-        .company h1 {
+        .company-address-container h1 {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
             margin-bottom: 0px;
+            margin-top: 10px;
         }
 
-        .company-add {
+        .company-address {
             margin-top: 2px;
             text-align: left;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 15px;
             color: #595959;
         }
 
-        .job-add {
+        .estimate-details-container {
-            /* display: inline; */
             float: right;
             padding: 10px 30px 0 0;
         }
-        .amount-due {
-            background-color: #f2f2f2;
-        }
 
-        .textRight {
+        .attribute-label {
-            text-align: right;
-        }
-
-        .textLeft {
-            text-align: left;
-        }
-
-        .textStyle1 {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding-right: 40px;
+            text-align: left;
+            color: #55547A
         }
 
-        .textStyle2 {
+        .attribute-value {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             text-align: right;
         }
-        .bill-add {
+
+        /* -- Customer Address -- */
+
+        .customer-address-container {
             width: 45%;
             padding: 0px 0 0 0px;
         }
 
-        /* -------------------------- */
+        /* -- Shipping -- */
-        /* shipping style */
 
-        .ship-address-container {
+        .shipping-address-container {
             float: right;
             padding-left: 30px;
         }
 
-        .ship-to {
+        .shipping-address-container--left {
-            font-style: normal;
+            float: left;
-            font-weight: normal;
+            padding-left: 0px;
+        }
+
+        .shipping-address-label {
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
@@ -174,18 +148,15 @@
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
+        .shipping-address-name {
-            max-width: 250px
+            max-width: 160px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
             margin: 0px;
         }
-        .ship-user-address {
+
-            font-style: normal;
+        .shipping-address {
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -193,27 +164,15 @@
             margin: 0px;
             width: 160px;
         }
-        .ship-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
 
-        /* -------------------------- */
+        /* -- Billing -- */
-        /* billing style */
 
-        .bill-address-container {
+        .billing-address-container {
             float: left;
             padding-left: 30px;
         }
 
-        .bill-to {
+        .billing-address-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
@@ -221,19 +180,15 @@
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
+        .billing-address-name {
-            max-width: 250px
+            max-width: 160px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
             margin: 0px;
         }
 
-        .bill-user-address {
+        .billing-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -242,28 +197,20 @@
             width: 160px;
         }
 
-        .bill-user-phone {
+        /* -- Items Table -- */
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
 
-        .table2 {
+        .items-table {
             margin-top: 35px;
             padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        .table2 hr {
+        .items-table hr {
             height: 0.1px;
         }
 
-        .ItemTableHeader {
+        .item-table-heading {
             font-size: 13.5;
             text-align: center;
             color: rgba(0, 0, 0, 0.85);
@@ -271,50 +218,67 @@
             padding-bottom: 10px;
         }
 
-        tr.main-table-header th {
+        tr.item-table-heading-row th {
             border-bottom: 0.620315px solid #E8E8E8;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
-        .main-table-header {
+        .item-table-heading-row {
             margin-bottom: 10px;
         }
 
-        tr.item-details td {
+        tr.item-row td {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
-        .items {
+        .item-cell {
             font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
+            color: #040405;
             text-align: center;
             padding: 5px;
             padding-top: 10px;
+            border-color: #d9d9d9;
         }
 
-        .padd8 {
+        .item-description {
-            padding-top: 8px;
+            color: #595959;
-            padding-bottom: 8px;
+            font-size: 9px;
+            line-height: 12px;
         }
 
-        .padd2 {
+        /* -- Total Display Table -- */
-            padding-top: 2px;
+
-            padding-bottom: 2px;
+        .total-display-container {
+            padding: 0 25px;
         }
-        .table3 {
+
+        .total-display-table {
             border-top: none;
             box-sizing: border-box;
-            width: 630px;
             page-break-inside: avoid;
             page-break-before: auto;
             page-break-after: auto;
+            margin-left: 500px;
+            margin-top: 20px;
+        }
 
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: bold;
+            text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
+            padding-top: 2px;
+            padding-bottom: 2px;
         }
 
         .total-border-left {
@@ -323,33 +287,17 @@
             padding-top: 0px;
             padding: 8px !important;
         }
+
         .total-border-right {
             border: 1px solid #E8E8E8 !important;
             border-left: 0px !important;
             padding-top: 0px;
             padding: 8px !important;
-
-        }
-        .inv-item {
-            border-color: #d9d9d9;
         }
 
-        .no-border {
+        /* -- Notes -- */
-            border: none;
-        }
-
-        .desc {
-            font-weight: 100;
-            text-align: justify;
-            font-size: 10px;
-            margin-bottom: 15px;
-            margin-top:7px;
-            color:rgba(0, 0, 0, 0.85);
-        }
 
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -360,8 +308,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -371,13 +317,69 @@
             padding-bottom: 10px;
         }
 
+        /* -- Helpers -- */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
+
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
-                <td class="header-center">
+                <td class="text-center">
                     @if($logo)
                     <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
@@ -388,39 +390,39 @@
                 </td>
             </tr>
         </table>
-        <hr class="header-line" />
+        <hr class="header-bottom-divider" />
     </div>
     <div class="wrapper">
-        <div class="address">
+        <div class="company-details-container">
-            <div class="company">
+            <div class="company-address-container">
                 @include('app.pdf.estimate.partials.company-address')
             </div>
-            <div class="job-add">
+            <div class="estimate-details-container">
-                <table>
+                <table class="estimate-details-table">
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Estimate Number</td>
+                        <td class="attribute-label">Estimate Number</td>
-                        <td class="textStyle2"> &nbsp;{{$estimate->estimate_number}}</td>
+                        <td class="attribute-value"> &nbsp;{{$estimate->estimate_number}}</td>
                     </tr>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Estimate Date </td>
+                        <td class="attribute-label">Estimate Date </td>
-                        <td class="textStyle2"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
+                        <td class="attribute-value"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
                     </tr>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Expiry Date</td>
+                        <td class="attribute-label">Expiry Date</td>
-                        <td class="textStyle2"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
+                        <td class="attribute-value"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
                     </tr>
                 </table>
             </div>
             <div style="clear: both;"></div>
         </div>
-        <div class="bill-add">
+        <div class="customer-address-container">
-            <div class="bill-address-container">
+            <div class="billing-address-container">
                 @include('app.pdf.estimate.partials.billing-address')
             </div>
             @if($estimate->user->billingaddress)
-                <div class="ship-address-container">
+            <div class="shipping-address-container">
             @else
-                <div class="ship-address-container " style="float:left;padding-left:0px;">
+            <div class="shipping-address-container--left">
             @endif
             @include('app.pdf.estimate.partials.shipping-address')
             </div>
@@ -432,4 +434,5 @@
             @include('app.pdf.estimate.partials.notes')
         </div>
 </body>
+
 </html>

resources/views/app/pdf/estimate/estimate2.blade.php

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Estimate</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
+        /* -- Base -- */
         body {
             font-family: "DejaVu Sans";
         }
@@ -11,22 +13,21 @@
         html {
             margin: 0px;
             padding: 0px;
+            margin-top: 50px;
         }
+
         table {
             border-collapse: collapse;
         }
 
-        .header-left {
+        hr {
-            padding-top: 45px;
+            color: rgba(0, 0, 0, 0.2);
-            padding-bottom: 45px;
+            border: 0.5px solid #EAF1FB;
-            padding-left: 30px;
-            display:inline-block;
-            width:30%;
         }
-        @page {
+
-            margin-top: 60px !important;
+        /* -- Header -- */
-        }
+
-        .header-table {
+        .header-container {
             background: #817AE3;
             position: absolute;
             width: 100%;
@@ -34,99 +35,129 @@
             left: 0px;
             top: -60px;
         }
+
+        .header-section-left {
+            padding-top: 45px;
+            padding-bottom: 45px;
+            padding-left: 30px;
+            display: inline-block;
+            width: 30%;
+        }
+
         .header-logo {
             position: absolute;
             height: 50px;
             text-transform: capitalize;
             color: #fff;
         }
-        .header-right {
+
+        .header-section-right {
             display: inline-block;
             width: 35%;
             float: right;
             padding: 20px 30px 20px 0px;
             text-align: right;
             color: white;
+        }
 
-        }
-        .inv-flex{
-            display:flex;
-        }
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .TextColor1 {
+        /* -- Estimate Details -- */
-            font-size: 16px;
+
-            color: rgba(0, 0, 0, 0.5);
+        .estimate-details-container {
+            text-align: center;
+            width: 40%;
         }
 
+        .estimate-details-container h1 {
+            margin: 0;
+            font-size: 24px;
+            line-height: 36px;
+            text-align: right;
+            font-family: "DejaVu Sans";
+        }
+
+        .estimate-details-container h4 {
+            margin: 0;
+            font-size: 10px;
+            line-height: 15px;
+            text-align: right;
+        }
+
+        .estimate-details-container h3 {
+            margin-bottom: 1px;
+            margin-top: 0;
+        }
+
+        /* -- Address -- */
+
         .wrapper {
             display: block;
             margin-top: 60px;
             padding-bottom: 20px;
         }
 
-        .address {
+        .address-container {
             display: block;
             padding-top: 20px;
         }
-        .company {
+
+        /* -- Company Address -- */
+
+        .company-address-container {
             padding: 0 0 0 30px;
             display: inline;
             float: left;
             width: 30%;
         }
 
-        .company h1 {
+        .company-address-container {
-            font-style: normal;
+            padding-left: 30px;
-            font-weight: bold;
+            float: left;
+            width: 30%;
+            text-transform: capitalize;
+            margin-bottom: 2px;
+        }
+
+        .company-address-container h1 {
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
-            margin-bottom: 0;
+            margin-bottom: 0px;
+            margin-top: 10px;
         }
 
-        .company-add {
+        .company-address {
-            font-style: normal;
+            margin-top: 2px;
-            font-weight: normal;
+            text-align: left;
-            font-size: 10px;
+
+
+            font-size: 12px;
             line-height: 15px;
             color: #595959;
-            margin-top: 0px;
         }
 
-        /* -------------------------- */
+        /* -- Billing -- */
-        /* billing style */
+
-        .bill-address-container {
+        .billing-address-container {
             display: block;
             /* position: absolute; */
             float: right;
             padding: 0 40px 0 0;
         }
 
-        .bill-to {
+        .billing-address-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
+        .billing-address-name {
-            max-width: 250px
+            max-width: 160px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
@@ -134,9 +165,7 @@
             margin-bottom: 0px;
         }
 
-        .bill-user-address {
+        .billing-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -144,37 +173,24 @@
             margin: 0px;
             width: 170px;
         }
-        .bill-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
 
-        /* -------------------------- */
+        /* -- Shipping -- */
-        /* shipping style */
+
-        .ship-address-container {
+        .shipping-address-container {
             display: block;
             float: right;
             padding: 0 30px 0 0;
         }
 
-        .ship-to {
+        .shipping-address-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
+        .shipping-address-name {
-            max-width: 250px
+            max-width: 160px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
@@ -182,9 +198,7 @@
             margin-bottom: 0px;
         }
 
-        .ship-user-address {
+        .shipping-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -193,192 +207,114 @@
             width: 170px;
         }
 
-        .ship-user-phone {
+        .attribute-label {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        .job-add {
-            display: inline;
-            float: right;
-            width:40%;
-        }
-
-        .amount-due {
-            background-color: #f2f2f2;
-        }
-
-        .textRight {
-            text-align: right;
-        }
-
-        .textLeft {
-            text-align: left;
-        }
-
-        .textStyle1 {
             font-size: 12;
             font-weight: bold;
             line-height: 22px;
             color: rgba(0, 0, 0, 0.8);
         }
 
-        .textStyle2 {
+        .attribute-value {
             font-size: 12;
             line-height: 22px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .main-table-header td {
+        /* -- Items Table -- */
-            padding: 5px;
-            padding-bottom: 10px;
-        }
 
-        .main-table-header {
+        .items-table {
-            border-bottom: 1px solid red;
+            padding: 30px 30px 10px 30px;
-        }
-
-        .table2 {
-            margin-top: 30px;
-            padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        hr {
+        .items-table hr {
-            margin: 0 30px 0 30px;
-            color:rgba(0, 0, 0, 0.2);
-            border: 0.5px solid #EAF1FB;
-        }
-
-        .table2 hr {
             height: 0.1px;
+            margin: 0 30px;
         }
 
-        .ItemTableHeader {
+        .item-table-heading {
             font-size: 13.5;
             text-align: center;
             color: rgba(0, 0, 0, 0.85);
             padding: 5px;
         }
 
-        tr.main-table-header th {
+        .item-table-heading-row td {
+            padding: 5px;
+            padding-bottom: 10px;
+        }
+
+        .item-table-heading-row {
+            border-bottom: 1px solid red;
+        }
+
+        tr.item-table-heading-row th {
             border-bottom: 0.620315px solid #E8E8E8;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
-        tr.item-details td {
+        tr.item-row td {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
-        .items {
+        .item-cell {
             font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
+            color: #040405;
             text-align: center;
             padding: 5px;
             padding-top: 10px;
         }
 
-        .note-header {
+        .item-description {
-            font-size: 13;
+            color: #595959;
-            color: rgba(0, 0, 0, 0.6);
+            font-size: 9px;
+            line-height: 12px;
+            page-break-inside: avoid;
         }
 
-        .note-text {
+        /* -- Total Display Table -- */
-            font-size: 10;
+
-            color: rgba(0, 0, 0, 0.6);
+        .total-display-container {
+            padding: 0 25px;
         }
 
-        .padd8 {
+        .item-cell-table-hr {
-            padding-top: 8px;
+            margin: 0 25px 0 30px;
-            padding-bottom: 8px;
         }
 
-        .padd2 {
+        .total-display-table {
+            box-sizing: border-box;
+            page-break-inside: avoid;
+            page-break-before: auto;
+            page-break-after: auto;
+            margin-left: 500px;
+            border: 1px solid #EAF1FB;
+            border-top: none;
+        }
+
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: bold;
+            text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
             padding-top: 2px;
             padding-bottom: 2px;
         }
 
-        .table3 {
+        /* -- Notes -- */
-            border: 1px solid #EAF1FB;
-            border-top: none;
-            box-sizing: border-box;
-            width: 630px;
-            page-break-inside: avoid;
-            page-break-before: auto;
-            page-break-after: auto;
-        }
-
-        .text-per-item-table3 {
-            border: 1px solid #EAF1FB;
-            border-top: none;
-            padding-right: 30px;
-            box-sizing: border-box;
-            width: 260px;
-            /* height: 100px; */
-            position: absolute;
-            right: -25;
-        }
-
-        .inv-item {
-            border-color: #d9d9d9;
-        }
-
-        .no-border {
-            border: none;
-        }
-
-        .desc {
-            font-weight: 100;
-            text-align: justify;
-            font-size: 10px;
-            margin-bottom: 15px;
-            margin-top:7px;
-            color:rgba(0, 0, 0, 0.85);
-        }
-
-        .company-details{
-            text-align: center;
-            width: 40%;
-        }
-
-        .company-details h1 {
-            margin:0;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 24px;
-            line-height: 36px;
-            text-align: right;
-        }
-
-        .company-details h4 {
-            margin:0;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            text-align: right;
-        }
-
-        .company-details h3 {
-             margin-bottom:1px;
-             margin-top:0;
-        }
 
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -389,8 +325,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -400,23 +334,79 @@
             padding-bottom: 10px;
         }
 
+        /* -- Helpers -- */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
+
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
                 @if($logo)
-                    <td width="60%" class="header-left">
+                <td width="60%" class="header-section-left">
                     <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
-                    <td width="60%" class="header-left" style="padding-top: 0px;">
+                <td width="60%" class="header-section-left" style="padding-top: 0px;">
                     @if($estimate->user->company)
                     <h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
                     @endif
                     @endif
                 </td>
-                <td width="40%" class="header-right company-details">
+                <td width="40%" class="header-section-right estimate-details-container">
                     <h1>Estimate</h1>
                     <h4>{{$estimate->estimate_number}}</h4>
                     <h4>{{$estimate->formattedEstimateDate}}</h4>
@@ -426,24 +416,24 @@
     </div>
     <hr>
     <div class="wrapper">
-        <div class="address">
+        <div class="address-container">
-            <div class="company">
+            <div class="company-address-container">
                 @include('app.pdf.estimate.partials.company-address')
             </div>
-            <div class="ship-address-container">
+            <div class="shipping-address-container">
                 @include('app.pdf.estimate.partials.shipping-address')
             </div>
             @if($estimate->user->shippingaddress)
-                <div class="bill-address-container">
+            <div class="billing-address-container">
             @else
-                <div class="bill-address-container" style="float:right;padding-right:0px;">
+            <div class="billing-address-container" style="float:right; padding-right:0px;">
             @endif
                 @include('app.pdf.estimate.partials.billing-address')
             </div>
             <div style="clear: both;"></div>
-        </div>
             @include('app.pdf.estimate.partials.table')
             @include('app.pdf.estimate.partials.notes')
         </div>
 </body>
+
 </html>

resources/views/app/pdf/estimate/estimate3.blade.php

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Estimate</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <style type="text/css">
+        /* -- Base -- */
         body {
             font-family: "DejaVu Sans";
         }
@@ -12,18 +14,11 @@
         html {
             margin: 0px;
             padding: 0px;
-        }
+            margin-top: 50px;
-        table {
-            border-collapse: collapse;
         }
 
-        .header-line {
+        table {
-            color:rgba(0, 0, 0, 0.2);
+            border-collapse: collapse;
-            position: absolute;
-            top: 80px;
-            left: 0px;
-            right: -70px;
-            width: 100%;
         }
 
         hr {
@@ -31,11 +26,17 @@
             border: 0.5px solid #EAF1FB;
         }
 
-        .items-table-hr{
+        /* -- Header -- */
-            margin: 0 30px 0 30px;
+
+        .header-container {
+            position: absolute;
+            width: 100%;
+            height: 150px;
+            left: 0px;
+            top: -60px;
         }
 
-        .header-left {
+        .header-section-left {
             padding-top: 45px;
             padding-bottom: 45px;
             padding-left: 30px;
@@ -43,116 +44,108 @@
             width: 30%;
         }
 
-        .header-table {
+        .header-bottom-divider {
+            color: rgba(0, 0, 0, 0.2);
             position: absolute;
-            width: 100%;
+            top: 100px;
-            height: 150px;
             left: 0px;
-            top: -60px;
+            width: 100%;
         }
+
         .header-logo {
             position: absolute;
             height: 50px;
             text-transform: capitalize;
             color: #817AE3;
         }
-        .header-right {
+
+        .header-section-right {
             display: inline-block;
             position: absolute;
             right: 0;
             padding: 15px 30px 15px 0px;
             float: right;
         }
-        .inv-flex{
+
-            display:flex;
-        }
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .TextColor1 {
+        /* -- Company Address -- */
-            font-size: 16px;
+
-            color: rgba(0, 0, 0, 0.5);
+        .company-address-container {
+            width: auto;
+            text-transform: capitalize;
+            margin-bottom: 2px;
         }
 
-        @page {
+        .company-address-container h1 {
-            margin-top: 60px !important;
+
+
+            font-size: 15px;
+            line-height: 22px;
+            letter-spacing: 0.05em;
+            margin-bottom: 0px;
+            margin-top: 10px;
         }
 
+        .company-address {
+            margin-top: 2px;
+            text-align: left;
+
+
+            font-size: 12px;
+            line-height: 15px;
+            color: #595959;
+        }
+
+        /* -- Content Wrapper -- */
+
         .wrapper {
             display: block;
-           padding-top: 50px;
+            padding-top: 100px;
             padding-bottom: 20px;
         }
 
-        .address {
+        .main-content {
-            display: inline-block;
-            padding-top: 100px
         }
 
-        .bill-add {
+        .customer-address-container {
             display: inline;
             float: left;
             width: 40%;
             padding: 0 0 0 30px;
         }
-        .company {
+
-            padding-left: 30px;
+        /* -- Shipping -- */
-            display: inline;
+
+        .shipping-address-container {
+            float: right;
+            display: block;
+        }
+
+        .shipping-address-container--left {
             float: left;
-            width:30%;
+            padding-left: 0;
         }
 
-        .company h1 {
+        .shipping-address-label {
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-        }
-
-        .company-add {
-            text-align: left;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
-
-         /* -------------------------- */
-        /* shipping style */
-        .ship-to {
             padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
+        .shipping-address-name {
             padding: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             margin: 0px;
+            max-width: 160px;
         }
 
-        .ship-user-address {
+        .shipping-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -160,38 +153,28 @@
             width: 160px;
         }
 
-        .ship-user-phone {
+        /* -- Billing -- */
-            font-style: normal;
+
-            font-weight: normal;
+        .billing-address-container {
-            font-size: 10px;
+            float: left;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
         }
 
-         /* -------------------------- */
+        .billing-address-label {
-        /* billing style */
-        .bill-to {
             padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
+        .billing-address-name {
             padding: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             margin: 0px;
+            max-width: 160px;
         }
 
-        .bill-user-address {
+        .billing-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -199,187 +182,131 @@
             width: 160px;
         }
 
-        .bill-user-phone {
+        /* -- Estimate Details -- */
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
 
-
+        .estimate-details-container {
-        .job-add {
             display: block;
             float: right;
             padding: 20px 30px 0 0;
         }
-        .amount-due {
-            background-color: #f2f2f2;
-        }
 
-        .textRight {
+        .attribute-label {
-            text-align: right;
+            font-size: 12px;
-        }
+            line-height: 18px;
-
-        .textLeft {
             text-align: left;
+            color: #55547A
         }
 
-        .textStyle1 {
+        .attribute-value {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        .textStyle2 {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             text-align: right;
         }
-        .main-table-header td {
+
-            padding: 10px;
+        /* -- Items Table -- */
-        }
+
-        .main-table-header {
+        .items-table {
-            border-bottom: 1px solid red;
+            padding: 30px 30px 10px 30px;
-        }
-        tr.main-table-header th {
-            font-style: normal;
-            font-weight: 600;
-            font-size: 12px;
-            line-height: 18px;
-        }
-        tr.item-details td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-        .table2 {
-            padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        .table2 hr {
+        .items-table hr {
             height: 0.1px;
+            margin: 0 30px;
         }
 
-        .ItemTableHeader {
+        .item-table-heading {
             font-size: 13.5;
             text-align: center;
             color: rgba(0, 0, 0, 0.85);
             padding: 5px;
+            padding-bottom: 10px;
         }
 
-        .items {
+        tr.item-table-heading-row th {
+            border-bottom: 0.620315px solid #E8E8E8;
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .item-table-heading-row {
+            margin-bottom: 10px;
+        }
+
+        tr.item-row td {
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .item-cell {
             font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
+            color: #040405;
             text-align: center;
             padding: 5px;
+            padding-top: 10px;
+            border-color: #d9d9d9;
         }
 
-        .note-header {
+        .item-description {
-            font-size: 13;
+            color: #595959;
-            color: rgba(0, 0, 0, 0.6);
+            font-size: 9px;
+            line-height: 12px;
         }
 
-        .note-text {
+        .item-cell-table-hr {
-            font-size: 10;
+            margin: 0 30px 0 30px;
-            color: rgba(0, 0, 0, 0.6);
         }
 
-        .padd8 {
+        /* -- Total Display Table -- */
-            padding-top: 8px;
+
-            padding-bottom: 8px;
+        .total-display-container {
+            padding: 0 25px;
         }
 
-        .padd2 {
+        .total-display-table {
+            box-sizing: border-box;
+            page-break-inside: avoid;
+            page-break-before: auto;
+            page-break-after: auto;
+            margin-left: 500px;
+            margin-top: 20px;
+        }
+
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: bold;
+            text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
             padding-top: 2px;
             padding-bottom: 2px;
         }
 
-        .table3 {
+        .total-border-left {
-             border: 1px solid #EAF1FB;
+            border: 1px solid #E8E8E8 !important;
-             border-top: none;
+            border-right: 0px !important;
-            box-sizing: border-box;
+            padding-top: 0px;
-            width: 630px;
+            padding: 8px !important;
-            page-break-inside: avoid;
-            page-break-before: auto;
-            page-break-after: auto;
         }
 
-        td.estimate-total1 {
+        .total-border-right {
-            text-align:left;
+            border: 1px solid #E8E8E8 !important;
-            padding: 15px 0 15px 10px;
+            border-left: 0px !important;
-            font-size:12px;
+            padding-top: 0px;
-            line-height: 18px;
+            padding: 8px !important;
-            color: #55547A;
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-            border-left:1px solid #E8E8E8;
         }
 
-        td.estimate-total2 {
+        /* -- Notes -- */
-            font-weight: 500;
-            text-align: right;
-            font-size:12px;
-            line-height: 18px;
-            padding: 15px 10px 15px 0;
-            color: #5851DB;
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-            border-right:1px solid #E8E8E8;
-        }
-
-        .inv-item {
-            border-color: #d9d9d9;
-        }
-
-        .no-border {
-            border: none;
-        }
-        .desc {
-            font-weight: 100;
-            text-align: justify;
-            font-size: 10px;
-            margin-bottom: 15px;
-            margin-top:7px;
-            color:rgba(0, 0, 0, 0.85);
-        }
-        .company-details h1 {
-            margin:0;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 15px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-            text-align: left;
-            max-width: 220px;
-        }
-        .company-details h4 {
-            margin:0;
-            font-style: normal;
-            font-weight: 100;
-            font-size: 18px;
-            line-height: 25px;
-            text-align: right;
-        }
-        .company-details h3 {
-             margin-bottom:1px;
-             margin-top:0;
-        }
-        tr.total td {
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-        }
 
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -390,8 +317,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -401,60 +326,116 @@
             padding-bottom: 10px;
         }
 
+        /* -- Helpers -- */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
+
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
                 @if($logo)
-                    <td class="header-left">
+                <td class="header-section-left">
                     <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
                     @if($estimate->user->company)
-                    <td class="header-left" style="padding-top:0px;">
+                <td class="header-section-left" style="padding-top:0px;">
                     <h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
                     @endif
                     @endif
                 </td>
-                <td class="header-right company-details">
+                <td class="header-section-right company-address-container">
                     @include('app.pdf.estimate.partials.company-address')
                 </td>
             </tr>
         </table>
     </div>
 
-    <hr class="header-line">
+    <hr class="header-bottom-divider">
 
     <div class="wrapper">
-        <div class="address">
+        <div class="main-content">
-            <div class="bill-add">
+            <div class="customer-address-container">
-                <div style="float:left;">
+                <div class="billing-address-container">
                     @include('app.pdf.estimate.partials.billing-address')
                 </div>
                 @if($estimate->user->billingaddress)
-                    <div style="float:right;">
+                <div class="shipping-address-container">
                     @else
-                    <div style="float:left;">
+                    <div class="shipping-address-container--left">
                         @endif
                         @include('app.pdf.estimate.partials.shipping-address')
                     </div>
                     <div style="clear: both;"></div>
                 </div>
 
-            <div class="job-add">
+                <div class="estimate-details-container">
                     <table>
                         <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Estimate Number</td>
+                            <td class="attribute-label">Estimate Number</td>
-                        <td class="textStyle2"> &nbsp;{{$estimate->estimate_number}}</td>
+                            <td class="attribute-value"> &nbsp;{{$estimate->estimate_number}}</td>
                         </tr>
                         <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Estimate Date </td>
+                            <td class="attribute-label">Estimate Date </td>
-                        <td class="textStyle2"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
+                            <td class="attribute-value"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
                         </tr>
                         <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Expiry Date</td>
+                            <td class="attribute-label">Expiry Date</td>
-                        <td class="textStyle2"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
+                            <td class="attribute-value"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
                         </tr>
                     </table>
                 </div>
@@ -463,5 +444,7 @@
             @include('app.pdf.estimate.partials.table')
             @include('app.pdf.estimate.partials.notes')
         </div>
+    </div>
 </body>
+
 </html>

resources/views/app/pdf/estimate/partials/billing-address.blade.php

@@ -1,11 +1,11 @@
 @if($estimate->user->billingaddress)
-    <p class="bill-to">Bill To,</p>
+    <p class="billing-address-label">Bill To,</p>
     @if($estimate->user->billingaddress->name)
-        <p class="bill-user-name">
+        <p class="billing-address-name">
             {{$estimate->user->billingaddress->name}}
         </p>
     @endif
-    <p class="bill-user-address">
+    <p class="billing-address">
         @if($estimate->user->billingaddress->address_street_1)
             {!! nl2br(htmlspecialchars($estimate->user->billingaddress->address_street_1)) !!}<br>
         @endif
@@ -31,7 +31,7 @@
         @endif
 
         @if($estimate->user->billingaddress->phone)
-            <p class="bill-user-phone">
+            <p class="billing-address">
                 Phone :{{$estimate->user->billingaddress->phone}}
             </p>
         @endif

resources/views/app/pdf/estimate/partials/company-address.blade.php

@@ -3,7 +3,7 @@
 @endif
 
 @if($company_address)
-    <p class="company-add">
+    <p class="company-address">
         @if($company_address->addresses[0]['address_street_1'])
             {!! nl2br(htmlspecialchars($company_address->addresses[0]['address_street_1'])) !!} <br>
         @endif

resources/views/app/pdf/estimate/partials/shipping-address.blade.php

@@ -1,11 +1,11 @@
 @if($estimate->user->shippingaddress)
-    <p class="ship-to">Ship To,</p>
+    <p class="shipping-address-label">Ship To,</p>
     @if($estimate->user->shippingaddress->name)
-        <p class="ship-user-name">
+        <p class="shipping-address-name">
             {{$estimate->user->shippingaddress->name}}
         </p>
     @endif
-    <p class="ship-user-address">
+    <p class="shipping-address">
         @if($estimate->user->shippingaddress->address_street_1)
             {!! nl2br(htmlspecialchars($estimate->user->shippingaddress->address_street_1)) !!}<br>
         @endif
@@ -30,8 +30,8 @@
             {{$estimate->user->shippingaddress->country->name}}<br>
         @endif
 
-        @if($estimate->user->phone)
+        @if($estimate->user->shippingAddress->phone)
-            <p class="ship-user-phone">
+            <p class="shipping-address">
                 Phone :{{$estimate->user->shippingaddress->phone}}
             </p>
         @endif

resources/views/app/pdf/estimate/partials/table.blade.php

@@ -1,50 +1,49 @@
-<table width="100%" class="table2" cellspacing="0" border="0">
+<table width="100%" class="items-table" cellspacing="0" border="0">
-    <tr class="main-table-header">
+    <tr class="item-table-heading-row">
-        <th width="2%" class="ItemTableHeader" style="text-align: right; color: #55547A; padding-right: 20px">#</th>
+        <th width="2%" class="item-table-heading text-right pr-20">#</th>
-        <th width="40%" class="ItemTableHeader" style="text-align: left; color: #55547A; padding-left: 0px">Items</th>
+        <th width="40%" class="item-table-heading text-left pl-0">Items</th>
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A; padding-right: 20px">Quantity</th>
+        <th class="item-table-heading text-right pr-20">Quantity</th>
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A; padding-right: 20px">Price</th>
+        <th class="item-table-heading text-right pr-20">Price</th>
         @if($estimate->discount_per_item === 'YES')
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A; padding-left: 10px">Discount</th>
+        <th class="item-table-heading text-right pl-10">Discount</th>
         @endif
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A;">Amount</th>
+        <th class="item-table-heading text-right">Amount </th>
     </tr>
     @php
         $index = 1
     @endphp
     @foreach ($estimate->items as $item)
-        <tr class="item-details">
+        <tr class="item-row">
             <td
-                class="inv-item items"
+                class="item-cell text-right pr-20"
-                style="text-align: right; color: #040405; padding-right: 20px; vertical-align: top;"
+                style="vertical-align: top;"
             >
                 {{$index}}
             </td>
             <td
-                class="inv-item items"
+                class="item-cell text-left pl-0"
-                style="text-align: left; color: #040405;padding-left: 0px"
             >
                 <span>{{ $item->name }}</span><br>
                 <span
-                    style="text-align: left; color: #595959; font-size: 9px; font-weight:300; line-height: 12px;"
+                    class="item-description"
                 >
                     {!! nl2br(htmlspecialchars($item->description)) !!}
                 </span>
             </td>
             <td
-                class="inv-item items"
+                class="item-cell text-right pr-20"
-                style="text-align: right; color: #040405; padding-right: 20px"
+                style="vertical-align: top;"
             >
                 {{$item->quantity}}
             </td>
             <td
-                class="inv-item items"
+                class="item-cell text-right pr-20"
-                style="text-align: right; color: #040405; padding-right: 20px"
+                style="vertical-align: top;"
             >
                 {!! format_money_pdf($item->price, $estimate->user->currency) !!}
             </td>
             @if($estimate->discount_per_item === 'YES')
-                <td class="inv-item items" style="text-align: right; color: #040405; padding-left: 10px">
+                <td class="item-cell text-right pl-10" style="vertical-align: top;">
                     @if($item->discount_type === 'fixed')
                         {!! format_money_pdf($item->discount_val, $estimate->user->currency) !!}
                     @endif
@@ -53,7 +52,7 @@
                     @endif
                 </td>
             @endif
-            <td class="inv-item items" style="text-align: right; color: #040405;">
+            <td class="item-cell text-right" style="vertical-align: top;">
                 {!! format_money_pdf($item->total, $estimate->user->currency) !!}
             </td>
         </tr>
@@ -63,22 +62,22 @@
     @endforeach
 </table>
 
-<hr class="items-table-hr">
+<hr class="item-cell-table-hr">
 
-<table width="100%" cellspacing="0px" style="margin-left:420px;margin-top: 10px" border="0" class="table3 @if(count($estimate->items) > 12) page-break @endif">
+<div class="total-display-container">
+    <table width="100%" cellspacing="0px" border="0" class="total-display-table @if(count($estimate->items) > 12) page-break @endif">
         <tr>
-        <td class="no-borde" style="color: #55547A; padding-left:10px;  font-size:12px;">Subtotal</td>
+            <td class="border-0 total-table-attribute-label">Subtotal</td>
-        <td class="no-border items"
+            <td class="border-0 item-cell total-table-attribute-value ">{!! format_money_pdf($estimate->sub_total, $estimate->user->currency) !!}</td>
-            style="padding-right:10px; text-align: right;  font-size:12px; color: #040405; font-weight: 500;">{!! format_money_pdf($estimate->sub_total, $estimate->user->currency) !!}</td>
         </tr>
 
         @if ($estimate->tax_per_item === 'YES')
             @for ($i = 0; $i < count($labels); $i++)
                 <tr>
-                <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px;  color: #55547A;">
+                    <td class="border-0 total-table-attribute-label">
                         {{$labels[$i]}}
                     </td>
-                <td class="no-border items padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+                    <td class="border-0 item-cell  total-table-attribute-value">
                         {!! format_money_pdf($taxes[$i], $estimate->user->currency) !!}
                     </td>
                 </tr>
@@ -86,10 +85,10 @@
         @else
             @foreach ($estimate->taxes as $tax)
                 <tr>
-                <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px;  color: #55547A;">
+                    <td class="border-0 total-table-attribute-label">
                         {{$tax->name.' ('.$tax->percent.'%)'}}
                     </td>
-                <td class="no-border items padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+                    <td class="border-0 item-cell total-table-attribute-value" >
                         {!! format_money_pdf($tax->amount, $estimate->user->currency) !!}
                     </td>
                 </tr>
@@ -98,7 +97,7 @@
 
         @if ($estimate->discount_per_item === 'NO')
             <tr>
-            <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px; color: #55547A;">
+                <td class="border-0 total-table-attribute-label pl-10">
                     @if($estimate->discount_type === 'fixed')
                         Discount
                     @endif
@@ -106,7 +105,7 @@
                         Discount ({{$estimate->discount}}%)
                     @endif
                 </td>
-            <td class="no-border items padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+                <td class="border-0 item-cell total-table-attribute-value text-right">
                     @if($estimate->discount_type === 'fixed')
                         {!! format_money_pdf($estimate->discount_val, $estimate->user->currency) !!}
                     @endif
@@ -117,20 +116,14 @@
             </tr>
         @endif
         <tr>
-        <td style="padding:3px 0px"></td>
+            <td class="py-3"></td>
-        <td style="padding:3px 0px"></td>
+            <td class="py-3"></td>
         </tr>
         <tr>
-        <td class="no-border total-border-left"
+            <td class="border-0 total-border-left total-table-attribute-label">Total</td>
-            style="padding-left:10px; padding-bottom:10px; text-align:left; padding-top:20px; font-size:12px;  color: #55547A;"
+            <td class="border-0 total-border-right item-cell py-8 total-table-attribute-value text-primary">
-        >
-            <label class="total-bottom"> Total </label>
-        </td>
-        <td
-            class="no-border total-border-right items padd8"
-            style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  padding-top:20px; color: #5851DB"
-        >
                 {!! format_money_pdf($estimate->total, $estimate->user->currency)!!}
             </td>
         </tr>
     </table>
+</div>

resources/views/app/pdf/invoice/invoice1.blade.php

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Invoice</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <style type="text/css">
+        /* -- Base -- */
         body {
             font-family: "DejaVu Sans";
         }
@@ -15,16 +17,8 @@
             margin-top: 50px;
         }
 
-        table {
+        .text-center {
-            border-collapse: collapse;
+            text-align: center
-        }
-
-        .header-line {
-            color:rgba(0, 0, 0, 0.2);
-            position: absolute;
-            top: 90px;
-            left: 0px;
-            width: 100%;
         }
 
         hr {
@@ -33,11 +27,17 @@
             border: 0.5px solid #EAF1FB;
         }
 
-        .header-center {
+        /* -- Header -- */
-            text-align: center
+
+        .header-bottom-divider {
+            color: rgba(0, 0, 0, 0.2);
+            position: absolute;
+            top: 90px;
+            left: 0px;
+            width: 100%;
         }
 
-        .header-table {
+        .header-container {
             position: absolute;
             width: 100%;
             height: 90px;
@@ -52,122 +52,69 @@
             color: #817AE3;
         }
 
-        .inv-flex{
-            display:flex;
-        }
-
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .TextColor1 {
+        .content-wrapper {
-            font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
-        }
-
-        @page {
-            margin-top: 60px !important;
-        }
-
-        .wrapper {
             display: block;
             margin-top: 0px;
             padding-top: 16px;
             padding-bottom: 20px;
         }
 
-        .address {
+        .company-address-container {
-            /* display: inline-block; */
-            padding-top: 30px
-        }
-
-        .company {
-            float: left;
             padding-left: 30px;
-            font-weight: normal;
-            display: inline;
             float: left;
             width: 30%;
             text-transform: capitalize;
             margin-bottom: 2px;
         }
 
-        .company h1 {
+        .company-address-container h1 {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
             margin-bottom: 0px;
+            margin-top: 10px;
         }
 
-        .company-add {
+        .company-address {
             margin-top: 2px;
             text-align: left;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 15px;
             color: #595959;
         }
 
-        .job-add {
+        .invoice-details-container {
-            /* display: inline; */
             float: right;
             padding: 10px 30px 0 0;
         }
-        .amount-due {
-            background-color: #f2f2f2;
-        }
 
-        .textRight {
+        .attribute-label {
-            text-align: right;
-        }
-
-        .textLeft {
-            text-align: left;
-        }
-
-        .textStyle1 {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding-right: 40px;
+            text-align: left;
+            color: #55547A;
         }
 
-        .textStyle2 {
+        .attribute-value {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             text-align: right;
         }
-        .bill-add {
-            width:45%;
-            padding: 0px 0 0 0px;
-        }
 
-        /* -------------------------- */
+        /* -- Shipping -- */
-        /* shipping style */
 
-        .ship-address-container {
+        .shipping-address-container {
             float: right;
             padding-left: 30px;
         }
 
-        .ship-to {
+        .shipping-address-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
@@ -175,18 +122,15 @@
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
+        .shipping-address-name {
-            max-width: 250px
+            max-width: 160px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
             margin: 0px;
         }
-        .ship-user-address {
+
-            font-style: normal;
+        .shipping-address {
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -194,27 +138,15 @@
             margin: 0px;
             width: 160px;
         }
-        .ship-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
 
-        /* -------------------------- */
+        /* -- Billing -- */
-        /* billing style */
 
-        .bill-address-container {
+        .billing-address-container {
             float: left;
             padding-left: 30px;
         }
 
-        .bill-to {
+        .billing-address-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
@@ -222,19 +154,15 @@
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
+        .billing-address-name {
-            max-width: 250px
+            max-width: 160px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
             margin: 0px;
         }
 
-        .bill-user-address {
+        .billing-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -243,79 +171,83 @@
             width: 160px;
         }
 
-        .bill-user-phone {
+        /* -- Items Table -- */
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
 
-        .table2 {
+        .items-table {
             margin-top: 35px;
             padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-
+        .items-table hr {
-        .table2 hr {
             height: 0.1px;
         }
 
-        .ItemTableHeader {
+        .item-table-heading {
             font-size: 13.5;
             text-align: center;
             color: rgba(0, 0, 0, 0.85);
             padding: 5px;
+            color: #55547A;
         }
 
-        tr.main-table-header th {
+        tr.item-table-heading-row th {
             border-bottom: 0.620315px solid #E8E8E8;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
-        tr.item-details td {
+        tr.item-row td {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
-        .items {
+        .item-cell {
             font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
             text-align: center;
             padding: 5px;
             padding-top: 10px;
+            color: #040405;
         }
 
-        .padd8 {
+        .item-description {
-            padding-top: 8px;
+            color: #595959;
-            padding-bottom: 8px;
+            font-size: 9px;
+            line-height: 12px;
         }
 
-        .padd2 {
+        /* -- Total Display Table -- */
-            padding-top: 2px;
+
-            padding-bottom: 2px;
+        .total-display-container {
+            padding: 0 25px;
         }
 
-        .table3 {
+        .total-display-table {
-            /* border: 1px solid #EAF1FB; */
             border-top: none;
-            /* padding-right: 30px; */
             box-sizing: border-box;
-            width: 630px;
-            /* position: absolute;
-            right: -25; */
             page-break-inside: avoid;
             page-break-before: auto;
             page-break-after: auto;
+            margin-left: 500px;
+            margin-top: 20px;
+        }
+
+        .total-table-attribute-label {
+            font-size: 13px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: bold;
+            text-align: right;
+            font-size: 13px;
+            color: #040405;
+            padding-right: 10px;
+            padding-top: 2px;
+            padding-bottom: 2px;
         }
 
         .total-border-left {
@@ -324,34 +256,17 @@
             padding-top: 0px;
             padding: 8px !important;
         }
+
         .total-border-right {
             border: 1px solid #E8E8E8 !important;
             border-left: 0px !important;
             padding-top: 0px;
             padding: 8px !important;
-
         }
 
-        .inv-item {
+        /* -- Notes -- */
-            border-color: #d9d9d9;
-        }
-
-        .no-border {
-            border: none;
-        }
-
-        .desc {
-            font-weight: 100;
-            text-align: justify;
-            font-size: 10px;
-            margin-bottom: 15px;
-            margin-top:7px;
-            color:rgba(0, 0, 0, 0.85);
-        }
 
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -362,8 +277,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -373,13 +286,69 @@
             padding-bottom: 10px;
         }
 
+        /* -- Helpers -- */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
+
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
-                <td class="header-center">
+                <td class="text-center">
                     @if($logo)
                         <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
@@ -390,48 +359,44 @@
                 </td>
             </tr>
         </table>
-        <hr class="header-line" style="border: 0.620315px solid #E8E8E8;"/>
+        <hr class="header-bottom-divider" style="border: 0.620315px solid #E8E8E8;" />
     </div>
-    <div class="wrapper">
+    <div class="content-wrapper">
-        <div class="address">
+        <div style="padding-top: 30px">
-            <div class="company">
+            <div class="company-address-container">
                 @include('app.pdf.invoice.partials.company-address')
             </div>
-            <div class="job-add">
+            <div class="invoice-details-container">
                 <table>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Invoice Number</td>
+                        <td class="attribute-label">Invoice Number</td>
-                        <td class="textStyle2"> &nbsp;{{$invoice->invoice_number}}</td>
+                        <td class="attribute-value"> &nbsp;{{$invoice->invoice_number}}</td>
                     </tr>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Invoice Date </td>
+                        <td class="attribute-label">Invoice Date </td>
-                        <td class="textStyle2"> &nbsp;{{$invoice->formattedInvoiceDate}}</td>
+                        <td class="attribute-value"> &nbsp;{{$invoice->formattedInvoiceDate}}</td>
                     </tr>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Due date</td>
+                        <td class="attribute-label">Due date</td>
-                        <td class="textStyle2"> &nbsp;{{$invoice->formattedDueDate}}</td>
+                        <td class="attribute-value"> &nbsp;{{$invoice->formattedDueDate}}</td>
                     </tr>
                 </table>
             </div>
             <div style="clear: both;"></div>
         </div>
-        <div class="bill-add">
+
-            <div class="bill-address-container">
+        <div class="billing-address-container">
             @include('app.pdf.invoice.partials.billing-address')
         </div>
-            @if($invoice->user->billingaddress)
+
-                <div class="ship-address-container">
+        <div class="shipping-address-container" @if($invoice->user->billingaddress) style="float:left;" @else style="float:left: padding-left: 0px;" @endif>
-            @else
-                <div class="ship-address-container " style="float:left;padding-left:0px;">
-            @endif
             @include('app.pdf.invoice.partials.shipping-address')
+            @if($invoice->user->billingaddress) <div style="clear: both;"></div> @endif
         </div>
-            <div style="clear: both;"></div>
+        <div style="position: relative; clear: both;">
-        </div>
-        <div style="position:relative">
             @include('app.pdf.invoice.partials.table')
         </div>
         @include('app.pdf.invoice.partials.notes')
-    </div>
 </body>
+
 </html>

resources/views/app/pdf/invoice/invoice2.blade.php

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Invoice</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
+        /* -- Base -- */
         body {
             font-family: "DejaVu Sans";
         }
@@ -12,374 +13,289 @@
         html {
             margin: 0px;
             padding: 0px;
+            margin-top: 50px;
         }
+
         table {
             border-collapse: collapse;
         }
 
-        .header-left {
-            padding-top: 45px;
-            padding-bottom: 45px;
-            padding-left: 30px;
-            display:inline-block;
-            width:30%;
-        }
-        @page {
-            margin-top: 60px !important;
-        }
-        .header-table {
-            background: #817AE3;
-            position: absolute;
-            width: 100%;
-            height: 141px;
-            left: 0px;
-            top: -60px;
-        }
-        .header-logo {
-            position: absolute;
-            height: 50px;
-            text-transform: capitalize;
-            color: #fff;
-        }
-        .header-right {
-            display:inline-block;
-            width:35%;
-            float:right;
-            padding: 20px 30px 20px 0px;
-            text-align: right;
-            color:white;
-
-        }
-        .inv-flex{
-            display:flex;
-        }
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
-        .header {
-            font-size: 20px;
-            color: rgba(0, 0, 0, 0.7);
-        }
-
-        .TextColor1 {
-            font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
-        }
-
-        .wrapper {
-           display: block;
-           margin-top: 60px;
-           padding-bottom: 20px;
-        }
-
-        .address {
-            display: block;
-            padding-top: 20px;
-        }
-        .company {
-            padding: 0 0 0 30px;
-            display: inline;
-            float:left;
-            width:30%;
-        }
-
-        .company h1 {
-            font-style: normal;
-            font-weight: bold;
-            font-size: 15px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-            margin-bottom: 0;
-        }
-
-        .company-add {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin-top: 0px;
-        }
-
-        /* -------------------------- */
-        /* billing style */
-        .bill-address-container {
-            display: block;
-            /* position: absolute; */
-            float:right;
-            padding: 0 40px 0 0;
-        }
-
-        .bill-to {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-            padding: 0px;
-            margin-bottom: 0px;
-        }
-
-        .bill-user-name {
-            max-width: 250px
-            font-style: normal;
-            font-weight: normal;
-            font-size: 15px;
-            line-height: 22px;
-            padding: 0px;
-            margin-top: 0px;
-            margin-bottom: 0px;
-        }
-
-        .bill-user-address {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-            width: 170px;
-        }
-        .bill-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        /* -------------------------- */
-        /* shipping style */
-        .ship-address-container {
-            display: block;
-            float:right;
-            padding: 0 30px 0 0;
-        }
-
-        .ship-to {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-            padding: 0px;
-            margin-bottom: 0px;
-        }
-
-        .ship-user-name {
-            max-width: 250px
-            font-style: normal;
-            font-weight: normal;
-            font-size: 15px;
-            line-height: 22px;
-            padding: 0px;
-            margin-top: 0px;
-            margin-bottom: 0px;
-        }
-
-        .ship-user-address {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-            width: 170px;
-        }
-
-        .ship-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        .job-add {
-            display: inline;
-            float: right;
-            width:40%;
-        }
-
-        .amount-due {
-            background-color: #f2f2f2;
-        }
-
-        .textRight {
-            text-align: right;
-        }
-
-        .textLeft {
-            text-align: left;
-        }
-
-        .textStyle1 {
-            font-size: 12;
-            font-weight: bold;
-            line-height:22px;
-            color: rgba(0, 0, 0, 0.8);
-        }
-
-        .textStyle2 {
-            font-size: 12;
-            line-height:22px;
-            color: rgba(0, 0, 0, 0.7);
-        }
-
-        .main-table-header td {
-            padding: 5px;
-            padding-bottom: 10px;
-        }
-
-        .main-table-header {
-            border-bottom: 1px solid red;
-        }
-
-        .table2 {
-            margin-top: 30px;
-            padding: 0px 30px 10px 30px;
-            page-break-before: avoid;
-            page-break-after: auto;
-        }
-
         hr {
             margin: 0 30px 0 30px;
             color: rgba(0, 0, 0, 0.2);
             border: 0.5px solid #EAF1FB;
         }
 
-        .table2 hr {
+        /* -- Header -- */
-            height:0.1px;
-        }
 
-        .ItemTableHeader {
+        .header-container {
-            font-size: 13.5;
+            background: #817AE3;
-            text-align: center;
-            color: rgba(0, 0, 0, 0.85);
-            padding: 5px;
-        }
-
-        tr.main-table-header th {
-            border-bottom: 0.620315px solid #E8E8E8;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        tr.item-details td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        .items {
-            font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
-            text-align: center;
-            padding: 5px;
-            padding-top: 10px;
-        }
-
-        .note-header {
-            font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        .note-text {
-            font-size: 10;
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        .padd8 {
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-
-        .padd2 {
-            padding-top: 2px;
-            padding-bottom: 2px;
-        }
-
-        .table3 {
-            border: 1px solid #EAF1FB;
-            border-top: none;
-            box-sizing: border-box;
-            width: 630px;
-            page-break-inside: avoid;
-            page-break-before: auto;
-            page-break-after: auto;
-        }
-
-        .text-per-item-table3 {
-            border: 1px solid #EAF1FB;
-            border-top: none;
-            padding-right: 30px;
-            box-sizing: border-box;
-            width: 260px;
-            /* height: 100px; */
             position: absolute;
-            right: -25;
+            width: 100%;
+            height: 141px;
+            left: 0px;
+            top: -60px;
         }
 
-        .inv-item {
+        .header-section-left {
-            border-color: #d9d9d9;
+            padding-top: 45px;
+            padding-bottom: 45px;
+            padding-left: 30px;
+            display: inline-block;
+            width: 30%;
         }
 
-        .no-border {
+        .header-logo {
-            border: none;
+            position: absolute;
+            height: 50px;
+            text-transform: capitalize;
+            color: #fff;
         }
 
-        .desc {
+        .header-section-right {
-            font-weight: 100;
+            display: inline-block;
-            text-align: justify;
+            width: 35%;
-            font-size: 10px;
+            float: right;
-            margin-bottom: 15px;
+            padding: 20px 30px 20px 0px;
-            margin-top:7px;
+            text-align: right;
-            color:rgba(0, 0, 0, 0.85);
+            color: white;
         }
 
-        .company-details{
+        .header {
+            font-size: 20px;
+            color: rgba(0, 0, 0, 0.7);
+        }
+
+        /*  -- Estimate Details -- */
+
+        .invoice-details-container {
             text-align: center;
             width: 40%;
         }
 
-        .company-details h1 {
+        .invoice-details-container h1 {
             margin: 0;
-            font-style: normal;
-            font-weight: 500;
             font-size: 24px;
             line-height: 36px;
             text-align: right;
         }
 
-        .company-details h4 {
+        .invoice-details-container h4 {
             margin: 0;
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             text-align: right;
         }
 
-        .company-details h3 {
+        .invoice-details-container h3 {
             margin-bottom: 1px;
             margin-top: 0;
         }
 
+        /* -- Content Wrapper -- */
+
+        .content-wrapper {
+            display: block;
+            margin-top: 60px;
+            padding-bottom: 20px;
+        }
+
+        .address-container {
+            display: block;
+            padding-top: 20px;
+        }
+
+        /* -- Company -- */
+
+        .company-address-container {
+            padding: 0 0 0 30px;
+            display: inline;
+            float: left;
+            width: 30%;
+        }
+
+        .company-address-container h1 {
+            font-weight: bold;
+            font-size: 15px;
+            letter-spacing: 0.05em;
+            margin-bottom: 0;
+            margin-top: 18px;
+        }
+
+        .company-address{
+            font-size: 10px;
+            line-height: 15px;
+            color: #595959;
+            margin-top: 0px;
+        }
+
+        /* -- Billing -- */
+
+        .billing-address-container {
+            display: block;
+            /* position: absolute; */
+            float: right;
+            padding: 0 40px 0 0;
+        }
+
+        .billing-address-label {
+            font-size: 12px;
+            line-height: 18px;
+            padding: 0px;
+            margin-bottom: 0px;
+        }
+
+        .billing-address-name {
+            max-width: 250px;
+            font-size: 15px;
+            line-height: 22px;
+            padding: 0px;
+            margin-top: 0px;
+            margin-bottom: 0px;
+        }
+
+        .billing-address{
+            font-size: 10px;
+            line-height: 15px;
+            color: #595959;
+            padding: 0px;
+            margin: 0px;
+            width: 170px;
+        }
+
+        /* -- Shipping -- */
+
+        .shipping-address-container {
+            display: block;
+            float: right;
+            padding: 0 30px 0 0;
+        }
+
+        .shipping-address-label {
+            font-size: 12px;
+            line-height: 18px;
+            padding: 0px;
+            margin-bottom: 0px;
+        }
+
+        .shipping-address-name {
+            max-width: 250px;
+            font-size: 15px;
+            line-height: 22px;
+            padding: 0px;
+            margin-top: 0px;
+            margin-bottom: 0px;
+        }
+
+        .shipping-address {
+            font-size: 10px;
+            line-height: 15px;
+            color: #595959;
+            padding: 0px;
+            margin: 0px;
+            width: 170px;
+        }
+
+        /* -- Items Table -- */
+
+        .items-table {
+            margin-top: 35px;
+            padding: 0px 30px 10px 30px;
+            page-break-before: avoid;
+            page-break-after: auto;
+        }
+
+        .items-table hr {
+            height: 0.1px;
+        }
+
+        .item-table-heading {
+            font-size: 13.5;
+            text-align: center;
+            color: rgba(0, 0, 0, 0.85);
+            padding: 5px;
+            color: #55547A;
+        }
+
+        tr.item-table-heading-row th {
+            border-bottom: 0.620315px solid #E8E8E8;
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        tr.item-row td {
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .item-cell {
+            font-size: 13;
+            text-align: center;
+            padding: 5px;
+            padding-top: 10px;
+            color: #040405;
+        }
+
+        .item-description {
+            color: #595959;
+            font-size: 9px;
+            line-height: 12px;
+        }
+
+        /* -- Total Display Table -- */
+
+        .total-display-container {
+            padding: 0 25px;
+        }
+
+        .item-cell-table-hr {
+            margin: 0 25px 0 30px;
+        }
+
+        .total-display-table {
+            box-sizing: border-box;
+            page-break-inside: avoid;
+            page-break-before: auto;
+            page-break-after: auto;
+            margin-left: 500px;
+            border: 1px solid #EAF1FB;
+            border-top: none;
+        }
+
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: 500;
+            text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .total-border-left {
+            border: 1px solid #E8E8E8 !important;
+            border-right: 0px !important;
+            padding-top: 0px;
+            padding: 8px !important;
+        }
+
+        .total-border-right {
+            border: 1px solid #E8E8E8 !important;
+            border-left: 0px !important;
+            padding-top: 0px;
+            padding: 8px !important;
+        }
+
+        /* -- Notes -- */
+
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -390,8 +306,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -401,23 +315,79 @@
             padding-bottom: 10px;
         }
 
+        /* -- Helpers -- */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
+
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
                 @if($logo)
-                    <td width="60%" class="header-left">
+                <td width="60%" class="header-section-left">
                     <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
-                    <td width="60%" class="header-left" style="padding-top: 0px;">
+                <td width="60%" class="header-section-left" style="padding-top: 0px;">
                     @if($invoice->user->company)
                     <h1 class="header-logo"> {{$invoice->user->company->name}} </h1>
                     @endif
                     @endif
                 </td>
-                <td width="40%" class="header-right company-details">
+                <td width="40%" class="header-section-right invoice-details-container">
                     <h1>Invoice</h1>
                     <h4>{{$invoice->invoice_number}}</h4>
                     <h4>{{$invoice->formattedInvoiceDate}}</h4>
@@ -426,18 +396,18 @@
         </table>
     </div>
     <hr>
-    <div class="wrapper">
+    <div class="content-wrapper">
-        <div class="address">
+        <div class="address-container">
-            <div class="company">
+            <div class="company-address-container">
                 @include('app.pdf.invoice.partials.company-address')
             </div>
-            <div class="ship-address-container">
+            <div class="shipping-address-container">
                 @include('app.pdf.invoice.partials.shipping-address')
             </div>
             @if($invoice->user->shippingaddress)
-                <div class="bill-address-container">
+            <div class="billing-address-container">
                 @else
-                <div class="bill-address-container" style="float:right;padding-right:0px;">
+                <div class="billing-address-container" style="float:right;padding-right:0px;">
                     @endif
                     @include('app.pdf.invoice.partials.billing-address')
                 </div>
@@ -447,4 +417,5 @@
             @include('app.pdf.invoice.partials.notes')
         </div>
 </body>
+
 </html>

resources/views/app/pdf/invoice/invoice3.blade.php

@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Invoice</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <style type="text/css">
+        /* -- Base -- */
+
         body {
             font-family: "DejaVu Sans";
         }
@@ -13,18 +15,11 @@
         html {
             margin: 0px;
             padding: 0px;
-        }
+            margin-top: 50px;
-        table {
-            border-collapse: collapse;
         }
 
-        .header-line {
+        table {
-            color:rgba(0, 0, 0, 0.2);
+            border-collapse: collapse;
-            position: absolute;
-            top: 80px;
-            left: 0px;
-            right: -70px;
-            width: 100%;
         }
 
         hr {
@@ -32,127 +27,122 @@
             border: 0.5px solid #EAF1FB;
         }
 
-        .items-table-hr{
+        /* -- Header -- */
-            margin: 0 30px 0 30px;
+
+        .header-bottom-divider {
+            color: rgba(0, 0, 0, 0.2);
+            position: absolute;
+            top: 100px;
+            left: 0px;
+            width: 100%;
         }
 
-
+        .header-section-left {
-        .header-left {
             padding-top: 45px;
             padding-bottom: 45px;
             padding-left: 30px;
             display: inline-block;
             width: 30%;
         }
-        .header-table {
+
+        .header-container {
             position: absolute;
             width: 100%;
             height: 150px;
             left: 0px;
             top: -60px;
         }
+
         .header-logo {
             position: absolute;
             height: 50px;
             text-transform: capitalize;
             color: #817AE3;
         }
-        .header-right {
+
+        .header-section-right {
             display: inline-block;
             position: absolute;
             right: 0;
             padding: 15px 30px 15px 0px;
             float: right;
         }
-        .inv-flex{
+
-            display:flex;
-        }
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .TextColor1 {
+        /* -- Company Address */
-            font-size: 16px;
+
-            color: rgba(0, 0, 0, 0.5);
+        .company-address-container {
+            width: auto;
+            text-transform: capitalize;
+            margin-bottom: 2px;
         }
 
-        @page {
+         .company-address-container h1 {
-            margin-top: 60px !important;
+            font-size: 15px;
+            line-height: 22px;
+            letter-spacing: 0.05em;
+            margin-bottom: 0px;
+            margin-top: 10px;
         }
-        .wrapper {
+
+        .company-address {
+            margin-top: 2px;
+            font-size: 12px;
+            line-height: 15px;
+            color: #595959;
+        }
+
+        /* -- Content Wrapper  */
+
+        .content-wrapper {
             display: block;
-           padding-top: 50px;
+            padding-top: 100px;
             padding-bottom: 20px;
         }
 
-        .address {
+        .main-content {
-            display: inline-block;
+
-            padding-top: 100px;
         }
 
-        .bill-add {
+        .customer-address-container {
             display: block;
             float: left;
             width: 40%;
             padding: 0 0 0 30px;
         }
-        .company {
+
-            padding-left: 30px;
+        /* -- Shipping -- */
-            display: inline;
+        .shipping-address-container {
+            float:right;
+            display: block;
+        }
+
+        .shipping-address-container--left {
             float:left;
-            width:30%;
+            display: block;
+            padding-left: 0;
         }
 
-        .company h1 {
+        .shipping-address-label {
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-        }
-
-        .company-add {
-            text-align: left;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
-
-         /* -------------------------- */
-        /* shipping style */
-        .ship-to {
             padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
+        .shipping-address-name {
             padding: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             margin: 0px;
+            max-width: 160px;
         }
 
-        .ship-user-address {
+        .shipping-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -160,38 +150,29 @@
             width: 160px;
         }
 
-        .ship-user-phone {
+        /* -- Billing -- */
-            font-style: normal;
+
-            font-weight: normal;
+        .billing-address-container {
-            font-size: 10px;
+            display: block;
-            line-height: 15px;
+            float: left;
-            color: #595959;
-            margin: 0px;
         }
 
-         /* -------------------------- */
+        .billing-address-label {
-        /* billing style */
-        .bill-to {
             padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
+        .billing-address-name {
             padding: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             margin: 0px;
+            max-width: 160px;
         }
 
-        .bill-user-address {
+        .billing-address {
-            font-style: normal;
-            font-weight: normal;
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -199,198 +180,126 @@
             width: 160px;
         }
 
-        .bill-user-phone {
+        /*  -- Estimate Details -- */
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
 
-
+        .invoice-details-container {
-        .job-add {
             display: block;
             float: right;
             padding: 20px 30px 0 0;
         }
-        .amount-due {
-            background-color: #f2f2f2;
-        }
 
-        .textRight {
+        .attribute-label {
-            text-align: right;
+            font-size: 12px;
-        }
+            line-height: 18px;
-
-        .textLeft {
             text-align: left;
+            color: #55547A
         }
 
-        .textStyle1 {
+        .attribute-value {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        .textStyle2 {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             text-align: right;
         }
-        .main-table-header td {
+
-            padding: 10px;
+        /* -- Items Table -- */
-        }
+
-        .main-table-header {
+        .items-table {
-            border-bottom: 1px solid red;
+            margin-top: 35px;
-        }
-        tr.main-table-header th {
-            font-style: normal;
-            font-weight: 600;
-            font-size: 12px;
-            line-height: 18px;
-        }
-        tr.item-details td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-        .table2 {
             padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        .table2 hr {
+        .items-table hr {
             height: 0.1px;
         }
 
-        .ItemTableHeader {
+        .item-table-heading {
             font-size: 13.5;
             text-align: center;
             color: rgba(0, 0, 0, 0.85);
             padding: 5px;
+            color: #55547A;
         }
 
-        .items {
+        tr.item-table-heading-row th {
+            border-bottom: 0.620315px solid #E8E8E8;
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        tr.item-row td {
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .item-cell {
             font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
             text-align: center;
             padding: 5px;
+            padding-top: 10px;
+            color: #040405;
         }
 
-        .note-header {
+        .item-description {
-            font-size: 13;
+            color: #595959;
-            color: rgba(0, 0, 0, 0.6);
+            font-size: 9px;
+            line-height: 12px;
         }
 
-        .note-text {
+        .item-cell-table-hr {
-            font-size: 10;
+            margin: 0 30px 0 30px;
-            color: rgba(0, 0, 0, 0.6);
         }
 
-        .padd8 {
+        /* -- Total Display Table -- */
-            padding-top: 8px;
+
-            padding-bottom: 8px;
+        .total-display-container {
+            padding: 0 25px;
         }
 
-        .padd2 {
+
+        .total-display-table {
+            box-sizing: border-box;
+            page-break-inside: avoid;
+            page-break-before: auto;
+            page-break-after: auto;
+            margin-left: 500px;
+            margin-top: 20px;
+        }
+
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: bold;
+            text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
             padding-top: 2px;
             padding-bottom: 2px;
         }
 
-        .table3 {
+        .total-border-left {
-            border: 1px solid #EAF1FB;
+            border: 1px solid #E8E8E8 !important;
-            border-top: none;
+            border-right: 0px !important;
-            box-sizing: border-box;
+            padding-top: 0px;
-            width: 630px;
+            padding: 8px !important;
-            page-break-inside: avoid;
-            page-break-before: auto;
-            page-break-after: auto;
         }
 
-        .text-per-item-table3 {
+        .total-border-right {
-            border: 1px solid #EAF1FB;
+            border: 1px solid #E8E8E8 !important;
-            border-top: none;
+            border-left: 0px !important;
-            padding-right: 30px;
+            padding-top: 0px;
-            box-sizing: border-box;
+            padding: 8px !important;
-            width: 260px;
-            /* height: 100px; */
-            position: absolute;
-            right: -25;
-        }
-
-        td.invoice-total1 {
-            text-align:left;
-            padding: 15px 0 15px 10px;
-            font-size:12px;
-            line-height: 18px;
-            color: #55547A;
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-            border-left:1px solid #E8E8E8;
-        }
-
-        td.invoice-total2 {
-            font-weight: 500;
-            text-align: right;
-            font-size:12px;
-            line-height: 18px;
-            padding: 15px 10px 15px 0;
-            color: #5851DB;
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-            border-right:1px solid #E8E8E8;
-        }
-
-        .inv-item {
-            border-color: #d9d9d9;
-        }
-
-        .no-border {
-            border: none;
-        }
-        .desc {
-            font-weight: 100;
-            text-align: justify;
-            font-size: 10px;
-            margin-bottom: 15px;
-            margin-top:7px;
-            color:rgba(0, 0, 0, 0.85);
-        }
-        .company-details h1 {
-            margin:0;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 15px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-            text-align: left;
-            max-width: 220px;
-        }
-        .company-details h4 {
-            margin:0;
-            font-style: normal;
-            font-weight: 100;
-            font-size: 18px;
-            line-height: 25px;
-            text-align: right;
-        }
-        .company-details h3 {
-             margin-bottom:1px;
-             margin-top:0;
-        }
-        tr.total td {
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
         }
 
+        /* -- Notes -- */
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -401,8 +310,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -412,60 +319,113 @@
             padding-bottom: 10px;
         }
 
+         /* -- Helpers -- */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
+
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
+                <td class="header-section-left">
                     @if($logo)
-                    <td class="header-left">
                         <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
-                        @if($invoice->user->company)
-                        <td class="header-left" style="padding-top:0px;">
                         <h1 class="header-logo"> {{$invoice->user->company->name}} </h1>
                     @endif
-                    @endif
                 </td>
-                <td class="header-right company-details">
+                <td class="header-section-right company-address-container">
                     @include('app.pdf.invoice.partials.company-address')
                 </td>
             </tr>
         </table>
     </div>
 
-    <hr class="header-line">
+    <hr class="header-bottom-divider">
 
-    <div class="wrapper">
+    <div class="content-wrapper">
-        <div class="address">
+        <div class="main-content">
-            <div class="bill-add">
+            <div class="customer-address-container">
-                <div style="float:left;">
+                <div class="billing-address-container">
                     @include('app.pdf.invoice.partials.billing-address')
                 </div>
                 @if($invoice->user->billingaddress)
-                    <div style="float:right;">
+                <div class="shipping-address-container">
                 @else
-                    <div style="float:left;">
+                <div class="shipping-address-container--left">
                 @endif
                         @include('app.pdf.invoice.partials.shipping-address')
                     </div>
                     <div style="clear: both;"></div>
                 </div>
 
-            <div class="job-add">
+                <div class="invoice-details-container">
                     <table>
                         <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Invoice Number</td>
+                            <td class="attribute-label">Invoice Number</td>
-                        <td class="textStyle2"> &nbsp;{{$invoice->invoice_number}}</td>
+                            <td class="attribute-value"> &nbsp;{{$invoice->invoice_number}}</td>
                         </tr>
                         <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Invoice Date </td>
+                            <td class="attribute-label">Invoice Date </td>
-                        <td class="textStyle2"> &nbsp;{{$invoice->formattedInvoiceDate}}</td>
+                            <td class="attribute-value"> &nbsp;{{$invoice->formattedInvoiceDate}}</td>
                         </tr>
                         <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Due date</td>
+                            <td class="attribute-label">Due date</td>
-                        <td class="textStyle2"> &nbsp;{{$invoice->formattedDueDate}}</td>
+                            <td class="attribute-value"> &nbsp;{{$invoice->formattedDueDate}}</td>
                         </tr>
                     </table>
                 </div>
@@ -474,5 +434,7 @@
             @include('app.pdf.invoice.partials.table')
             @include('app.pdf.invoice.partials.notes')
         </div>
+    </div>
 </body>
+
 </html>

resources/views/app/pdf/invoice/partials/billing-address.blade.php

@@ -1,11 +1,11 @@
 @if($invoice->user->billingaddress)
-    <p class="bill-to">Bill To,</p>
+    <p class="billing-address-label">Bill To,</p>
     @if($invoice->user->billingaddress->name)
-        <p class="bill-user-name">
+        <p class="billing-address-name">
             {{$invoice->user->billingaddress->name}}
         </p>
     @endif
-    <p class="bill-user-address">
+    <p class="billing-address">
         @if($invoice->user->billingaddress->address_street_1)
             {!! nl2br(htmlspecialchars($invoice->user->billingaddress->address_street_1)) !!}<br>
         @endif
@@ -25,7 +25,7 @@
             {{$invoice->user->billingaddress->country->name}}<br>
         @endif
         @if($invoice->user->billingaddress->phone)
-            <p class="bill-user-phone">
+            <p class="billing-address">
                 Phone :{{$invoice->user->billingaddress->phone}}
             </p>
         @endif

resources/views/app/pdf/invoice/partials/company-address.blade.php

@@ -3,7 +3,7 @@
 @endif
 
 @if($company_address)
-    <p class="company-add">
+    <p class="company-address">
         @if($company_address->addresses[0]['address_street_1'])
             {!! nl2br(htmlspecialchars($company_address->addresses[0]['address_street_1'])) !!} <br>
         @endif

resources/views/app/pdf/invoice/partials/shipping-address.blade.php

@@ -1,11 +1,11 @@
 @if($invoice->user->shippingaddress)
-    <p class="ship-to">Ship To,</p>
+    <p class="shipping-address-label">Ship To,</p>
     @if($invoice->user->shippingaddress->name)
-        <p class="ship-user-name">
+        <p class="shipping-address-name">
             {{$invoice->user->shippingaddress->name}}
         </p>
     @endif
-    <p class="ship-user-address">
+    <p class="shipping-address">
         @if($invoice->user->shippingaddress->address_street_1)
             {!! nl2br(htmlspecialchars($invoice->user->shippingaddress->address_street_1)) !!}<br>
         @endif
@@ -30,8 +30,8 @@
             {{$invoice->user->shippingaddress->country->name}}<br>
         @endif
 
-        @if($invoice->user->phone)
+        @if($invoice->user->shippingaddress->phone)
-            <p class="ship-user-phone">
+            <p class="shipping-address">
                 Phone :{{$invoice->user->shippingaddress->phone}}
             </p>
         @endif

resources/views/app/pdf/invoice/partials/table.blade.php

@@ -1,46 +1,49 @@
-<table width="100%" class="table2" cellspacing="0" border="0">
+<table width="100%" class="items-table" cellspacing="0" border="0">
-    <tr class="main-table-header">
+    <tr class="item-table-heading-row">
-        <th width="2%" class="ItemTableHeader" style="text-align: right; color: #55547A; padding-right: 20px">#</th>
+        <th width="2%" class="item-table-heading text-right pr-20">#</th>
-        <th width="40%" class="ItemTableHeader" style="text-align: left; color: #55547A; padding-left: 0px">Items</th>
+        <th width="40%" class="item-table-heading text-left pl-0">Items</th>
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A; padding-right: 20px">Quantity</th>
+        <th class="item-table-heading text-right pr-20">Quantity</th>
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A; padding-right: 20px">Price</th>
+        <th class="item-table-heading pr-20 text-right">Price</th>
         @if($invoice->discount_per_item === 'YES')
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A; padding-left: 10px">Discount</th>
+        <th class="item-table-heading text-right pl-10">Discount</th>
         @endif
-        <th class="ItemTableHeader" style="text-align: right; color: #55547A;">Amount</th>
+        <th class="item-table-heading text-right">Amount</th>
     </tr>
     @php
         $index = 1
     @endphp
     @foreach ($invoice->items as $item)
-        <tr class="item-details">
+        <tr class="item-row">
             <td
-                class="inv-item items"
+                class="item-cell text-right pr-20"
-                style="text-align: right; color: #040405; padding-right: 20px; vertical-align: top;"
+                style="vertical-align: top;"
             >
                 {{$index}}
             </td>
             <td
-                class="inv-item items"
+                class="item-cell text-left pl-0"
-                style="text-align: left; color: #040405;padding-left: 0px"
+                style="vertical-align: top;"
             >
                 <span>{{ $item->name }}</span><br>
-                <span style="text-align: left; color: #595959; font-size: 9px; font-weight:300; line-height: 12px;">{!! nl2br(htmlspecialchars($item->description)) !!}</span>
+                <span class="item-description">{!! nl2br(htmlspecialchars($item->description)) !!}</span>
             </td>
             <td
-                class="inv-item items"
+                class="item-cell pr-20 text-right"
-                style="text-align: right; color: #040405; padding-right: 20px"
+                style="vertical-align: top;"
             >
                 {{$item->quantity}}
             </td>
             <td
-                class="inv-item items"
+                class="item-cell text-right pr-20"
-                style="text-align: right; color: #040405; padding-right: 20px"
+                style="vertical-align: top;"
             >
                 {!! format_money_pdf($item->price, $invoice->user->currency) !!}
             </td>
             @if($invoice->discount_per_item === 'YES')
-                <td class="inv-item items" style="text-align: right; color: #040405; padding-left: 10px">
+                <td
+                    class="item-cell text-right pl-10"
+                    style="vertical-align: top;"
+                >
                     @if($item->discount_type === 'fixed')
                         {!! format_money_pdf($item->discount_val, $invoice->user->currency) !!}
                     @endif
@@ -50,8 +53,8 @@
                 </td>
             @endif
             <td
-                class="inv-item items"
+                class="item-cell text-right"
-                style="text-align: right; color: #040405;"
+                style="vertical-align: top;"
             >
                 {!! format_money_pdf($item->total, $invoice->user->currency) !!}
             </td>
@@ -62,22 +65,24 @@
     @endforeach
 </table>
 
-<hr class="items-table-hr">
+<hr class="item-cell-table-hr">
 
-<table width="100%" cellspacing="0px" style="margin-left:420px; margin-top: 10px" border="0" class="table3 @if(count($invoice->items) > 12) page-break @endif">
+<div class="total-display-container">
+    <table width="100%" cellspacing="0px" border="0" class="total-display-table @if(count($invoice->items) > 12) page-break @endif">
         <tr>
-        <td class="no-border" style="color: #55547A; padding-left:10px;  font-size:12px;">Subtotal</td>
+            <td class="border-0 total-table-attribute-label">Subtotal</td>
-        <td class="no-border items padd2"
+            <td class="border-0 item-cell py-2 total-table-attribute-value">
-            style="padding-right:10px; text-align: right;  font-size:12px; color: #040405; font-weight: 500;">{!! format_money_pdf($invoice->sub_total, $invoice->user->currency) !!}</td>
+                {!! format_money_pdf($invoice->sub_total, $invoice->user->currency) !!}
+            </td>
         </tr>
 
         @if ($invoice->tax_per_item === 'YES')
             @for ($i = 0; $i < count($labels); $i++)
                 <tr>
-                <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px;  color: #55547A;">
+                    <td class="border-0 total-table-attribute-label">
                         {{$labels[$i]}}
                     </td>
-                <td class="no-border items padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+                    <td class="border-0 item-cell py-2 total-table-attribute-value">
                         {!! format_money_pdf($taxes[$i], $invoice->user->currency) !!}
                     </td>
                 </tr>
@@ -85,10 +90,10 @@
         @else
             @foreach ($invoice->taxes as $tax)
                 <tr>
-                <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px;  color: #55547A;">
+                    <td class="border-0 total-table-attribute-label">
                         {{$tax->name.' ('.$tax->percent.'%)'}}
                     </td>
-                <td class="no-border items padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+                    <td class="border-0 item-cell py-2 total-table-attribute-value">
                         {!! format_money_pdf($tax->amount, $invoice->user->currency) !!}
                     </td>
                 </tr>
@@ -97,7 +102,7 @@
 
         @if ($invoice->discount_per_item === 'NO')
             <tr>
-            <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px; color: #55547A;">
+                <td class="border-0 total-table-attribute-label">
                     @if($invoice->discount_type === 'fixed')
                         Discount
                     @endif
@@ -105,7 +110,7 @@
                         Discount ({{$invoice->discount}}%)
                     @endif
                 </td>
-            <td class="no-border items padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+                <td class="border-0 item-cell py-2 total-table-attribute-value" >
                     @if($invoice->discount_type === 'fixed')
                         {!! format_money_pdf($invoice->discount_val, $invoice->user->currency) !!}
                     @endif
@@ -116,20 +121,18 @@
             </tr>
         @endif
         <tr>
-        <td style="padding:3px 0px"></td>
+            <td class="py-3"></td>
-        <td style="padding:3px 0px"></td>
+            <td class="py-3"></td>
         </tr>
         <tr>
-        <td class="no-border total-border-left"
+            <td class="border-0 total-border-left total-table-attribute-label">
-            style="padding-left:10px; padding-bottom:10px; text-align:left; padding-top:20px; font-size:12px;  color: #55547A;"
+                Total
-        >
-            <label class="total-bottom"> Total </label>
             </td>
             <td
-            class="no-border total-border-right items padd8"
+                class="border-0 total-border-right item-cell py-8 total-table-attribute-value text-primary"
-            style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  padding-top:20px; color: #5851DB"
             >
                 {!! format_money_pdf($invoice->total, $invoice->user->currency)!!}
             </td>
         </tr>
     </table>
+</div>

resources/views/app/pdf/payment/partials/billing-address.blade.php

@@ -1,11 +1,11 @@
 @if($payment->user->billingaddress)
-    <p class="bill-to">Received From:</p>
+    <p class="billing-address-label">Received From:</p>
     @if($payment->user->billingaddress->name)
-        <p class="bill-user-name">
+        <p class="billing-address-name">
             {{$payment->user->billingaddress->name}}
         </p>
     @endif
-    <p class="bill-user-address">
+    <p class="billing-address">
         @if($payment->user->billingaddress->address_street_1)
             {!! nl2br(htmlspecialchars($payment->user->billingaddress->address_street_1)) !!}<br>
         @endif
@@ -25,7 +25,7 @@
             {{$payment->user->billingaddress->country->name}}<br>
         @endif
         @if($payment->user->billingaddress->phone)
-            <p class="bill-user-phone">
+            <p class="billing-address">
                 Phone :{{$payment->user->billingaddress->phone}}
             </p>
         @endif

resources/views/app/pdf/payment/partials/company-address.blade.php

@@ -3,7 +3,7 @@
 @endif
 
 @if($company_address)
-    <p class="company-add">
+    <p class="company-address">
         @if($company_address->addresses[0]['address_street_1'])
             {!! nl2br(htmlspecialchars($company_address->addresses[0]['address_street_1'])) !!} <br>
         @endif

resources/views/app/pdf/payment/partials/shipping-address.blade.php

@@ -1,11 +1,11 @@
 @if($payment->user->shippingaddress)
-    <p class="ship-to">Ship To,</p>
+    <p class="shipping-address-label">Ship To,</p>
     @if($payment->user->shippingaddress->name)
-        <p class="ship-user-name">
+        <p class="shipping-address-name">
             {{$payment->user->shippingaddress->name}}
         </p>
     @endif
-    <p class="ship-user-address">
+    <p class="shipping-address">
         @if($payment->user->shippingaddress->address_street_1)
             {!! nl2br(htmlspecialchars($payment->user->shippingaddress->address_street_1)) !!}<br>
         @endif
@@ -31,7 +31,7 @@
         @endif
 
         @if($payment->user->phone)
-            <p class="ship-user-phone">
+            <p class="shipping-address">
                 Phone :{{$payment->user->shippingaddress->phone}}
             </p>
         @endif

resources/views/app/pdf/payment/payment.blade.php

@@ -2,10 +2,10 @@
 <html>
 <head>
     <title>Invoice</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
     <style type="text/css">
+        /* -- Base -- */
         body {
             font-family: "DejaVu Sans";
         }
@@ -13,6 +13,7 @@
         html {
             margin: 0px;
             padding: 0px;
+            margin-top: 50px;
         }
         table {
             border-collapse: collapse;
@@ -27,339 +28,48 @@
             width: 100%;
         }
 
-        .header-left {
+        /* -- Heeader -- */
-            padding-top: 45px;
+
-            padding-bottom: 45px;
+        .header-container {
-            padding-left: 30px;
-            display:inline-block;
-            width:30%;
-        }
-        .header-table {
             position: absolute;
             width: 100%;
             height: 150px;
             left: 0px;
             top: -60px;
         }
+
+        .header-section-left {
+            padding-top: 45px;
+            padding-bottom: 45px;
+            padding-left: 30px;
+            display:inline-block;
+            width:30%;
+        }
+
         .header-logo {
             position: absolute;
             height: 50px;
             text-transform: capitalize;
             color: #817AE3;
         }
-        .header-right {
+        .header-section-right {
             display:inline-block;
             position: absolute;
             right:0;
             padding: 15px 30px 15px 0px;
             float: right;
         }
-        .inv-flex{
+
-            display:flex;
-        }
-        .inv-data{
-            text-align:right;
-            margin-right:120px;
-        }
-        .inv-value{
-            text-align:left;
-            margin-left:160px;
-        }
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .TextColor1 {
+        /* -- Company Address -- */
-            font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
-        }
 
-        @page {
-            margin-top: 60px !important;
-        }
-        .wrapper {
-           display: block;
-           height: 200px;
-        }
-
-        .address {
-            display: inline-block;
-            padding-top: 20px
-        }
-
-        .bill-add {
-            display: block;
-            float:left;
-            width:40%;
-            padding: 0 0 0 30px;
-        }
-        .company {
-            padding-left: 30px;
-            display: inline;
-            float:left;
-            width:30%;
-        }
-
-        .company h1 {
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-        }
-
-        .company-add {
-            text-align: left;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
-
-         /* -------------------------- */
-        /* shipping style */
-        .ship-to {
-            padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-            margin-bottom: 0px;
-        }
-
-        .ship-user-name {
-            padding: 0px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 15px;
-            line-height: 22px;
-            margin: 0px;
-        }
-
-        .ship-user-address {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-            width: 160px;
-        }
-
-        .ship-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
-
-         /* -------------------------- */
-        /* billing style */
-        .bill-to {
-            padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-            margin-bottom: 0px;
-            color: #55547A;
-        }
-
-        .bill-user-name {
-            padding: 0px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 15px;
-            line-height: 22px;
-            margin: 0px;
-        }
-
-        .bill-user-address {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin:0px;
-            width: 160px;
-        }
-
-        .bill-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-
-        }
-
-
-        .job-add {
-            display: inline;
-            position: absolute;
-            float: right;
-            width: 40%;
-            height: 120px;
-            padding: 20px 30px 0 0;
-        }
-        .amount-due {
-            background-color: #f2f2f2;
-        }
-
-        .textRight {
-            text-align: right;
-        }
-
-        .textLeft {
-            text-align: left;
-        }
-
-        .textStyle1 {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        .textStyle2 {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-            text-align: right;
-        }
-        .main-table-header td {
-            padding: 10px;
-        }
-        .main-table-header {
-            border-bottom: 1px solid red;
-        }
-        tr.main-table-header th {
-            font-style: normal;
-            font-weight: 600;
-            font-size: 12px;
-            line-height: 18px;
-        }
-        tr.item-details td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-        .table2 {
-            margin-top: 188px;
-            border-bottom: 1px solid #EAF1FB;
-            padding: 0px 30px 0 30px;
-            page-break-before: avoid;
-            page-break-after: auto;
-        }
-
-        .table2 hr {
-            height:0.1px;
-        }
-
-        .ItemTableHeader {
-            font-size: 13.5;
-            text-align: center;
-            color: rgba(0, 0, 0, 0.85);
-            padding: 5px;
-        }
-
-        .items {
-            font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
-            text-align: center;
-            padding: 5px;
-        }
-
-        .note-header {
-            font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        .note-text {
-            font-size: 10;
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        .padd8 {
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-
-        .padd2 {
-            padding-top: 2px;
-            padding-bottom: 2px;
-        }
-
-        .table3 {
-            border: 1px solid #EAF1FB;
-            border-top: none;
-            box-sizing: border-box;
-            width: 630px;
-            page-break-inside: avoid;
-            page-break-before: auto;
-            page-break-after: auto;
-        }
-
-        .text-per-item-table3 {
-            border: 1px solid #EAF1FB;
-            border-top: none;
-            padding-right: 30px;
-            box-sizing: border-box;
-            width: 260px;
-            /* height: 100px; */
-            position: absolute;
-            right: -25;
-        }
-
-        td.invoice-total1 {
-            text-align:left;
-            padding: 15px 0 15px 10px;
-            font-size:12px;
-            line-height: 18px;
-            color: #55547A;
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-            border-left:1px solid #E8E8E8;
-        }
-
-        td.invoice-total2 {
-            font-weight: 500;
-            text-align: right;
-            font-size:12px;
-            line-height: 18px;
-            padding: 15px 10px 15px 0;
-            color: #5851DB;
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
-            border-right:1px solid #E8E8E8;
-        }
-
-        .inv-item {
-            border-color: #d9d9d9;
-        }
-
-        .no-border {
-            border: none;
-        }
-        .desc {
-            font-weight: 100;
-            text-align: justify;
-            font-size: 10px;
-            margin-bottom: 15px;
-            margin-top:7px;
-            color:rgba(0, 0, 0, 0.85);
-        }
         .company-details h1 {
             margin:0;
-            font-style: normal;
+
             font-weight: bold;
             font-size: 15px;
             line-height: 22px;
@@ -367,26 +77,117 @@
             text-align: left;
             max-width: 220px;
         }
-        .company-details h4 {
+
-            margin:0;
+        .company-address{
-            font-style: normal;
+            text-align: left;
-            font-weight: 100;
+            font-size: 10px;
-            font-size: 18px;
+            line-height: 15px;
-            line-height: 25px;
+            color: #595959;
-            text-align: right;
+            margin: 0px;
-        }
-        .company-details h3 {
-             margin-bottom:1px;
-             margin-top:0;
-        }
-        tr.total td {
-            border-bottom:1px solid #E8E8E8;
-            border-top:1px solid #E8E8E8;
         }
 
+        .content-wrapper {
+           display: block;
+           height: 200px;
+        }
+
+        .main-content {
+            display: inline-block;
+            padding-top: 20px
+        }
+
+        /* -- Customer Address -- */
+        .customer-address-container {
+            display: block;
+            float:left;
+            width:40%;
+            padding: 0 0 0 30px;
+        }
+
+        /* -- Shipping -- */
+
+        .shipping-address-label {
+            padding-top: 5px;
+            font-size: 12px;
+            line-height: 18px;
+            margin-bottom: 0px;
+        }
+
+        .shipping-address-name {
+            padding: 0px;
+            font-size: 15px;
+            line-height: 22px;
+            margin: 0px;
+        }
+
+        .shipping-address {
+            font-size: 10px;
+            line-height: 15px;
+            color: #595959;
+            margin: 0px;
+            width: 160px;
+        }
+
+        /* -- Billing -- */
+
+        .billing-address-container {
+            float: left;
+        }
+
+        .billing-address-container--right {
+            float: right;
+        }
+
+        .billing-address-label {
+            padding-top: 5px;
+            font-size: 12px;
+            line-height: 18px;
+            margin-bottom: 0px;
+            color: #55547A;
+        }
+
+        .billing-address-name {
+            padding: 0px;
+            font-size: 15px;
+            line-height: 22px;
+            margin: 0px;
+        }
+
+        .billing-address {
+            font-size: 10px;
+            line-height: 15px;
+            color: #595959;
+            margin:0px;
+            width: 160px;
+        }
+
+        /* -- Payment Details -- */
+
+        .payment-details-container {
+            display: inline;
+            position: absolute;
+            float: right;
+            width: 40%;
+            height: 120px;
+            padding: 20px 30px 0 0;
+        }
+
+        .attribute-label {
+            font-size: 12px;
+            line-height: 18px;
+            text-align: left;
+            color: #55547A
+        }
+
+        .attribute-value {
+            font-size: 12px;
+            line-height: 18px;
+            text-align: right;
+        }
+
+        /* -- Notes -- */
+
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -397,8 +198,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -408,7 +207,7 @@
             padding-bottom: 10px;
         }
 
-        .content-header {
+        .content-heading {
             margin-top: 120px;
             width: 100%;
             text-align: center;
@@ -419,14 +218,17 @@
             margin:  0 0 0 0;
         }
 
-        .content-header span {
+        .content-heading span {
-            font-weight: 500;
+            font-weight: 400;
             font-size: 14px;
             line-height: 25px;
+            padding-bottom: 5px;
             border-bottom: 1px solid #B9C1D1;
         }
 
-        .total-amount {
+        /* -- Total Display Box -- */
+
+        .total-display-box {
             width: 315px;
             display: block;
             margin-right: 30px;
@@ -437,7 +239,7 @@
             padding: 12px 15px 15px 15px;
         }
 
-        .total-amount-label {
+        .total-display-label {
             display: inline;
             font-weight: 600;
             font-size: 14px;
@@ -445,7 +247,7 @@
             color: #595959;
         }
 
-        .total-amount span {
+        .total-display-box span {
             float: right;
             font-weight: 500;
             font-size: 14px;
@@ -453,62 +255,64 @@
             text-align: right;
             color: #5851D8;
         }
-
     </style>
 </head>
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
                 @if($logo)
-                    <td class="header-left">
+                    <td class="header-section-left">
                         <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                 @else
                     @if($payment->user->company)
-                    <td class="header-left" style="padding-top:0px;">
+                    <td class="header-section-left" style="padding-top:0px;">
                         <h1 class="header-logo"> {{$payment->user->company->name}} </h1>
                     @endif
                 @endif
                 </td>
-                <td class="header-right company-details">
+                <td class="header-section-right company-details">
                     @include('app.pdf.payment.partials.company-address')
                 </td>
             </tr>
         </table>
     </div>
+
     <hr style="border: 0.620315px solid #E8E8E8;">
-    <p class="content-header">
+
+    <p class="content-heading">
         <span>PAYMENT RECEIPT</span>
     </p>
-    <div class="wrapper">
+
-        <div class="address">
+    <div class="content-wrapper">
-            <div class="bill-add">
+        <div class="main-content">
-                <div style="float:left;">
+            <div class="customer-address-container">
+                <div class="billing-address-container">
                     @include('app.pdf.payment.partials.billing-address')
                 </div>
-                <div style="float:right;">
+                <div class="billing-address-container--right">
                 </div>
                 <div style="clear: both;"></div>
             </div>
 
-            <div class="job-add">
+            <div class="payment-details-container">
                 <table width="100%">
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Payment Date</td>
+                        <td class="attribute-label">Payment Date</td>
-                        <td class="textStyle2"> &nbsp;{{$payment->formattedPaymentDate}}</td>
+                        <td class="attribute-value"> &nbsp;{{$payment->formattedPaymentDate}}</td>
                     </tr>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Payment Number</td>
+                        <td class="attribute-label">Payment Number</td>
-                        <td class="textStyle2"> &nbsp;{{$payment->payment_number}}</td>
+                        <td class="attribute-value"> &nbsp;{{$payment->payment_number}}</td>
                     </tr>
                     <tr>
-                        <td class="textStyle1" style="text-align: left; color: #55547A">Payment Mode</td>
+                        <td class="attribute-label">Payment Mode</td>
-                        <td class="textStyle2"> &nbsp;{{$payment->paymentMethod ? $payment->paymentMethod->name : '-'}}</td>
+                        <td class="attribute-value"> &nbsp;{{$payment->paymentMethod ? $payment->paymentMethod->name : '-'}}</td>
                     </tr>
                     @if ($payment->invoice && $payment->invoice->invoice_number)
                         <tr>
-                            <td class="textStyle1" style="text-align: left; color: #55547A">Invoice</td>
+                            <td class="attribute-label">Invoice</td>
-                            <td class="textStyle2"> &nbsp;{{$payment->invoice->invoice_number}}</td>
+                            <td class="attribute-value"> &nbsp;{{$payment->invoice->invoice_number}}</td>
                         </tr>
                     @endif
                 </table>
@@ -516,8 +320,8 @@
         </div>
         <div style="clear: both;"></div>
     </div>
-    <div class="total-amount">
+    <div class="total-display-box">
-        <p class="total-amount-label">Amount Received</p>
+        <p class="total-display-label">Amount Received</p>
         <span>{!! format_money_pdf($payment->amount, $payment->user->currency) !!}</span>
     </div>
 </body>

resources/views/app/pdf/reports/expenses.blade.php

@@ -2,35 +2,24 @@
 <html lang="en">
 <head>
     <title>Expenses Report</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <style type="text/css">
         body {
             font-family: "DejaVu Sans";
         }
 
-        /* html {
-            margin: 0px;
-            padding: 0px;
-        } */
-
         table {
             border-collapse: collapse;
         }
 
-        .main-container {
-            /* padding: 30px 60px; */
-        }
-
         .sub-container{
             padding: 0px 20px;
         }
 
-        .header {
+        .report-header {
             width: 100%;
         }
 
         .heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 24px;
             color: #5851D8;
@@ -41,7 +30,6 @@
         }
 
         .heading-date-range {
-            font-style: normal;
             font-weight: 600;
             font-size: 15px;
             color: #A5ACC1;
@@ -52,10 +40,8 @@
         }
 
         .sub-heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
-            /* line-height: 21px; */
             color: #595959;
             padding: 0px;
             margin: 0px;
@@ -65,8 +51,6 @@
         .expenses-title {
             margin-top: 60px;
             padding-left: 3px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 16px;
             line-height: 21px;
             color: #040405;
@@ -84,18 +68,14 @@
         .expense-title {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             color: #595959;
         }
 
-        .expense-money {
+        .expense-amount {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             text-align: right;
@@ -118,7 +98,6 @@
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 21px;
@@ -126,7 +105,7 @@
             color: #040405;
         }
 
-        .total-expense-table {
+        .report-footer {
             width: 100%;
             margin-top: 40px;
             padding: 15px 20px;
@@ -134,22 +113,20 @@
             box-sizing: border-box;
         }
 
-        .total-expense-title {
+        .report-footer-label {
             padding: 0px;
             margin: 0px;
             text-align: left;
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
             color: #595959;
         }
 
-        .total-expense-money {
+        .report-footer-value {
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 20px;
             line-height: 21px;
@@ -158,9 +135,8 @@
     </style>
 </head>
 <body>
-    <div class="main-container">
     <div class="sub-container">
-            <table class="header">
+        <table class="report-header">
             <tr>
                 <td>
                     <p class="heading-text">{{ $company->name }}</p>
@@ -186,7 +162,7 @@
                             </p>
                         </td>
                         <td>
-                                <p class="expense-money">
+                            <p class="expense-amount">
                                 {!! format_money_pdf($expenseCategory->total_amount) !!}
                             </p>
                         </td>
@@ -203,16 +179,15 @@
             </td>
         </tr>
     </table>
-        <table class="total-expense-table">
+    <table class="report-footer">
         <tr>
             <td>
-                    <p class="total-expense-title">TOTAL EXPENSE</p>
+                <p class="report-footer-label">TOTAL EXPENSE</p>
             </td>
             <td>
-                    <p class="total-expense-money">{!! format_money_pdf($totalExpense) !!}</p>
+                <p class="report-footer-value">{!! format_money_pdf($totalExpense) !!}</p>
             </td>
         </tr>
     </table>
-    </div>
 </body>
 </html>

resources/views/app/pdf/reports/profit-loss.blade.php

@@ -2,35 +2,24 @@
 <html lang="en">
 <head>
     <title>Profit & Loss Report</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <style type="text/css">
         body {
             font-family: "DejaVu Sans";
         }
 
-        html {
-            margin: 0px;
-            padding: 0px;
-        }
-
         table {
             border-collapse: collapse;
         }
 
-        .main-container {
-            padding: 30px 60px;
-        }
-
         .sub-container{
             padding: 0px 20px;
         }
 
-        .header {
+        .report-header {
             width: 100%;
         }
 
         .heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 24px;
             color: #5851D8;
@@ -41,7 +30,6 @@
         }
 
         .heading-date-range {
-            font-style: normal;
             font-weight: 600;
             font-size: 15px;
             color: #A5ACC1;
@@ -52,10 +40,8 @@
         }
 
         .sub-heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
-            /* line-height: 21px; */
             color: #595959;
             padding: 0px;
             margin: 0px;
@@ -70,18 +56,15 @@
         .income-title {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 16px;
             line-height: 21px;
             color: #040405;
             text-align: left;
         }
 
-        .income-money {
+        .income-amount {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 21px;
@@ -93,8 +76,6 @@
         .expenses-title {
             margin-top: 20px;
             padding-left: 3px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 16px;
             line-height: 21px;
             color: #040405;
@@ -112,25 +93,21 @@
         .expense-title {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             color: #595959;
         }
 
-        .expense-money {
+        .expense-amount {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             text-align: right;
             color: #595959;
         }
 
-        .expense-total-table {
+        .expense-total-indicator-table {
             border-top: 1px solid #EAF1FB;
             width: 100%;
         }
@@ -146,7 +123,6 @@
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 21px;
@@ -154,7 +130,7 @@
             color: #040405;
         }
 
-        .profit-table {
+        .report-footer {
             width: 100%;
             margin-top: 40px;
             padding: 15px 20px;
@@ -162,22 +138,20 @@
             box-sizing: border-box;
         }
 
-        .profit-title {
+        .report-footer-label {
             padding: 0px;
             margin: 0px;
             text-align: left;
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
             color: #595959;
         }
 
-        .profit-money {
+        .report-footer-value {
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 20px;
             line-height: 21px;
@@ -186,9 +160,8 @@
     </style>
 </head>
 <body>
-    <div class="main-container">
     <div class="sub-container">
-            <table class="header">
+        <table class="report-header">
             <tr>
                 <td>
                     <p class="heading-text">{{ $company->name }}</p>
@@ -210,7 +183,7 @@
                     <p class="income-title">Income</p>
                 </td>
                 <td>
-                        <p class="income-money">{!! format_money_pdf($income) !!}</p>
+                    <p class="income-amount">{!! format_money_pdf($income) !!}</p>
                 </td>
             </tr>
         </table>
@@ -225,7 +198,7 @@
                             </p>
                         </td>
                         <td>
-                                <p class="expense-money">
+                            <p class="expense-amount">
                                 {!! format_money_pdf($expenseCategory->total_amount) !!}
                             </p>
                         </td>
@@ -236,23 +209,22 @@
         </div>
     </div>
 
-        <table class="expense-total-table">
+    <table class="expense-total-indicator-table">
         <tr>
             <td class="expense-total-cell">
                 <p class="expense-total">{!! format_money_pdf($totalExpense) !!}</p>
             </td>
         </tr>
     </table>
-        <table class="profit-table">
+    <table class="report-footer">
         <tr>
             <td>
-                    <p class="profit-title">NET PROFIT</p>
+                <p class="report-footer-label">NET PROFIT</p>
             </td>
             <td>
-                    <p class="profit-money">{!! format_money_pdf(($income-$totalExpense)) !!}</p>
+                <p class="report-footer-value">{!! format_money_pdf(($income-$totalExpense)) !!}</p>
             </td>
         </tr>
     </table>
-    </div>
 </body>
 </html>

resources/views/app/pdf/reports/sales-customers.blade.php

@@ -2,35 +2,24 @@
 <html lang="en">
 <head>
     <title>Sales Customer Report</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <style type="text/css">
         body {
             font-family: "DejaVu Sans";
         }
         
-        /* html {
-            margin: 0px;
-            padding: 0px;
-        } */
-
         table {
             border-collapse: collapse;
         }
 
-        .main-container {
-            /* padding: 30px 80px; */
-        }
-
         .sub-container{
             padding: 0px 20px;
         }
 
-        .header {
+        .report-header {
             width: 100%;
         }
 
         .heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 24px;
             color: #5851D8;
@@ -41,7 +30,6 @@
         }
 
         .heading-date-range {
-            font-style: normal;
             font-weight: 600;
             font-size: 15px;
             color: #A5ACC1;
@@ -52,7 +40,6 @@
         }
 
         .sub-heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
@@ -62,90 +49,55 @@
             margin-top: 30px;
         }
 
-        .income-table {
+        .sales-customer-name {
-            margin-top: 53px;
-            width: 100%;
-        }
-
-        .income-title {
-            padding: 0px;
-            margin: 0px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 16px;
-            line-height: 21px;
-            color: #040405;
-            text-align: left;
-        }
-
-        .income-money {
-            padding: 0px;
-            margin: 0px;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 21px;
-            text-align: right;
-            color: #040405;
-            text-align: right;
-        }
-
-        .expenses-title {
             margin-top: 20px;
             padding-left: 3px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 16px;
             line-height: 21px;
             color: #040405;
         }
 
-        .expenses-table-container {
+        .sales-table-container {
             padding-left: 10px;
         }
 
-        .expenses-table {
+        .sales-table {
             width: 100%;
             padding-bottom: 10px;
         }
 
-        .expense-title {
+        .sales-information-text {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             color: #595959;
         }
 
-        .expense-money {
+        .sales-amount {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             text-align: right;
             color: #595959;
         }
 
-        .expense-total-table {
+        .sales-total-indicator-table {
             border-top: 1px solid #EAF1FB;
             width: 100%;
         }
 
-        .expense-total-cell {
+        .sales-total-cell {
             padding-top: 10px;
         }
 
-        .expense-total {
+        .sales-total-amount {
             padding-top: 10px;
             padding-right: 30px;
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 21px;
@@ -153,7 +105,7 @@
             color: #040405;
         }
 
-        .profit-table {
+        .report-footer {
             width: 100%;
             margin-top: 40px;
             padding: 15px 20px;
@@ -161,22 +113,20 @@
             box-sizing: border-box;
         }
 
-        .profit-title {
+        .report-footer-label {
             padding: 0px;
             margin: 0px;
             text-align: left;
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
             color: #595959;
         }
 
-        .profit-money {
+        .report-footer-value {
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 20px;
             line-height: 21px;
@@ -188,9 +138,8 @@
     </style>
 </head>
 <body>
-    <div class="main-container">
     <div class="sub-container">
-            <table class="header">
+        <table class="report-header">
             <tr>
                 <td>
                     <p class="heading-text">{{ $company->name }}</p>
@@ -206,29 +155,19 @@
             </tr>
         </table>
 
-            {{-- <table class="income-table">
-                <tr>
-                    <td>
-                        <p class="income-title">Income</p>
-                    </td>
-                    <td>
-                        <p class="income-money">{{ $income }}</p>
-                    </td>
-                </tr>
-            </table> --}}
         @foreach ($customers as $customer)
-                <p class="expenses-title">{{ $customer->name }}</p>
+            <p class="sales-customer-name">{{ $customer->name }}</p>
-                <div class="expenses-table-container">
+            <div class="sales-table-container">
-                    <table class="expenses-table">
+                <table class="sales-table">
                     @foreach ($customer->invoices as $invoice)
                         <tr>
                             <td>
-                                    <p class="expense-title">
+                                <p class="sales-information-text">
                                     {{ $invoice->formattedInvoiceDate }} ({{ $invoice->invoice_number }})
                                 </p>
                             </td>
                             <td>
-                                    <p class="expense-money">
+                                <p class="sales-amount">
                                     {!! format_money_pdf($invoice->total) !!}
                                 </p>
                             </td>
@@ -236,10 +175,10 @@
                     @endforeach
                 </table>
             </div>
-                <table class="expense-total-table">
+            <table class="sales-total-indicator-table">
                 <tr>
-                        <td class="expense-total-cell">
+                    <td class="sales-total-cell">
-                            <p class="expense-total">
+                        <p class="sales-total-amount">
                             {!! format_money_pdf($customer->totalAmount) !!}
                         </p>
                     </td>
@@ -249,18 +188,17 @@
     </div>
 
 
-        <table class="profit-table">
+    <table class="report-footer">
         <tr>
             <td>
-                    <p class="profit-title">TOTAL SALES</p>
+                <p class="report-footer-label">TOTAL SALES</p>
             </td>
             <td>
-                    <p class="profit-money">
+                <p class="report-footer-value">
                     {!! format_money_pdf($totalAmount) !!}
                 </p>
             </td>
         </tr>
     </table>
-    </div>
 </body>
 </html>

resources/views/app/pdf/reports/sales-items.blade.php

@@ -2,35 +2,24 @@
 <html lang="en">
 <head>
     <title>Sales Item Report</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <style type="text/css">
         body {
             font-family: "DejaVu Sans";
         }
         
-        /* html {
-            margin: 0px;
-            padding: 0px;
-        } */
-
         table {
             border-collapse: collapse;
         }
 
-        .main-container {
-            /* padding: 30px 80px; */
-        }
-
         .sub-container{
             padding: 0px 20px;
         }
 
-        .header {
+        .report-header {
             width: 100%;
         }
 
         .heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 24px;
             color: #5851D8;
@@ -41,7 +30,6 @@
         }
 
         .heading-date-range {
-            font-style: normal;
             font-weight: 600;
             font-size: 15px;
             color: #A5ACC1;
@@ -52,7 +40,6 @@
         }
 
         .sub-heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
@@ -62,90 +49,55 @@
             margin-top: 30px;
         }
 
-        .income-table {
+        .sales-items-title {
-            margin-top: 53px;
-            width: 100%;
-        }
-
-        .income-title {
-            padding: 0px;
-            margin: 0px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 16px;
-            line-height: 21px;
-            color: #040405;
-            text-align: left;
-        }
-
-        .income-money {
-            padding: 0px;
-            margin: 0px;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 21px;
-            text-align: right;
-            color: #040405;
-            text-align: right;
-        }
-
-        .expenses-title {
             margin-top: 20px;
             padding-left: 3px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 16px;
             line-height: 21px;
             color: #040405;
         }
 
-        .expenses-table-container {
+        .items-table-container {
             padding-left: 10px;
         }
 
-        .expenses-table {
+        .items-table {
             width: 100%;
             padding-bottom: 10px;
         }
 
-        .expense-title {
+        .item-title {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             color: #595959;
         }
 
-        .expense-money {
+        .item-sales-amount {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             text-align: right;
             color: #595959;
         }
 
-        .expense-total-table {
+        .sales-total-indicator-table {
             border-top: 1px solid #EAF1FB;
             width: 100%;
         }
 
-        .expense-total-cell {
+        .sales-total-cell {
             padding-top: 10px;
         }
 
-        .expense-total {
+        .sales-total-amount {
             padding-top: 10px;
             padding-right: 30px;
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 21px;
@@ -153,7 +105,7 @@
             color: #040405;
         }
 
-        .profit-table {
+        .report-footer {
             width: 100%;
             margin-top: 40px;
             padding: 15px 20px;
@@ -161,22 +113,20 @@
             box-sizing: border-box;
         }
 
-        .profit-title {
+        .report-footer-label {
             padding: 0px;
             margin: 0px;
             text-align: left;
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
             color: #595959;
         }
 
-        .profit-money {
+        .report-footer-value {
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 20px;
             line-height: 21px;
@@ -188,9 +138,8 @@
     </style>
 </head>
 <body>
-    <div class="main-container">
     <div class="sub-container">
-            <table class="header">
+        <table class="report-header">
             <tr>
                 <td>
                     <p class="heading-text">{{ $company->name }}</p>
@@ -206,28 +155,18 @@
             </tr>
         </table>
         
-            {{-- <table class="income-table">
+        <p class="sales-items-title">Items</p>
-                <tr>
-                    <td>
-                        <p class="income-title">Income</p>
-                    </td>
-                    <td>
-                        <p class="income-money">{{ $income }}</p>
-                    </td>
-                </tr>
-            </table> --}}
-            <p class="expenses-title">Items</p>
         @foreach ($items as $item)
-                <div class="expenses-table-container">
+            <div class="items-table-container">
-                    <table class="expenses-table">
+                <table class="items-table">
                     <tr>
                         <td>
-                                <p class="expense-title">
+                            <p class="item-title">
                                 {{ $item->name }}
                             </p>
                         </td>
                         <td>
-                                <p class="expense-money">
+                            <p class="item-sales-amount">
                                 {!! format_money_pdf($item->total_amount) !!}
                             </p>
                         </td>
@@ -236,10 +175,10 @@
             </div>
         @endforeach
 
-                <table class="expense-total-table">
+            <table class="sales-total-indicator-table">
                 <tr>
-                        <td class="expense-total-cell">
+                    <td class="sales-total-cell">
-                            <p class="expense-total">
+                        <p class="sales-total-amount">
                             {!! format_money_pdf($totalAmount) !!}
                         </p>
                     </td>
@@ -248,18 +187,17 @@
     </div>
 
 
-        <table class="profit-table">
+    <table class="report-footer">
         <tr>
             <td>
-                    <p class="profit-title">TOTAL SALES</p>
+                <p class="report-footer-label">TOTAL SALES</p>
             </td>
             <td>
-                    <p class="profit-money">
+                <p class="report-footer-value">
                     {!! format_money_pdf($totalAmount) !!}
                 </p>
             </td>
         </tr>
     </table>
-    </div>
 </body>
 </html>

resources/views/app/pdf/reports/tax-summary.blade.php

@@ -2,36 +2,25 @@
 <html lang="en">
 <head>
     <title>Tax Summary Report</title>
-    {{-- <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> --}}
     <style type="text/css">
         body {
             font-family: "DejaVu Sans";
         }
 
-        /* html {
-            margin: 0px;
-            padding: 0px;
-        } */
-
         table {
             border-collapse: collapse;
         }
 
-        .main-container {
-            /* padding: 30px 60px; */
-        }
-
         .sub-container{
             padding: 0px 20px;
         }
 
-        .header {
+        .report-header {
             width: 100%;
             margin-bottom: 60px
         }
 
         .heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 24px;
             color: #5851D8;
@@ -42,7 +31,6 @@
         }
 
         .heading-date-range {
-            font-style: normal;
             font-weight: 600;
             font-size: 15px;
             color: #A5ACC1;
@@ -53,31 +41,17 @@
         }
 
         .sub-heading-text {
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
-            /* line-height: 21px; */
             color: #595959;
             padding: 0px;
             margin: 0px;
             margin-top: 6px;
         }
 
-        .types-title {
+        .tax-types-title {
             margin-top: 20px;
             padding-left: 3px;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 16px;
-            line-height: 21px;
-            color: #040405;
-        }
-
-        .tax-title {
-            margin-top: 60px;
-            padding-left: 3px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 16px;
             line-height: 21px;
             color: #040405;
@@ -95,18 +69,14 @@
         .tax-title {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             color: #595959;
         }
 
-        .tax-money {
+        .tax-amount {
             padding: 0px;
             margin: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 14px;
             line-height: 21px;
             text-align: right;
@@ -129,7 +99,6 @@
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 21px;
@@ -137,7 +106,7 @@
             color: #040405;
         }
 
-        .total-tax-table {
+        .report-footer {
             width: 100%;
             margin-top: 40px;
             padding: 15px 20px;
@@ -145,22 +114,20 @@
             box-sizing: border-box;
         }
 
-        .total-tax-title {
+        .report-footer-label {
             padding: 0px;
             margin: 0px;
             text-align: left;
-            font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 21px;
             color: #595959;
         }
 
-        .total-tax-money {
+        .report-footer-value {
             padding: 0px;
             margin: 0px;
             text-align: right;
-            font-style: normal;
             font-weight: 500;
             font-size: 20px;
             line-height: 21px;
@@ -169,9 +136,8 @@
     </style>
 </head>
 <body>
-    <div class="main-container">
     <div class="sub-container">
-            <table class="header">
+        <table class="report-header">
             <tr>
                 <td>
                     <p class="heading-text">
@@ -190,7 +156,7 @@
                 </td>
             </tr>
         </table>
-            <p class="types-title">Tax Types</p>
+        <p class="tax-types-title">Tax Types</p>
         <div class="tax-table-container">
             <table class="tax-table">
                 @foreach ($taxTypes as $tax)
@@ -201,7 +167,7 @@
                             </p>
                         </td>
                         <td>
-                                <p class="tax-money">
+                            <p class="tax-amount">
                                 {!! format_money_pdf($tax->total_tax_amount) !!}
                             </p>
                         </td>
@@ -221,18 +187,17 @@
             </td>
         </tr>
     </table>
-        <table class="total-tax-table">
+    <table class="report-footer">
         <tr>
             <td>
-                    <p class="total-tax-title">TOTAL TAX</p>
+                <p class="report-footer-label">TOTAL TAX</p>
             </td>
             <td>
-                    <p class="total-tax-money">
+                <p class="report-footer-value">
                     {!! format_money_pdf($totalTaxAmount) !!}
                 </p>
             </td>
         </tr>
     </table>
-    </div>
 </body>
 </html>

routes/api.php

@@ -122,23 +122,41 @@ Route::group(['middleware' => 'api'], function () {
       'middleware' => 'admin'
     ], function () {
 
-
+        // Self Update
-        // Auto update routes
         //----------------------------------
-        Route::post('/update', [
+
-            'as' => 'auto.update',
+        Route::get('/check/update', [
-            'uses' => 'UpdateController@update'
+            'as' => 'update.check',
+            'uses' => 'UpdateController@checkLatestVersion'
+        ]);
+
+        Route::post('/update/download', [
+            'as' => 'update.download',
+            'uses' => 'UpdateController@download'
+        ]);
+
+        Route::post('/update/unzip', [
+            'as' => 'update.unzip',
+            'uses' => 'UpdateController@unzip'
+        ]);
+
+        Route::post('/update/copy', [
+            'as' => 'update.copy',
+            'uses' => 'UpdateController@copyFiles'
+        ]);
+
+        Route::post('/update/migrate', [
+            'as' => 'update.migrate',
+            'uses' => 'UpdateController@migrate'
         ]);
 
         Route::post('/update/finish', [
-            'as' => 'auto.update.finish',
+            'as' => 'update.finish',
             'uses' => 'UpdateController@finishUpdate'
         ]);
 
-        Route::get('/check/update', [
+        // Bootstrap
-            'as' => 'check.update',
+        //----------------------------------
-            'uses' => 'UpdateController@checkLatestVersion'
-        ]);
 
         Route::get('/bootstrap', [
             'as' => 'bootstrap',

routes/web.php

@@ -6,6 +6,7 @@
 |--------------------------------------------------------------------------
 |
 */
+
 Route::group(['prefix' => 'reports'], function () {
 
     // sales report by customer
@@ -46,7 +47,6 @@ Route::group(['prefix' => 'reports'], function () {
         'as' => 'get.profit.loss',
         'uses' => 'ReportController@profitLossReport'
     ]);
-
 });
 
 
@@ -88,7 +88,7 @@ Route::get('/expenses/{id}/receipt/{hash}', [
     'uses' => 'ExpensesController@downloadReceipt'
 ]);
 
-// Setup for instalation of app
+// Setup for installation of app
 // ----------------------------------------------
 Route::get('/on-boarding', function () {
     return view('app');